サーバ側をつくり、（ 連載第2回目。今回）
ユーザ側をつくり、（ 連載第3回目）
最後に両方をつなぐ。（ 連載第4回目）
この順番でつくるといくつかのメリットがあります。
その詳細な理由は、本連載第4回目に、上記３つのステップを俯瞰することで、見えてきますが、まず、初期開発や、のちのちのメンテナンス、機能拡張においても、たりない処理を見極めて、あれこれ小難しく考えずに、サーバ側プログラムに淡々と必要な関数を追加していくだけなので、開発スピードが向上します。
これは、サーバ側プログラムにおいても、ユーザー側インターフェースにおいても、パイプライン部のJavaScriptにおいても、共通していえることです。
また、このような開発手法があとあと効果を発揮しはじめるのは、あなたが続々とマッシュアップをつくりはじめたときです。
もちろん、上記の開発手法は「オブジェクト指向」といわれるものなので、次のマッシュアップ開発のときに実際に新たに記述するコードの量をカットできるわけですが、それ以上に、あなたのマッシュアップ群を相互に紐づけるのが容易になります。このあたりのことは、次のセクションでお話しします。
まずあなたは、あなたのアイデアを形にするための道順を知り、すべを身につけるべきなのです。あなたに足りないこまごまとしたテクニックやセキュリティへの配慮は、いまは必要ありません。そのような細かい配慮がいるようになったとき、検索するなり解説書を1冊買うなり、ピンポイントで検討すればよいのです。
最初にすることは、インフラづくり
さて、サーバ側でするのは、あくまでもプレーンなデータをライト（JSON形式が理想です）に出力して、細かいテクニックはJavaScriptでおこなうということに徹します。
このためのプログラムを、PHPやPerlのようなサーバ側のプログラムで用意します。
というのも、マッシュアップはAjaxという方法でリアルタイムに他サーバと通信をする場合が多いのですが、JavaScriptは自分が属するサーバ内でしか通信をすることができないという制限があるので、このような用途には適しません。
一方、JavaScriptとは異なり、PHPやPerlのようなサーバ側のプログラムにはそのような制約なしに、自分のサーバ内のほかのプログラムや、他サーバのプログラムと通信することができるため、自サーバと他サーバを中継するプログラムをサーバ側で用意することになります。
さて、簡潔にいうと、サーバ側は下記の3ステップを担います。
入力（外部APIであったり、ユーザーのリクエストであったり）
出力するためのデータを加工（HTMLタグをとったり、つけたり、暗号化したり）
出力（HTMLの形やJSONの形で、じかに書き出したりJavaScriptに渡したり）
とはいってもこのとき、サーバ側プログラムを一体のものとは考えずに、いくつかの処理ステップの組み合わせと考えるようにすると、次回以降のマッシュアップの手間が大幅にカットされます。
PHPやPerlのビギナーなら、「 オブジェクト指向」というキーワードを耳にしたことがあるでしょう。しかし、オブジェクト指向のことは忘れてください。クラスやメソッド、継承、カプセル化など、いったい何のことを言っているのか理解しようとし始めると、形而上的な世界に入っていくことになります。
そのうえで、下記にプログラム的なステップの目安を示します。
（a） 「だけ」の処理 （b） ヘッドラインはヘッドライン、本文は本文、画像は画像というように、連想配列に入れていく「だけ」の処理 （c） 「だけ」の処理 （d） 「だけ」の処理 （e） 「だけ」の処理 （f） 「だけ」の処理
上記のようにそれぞれの処理を細切れにして開発すると、あとで手間がカットできます。たとえば現在のマッシュアップではこれらすべてを使っていますが、今度は、
（a） 「だけ」の処理 （e） 「だけ」の処理 （f） 「だけ」の処理
というように、特に処理をせずに、入力されたデータを単純に出力するという、右から左に受け流す処理だけで済むかもしれません。
そのときに、また同じようなプログラムを書くのではなく、以前書いたひとまとまりのプログラムから、（ a）（ e）（ f）の部分だけ持ってきて使うのです。特に、上記で示したようなごくありふれた処理は意識的にばらばらにしていくと、だんだんとプログラム面に使う時間は効率化していくはずです。
だからばらばらにして、必要なときに組み合わせて（マッシュアップして）形作るのです。
さらに、あなたのマッシュアップの発展性についても利点があります。
おそらく、あなたがつくろうとしているマッシュアップは、あなたがほしいと思っているサービスでしょう。
あなたのニーズをかなえてくれるサービスがどこかで扱っているものと思い、検索したけれども見つからず、だから自分でつくろうとしている。
そのような性質のものであるほど、マッシュアップは型破りでユニークなものになっていきます。
つくりたいウェブサービスがあるとします。
つくりたいウェブサービスがあるということは、その実現のために必要なデータが何であるかを把握しているということです。
そのとき、必要なデータがいつもどこかからAPIやRSSフィードとして提供されていればいいのですが、あなたのサービスがユニークであるほど、必要なデータもユニークになっていき、どうせならウェブをクロールして独自にデータを集めたいと思うようになるかもしれません。
あるいは、いまは３つのAPIのマッシュアップで事足りてはいるけれども、あとあとよく考えてみると、もうひとつAPIを足したほうが使い勝手が高まることに気づくかもしれません。
そういうとき、もうひとつのAPIを利用するためにさくっとコピーアンドペーストでサーバ側プログラムをもうひとつ作ればいいのです。
インフラの中身
前述したパイプラインとのデータのやりとりは、JSONでおこなうものとします。というのも、同じ情報をXML形式とJSON形式で扱う際に、データ量がまるっきり違うのです。
下記のサンプルを見てください。同じ情報を扱うにも、XML形式のほうが仕様上付随する文字列が多いことに気づくでしょう。
例： XML<?xml version="1.0" encoding="utf-8"?>
<items>
<item>
<id>1</id>
<lat>35.686880</lat>
<lng>139.765047</lng>
<headline>東京都千代田区大手町</headline>
<description>わたしのオフィスが入ってます。</description>
</item>
<item>
<id>2</id>
<lat>34.685568</lat>
<lng>135.527467</lng>
<headline>大阪府大阪市中央区大阪城1</headline>
<description>大阪城があります。</description>
</item>
</items>例： JSON{items:[
{
id:1,
lat:35.686880,
lng:139.765047,
headline:"東京都千代田区大手町",
description:"わたしのオフィスが入ってます。"
},
{
id:2,
lat:34.685568,
lng:135.527467,
headline:"大阪府大阪市中央区大阪城1",
description:"大阪城があります。"
}
]};さて、JSON形式を徹底して扱うとなると、次の２つの、JSON形式で出力するためのパターンが考えられます。
他APIからXML形式データを受信し、JSON形式に変換し、JavaScriptに送信する。
他APIからJSON形式データを受信し、そのままJavaScriptに送信する。
このうち、XMLをJSONに変換して出力する方法は下記の通りです。
他サーバのAPIのURLはhttp://www.hoge.com/testAPI.xmlとし、このAPIにリクエストすると上記の例：XML を返すものとします。
ここでは、XMLをパース（分析）する際に、PHPの場合にはPEARというライブラリ群を利用するととても容易なるのですが、PEARのライブラリ群はレンタル・サーバによってはデフォルトで利用可能になっておらず、またインストールが必要など少し説明が必要なので、今回はより実装しやすいように、PHP XML Library という単体ファイルを利用します。
<?php
//上記のPHP XML Libraryを読み込みます
include('xml.php');
//対象になる他サーバのAPIからデータを読み込みます
$url = "http://www.hoge.com/testAPI.xml";
$xml = file_get_contents($url) or die("error");
//読み込んだXMLデータを配列$dataに取り込みます
$data = XML_unserialize($xml);
//XMLにおいて、<items>にぶら下がる<item>群だけをまとめて配列に取り込みなおします
$items = $data["items"]["item"];
//JSONを出力する際に利用する配列を作成し、初期化します。
$jsArray = array();
//<item>群の数だけ繰返処理をします
foreach($items as $value){
//利用しやすいように各値を変数に設定します
$item_id = $value[$i]["id"];
$item_lat = $value[$i]["lat"];
$item_lng = $value[$i]["lng"];
$item_headline = $value[$i]["headline"];
$item_description = $data["items"]["item"][$i]["description"];
//JSONの値の組み合わせを作成します
$addJS='{id:"'.$item_id.'",lat:"'.$item_lat.'",lng:"'.$item_lng.'",headline:"'.$item_headline.'", description:"'.$item_description.'"}';
array_push($jsArray,$addJS);
}
//出力用に、JSONの仕様通りに整形します
$output_json = "{items:[";
$output_json .= join(",",$jsArray);
$output_json .= "]};";
//JSONを出力します
echo $output_json;
?>
上記の例をコピーアンドペースト、あなたの利用シーンにあわせて、APIのURLやJSONの中身を微調整して、使ってみてください。
ウェブサイトの構築は、頭をつかってアルゴリズムを生み出すシーンもありますが、多くは過去に書いたコードを若干改良してコピーアンドペーストすることの連続なのです。
マッシュアップとは、切って貼って、ひとりで最後までつくれるようになること、出てきたエラーやバグの原因をすぐに解決にできるようになることにつきます。
たとえばYouTubeやAmazonなどで用いられている５つ星の評価システムは秀逸ですが、それを自作するのは時間の無駄です。５つ星の評価システムは、検索すれば簡単にサンプルソースが見つかります。
プログラムを書く役割であなたがするべきなのは、検索すれば見つかるようなサンプルソースとサンプルソースをつなぐ部分のアルゴリズムの試行錯誤です。
あなたは金融システムのインフラをつくるのではありません。いかに困難でセーフなプログラムを何万行も使って実現したかというのは、自慢にはならないのです。
いかにあっさりとその便利なマッシュアップをつくり、インパクトを与えたかを誇りにするのです。マッシュアップは開発過程においても、小難しいものであってはならず、優雅なものであるはずなのです。
次回はユーザー側インターフェースについて見ていきます。
