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

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

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

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

ここで整理します。

インフラでは、他サーバから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回をご覧ください⁠⁠。

次のサンプルコードは、サーバ側のプログラムです。ユーザーからのリクエストに応じて、APIからデータをXML形式で引き出し、データをJSON形式に変換して、ユーザーに返信するまでをおさめた実際に動作するサンプルです。

PHPのサンプル:getLatLng.php
<?php
include('xml.php');

$knechtGeocoding = "http://api.knecht.jp/geocoding/api/?q=";
$post_Location=urlencode(mb_convert_encoding($_POST["location"],"UTF-8","auto"));

//APIにリクエストを送信するためのURLをつくっています
$url = $knechtGeocoding . $post_Location;

//APIにリクエストを送信しました
$xml = @file_get_contents($url);

//APIからXML形式でデータを受信しました
$data = @XML_unserialize($xml);

//XML形式のデータをPHPで扱える配列の形に変換しています
$lat = $data['knecht']['data']['lat'];
$lng = $data['knecht']['data']['lng'];

$output_array = array();
$add_str = '{name:"'.htmlspecialchars($post_Location,ENT_QUOTES).'",
lng:"'.htmlspecialchars($lng,ENT_QUOTES).'",
lat:"'.htmlspecialchars($lat,ENT_QUOTES).'"}';
array_push($output_array,$add_str);


//JSONの形で出力しています
$output_str = "{items:[";
$output_str .= join(",",$output_array);
$output_str .= "]}; ";

echo $output_str;
?>

以上のようなサーバ側にあるプログラムに対して、ユーザーが住所を入力する任意のタイミングでデータを送受信します。

ブラウザ側のインターフェースとしては、次のようなものが考えられると思います。

例1 ユーザーがテキストボックスに住所を入力し、送信ボタンを押す
<input type="text" id="address" value="">
<input type="button" value="送信" onclick="getLocation()">
<span id="lat"></span>
<span id="lng"></span>
例2 ユーザーがテキストボックスに住所を入力したタイミングで自動的に緯度経度を調べる
<input type="text" id="address" value="" onchange="getLocation()">
<span id="lat"></span>
<span id="lng"></span>

いずれにしても、サーバ側プログラムとブラウザ側インターフェースをつなぐために、JavaScriptを用います(詳しくは本連載第1回をご覧ください⁠⁠。

JavaScriptの関数
function getLocation(){
  var location = $F("address");

  // 上記で用意したPHPプログラムのファイル名を指定します //
  new Ajax.Request("getLatLng.php", {
    method: "post",
    parameters: "location=" + location,
    asynchronous : true,
    onSuccess:function(request){
      eval("var res = " + request.responseText );
      var items = res.items;
      var lat = items[0].lat;
      var lng = items[0].lng;

      $("lat")innerHTML = lat;
      $("lng")innerHTML = lng;
    }
  })
}

これでユーザーが送信ボタンを押したり(上記例1⁠⁠、ユーザーが住所を入力するタイミング(上記例2)で、JavaScriptのパイプライン経由で、インターフェースからリクエストがサーバに送信され、サーバ側プログラムはそれを適切に処理してインターフェースに返信し、HTMLの特定の箇所がリアルタイムに書き換えられるようになりました。

ブラウザでの表示例
ブラウザでの表示例

最後に

【リクエスト送信】
  1. HTMとCSSのインターフェース(たいていはフォーム要素になります)
  2. JavaScriptでサーバに送信
  3. サーバ側プログラムで処理
【リクエスト受信】
  1. サーバ側プログラムからデータ返信(上記3の続き)
  2. JavaScriptで受信
  3. HTMLとCSSを書換

マッシュアップの技術面は、送信と受信のストリームをいかに効率よく束ね、使い分けるかにかかっています。セキュリティや文字コードなど、気にしなければならないことはたくさんありますが、マッシュアップすること自体はとてもシンプルです。HTMLソースを書いて、JavaScriptの関数とサーバ側のプログラムを2つ、3つ書くだけで、立派にサービスを作ることができるのです。

最も必要なのは、あなたのアイデアです。マッシュアップは技術ではなく、アイデアにこそが可能性を秘められています。

本連載で駆け足で見てきたマッシュアップの作り方ですが、マッシュアップの技術面についての取っつきにくさが少しは解消されれば幸いです。技術的な制約であなたの素晴らしいアイデアがしぼむことほど、残念なことはないのですから。

おすすめ記事

記事・ニュース一覧