OpenSocialを利用してガジェットを作ろう!

第2回 ガジェットの構造と最初の一歩

この記事を読むのに必要な時間:およそ 3 分

gooホームへのガジェット登録方法

リスト1のようにして記述したガジェットXMLファイルをgooホームサンドボックスに登録するためには,以下の手順を踏むことになります。この手順は,gooホームに限らず,OpenSocial対応SNSのほとんどで採用されている手順となります。

  1. サンドボックスのアカウントを取得する。
  2. ガジェットXMLファイルを任意の名前で作成する。
  3. 手近のWebサーバに,作成したガジェットXMLファイルをアップロードする。
  4. ガジェットXMLファイルのURLをgooホームに登録する。

gooホームサンドボックスのアカウント取得は,ディベロッパー申請を読んで行ってください。

デベロッパー登録申請が承認されると,サンドボックスを利用することができるようになります。

次に,作成したガジェットXMLファイルを手近のWebサーバにアップロードします。ファイル名は何でも構いません。アップロードしたら,URLをメモしておきます。

サンドボックストップページの右上にある「ガジェット開発管理」というボタンをクリックすると,ガジェットを追加するためのページが表示されます図3⁠。ここで,アップロードしたガジェットXMLのURLを入力し,[新規作成]ボタンをクリックします。

図3 ガジェットの新規作成ページ

図3 ガジェットの新規作成ページ

ガジェットXMLファイルの記述内容に間違いがなければ,記述した内容が解析され,ページ上に表示されます。その後,右上の[このガジェットを追加]ボタンをクリックすることで,各ページにガジェットが配置され,利用することができるようになります。

題材の紹介

ではここで,本連載で使用する題材を紹介しましょう。今回は「はてブチェッカー」ガジェットを題材とします。これは,はてなブックマークサービスから情報を取得し,自分あるいは友達がブックマークしているWebページの一覧を表示することができるガジェットです。

はてブチェッカーガジェットは,1つのガジェットXMLファイルで必要となる全てのコードが記述されています。このXMLファイルは,以下のURLにてダウンロードすることができます。実用に耐えられるレベルで作成されているため少し長めのコードとなっていますが,次回以降では各APIに重点を置いて部分的に解説を行っていきますのでご安心ください。ぜひこのURLを使って,皆さんもガジェット登録を行い,動きを確認してみてください。

はてブチェッカーガジェット:

SNSは多くのページから構成され,各ページにはその目的に沿ったコンテンツが表示されることになります。OpenSocialでは,ある一つのガジェットが,複数のSNSページにそれぞれ異なるコンテンツを提供することができます(これをビューと呼びます⁠⁠。

はてブチェッカーでは,表2に示すように,各ビューの目的に沿うようなコンテンツを表示するように作成されています。マイホームページは自分に便利なページですので,友達がブックマークしたWeb ページを知るために,そしてプロフィールページは自分のことを他のユーザに知ってもらうためのページですので,自分がブックマークしたWebページを表示するようにしています図4⁠。

表2 はてブチェッカーが扱うビューと表示コンテンツ

ビュー名 gooホームでのページ 表示内容
home マイホーム 友達のブックマーク一覧,はてなIDの設定
profile プロフィール(友達用) 自分のブックマーク一覧
canvas マイガジェット ホットエントリ

図4 プロフィールページに配置されたはてブチェッカーガジェット

図4 プロフィールページに配置されたはてブチェッカーガジェット

はてブチェッカーガジェットでは,はてなブックマークサービスのAPIを利用して,ブックマークされたWebページの一覧を取得しています。更に, OpenSocialのAPIを使って,友達情報を取得して他のユーザがブックマークしたWebページの一覧を得ることで,ソーシャル性を持ったガジェットとしています。

著者プロフィール

田中洋一郎(たなかよういちろう)

株式会社ミクシィ所属。Google API Expert (OpenSocial)。Mash up Award 3rd 3部門同時受賞。書籍「OpenSocial入門」を出版。

URL:http://www.eisbahn.jp/yoichiro

著書