サンプルプログラムの作成
それでは、アプリケーションデータの保存・取得を行うサンプルを作成しましょう。
今回は、ユーザーが「独り言」を書き込むと、マイミク間でその「独り言」がお互いに共有できる、というサンプルです。ただし、「独り言」の履歴は管理せず、最新の「独り言」だけを保存する方式としてあります。
![「独り言」共有アプリケーション実行画面](http://cz-cdn.shoeisha.jp/static/images/article/4660/sample01.gif)
今回作成するアプリは、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要素、メッセージ設定、取得を行うためのボタンを定義しています。
アプリケーションを開くと、自分とマイミクの「独り言」を取得して表示します。
「メッセージ設定」ボタンを押すと、テキストボックスに入力した内容で自分の「独り言」を更新し、表示内容を更新します。
「メッセージ取得」ボタンを押すと、最新の「独り言」情報に表示を更新します。
![メッセージを更新後の画面](http://cz-cdn.shoeisha.jp/static/images/article/4660/sample02.gif)
まとめ
今回はOpenSocialアプリケーションでアプリケーションデータを永続化するためのPersistence APIについて扱いました。毎回ながら機能自体はシンプルですが、アプリケーションデータをさまざまなユーザー間で共有できることを考えると、大きな可能性を持つ機能と言えるでしょう。
今回のサンプルではデータの値としてシンプルな文字列だけを使用しましたが、JSON形式の値を保存することで、さらに複雑なデータの保存・取得も行うことができます。例えば「独り言」の履歴をJSON形式で保存するように改造するのは比較的簡単に行えるでしょう。
アプリケーションデータをどのように共有すれば、魅力的なアプリケーションになるのか、これまでのソーシャルデータの取得やアクティビティの活用と併せ、mixiアプリの設計にあたっては大いに悩んでみてください。
次回は、OpenSocialアプリケーションから外部のWebサービスと連携を行う方法について解説します。