OpenSocial はコミュニティー主導の仕様であり、ガジェットとして知られるブラウザー・ベースのコンポーネント・モデルと、ユーザーのプロファイル情報やソーシャル・グラフ (ユーザーの友人やアクティビティーなど) に関する情報にアクセスするための API を定義します。OpenSocial で定義された API を実装するアプリケーションは、iGoogle、MySpace、Yahoo、Orkut、Hi5、LinkedIn などの広範なソーシャル・ネットワーキング・サイトと相互運用することができます。この記事では OpenSocial ガジェットに注目し、このガジェットが Web 全体でアプリケーションを使用できるようにする強力な手段となることを明らかにします。
OpenSocial ガジェットは何かというと、以下のように説明することができます。
- OpenSocial ガジェットは、特定の API セットを実装した小さい表示サイズの Web アプリケーションです。ガジェットは OpenSocial 仕様に準拠した XML 文書によって記述されます。ガジェットの定義には、HTML、CSS スタイルシートなどのユーザー・インターフェース、ビジネス・ロジック用の JavaScript、そして作者、タイトルなどの追加メタデータが含まれます。
- OpenSocial 仕様を実装し、アプリケーションをホストすることが可能なサイトは、OpenSocial コンテナーと呼ばれます。つまりこれらのサイトは、ガジェットの XML 定義を処理し、ブラウザーに対して適切な HTML を提供することができます。ここで理解しておくべきことは、必ずしもコンテナーを提供するサイトでガジェットの定義をホストする必要はないという点です。しかも、ガジェットは、サービスをまったく異なるサイトから公開するのが一般的です。コンテナーは、署名付き HTML リクエストなどのメカニズムを提供することによって、そのサイト内のガジェットから呼び出しが行われていることを保証します。OpenSocial コンテナーとしてのサイトは、Web 上のさまざまなサービスを集約する容易な手段となり得ます。
サンプル・テスト・アプリケーションのページでは、ユーザーが Universal Services から提供された一連の基本的な関数をテストできるようにし、テストの結果をユーザーに表示します。
図 1 は、サンプル・テスト・アプリケーションのスクリーン・キャプチャーです。サンプル OpenSocial ガジェットを作成する際には、このアプリケーションがテンプレートとしての役目を果たし、Universal Services との対話に必要な基本 UI 機能を提供します。
図 1. サンプル・テスト・アプリケーション
ガジェットを作成する手順としては、まず始めに pureXML サービスとの接続を制御するための基本クエリーを提供する JavaScript 関数を作成します。次に、ガジェットを構成する HTML をガジェット仕様と併せて追加します。そして最後に、このアプリケーションを作成してデプロイします。
pureXML サービスに接続するための JavaScript 関数
リスト 1 に、リクエストを処理するために作成されたサンプル JavaScript を記載します。
リスト 1. PureJSON JavaScript 関数
var prefs = new gadgets.Prefs();
function getPrimaryKeys() {
var args = {};
doPOST("getPrimaryKeys",args,displayJSONobj);
};
function getJSONDocumentByKey(key) {
var args = {
id: key
};
doPOST("getDocumentByKey",args,displayJSONobj);
};
function insertJSON(key, data) {
var args = {
id: key,
doc: data
};
doPOST("insert",args,response);
};
function updateJSON(key, data) {
var args = {
id : key,
doc : data
};
doPOST("update",args,response);
};
function deleteDocument(key) {
var args = {
id : key
};
doPOST("delete",args,response);
};
function doPOST(command,args,processResponseCallback) {
var url = "http://" + prefs.getString("pureXMLHostAddress") +
"/" + prefs.getString("contextRoot") + "/query/"+command;
var params = {};
postdata = gadgets.io.encodeValues(args);
params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.POST;
params[gadgets.io.RequestParameters.POST_DATA]= postdata;
gadgets.io.makeRequest(url, processResponseCallback, params);
};
function response(obj) {
alert("Gadget implementation responsibility.");
};
function displayJSONobj(obj) {
alert("Gadget implementation responsibility.");
};
|
それぞれの関数の役割を以下に説明します。
getPrimaryKeysは、DB2 表からすべての主キーを取得するための getPrimaryKeys リクエストをサービスに送信し、トランザクションが完了すると、displayJSONobjコールバック関数を使用して結果を表示します。getJSONDocumentByKeyは、キーの値を用いて getDocumentByKey をサービスに送信し、関数への入力として渡されたキーの値と主キーの値が一致する特定の JSON レコードを取得します。そしてdisplayJSONobjコールバック関数を使用して結果を表示します。insertJSONは入力パラメーターとして、主キーに対する一意のキーの値と JSON フォーマットのままのデータの 2 つを要求します。この関数は DB2 表に新しい行を作成するためのリクエストをサービスに送信し、トラザクションが完了して制御が返されると、responseコールバック関数を使用して行の挿入ステータスを確認します。updateJSONは、関数への入力として渡されたキーの値と主キーの値が一致する JSON レコードを、入力データとして指定された JSON フォーマットのデータで更新するためのリクエストをサービスに送信します。この関数もトランザクションが完了すると、responseコールバック関数を呼び出して更新を確認します。deleteDocumentは、関数への入力として指定された主キーの値を持つレコードの削除リクエストをサービスに送信するためのインターフェースを提供します。この関数もリクエストの処理が完了すると、responseコールバック関数を呼び出して削除を確認します。displayJSONobjは抽象 JavaScript 関数であり、開発者が呼び出しの結果をブラウザーにレンダリングするさまざまな手法を指定するためのフックを提供します。responseは、JSON 以外の戻り値を処理する関数です。この関数は displayJSONobj と同様のストラテジーに従い、開発者が独自の実装でオーバーライドすることを想定しています。
上記の関数はそれぞれのリクエストを送信するために、doPOST 関数を呼び出します。doPOST 関数が要求するパラメーターは、サービス・クエリー・コマンド、クエリー入力値、そしてサービスから返された結果を処理するためのコールバック関数です。これらの入力パラメーターを使用して、サービスに対する gadgets.io.makeRequest 呼び出しを組み立てます。gadgets.io.makeRequest は、ガジェットがサード・パーティーのサイトとデータをやり取りできるようにするための OpenSocial ガジェットの関数です。この関数のシグニチャーは、gadgets.io.makeRequest(url, callback, opt_params) のようになります。
これらのパラメーターの内容は以下のとおりです。
url- リクエストの送信先サイトの URL が含まれるストリング。上記のリストを見るとわかるように、doPOST関数は URL を組み立てるために、getStringメソッドを使ってprefsオブジェクトから 2 つのストリングを取得します (pureXMLHostAddressとcontextRootの 2 つのパラメーターは、ガジェット定義での要素名を参照します。これについては、次のセクションで説明します)。この 2 つのストリングが/query/とコマンド (insert、getDocumentByKey、update、delete など) によって連結されます。例えばinsertJSON()関数がdoPOSTを呼び出す場合の URL は以下のようになります。
http://xmlim.watson.ibm.com:9080/JSONUniversalServices/query/insertcallback- リクエストへの応答が返ってきたときに呼び出される関数への参照。例えばresponseは、トランザクションのステータスを表示するコールバック関数です。displayJSONobjは返された JSON オブジェクトを表示するコールバック関数で、オブジェクトが空の場合にはメッセージを表示します。opt_params- 呼び出しに対する追加パラメーター (HTTP メソッドおよび POST データ) が含まれる JavaScript オブジェクト。HTTP メソッドをgadgets.io.MethodType.POSTに設定すると、このリクエストが POST メソッドであることが示されます。また、POST データはpostdataオブジェクトとして渡します (gadgets.io.encodeValues()を使用して、入力として渡されたargsのフォーマットを設定することによって、postdata オブジェクトをキーと値のペアが含まれるオブジェクトとして指定します)。
リスト 1 を PureJSON.js という名前で保存してください。次のステップで作成するガジェット定義には、このファイルをロードします。
必要な JavaScript は用意できたので、次はガジェット定義を作成します。
ここで必要なのは、単純なガジェット定義です。リスト 2 に、サンプル・ガジェット定義を記載します。ガジェット定義のそれぞれは、<Module> タグで囲みます。<ModulePrefs> は、ガジェットの基本情報と機能を定義するタグです。
リスト 2. OpenSocial ガジェットの XML 定義
<?xml version="1.0" encoding="UTF-8"?> <Module> <ModulePrefs title="Universal Services"> <Require feature="opensocial-0.8"/> <Require feature="dynamic-height"/> <Require feature="minimessage"/> </ModulePrefs> <UserPref name="pureXMLHostAddress" display_name="PureXML Host Address" default_value="xmlim.watson.ibm.com:9080"/> <UserPref name="contextRoot" display_name="Context Root" default_value="JSONUniversalServices"/> <Content type="html"> <![CDATA[ <!-- Note: We will add more code and expand this section later --> ]]> </Content> </Module> |
このガジェット定義で最初に目につく点は、<ModulePrefs> 要素に <title> 属性があることでしょう。ガジェットには、タイトル、作者、E メールなどの情報を定義する属性を指定することができます。このデモでは title 属性しか使用しませんが、コンテナーによってはライブ・デプロイメント用に特定の属性を指定しなければならないことに注意してください。これについては、プラットフォーム開発者向けのドキュメントを参照する必要があります。
さらに、ガジェットに必要な機能を提供します。サンプル・ガジェットがロードする機能は以下のとおりです。
opensocial-0.8- このガジェットは OpenSocial バージョン 0.8 を実装した API を使用するため、OpenSocial v0.8 仕様をサポートしているコンテナーにデプロイすることができます。dynamic-height- この機能により、ガジェット開発者がコンテンツの追加または削除に合わせてガジェットの高さを変更することが可能になります。この機能は、ガジェット内の DB2 トランザクション・メッセージを表示または削除すると呼び出されます。minimessage- この機能は、ユーザーに対するメッセージをガジェット内で作成して表示するための一連の API を提供します。この例ではminimessageを使って DB2 トランザクション・ステータス・メッセージを作成します。
また、pureXML Universal Service エンドポイントと、ガジェットのデプロイ先となるアプリケーションのコンテキスト・パスを動的に設定するための一連のユーザー・プリファレンス (<UserPref>) を定義します。定義された <UserPref> 要素は、ガジェットがレンダリングされるときにユーザー入力としてガジェット・インターフェースに公開されるので、ユーザーはこれらの設定を必要に応じて編集、変更することができます。これらの <UserPref> 要素の name 属性は、リスト 1 のJavaScript 関数 doPOST でエンドポイント URL を組み立てるために必要なストリングを取得する際に使用した名前と同じであることに注意してください。
4 つ目の点として、コンテンツ・セクション <Content> は、ガジェットのコンテンツ・タイプとして HTML を定義しています。CDATA (文字データ) セクション内にはガジェットのコンテンツ自体を定義します。このセクションに、ユーザー入力を取り込むための HTML 表が作成され、その表に minimessage、ユーザー・プリファレンス、および JavaScript 関数が組み合わせられて実行状態のガジェットとなります。次のステップではこの CDATA セクションにコードを追加し、pureXML サービスに接続するクライアントを作成します。
このセクションでは、前のステップで説明したガジェット定義の CDATA セクション内に、ユーザー入力とアクションを取り込むサンプル HTML 表とJavaScript 関数を追加します。
まず始めに、HTML 表に使用するスタイルシートを追加します (リスト 3 を参照)。
リスト 3. 表に使用するスタイルシート
<style type="text/css">
table.layout {border:0; width:50%;}
td.green {background-color:#BFFF80;
font-family:sans-serif, verdana;}
td.white {background-color:#FFFFFF;
font-family:sans-serif, verdana;}
th.green {background-color:#BFFF80;
font-family:sans-serif, verdana;}
th.white {background-color:#FFFFFF;
font-family:sans-serif, verdana;}
td.row-bright{background-color:#FFFFBF;
font-family:sans-serif, verdana;
text-align:center;}
td.row-dark {background-color:#FFFF8C;
font-family:sans-serif, verdana;
text-align:center;}
tr.row-bright {background-color:#FFFFBF;
font-family:sans-serif, verdana;}
tr.row-dark {background-color:#FFFF8C;
font-family:sans-serif, verdana;}
tr.empty {background-color:#FFFFFF;
height: 10px;}
tr.empty-small {background-color:#FFFFFF;
height: 5px;}
</style>
|
次に、リスト 1 の JavaScript ファイル、PureJSON.js を組み込みます。ガジェットがロードされる時点で PureJSON.js がページに組み込まれ、HTML 表のアクションですべての POST リクエスト関数が使用できるようになります。
リスト 4. JavaScript ファイルのロード
<script type="text/javascript" src="./PureJSON.js"></script>
|
3 番目のステップでは、リスト 5 に記載する別の <script> タグを追加します。それぞれの JavaScript 関数は HTML 表に宣言されたユーザー・アクション (次のセクションで定義) の 1 つと一致し、リスト 1 の PureJSON.js に定義された関数のうちのいずれかを呼び出します。コードのこのブロックがロードされると、new gadgets.MiniMessage(_MODULE_ID_) が実行されて minimessage オブジェクトが作成されます。そしてタグの一番下にある gadgets.util.registerOnLoadHandler(gadgets.window.adjustHeight) 関数が呼び出されると、この関数がガジェットを OpenSocial コンテナーに登録し、コンテナーに対して、レンダリング時にガジェットのコンテンツが収まるようにフレームを変更するよう、指示します。このスクリプト・タブ内ではさらに、クエリーの結果をユーザーに表示するために、response および displayJSONobj 関数をオーバーライドします。
リスト 5. ガジェット関数の追加
<script type="text/javascript" src="./PureJSON.js"></script>
<script type="text/javascript">
var msg = new gadgets.MiniMessage(__MODULE_ID__);
function displayJSONobj(obj) {
var str = "The returned record is empty, it might not exist";
if(obj.text!=""){
str = obj.text;
}
msg.createDismissibleMessage(str);
gadgets.window.adjustHeight();
};
function callGetJSONDoc() {
getJSONDocumentByKey(document.getElementById("key1").value);
};
function getJSONDocumentByKeyReturn(obj) {
var str = obj.text;
msg.createDismissibleMessage(str);
gadgets.window.adjustHeight();
};
function callInsertJSON() {
insertJSON(document.getElementById("key2").value,
document.getElementById("document1").value);
};
function callUpdateJSON() {
updateJSON(document.getElementById("key3").value,
document.getElementById("document2").value);
};
function callDeleteDoc() {
deleteDocument(document.getElementById("key4").value);
};
function response(obj) {
var str = gadgets.json.parse(gadgets.util.unescapeString(obj.text));
if(str.updateCount == 1){
var successMsg = msg.createDismissibleMessage(
"Received returned code = 1. Transaction successful!");
successMsg.style.color = "green";
}
else {
var failMsg = msg.createDismissibleMessage(
"Did not receive returned code = 1. Transaction may have failed!");
failMsg.style.color = "red";
}
gadgets.window.adjustHeight();
};
gadgets.util.registerOnLoadHandler(gadgets.window.adjustHeight);
</script>
|
最後にユーザー入力とアクションを取り込む HTML 表を追加します。この表の HTML コードはリスト 6 のとおりです。このガジェット定義を JSONclient.xml という名前で保存してください。表がレンダリングされると、図 1 のスクリーン・キャプチャーのように表示されます。
リスト 6. HTML 表
<table class="layout" cellspacing="2">
<tr>
<th class="green">Web Service</th>
<th class="green" colspan="2">Input</th>
<th class="green">Action</th>
</tr>
<tr class="row-bright">
<td>getPrimaryKeys</td>
<td colspan="2" align="center">none</td>
<td align="center">
<input type="submit" value="Invoke" onClick="getPrimaryKeys()"/>
</td>
</tr>
<tr class="row-dark" >
<td>getJSONDocumentByKey</td>
<td align="right">ID:</td>
<td align="center"><input type="text" id="key1" size="40" /></td>
<td align="center">
<input type="submit" value="Invoke" onClick="callGetJSONDoc()"/>
</td>
</tr>
<tr class="row-bright">
<td rowspan="2">insertJSON</td>
<td align="right">ID:</td>
<td align="center"><input type="text" id="key2" size="40" /></td>
<td align="center" rowspan="2">
<input type="submit" value="Invoke" onClick="callInsertJSON()"/>
</td>
</tr>
<tr class="row-bright">
<td align="right">Document:</td>
<td align="center">
<textarea id="document1" cols="30" rows="5" ></textarea>
</td>
</tr>
<tr class="row-dark" >
<td rowspan="2">updateJSON</td>
<td align="right">ID:</td>
<td align="center"><input type="text" id="key3" size="40" /></td>
<td rowspan="2" align="center">
<input type="submit" value="Invoke" onClick="callUpdateJSON()"/>
</td>
</tr>
<tr class="row-dark">
<td align="right">Document:</td>
<td align="center">
<textarea id="document2" cols="30" rows="5" ></textarea>
</td>
</tr>
<tr class="row-bright">
<td>deleteDocument</td>
<td align="right">ID:</td>
<td align="center"><input type="text" id="key4" size="40" /></td>
<td align="center">
<input type="submit" value="Invoke" onClick="callDeleteDoc()"/>
</td>
</tr>
</table>
|
これからいよいよ、ガジェットをデプロイしてテストします。
この新しい Universal Services アプリケーションは、PureJSON.js と JSONclient.xml を HTTP サーバーにデプロイするだけでテストをすることができます。URL を指定することでこの 2 つのファイルにアクセスできる限り、OpenSocial コンテナーはガジェットの仕様を取得し、その仕様に応じてコンテンツをレンダリングできるはずです。OpenSocial サーバーには数々のオプションがあり、オープンソース・プロジェクトによるローカル・デプロイメントにも、外部でホストされるプラットフォームにも対応します。ここでは単純に、OpenSocial コンテナーを提供する iGoogle サンドボックスにサンプル・ガジェットをデプロイします。
- http://www.google.com/ig/sandboxにログインします。
- ログインしたら、ページ右上のセクションに表示されている「Add stuff」リンクまでナビゲートします。リンク先のページには、既存の登録済みガジェットの検索機能が提供されています (図 2 を参照)。サンプル・ガジェットが置かれている URL には、Web からアクセスできなければならないことに注意してください。例えばファイアウォールの背後で実行しているサーバーにガジェットが置かれていると、OpenSocial コンテナー (この例の場合は iGoogle) がガジェット定義をロードして処理することができないため、デプロイメントは上手くいかない可能性があります (図 2 を大きく表示するには、ここをクリックしてください)。
図 2. iGoogle サンドボックスへのアプリケーションの追加
- 次に、この新しいガジェットの URL を入力してください。左側のナビゲーションに、「Add feed or gadget」へのリンクがあります。このリンクをクリックするとダイアログが開くので、ここに JSONclient.xml の完全な URL を入力します (図 3 を参照)。
図 3. iGoogle サンドボックスへの OpenSocial ガジェットの追加
- iGoogle ホーム・ページに戻ると、新しく追加したガジェットがページに表示されているはずです。
図 4 に、iGoogle にレンダリングされたガジェットを示します。
図 4. iGoogle にレンダリングされたガジェット
- ガジェットの設定を編集するため、三角形のアイコンを選択してオプションのドロップダウン・リストを開きます。このリストから「Edit settings」を選択します。
- 作成した Universal Services を指すように pureXML のホスト・アドレスとコンテキスト・ルートのパスを更新します。
- 「getJSONDocumentByKey」フィールドに JSON レコードを取得するための文書キーを入力し、「Invoke」をクリックします。その他のトランザクションをテストするにも、このステップを繰り返します。
- ミニメッセージに結果が表示されます。メッセージを消去するには、行の終りにある x を選択します。
この記事では、従来のテスト Web アプリケーションを構成可能かつ移植可能なアプリケーションにマイグレーションし、Web 上のさまざまなプラットフォームに簡単にデプロイできるようにする一連のサンプル・コードを記載しました。このアプリケーション自体は比較的単純なものですが、新しいアプリケーションを素早くアセンブルしてプロトタイプ化する際のリファレンスとして使用することができます。OpenSocial ガジェット・クライアントはユーザーにとって、UserPrefs サポートを介して任意の pureXML Universal Services に動的に接続する便利な手段となります。POST makeRequest により、ガジェット開発者はこのサービスに接続するクエリーを作成するだけで、データベース・トランザクションを実行することができます。Gadget コンシューマーは、デプロイおよびホストされている物理的な場所を問わずにあらゆる OpenSocial コンテナーにガジェットを追加できるため、コンテンツとインフラストラクチャーの管理から解放されます。
| 内容 | ファイル名 | サイズ | ダウンロード形式 |
|---|---|---|---|
| JavaScript POST request functions | PureJSON.js.zip | 1KB | HTTP |
| OpenSocial gadget definition XML | JSONclient.xml.zip | 2KB | HTTP |
学ぶために
- 「pureXML 対応 JSON アプリケーションを構築する: 第 1 回 DB2 pureXML による JSON の保管とクエリー」(Nuno Job、Susan Malaika、Michael Schenker 共著、developerWorks、2009年10月): この連載の第 1 回目の記事を読んで、JSON オブジェクトを保持してセッション間で状態を維持するメリットを活用してください。DB2 pureXML と単純な JSON と XML のマッピングによって、JSON の保管、管理、そしてクエリーを実行できるようになります (3 回連載の第 1 回)。
- 「pureXML 対応 JSON アプリケーションを構築する: 第 2 回 JSON を公開する pureXML対応の Universal Services を作成する」(Faton (Tony) Avdiu、Susan Malaika、Michael Schenker 共著、developerWorks、2009年10月): この記事で説明する手順に従うことで、連載第 1 回で説明した JSON データを、JSON Universal Services を介して公開できるようになります (3 回連載の第 2 回)。
- OpenSocial コミュニティー: このコミュニティーのホーム・ページにアクセスして、記事、チュートリアル、技術仕様へのリンクを調べ、ソーシャル・ネットワーク内に OpenSocial API を組み込んで Web 上のソーシャル・データにアクセスしたり、共有したりする方法を学んでください。
- iGoogle サンドボックスのデベロッパー・ガイド: OpenSocial サポートと、この環境でのアプリケーション開発およびデプロイメントについての詳細は、このガイドを参照してください。
- Apache Shindig: ガジェットのレンダリング、リクエストの代行、そして REST と RPC リクエストの処理を行うコードによって、OpenSocial アプリケーションを簡単にホストできるこの OpenSocial コンテナーについて調べてください。このオープンソース・コミュニティーでは、OpenSocial 仕様とこの環境でのデプロイメントを対象としたリファレンス実装を現在開発中です。
- IBM XML 認定: XML や関連技術の IBM 認定技術者になる方法について調べてください。
- XML Technical library: 広範な技術に関する記事とヒント、チュートリアル、標準、そして IBM Redbooks については、developerWorks XML ゾーンを参照してください。
- developerWorks の Technical events and webcasts: これらのセッションで最新情報を入手してください。
- developerWorks podcasts: ソフトウェア開発者向けの興味深いインタビューとディスカッションを聞いてください。
製品や技術を入手するために
- DB2 Express-C: DB2 データ・サーバーの無料コミュニティー・エディションをダウンロードしてください。
- IBM 製品の評価版: DB2®、Lotus®、Rational®、Tivoli®、および WebSphere® のアプリケーション開発ツールとミドルウェア製品を体験するには、評価版をダウンロードするか、IBM SOA Sandbox のオンライン試用版を試してみてください。
議論するために
- ディスカッション・フォーラムに参加してください。
- XML ゾーンのディスカッション・フォーラム: XML 関連のフォーラムに参加してください。
- developerWorks blogs: developerWorks blogs から developerWorks コミュニティーに加わってください。


