Google Developer Day 2010 の前日に開催された GTUG 主催の初心者向けイベント Bootcamp 2010 で OpenSocial のハンズオンを担当したので、本日はその際に使った資料を公開します。

内容としては、 Eclipse ベースの OpenSocial 開発環境である OSDE を利用して、以下のようなガジェットを作るというものです。

自分の愛読書を入力して、それを友達と共有しようというものです。書籍は Google Book Searc API を使って検索し、正式な書籍名と情報ページの URL を取得しています。

・・・なのですが、時間オーバーで中途半端な状態で終わってしまい、 @nakajiman さんがやる予定だった OpenSocial jQuery の分がまったくできなかったという大失態。 @nakajiman さん、および OpenSocial jQuery を目当てに参加された方には、たいへん申し訳ないことをしてしまいました。

私の分も含めてハンズオンで使った / 使う予定だった資料は @nakajiman さんがまとめてくださっているので（これまたかたじけない・・・）、ぜひ参照していただければと思います。

というわけで、この記事では私の担当分について、必要な説明を加えつつ公開したいと思います。

準備

「OSDE を使ってソーシャルアプリケーションを作る」というのがお題なので、当然ながら作業を始める前に OSDE をインストールしなければなりません。まずはその手順をご紹介します。 OSDE をインストールするには以下の手順が必要です。

1. Java のインストール
2. Eclipse のインストール
3. OSDE のインストール

Java のインストール

Mac OS X は標準で Java がインストールされていますが、それ以外の OS ではインストールが必要でしょう。 Windows ならこちらのページからインストーラがダウンロードできますし、 Ubuntu Linux なら以下のコマンドでインストールできます。

sudo apt-get -y install openjdk-6-jre

他の OS でも、大抵の場合は標準のパッケージ管理ツールでインストールできるはずです。

Eclipse のインストール

Eclipse はダウンロードページからご自分の環境にあったものをダウンロードし、インストールしてください。多くの種類がありますが、よくわからなければ Eclipse Classic を選んでください。それ以外のものでは OSDE が動作しない場合もあるようなので、ご注意を。

OSDE のインストール

OSDE のインストール方法については、 @yoichiro さんが詳しく解説したスライドを用意されていますので、貼りつけておきます。

上記の手順のとおりに作業して、サンプルアプリケーションの実行まで終わらせておいてください。

また、既に OSDE をインストール済みの方も、 Shindig の起動とサンプルデータベースの作成（[OSDE]>[Create sample data in Shindig]メニュー）はやっておいてください。

以上で準備完了です。

ソーシャルガジェットの作成

私のスライドは、いつもどおり HTML で作ってありますので、以下に貼りつけておきます。

※ IE だと背景色の透過が動かないので、他のブラウザでご覧ください。

ハンズオンでは口頭で説明した（するつもりだった）部分を補うため、若干スライドや説明を追加してあります。当日の資料よりはわかりやすくなっているはずです orz

全画面で見たい方は、以下の URL から。

http://webos-goodies.jp/attachments/bootcamp2010/

また、プレゼンで作成しているガジェットの完成版ソースコードは以下に置いてあります。

• gadget.xml
• home.js
• home.css

以上、本日は Bootcamp 2010 の OpenSocial ハンズオンで使用した資料をご紹介しました。ハンズオンに参加された方のみならず、 OpenSocial ガジェットの制作に興味のある方は、ぜひ参考にしていただければと思います。また、私のスライドを読み終えたら、ぜひ @nakajiman さんの jQuery 版にも挑戦してみてください。