Mashup Awards 5作品：OpenSocial Dashboard

twitter id : stomitashinichi.tomita@gmail.com

OpenSocial Dashbord ?

2

はてなブックマーク

Google マップ

参加メンバー

美人時計

OpenSocial ガジェットを Mac OS Xの”Dashboard” のようにWebブラウザで表示できるアプリケーション

特徴

3

自由にガジェットを追加、レイアウト、デザイン変更

いつでもブックマークレットで呼び出し可能

自分のブログ／HPに組み込み、カスタマイズ

4

Demo.

コンテキストに応じたスクリーン切替

5

仕事中

プライベート

仕事用のメモ／取引先地図の表示

商品の関連情報／口コミを表示

通常のダッシュボード画面

ユーザ

ECサイトでショッピング中

技術的な特徴

• すべてHTML+JavaScript、サーバサイドプログラムはなし• Google Friend Connect API を利用• ガジェットの描画• ダッシュボードレイアウトなどのデータの永続化• Webサービスリクエスト送信用のプロキシ• 友人間でのダッシュボード画面の共有（将来予定）

• 利用しているライブラリ• OpenSocial jQuery (http://code.google.com/p/opensocial-jquery/)

• jQuery UI (http://jqueryui.com/)6

プラグイン処理とパラメータ渡し

7

URLパラメータの抜き出し正規表現マッチ

メタデータ抽出API呼び出し

現在のページのURL選択されたテキスト文字列マイクロフォーマット

プラグインモジュールコンテキスト情報 ガジェットパラメータ住所／位置情報商品ID(Amazon)キーワード

オープンソース

• Google Code にて公開中（MITライセンス）• http://opensocial-dashboard.googlecode.com/• ソースコードレポジトリとサービスサイトが同一• 初期表示するガジェット、壁紙、スクリーンの数など、自由にカスタマイズ可能

8

自分のサイトに独自のソーシャルダッシュボード環境を

簡単に作成できます

9

Thanks.