インフラとインターフェースの確認
あなたはインフラとインターフェースを開発しました。
ここで整理します。
インフラでは、他サーバからAPI経由でデータを受信するという役割から、サーバ側の処理をおこなうPHPやPerlを駆使するものでした。
インターフェースでは、データをユーザーに見せるためにHTMLとCSSを駆使して、見栄えのよいレイアウトをつくるのでした。
あとは、これらをつなぐためのパイプラインの開発です。パイプラインの開発は、マッシュアップの行程のうちでもっとも気楽なものです。一度、どのようにインフラからデータを受け取り、インターフェースに引き渡すかがわかれば、あとはコピー・アンド・ペーストの連続です。
パイプラインの役割をわけると、
- ユーザーがインターフェースを使ってデータをサーバにリクエストすること
- サーバからデータを受信してインタフェースに渡すこと
の2つになりますが、通常はこの送受信をひとつのJavaScriptの関数で済ませてしまいます(詳しくは本連載第1回をご覧ください)。
パイプラインといっても、これだけなのです。とてもシンプルで、とっつきやすいのではないでしょうか。
ここからは、このJavaScriptの関数ひとつを使って、どのようにしてブラウザ側のインターフェースとサーバ側のインフラ・プログラムとをつなぐかを、全体の流れを通して見ていきます。
パイプラインの仕組み
まず、ジオコーディングAPIというURLに住所をリクエストすると、緯度経度を教えてくれるAPIがあります。
次のようにブラウザやプログラムからリクエストすると、XMLデータが返ってきます。
このXMLデータをJSON形式にするために、サーバ側プログラムを用います
(詳しくは本連載第2回をご覧ください)。
次のサンプルコードは、サーバ側のプログラムです。ユーザーからのリクエストに応じて、APIからデータをXML形式で引き出し、データをJSON形式に変換して、ユーザーに返信するまでをおさめた実際に動作するサンプルです。
以上のようなサーバ側にあるプログラムに対して、ユーザーが住所を入力する任意のタイミングでデータを送受信します。
ブラウザ側のインターフェースとしては、次のようなものが考えられると思います。
いずれにしても、サーバ側プログラムとブラウザ側インターフェースをつなぐために、JavaScriptを用います(詳しくは本連載第1回をご覧ください)。
これでユーザーが送信ボタンを押したり(上記例1)、ユーザーが住所を入力するタイミング(上記例2)で、JavaScriptのパイプライン経由で、インターフェースからリクエストがサーバに送信され、サーバ側プログラムはそれを適切に処理してインターフェースに返信し、HTMLの特定の箇所がリアルタイムに書き換えられるようになりました。
最後に
- 【リクエスト送信】
- HTMとCSSのインターフェース(たいていはフォーム要素になります)
- JavaScriptでサーバに送信
- サーバ側プログラムで処理
- 【リクエスト受信】
- サーバ側プログラムからデータ返信(上記3の続き)
- JavaScriptで受信
- HTMLとCSSを書換
マッシュアップの技術面は、送信と受信のストリームをいかに効率よく束ね、使い分けるかにかかっています。セキュリティや文字コードなど、気にしなければならないことはたくさんありますが、マッシュアップすること自体はとてもシンプルです。HTMLソースを書いて、JavaScriptの関数とサーバ側のプログラムを2つ、3つ書くだけで、立派にサービスを作ることができるのです。
最も必要なのは、あなたのアイデアです。マッシュアップは技術ではなく、アイデアにこそが可能性を秘められています。
本連載で駆け足で見てきたマッシュアップの作り方ですが、マッシュアップの技術面についての取っつきにくさが少しは解消されれば幸いです。技術的な制約であなたの素晴らしいアイデアがしぼむことほど、残念なことはないのですから。