インフラとインターフェースの確認

あなたはインフラとインターフェースを開発しました。

ここで整理します。

インフラでは，他サーバからAPI経由でデータを受信するという役割から，サーバ側の処理をおこなうPHPやPerlを駆使するものでした。

インターフェースでは，データをユーザーに見せるためにHTMLとCSSを駆使して，見栄えのよいレイアウトをつくるのでした。

あとは，これらをつなぐためのパイプラインの開発です。パイプラインの開発は，マッシュアップの行程のうちでもっとも気楽なものです。一度，どのようにインフラからデータを受け取り，インターフェースに引き渡すかがわかれば，あとはコピー・アンド・ペーストの連続です。

パイプラインの役割をわけると，

1. ユーザーがインターフェースを使ってデータをサーバにリクエストすること
2. サーバからデータを受信してインタフェースに渡すこと

の２つになりますが，通常はこの送受信をひとつのJavaScriptの関数で済ませてしまいます（詳しくは本連載第1回をご覧ください）。

new Ajax.Request(url, {
  method: "get or post",
  parameters: "parameter="+send_string,
  onSuccess:function(httpObj){
    $("result").innerHTML = httpObj.responseText;
  }
});

パイプラインといっても，これだけなのです。とてもシンプルで，とっつきやすいのではないでしょうか。

ここからは，このJavaScriptの関数ひとつを使って，どのようにしてブラウザ側のインターフェースとサーバ側のインフラ・プログラムとをつなぐかを，全体の流れを通して見ていきます。

パイプラインの仕組み

まず，ジオコーディングAPIというURLに住所をリクエストすると，緯度経度を教えてくれるAPIがあります。

次のようにブラウザやプログラムからリクエストすると，XMLデータが返ってきます。

http://api.knecht.jp/geocoding/api/?q=東京都千代田区大手町

<knecht>
<address>東京都千代田区大手町</address>
<data>
<lat>35.68688</lat>
<lng>139.765047</lng>
</data>
</knecht>

このXMLデータをJSON形式にするために，サーバ側プログラムを用います （詳しくは本連載第2回をご覧ください）。