サンプルプログラムの作成
それでは、アプリケーションデータの保存・取得を行うサンプルを作成しましょう。
今回は、ユーザーが「独り言」を書き込むと、マイミク間でその「独り言」がお互いに共有できる、というサンプルです。ただし、「独り言」の履歴は管理せず、最新の「独り言」だけを保存する方式としてあります。
今回作成するアプリは、mixiでも公開しています。以下の内容をpersistent-sample.xmlという名前でUTF-8形式で保存し、第2回の手順に沿ってアプリを作成します。
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="persistent-sample">
<Require feature="opensocial-0.8" />
</ModulePrefs>
<Content type="html"><![CDATA[
<script type="text/javascript">
function getData() {
var req = opensocial.newDataRequest();
var params = {};
// *1 ここから-------------------------------------------------------------
params[opensocial.IdSpec.Field.USER_ID] = opensocial.IdSpec.PersonId.VIEWER;
params[opensocial.IdSpec.Field.GROUP_ID] = opensocial.IdSpec.GroupId.FRIENDS;
var idSpec = opensocial.newIdSpec(params);
req.add(req.newFetchPersonAppDataRequest(idSpec, 'message'), 'friendsData');
//VIEWERのFRIENDSのアプリケーションデータを取得する
// *1 ここまで-------------------------------------------------------------
var fetchOpt = {};
fetchOpt[opensocial.DataRequest.PeopleRequestFields.MAX ] = 1000;
req.add(req.newFetchPeopleRequest(idSpec, fetchOpt), "friends"); // *2
//VIEWERのFRIENDSのソーシャルデータを取得する
params[opensocial.IdSpec.Field.GROUP_ID] = opensocial.IdSpec.GroupId.SELF;
var idSpecSelf = opensocial.newIdSpec(params);
req.add(req.newFetchPersonAppDataRequest(idSpecSelf, 'message'), 'myData'); // *3
//VIEWERのSELF(=VIEWER自身)のアプリケーションデータを取得する
req.send(function(response) {
var friendsData = response.get('friendsData').getData();
var friends = response.get('friends').getData();
var myData = response.get('myData').getData();
var msg = '';
// *4 ここから-----------------------------------------------------------
for(var id in myData){
msg += 'あなたのメッセージ: ' + myData[id].message + '<br/>';
}
for(var id in friendsData){
msg += 'ニックネーム: ' + friends.getById(id).getDisplayName() + ' , メッセージ:' + friendsData[id].message + '<br/>';
}
// *4 ここまで-----------------------------------------------------------
document.getElementById('message').innerHTML=msg;
});
}
function setData() {
var req = opensocial.newDataRequest();
// *5 ここから-----------------------------------------------------------
var message = document.getElementById("my-message").value;
req.add(req.newUpdatePersonAppDataRequest(opensocial.IdSpec.PersonId.VIEWER, 'message', message), 'self');
req.send();
// *5 ここまで-----------------------------------------------------------
getData();
}
gadgets.util.registerOnLoadHandler(getData);
</script>
<!-- *6 ここから -->
<div id="message"> </div>
<input type="text" id="my-message" size="50">
<button onclick="setData()">メッセージ設定</button>
<button onclick="getData()">メッセージ取得</button>
<!-- *6 ここまで -->
]]></Content>
</Module>
以下、（1）～（6）はリスト内の番号と対応するものとします。
（1）マイミクの「独り言」データを取得するための処理。ここでは「VIEWERのFRIENDS」という範囲のユーザーを表すIdSpecオブジェクトを作成し、newFetchPersonAppDataRequestメソッドでmessageという項目名のデータを取得するリクエストを作成しています。
（2）レスポンス処理時に使用する、ユーザーのニックネームを取得するための処理。newFetchPeopleRequestメソッドで、「VIEWERのFRIENDS」という範囲のユーザーのソーシャルデータを取得するリクエストを作成しています。
（3）自分の「独り言」データを取得するための処理。ここでは「VIEWERのSELF（=VIEWER自身）」のmessageという項目名のデータを取得するリクエストを作成しています。
（4）OpenSocialコンテナからのレスポンスの処理。ここでは、まず（3）でリクエストしたデータから、自分の「独り言」データを取得し、その後（1）でリクエストしたデータから、ユーザーごとに「独り言」データを取得しています。ニックネームは（2）でリクエストしたデータから取得しています。
（5）自分の「独り言」データを保存するための処理。my-messageというIDを持つテキストボックスの値を取得し、newUpdatePersonAppDataRequestメソッドでデータを保存します。ここではVIEWERのデータとしてmessageという項目名でデータを保存しています。
（6）UI要素の定義。レスポンス処理時に結果を表示するためのdiv要素、「独り言」を入力するためのinput要素、メッセージ設定、取得を行うためのボタンを定義しています。
アプリケーションを開くと、自分とマイミクの「独り言」を取得して表示します。
「メッセージ設定」ボタンを押すと、テキストボックスに入力した内容で自分の「独り言」を更新し、表示内容を更新します。
「メッセージ取得」ボタンを押すと、最新の「独り言」情報に表示を更新します。
まとめ
今回はOpenSocialアプリケーションでアプリケーションデータを永続化するためのPersistence APIについて扱いました。毎回ながら機能自体はシンプルですが、アプリケーションデータをさまざまなユーザー間で共有できることを考えると、大きな可能性を持つ機能と言えるでしょう。
今回のサンプルではデータの値としてシンプルな文字列だけを使用しましたが、JSON形式の値を保存することで、さらに複雑なデータの保存・取得も行うことができます。例えば「独り言」の履歴をJSON形式で保存するように改造するのは比較的簡単に行えるでしょう。
アプリケーションデータをどのように共有すれば、魅力的なアプリケーションになるのか、これまでのソーシャルデータの取得やアクティビティの活用と併せ、mixiアプリの設計にあたっては大いに悩んでみてください。
次回は、OpenSocialアプリケーションから外部のWebサービスと連携を行う方法について解説します。
