OpenSocial Hackathon in April 2009 に参加してきました

おはようございます。なかじまんです。OpenSocial Hackathon in April 2009 に参加してきましたので、その成果をお伝えします。

今回の会場は、リクルートメディアテクノロジーラボ(銀座8丁目)で、そのオフィス内の共用スペースのようなところです。次の写真のとおり、いわゆる会社やホテルなどの会議室のようなホワイトな堅苦しいイメージはないので、仕事の気分から離れて楽しむことができました。

さらに、メディアテクノロジーラボさんから なんと無料でランチ までご馳走になってしまいました。また、その後の懇親会でも会費 1,000 円でいろいろ用意してもらったりして、財布の厳しいこのご時世に、本当にありがとうございます。


※写真は gooホーム Developer's Recipe からお借りしました。

なかじまんは @stomita さんとコラボして、ガジェット間(クロスドメイン)でのメッセージ交換を中心ネタとして、現実にどういったことが実現できるのか、技術調査も兼ねての Hackathon ということにしました。

今回は gooホーム が主催する Hackathon ということもあり、goo Social Platform がネタ元です。午前中を使って、ガジェットの骨格をコーディングしつつ、ガジェット間でのメッセージ交換の対応状況を試したところ、gadgets.rpc とそれをベースとした gadgets.pubsub の API が使えることが確認できました。

いいねぇ～これ！ってことで、午後の前半を使って、緯度経度の位置情報を軸として、3つのガジェットが協調して連携するデモを作りました。↓それがこれです。動画にしました。



左側のガジェットは、ホットペッパーのグルメサーチ API を使って、ある位置のグルメスポットをサムネイル表示するものです。上側のガジェットは、スマッチ!の物件情報検索 API を使って、ある位置の物件をリスト表示するものです。下側のガジェットは、単純に Google Maps API を使って地図を表示するものです。

それぞれのガジェットは、それ単体で完結して動作します。それに加えて、位置情報で連携するようにしています。物件を選択すると、その場所を地図で表示し、かつ物件の周囲にあるグルメスポットをサムネイル表示します。また、グルメスポットを選択すると、その場所を地図で表示し、かつグルメスポットの周囲にある物件をリスト表示します。

この仕組みを簡単に図示してみました。次の図は、グルメスポットを選択したとき、物件と地図が連携するシナリオを表したものです。



コンテナは、ガジェット間の仲立ちとなって、ガジェット間のメッセージを中継します。メッセージを受信するガジェットは gadgets.pubsub.subscribe メソッドを使って、メッセージの受信を待ちます。メッセージを送信するガジェットは gadgets.pubsub.publish を使って、メッセージを送信します。いわゆるデザインパターンでいうところの Observer パターンです。

グルメスポットを選択すると gadgets.pubsub.publish メソッドを使って、選択したグルメスポットの緯度経度をメッセージとして送信します。他のガジェットはgadgets.pubsub.subscribe メソッドを使って、その緯度経度のメッセージを受信して、ガジェットの内容を再表示します。

なお、メッセージはチャネルという経路を指定できるので、いろいろなガジェットとメッセージが混ざったとしても、異なるチャネルを使っていれば、ガジェット間で影響を受けることはありません。

そして、午後の後半を使って、さらに用途を広げたデモを作りました。コンテナを gooホームから Google Friend Connect に入れ替えたものです。↓それがこれです。動画にしました。



大きな地図は Google Maps API を使って、自分のサイト(任意のサイト)に地図を表示しています。そして、前述のガジェットをその地図上にフローティングして表示しています。グルメスポットを選択すると、大きな地図がグルメスポットの位置までスクロールします。物件を選択したときも同様です。

この仕組みを簡単に図示してみました。Google Friend Connect を導入すると、自分のサイトとガジェット間でメッセージ交換して連携できたりするんですね。



なお Google Friend Connect は gadgets.pubsub が使えないので、gadgets.rpc を使って gadgets.pubsub 相当を実現してやる必要があります。詳しくはソースコードを見てみてください。hackathon-jp や gfcxd にあります。また @stomita さんが Google Friend Connect のクロスドメイン(gadgets.rpc)をさらに深く言及していますので、読んでみるといいでしょう。

Google Friend Connect API に gadgets.io.makeRequest 相当を自前で実装する

作るにあたって、Google Friend Connect API のアーキテクチャを若干解析してみた。GFCのOpenSocial API呼び出し時にサーバへの通信がおこなわれるが、これはすべてガジェット経由のフレーム間RPCになっている。OpenSocial API通信のためのガジェットみたいなのが用意されていて（http://www.google.com/friendconnect/gadgets/osapi-0.8.xml）、これらがコンテナ側（GFCスクリプトをロードしたページ）と協調動作する。