マッシュアップを,ひとりでスピーディに大量構築する方法

第4回 マッシュアップのパイプライン

この記事を読むのに必要な時間:およそ 2 分

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

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

ここで整理します。

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

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

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

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

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

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

Ajaxでデータを送受信する関数の基本形

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

※JavaScriptライブラリのPrototypeとScriptaculousを読み込む必要があります。

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

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

パイプラインの仕組み

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

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

リクエスト

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

APIから返されるXMLデータ

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

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

著者プロフィール

萩原直人(はぎわらなおと)

株式会社クネヒトの経営者。現在,大学に在学中の23歳。21歳の時に起業し,つくった防犯系マッシュアップをもとに起業から11ヶ月後に大手企業と提携,また12ヶ月後に大手ベンチャーキャピタルから資金調達。目下,驚愕のマッシュアップを開発中。

URLhttp://knecht.jp/

コメント

コメントの記入