前回は、「Hello,（ニックネーム）!」とプロフィール写真を表示する、簡単なmixiアプリを作成してみました。
今回は前回作成したXMLをもとに、mixiアプリのコードについて簡単な説明をしてみたいと思います。
以下に前回のサンプルコードを記載します。
<?xml version=”1.0″ encoding=”UTF-8″?>
<Module>
<ModulePrefs title=”Hello, world!”>
<Require feature=”opensocial-0.8″ />
</ModulePrefs>
<Content type=”html”><![CDATA[
<div>Hello, <span id="target"></span>!</div>
<div id="photo"></div>
<script type="text/javascript">
function init() {
var req = opensocial.newDataRequest();
req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER), "viewer");
req.send(function(data) {
var viewer = data.get("viewer").getData();
var name = viewer.getDisplayName();
var thumbnailUrl = viewer.getField(opensocial.Person.Field.THUMBNAIL_URL);
document.getElementById("target").innerHTML = name;
document.getElementById("photo").innerHTML = '<img src="' + thumbnailUrl + '" />';
});
}
gadgets.util.registerOnLoadHandler(init);
</script>
]]></Content>
</Module>
mixiアプリはXML形式で記述されますが、そのファイルはすべて「Gadget XMLファイル」と呼ばれるものです。
たった一つのGadget XMLファイルの中に、mixiアプリに関するすべての機能を記述することができます。
尚、mixiアプリのGadget XMLファイルは、OpenSocial および Gadgets の仕様に準拠しているそうです。
Gadget XMLファイルの具体的な記述方法は以下です。
- <Module> をルート要素として記述する。
- mixiアプリのタイトルや説明等の情報や利用するAPIについて、 <ModulePrefs> 要素に記述する。
- <Content> 要素の中にmixiアプリの中身をHTMLで記述する。
（中身をCDATAセクションで囲むことにより、HTMLタグがXMLとして処理されないようにしておきます）
では、サンプルにおけるこれらの要素を見てみましょう。
<Module>
ルート要素として記述しています。
<ModulePrefs>
<Require feature=”opensocial-0.8″ /> を宣言しています。
これは、ニックネームやプロフィール写真のURLパスなどの情報を使用するためです。
<Content>
ここにはHTMLを記述できますので、HTMLタグやJavaScriptを記述しています。
表示部分は、staticな「Hello, 」文字列と取得したユーザ情報を挿入するための場所を用意しただけのシンプルな構造です。
<div>Hello, <span id=”target”></span>!</div>
<div id=”photo”></div>
あとは、target にニックネーム、photo にプロフィール写真がそれぞれ挿入されるようJavaScriptで記述していきます。
ユーザ情報は、JavaScriptコード中の newFetchPersonRequest() 関数によって取得することができます。
この第1引数に取得したいユーザを特定するための値を指定するのですが、今回は取得したいユーザとして「Viewer」が指定されています。
———————————
◆「Owner」と「Viewer」
OpenSocialでは「Owner」と「Viewer」という概念があり、それぞれ「Owner = mixiアプリをインストールしているユーザ」「Viewer = mixiアプリを操作しているユーザ」を意味しています。
サンプルの例で言いますと、「Owner」が指定された場合、そのmixiアプリがインストールされた自分のページを誰が閲覧しようとも、常に自分のニックネームと写真が表示されます。しかし、「Viewer」指定の場合は訪問者によって表示される情報が変わるような仕組みです。
———————————
実は、newFetchPersonRequest()関数を使うと、一気に以下の 3 つの情報が呼び出せます。
- ID
getId()
- ニックネーム
getDisplayName()
- プロフィール写真
getField(opensocial.Person.Field.THUMBNAIL_URL)
サンプルをカスタマイズするとき、ニックネームの他にプロフィール写真も表示することにしたのは、そんな理由からでもありました。
リクエストを送る処理には、DataRequestオブジェクトを使用します。
まず、newDataRequest() 関数によりリクエスト送信用オブジェクトを生成し、add()関数を使用して DataRequest オブジェクトに要求を追加しています。
このとき、第1引数に newFetchPersonRequest() 関数などで生成されたリクエストオブジェクト、第2引数にこのリクエストの結果を取り出すためのキー文字列を指定します。
send()関数でリクエスト送信後、取得したユーザ情報からそれぞれの情報を取り出し、document上の意図した場所へ挿入するよう記述したら完成です！
このままのコードでは何の彩色もないシンプルな表示の完成図ですが、CSSや画像を使ってもう少しリッチな表示にチャレンジしてみてもいいかもしれませんね。
CSSは<Content> の中にもちろん記述できますが、画像や外部CSSの読み込みをする際は、それらのファイルがWebサーバ上に存在しなければなりませんのでご注意ください。
次回は、newFetchPersonRequest() では取得できないユーザ情報の取得方法についてご紹介したいと思います。
Post Footer automatically generated by Add Post Footer Plugin for wordpress.
