Google Friend Connect を使った OpenSocial Dashboard を作った

Social Web #4 でなかじまんさんに動画まで作ってもらってリークされてたりしましたが、当初考えてた最低限の機能はそろったので、ブログにあげます。

Google Code Archive - Long-term storage for Google Code Project Hosting.

ソースコードはこちら。

http://opensocial-dashboard.googlecode.com/svn/

デモンストレーションサイトもこちら。Google Code上で動いています。

http://opensocial-dashboard.googlecode.com/svn/trunk/index.html

で、昨日MA5の会場でプレゼンしてきましたので、その資料もついでに。

OpenSocial Dashboard


これを作った動機

見て分かるように、ガジェットコンテナの見栄えのいいかんじのものを作ったんですが、べつにMac OS Xダッシュボードみたいなアプリを作りたかったからという正統な動機によるものではなくって、どちらかというと僕がGoogle Friend Connect(GFC)とそのパラノイアっぷりを愛してたから、という若干ひねくれた理由によります。

あと、ブックマークレット呼び出しについては、linolino anywhereにちょっとだけインスパイアされてます。

中身

Google Friend Connect(GFC)の恩恵により、すべて HTML+JavaScript のみで動いています。レイアウトなどのデータの保存もOpenSocialのAppDataの中に格納しています(GFCにおける上限の10K以内にだいたい収まる)。ただし、ガジェットを追加する際に、定義ファイル(.xml)を取ってくるのにクロスドメインリクエストの送信が必要になるのですが、gadgets.io.makeRequestはGFC APIでは実装されていないので、以前作ったmakeRequestをガジェット経由でプロキシするやつをつかってます。で、そのへんの変更をサポートするためにOpenSocial jQueryもちょっといじってます。

重要だとおもってること

OpenSocial Dashboardは、ブックマークレットを利用して立ち上げることができます。その際、元ページに含まれている内容をコンテキスト情報として利用し、ガジェットに引き渡すことができるようになっています。

このコンテキスト情報からガジェットへ渡すパラメータへの変換はプラグインとなるJavaScriptファイルを書いてやれば任意に追加できます。(e.g. たとえば元ページのURLからASIN IDを抜き出すなど)。プラグインはコンテキスト情報からデータを抜き出し、その値はパラメータとしてガジェット描画時にview paramsとして渡されます。

現在はまだ実装していませんが、今後プラグインの中からはjQueryで元ページのDOMにアクセスしつつ、makeRequestを実装したOpenSocial jQuery の $.ajax メソッドによってクロスドメインリクエストが送信できるようになる予定です。つまりUbiquityあるいはGreasemonkeyに相当して使え、かつIEでも動きます。たぶん。さらに今後GFCでOAuth Proxy(3-legged OAuth)が利用できるようになったりしたらもっといいことあるんじゃないかな、などと思ってます。

今後たぶんやるだろうこと

  • UserPref項目をガジェット外部から設定できるようにする。すでにガジェット内部でセットされたPrefの永続化には対応してるので、純粋にUIの実装の問題。
  • PubSubの実装。昔 OpenSocial Hackathon でやったこととおなじで、ガジェット間で連携できるようになる。GFCはまだgadgets.rpcくらいしかつかえないので、自前で作る必要がある。
  • Profile以外の view への対応(canvas)。

MA5について

MA5への応募は、締め切り前日が休日だったのでやったようなもんですが、おそらく応募できるようになった時点での費やした時間は全部で24時間くらい(ほとんどがIllustratorでの画像リソース作り)です。応募締め切り後もちょっとずつ手を入れてるのでなんともいえないですが、しかしバックエンドを考えなくていいのは楽ですね。

このプレゼン資料も発表前日深夜に作ったKeynote資料です。みんなCMパロディのムービーとかMotionとか気合いいれてましたね。ひとりだけ勉強会ノリのプレゼンでしたので申し訳ない。

ちなみに初めて1ヶ月くらいの1人プロジェクトなのになぜかもう revision 1063 とかいってますが、これはGoogle Friend Connectが登録したサイト上でしかテストできないため、ファイルを保存するたびにレポジトリにコミットしてアップロードされたコンテンツにアクセスしてテスト、を繰り返してたからです。Googleには若干ながらご迷惑をおかけしていますことをここにお詫びいたします。