日本初のOpenSocial対応SNSが登場！
今回はガジェットの基本について解説をしていきますが、その前に非常に嬉しいニュースが先週ありましたので、まずはお伝えしたいと思います。
それは、日本初のOpenSocial対応SNSの登場です。3月26日、gooホーム （NTTレゾナント）がOpenSocialガジェット開発のための環境「gooホームサンドボックス」を一般向けに公開しました（図1）。今までOpenSocialガジェットを開発し公開するには、海外のSNSを利用せざるを得ない状況でしたが、gooホームサンドボックスを利用することによって、日本語をメインとしたガジェットの開発を行うことができるようになったわけです。
図1 gooホーム サンドボックス環境
gooホームのOpenSocial正式対応に向けて、サンドボックスを利用し、多くの利用者を獲得可能な魅力のあるガジェット開発にチャレンジしてみてください。もちろん本連載の内容が力になることでしょう。
XMLによるガジェットの記述
それでは早速、ガジェットを開発するための基本について解説します。Webブラウザ上でSNSの画面に埋め込まれて動作するOpenSocialのガジェットは、その処理のほとんどをJavaScriptで記述することになります。
しかし、ガジェットの名前や利用する機能の宣言、具体的なコンテンツの記述などを含め、ガジェットはXMLファイルとして作成します。リスト1は、最もシンプルなガジェットの例です。単に「Hello, world!」という文字列を表示するガジェットとなります（図2が実行結果になります）。
リスト1 最もシンプルなガジェットのXML
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs
title="Simple app"
description="This is a simple application.">
<Require feature="opensocial-0.8" />
</ModulePrefs>
<Content><![CDATA[
Hello, world!
]]></Content>
</Module>
図2 リスト1の実行結果
OpenSocialでは、いくつかのタグが予め決められています。表1は最もよく使われるタグの一覧です。定義されているタグの個数は、表1に加えていくつかしかありません。開発者は、ContentタグにHTMLやJavaScriptなどを記述することが中心的な作業となります。
表1 よく使われるタグの一覧
| タグ名 |
説明 |
| Module |
ルートになるタグです。 |
| ModulePrefs |
ガジェットの情報をいくつかの属性を使って記述します。 |
| Require |
利用する機能を宣言するために使われます。 |
| UserPref |
ユーザ設定項目を定義するために記述されます。 |
| Content |
具体的なコンテンツ（HTMLやJavaScriptなど）を記述します。 |
gooホームへのガジェット登録方法
リスト1のようにして記述したガジェットXMLファイルをgooホームサンドボックスに登録するためには、以下の手順を踏むことになります。この手順は、gooホームに限らず、OpenSocial対応SNSのほとんどで採用されている手順となります。
- サンドボックスのアカウントを取得する。
- ガジェットXMLファイルを任意の名前で作成する。
- 手近のWebサーバに、作成したガジェットXMLファイルをアップロードする。
- ガジェットXMLファイルのURLをgooホームに登録する。
gooホームサンドボックスのアカウント取得は、「ディベロッパー申請」を読んで行ってください。
デベロッパー登録申請が承認されると、サンドボックスを利用することができるようになります。
次に、作成したガジェットXMLファイルを手近のWebサーバにアップロードします。ファイル名は何でも構いません。アップロードしたら、URLをメモしておきます。
サンドボックストップページの右上にある「ガジェット開発管理」というボタンをクリックすると、ガジェットを追加するためのページが表示されます（図3）。ここで、アップロードしたガジェットXMLのURLを入力し、[新規作成]ボタンをクリックします。
図3 ガジェットの新規作成ページ
ガジェットXMLファイルの記述内容に間違いがなければ、記述した内容が解析され、ページ上に表示されます。その後、右上の[このガジェットを追加]ボタンをクリックすることで、各ページにガジェットが配置され、利用することができるようになります。
題材の紹介
ではここで、本連載で使用する題材を紹介しましょう。今回は「はてブチェッカー」ガジェットを題材とします。これは、はてなブックマークサービスから情報を取得し、自分あるいは友達がブックマークしているWebページの一覧を表示することができるガジェットです。
はてブチェッカーガジェットは、1つのガジェットXMLファイルで必要となる全てのコードが記述されています。このXMLファイルは、以下のURLにてダウンロードすることができます。実用に耐えられるレベルで作成されているため少し長めのコードとなっていますが、次回以降では各APIに重点を置いて部分的に解説を行っていきますのでご安心ください。ぜひこのURLを使って、皆さんもガジェット登録を行い、動きを確認してみてください。
- はてブチェッカーガジェット：
SNSは多くのページから構成され、各ページにはその目的に沿ったコンテンツが表示されることになります。OpenSocialでは、ある一つのガジェットが、複数のSNSページにそれぞれ異なるコンテンツを提供することができます（これをビューと呼びます）。
はてブチェッカーでは、表2に示すように、各ビューの目的に沿うようなコンテンツを表示するように作成されています。マイホームページは自分に便利なページですので、友達がブックマークしたWeb ページを知るために、そしてプロフィールページは自分のことを他のユーザに知ってもらうためのページですので、自分がブックマークしたWebページを表示するようにしています（図4）。
表2 はてブチェッカーが扱うビューと表示コンテンツ
| ビュー名 |
gooホームでのページ |
表示内容 |
| home |
マイホーム |
友達のブックマーク一覧、はてなIDの設定 |
| profile |
プロフィール（友達用） |
自分のブックマーク一覧 |
| canvas |
マイガジェット |
ホットエントリ |
図4 プロフィールページに配置されたはてブチェッカーガジェット
はてブチェッカーガジェットでは、はてなブックマークサービスのAPIを利用して、ブックマークされたWebページの一覧を取得しています。更に、 OpenSocialのAPIを使って、友達情報を取得して他のユーザがブックマークしたWebページの一覧を得ることで、ソーシャル性を持ったガジェットとしています。
ガジェット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によって提供されるソーシャル機能を利用するための方法を解説していきます。
