mixiアプリとデータの永続化

mixiアプリで始めるOpenSocial入門（7）

サンプルプログラムの作成

　それでは、アプリケーションデータの保存・取得を行うサンプルを作成しましょう。

　今回は、ユーザーが「独り言」を書き込むと、マイミク間でその「独り言」がお互いに共有できる、というサンプルです。ただし、「独り言」の履歴は管理せず、最新の「独り言」だけを保存する方式としてあります。

 

「独り言」共有アプリケーション実行画面

　今回作成するアプリは、mixiでも公開しています。以下の内容をpersistent-sample.xmlという名前でUTF-8形式で保存し、第2回の手順に沿ってアプリを作成します。

「独り言」共有アプリケーションのサンプル（persistent-sample.xml）

<?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サービスと連携を行う方法について解説します。