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

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

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

ガジェットXMLファイルでのビューの扱い

各ビューと表示コンテンツについて,ガジェットXMLファイルではContentタグが関係しています。Contentタグには,view属性を記述することができます。一つのガジェットXMLファイル内で,複数のContentタグを記述することができます。そして,view属性を使うことで,各 Contentタグが有効となるビューを指定させることが可能です。

はてブチェッカーガジェットでは,home,profile,そしてcanvasの3つのビューをサポートします。リスト2は,はてブチェッカーガジェットのガジェットXMLファイルから,Contentタグの記述を抜き出したものです。view属性値として,カンマ区切りで複数のビュー名を記述することができます。これにより,次のような記述を行うことが可能です。

  • 共通的に使用されるJavaScriptの処理
  • 共通的なスタイル定義
  • ヘッダやフッダといった共通的な表示コンテンツ

例えば,はてブチェッカーガジェットがhomeビューで動作する際には,canvasおよびprofileが指定されたContentタグの内容がWebブラウザに送られることはありません。

リスト2 題材でのContentタグの記述

<Content type="html" view="profile,home,canvas">
    <!-- 全てのビューで使用される内容(1) -->
</Content>
<Content type="html" view="home">
    <!-- homeビューで使用される内容 -->
</Content>
<Content type="html" view="canvas">
    <!-- canvasビューで使用される内容 -->
</Content>
<Content type="html" view="profile">
    <!-- profileビューで使用される内容 -->
</Content>
<Content type="html" view="profile,home,canvas">
    <!-- 全てのビューで使用される内容(2) -->
</Content>

エントリポイントの登録方法

ガジェットがSNSのページに埋め込まれて実行される際に,最初に実行して欲しい関数を登録することができます。そのために, gadgets.util.registerOnLoadHandler()という関数が提供されています。この関数の引数として,最初に実行した関数のオブジェクトを渡します。

はてブチェッカーガジェットでは,JavaScriptにおける関数群の定義を,Hatebuという名前空間にてまとめています。そして, Hatebu.init()関数をregisterOnLoadHandler()関数に渡すことによって,はてブチェッカーガジェットのエントリポイントとしています。その記述は,リスト3のようになります(scriptタグなどの記述は省略してあります⁠⁠。

リスト3 registerOnLoadHandler()関数の利用

<Content type="html" view="home">
  Hatebu.init = function() {
     // homeビューでの初期化処理
  }
</Content>
<Content type="html" view="canvas">
  Hatebu.init = function() {
     // canvasビューでの初期化処理
  }
</Content>
<Content type="html" view="profile">
  Hatebu.init = function() {
     // profileビューでの初期化処理
  }
</Content>
<Content type="html" view="profile,home,canvas">
  gadgets.util.registerOnLoadHandler(Hatebu.init);
</Content>

Hatebu.init()関数の定義が3つありますが,実際に有効になるinit()関数は1つです。このように記述することで,同名の関数でもビューによってその内容を変えることができます。ぜひこのテクニックは身につけておきたいところです。

もし誰かが書いたガジェットXMLファイルの内容を把握したい場合には,registerOnLoadHandler()関数の呼び出しを探して,引数に渡している関数から読み始めるとスムーズに把握を始めることができるでしょう。

まとめ

今回は,gooホームサンドボックスにガジェットを登録するための方法や,ガジェットXMLファイルの基本的な構造,そして題材の紹介について取り上げました。日本発のSNSがサンドボックスを公開したおかげで,日本の開発者はOpenSocialガジェットを安心して開発することができるでしょう。

次回からは,題材であるはてブチェッカーガジェットのコードを実際に参照しながら,OpenSocialによって提供されるソーシャル機能を利用するための方法を解説していきます。

著者プロフィール

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

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

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

著書