各種ビューとユーザーの役割を確認するサンプル
それでは、今回説明した各種のビューとユーザーの役割を使うサンプルを作成しましょう。今回はhomeビューではVIEWERの名前を、profileビューではVIEWERとOWNERの名前、そしてOWNERのFRIENDSの人数を、canvasビューでは外部のWebサイトの内容を表示するサンプルです。
今回作成するアプリはmixi上でも公開しています。
以下の内容を「view-sample.xml」という名前でUTF-8形式で保存し、第2回の手順に沿ってアプリを作成します。
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="view-sample">
<Require feature="opensocial-0.8" />
</ModulePrefs>
<Content type="html" view="home"><![CDATA[
ここはhomeビューです<br/>
<div id="home-message"/> <!-- （1） -->
<script type="text/javascript">
gadgets.util.registerOnLoadHandler(function() { // （2）
// （3） ――― ここから ―――
var req = opensocial.newDataRequest();
// VIEWERの情報をリクエストする
req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER), 'viewer');
// リクエストを実行
req.send(function(response) {
// VIEWERの情報を取得
var viewer = response.get('viewer').getData();
// VIEWERの表示名を取得
var msg = 'こんにちは! VIEWERの' + viewer.getDisplayName() + 'さん';
// （3） ――― ここまで ―――
// div要素にメッセージを設定
document.getElementById('home-message').innerHTML=msg; // （4）
});
});
</script>
]]></Content>
<Content type="html" view="profile"><![CDATA[
<div id="profile-message" style="font-size:small"/>
<script type="text/javascript">
gadgets.util.registerOnLoadHandler(function() {
// （5） ――― ここから ―――
var req = opensocial.newDataRequest();
// VIEWER, OWNER, OWNERのFRIENDSの情報をリクエストする
// ……省略……
// リクエストを実行
req.send(function(response) {
// VIEWER, OWNER, OWNERのFRIENDSの情報をそれぞれ取得
// ……省略……
//VIEWERの表示名を取得
var msg = 'こんにちは! VIEWERの' + viewer.getDisplayName() + 'さん<br/>';
//OWNERの表示名を取得
msg += 'こちらのアプリケーションのOWNERは' + owner.getDisplayName() + 'さんです<br/>';
//OWNERのFRIENDSの人数を取得
msg += 'OWNERのFRIENDS（マイミクシィ）は現在' + friends.getTotalSize() + '人です';
// div要素にメッセージを設定
document.getElementById('profile-message').innerHTML=msg;
});
// （5） ――― ここまで ―――
});
</script>
]]></Content>
<Content type="url" view="canvas" href="http://www.wings.msn.to/index.php"/>
</Module>
少し長いサンプルですので、いくつかのまとまりで説明しましょう。前回のサンプルはJavaScriptを含まないものでしたが、今回はJavaScriptを使う場合の基本も含まれています。なお、このサンプルではOWNERやVIEWERの情報を取得するためにコンテナへのリクエストを行っていますが、リクエストの詳細については次回紹介します。
homeビュー
最初のContent要素はhomeビューで、ここではVIEWERの名前を表示します。
前述のサンプルコードで、（1）はVIEWERの情報を表示するためのdiv要素です。コンテナから取得した情報を、（4）でgetElementById関数を使ってdiv要素のinnerHTMLプロパティに設定することで、ユーザーに結果を表示します。HTMLのDOMにアクセスして表示内容を書き換える手法は、OpenSocialアプリケーションで多用されるパターンです。
（2）ではGadgets APIで定義されているregisterOnLoadHandler関数を呼び出しています。この関数は、引数の関数をWebブラウザのロード完了時に呼び出すよう登録するものです。今回はWebブラウザがロード完了した時点でVIEWERの情報をコンテナにリクエストするため、この関数を呼び出しています。
（3）ではOpenSocial APIのDataRequestクラスを使い、VIEWERの情報の取得をコンテナにリクエストしています。DataRequestの詳細については次回説明します。
profileビュー
2つめのContent要素はprofileビューで、ここではVIEWER, OWNER, OWNERのFRIENDSの情報を表示します。
（5）ではVIEWER, OWNER, OWNERのFRIENDSの情報をコンテナにリクエストし、結果をdiv要素に設定しています。
canvasビュー
3つめのContent要素はcanvasビューで、ここでは外部のWebサイトを表示します。
Content要素のtype属性に"url"を指定し、href属性に外部のWebサイトのURLを指定しています。canvasビューに切り替えると、mixi内に指定したURLのページが表示されます。
まとめ
今回解説したビューとユーザーの役割の概念は「各ビューでどのようなコンテンツをだれに対して提供するか」といったOpenSocialアプリケーションの設計を検討する上でも、非常に重要な部分となります。また、サンプルの中では、OpenSocialアプリケーション内でJavaScriptを使う場合の基本的な作法を紹介しました。
サンプルでは、直接Webブラウザの提供するHTMLのDOMにアクセスしましたが、jQueryなどのJavaScriptライブラリを併用することで、こうした部分の手間を省くことができます。また、OpenSocialアプリケーションがどのWebブラウザで実行されるかは、ユーザーの環境に依存していますので、JavaScriptライブラリを使うことで、Webブラウザ間のJavaScript互換性の問題を解決することもできるでしょう。
次回はいよいよソーシャル情報を扱うための、DataRequestクラスについて解説します。ここはOpenSocialの要とも言うべき部分です。次回もお楽しみに。
