mixiアプリによるソーシャルデータの活用

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

レスポンスの処理

　DataRequestオブジェクトがOpenSocialコンテナで処理された後、結果がコールバック関数にDataResponseオブジェクトとして渡されます。前述の通り、ここには複数のリクエストに対応するレスポンスがResponseItemオブジェクトとして格納されています。さらにResponseItemオブジェクトには、リクエストに対応して異なるオブジェクトが格納されています。

　newFetchPersonRequestメソッドで作成したリクエストを処理した場合には、ResponseItemオブジェクトには個人の情報を表すopensocial.Personオブジェクトが格納されます。Personオブジェクトに含まれる各情報は、getFieldメソッドを使って取得することができます。また、IDとニックネームについては、それぞれgetId、getDisplayNameというメソッドでも取得することができます。

　このように、レスポンスの処理はやや複雑なものとなります。下に手順を図で説明します。

DataResponseオブジェクトからソーシャル情報を取り出す手順

　最終的に取り出した情報は、コールバック関数でDOMを操作してブラウザに表示するなどの処理を行います。

サンプルコード

　それでは、実際のサンプルコードを見てみましょう。今回作成するアプリはmixiでも実際に公開しています。

　以下の内容を「fetch-person-sample.xml」という名前でUTF-8形式で保存し、第2回の手順に沿ってアプリを作成します。

複数のリクエスト、追加パラメータのサンプル（social-info-sample.xml）

<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="fetch-person-sample">
        <Require feature="opensocial-0.8" />
    </ModulePrefs>
    <Content type="html"><![CDATA[
    <div id="message"/>
    <script type="text/javascript">
            gadgets.util.registerOnLoadHandler(function() {
        var req = opensocial.newDataRequest();
        var params = {};

        // *1（ここから） ――――――――――――――――――――――
        //mixiアプリで取得可能なすべての情報をPROFILE_DETAILSパラメータに指定する
        params[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] = [
            opensocial.Person.Field.PROFILE_URL,
            opensocial.Person.Field.ADDRESSES,
            opensocial.Person.Field.AGE,
            opensocial.Person.Field.DATE_OF_BIRTH,
            opensocial.Person.Field.GENDER,
            opensocial.Person.Field.HAS_APP,
            mixi.PersonField.BLOOD_TYPE
        ];
              // VIEWERの情報をリクエストする
        var requestObject = req.newFetchPersonRequest(
            opensocial.IdSpec.PersonId.VIEWER,params);
        // *1（ここまで） ――――――――――――――――――――――
        req.add(requestObject, 'viewer');

        // リクエストを実行
        req.send(function(response) {
          var viewer = response.get("viewer").getData();  // *2
          var id = viewer.getId();  // *3
          var nickname = viewer.getDisplayName();  // *4
          var thumbnailUrl = viewer.getField(
            opensocial.Person.Field.THUMBNAIL_URL);  // *5
          var profileUrl = viewer.getField(
            opensocial.Person.Field.PROFILE_URL);
          var pref = viewer.getField(opensocial.Person.Field.ADDRESSES)[0].getField(opensocial.Address.Field.UNSTRUCTURED_ADDRESS);
          var age = viewer.getField(opensocial.Person.Field.AGE);
          var birth = viewer.getField(opensocial.Person.Field.DATE_OF_BIRTH);
          var gender = viewer.getField(opensocial.Person.Field.GENDER).getKey();
          var hasApp = viewer.getField(opensocial.Person.Field.HAS_APP);
          var bloodType = viewer.getField(mixi.PersonField.BLOOD_TYPE);

          var msg = "VIEWERの情報<br/> ID : " + id + "<br/>" +
                    "ニックネーム : " + nickname + "<br/>" +
                    "サムネイル : <img src='" + thumbnailUrl + "'/><br/>" +
                    "プロフィールURL : " + profileUrl + "<br/>" +
                    "都道府県 : " + pref + "<br/>" +
                    "年齢 : " + age + "<br/>" +
                    "性別 : " + gender + "<br/>" +
                    "このアプリケーションをインストールしているか : " + hasApp + "<br/>" +
                    "血液型 : " + bloodType + "<br/>";

          document.getElementById('message').innerHTML=msg;
        });
      });
        </script>
        ]]></Content>
</Module>

　 以下、1.～5.はリストの番号と対応するものとします。

1. newFetchPersonRequestメソッドへの追加パラメータとして、mixiアプリで取得可能なすべての情報項目を配列としてPROFILE_DETAILSパラメータに指定します。これにより、デフォルト以外の情報も取得することができます。
2. コールバック関数でレスポンスを処理します。この行ではDataResponseオブジェクト（response変数）→名前を指定したgetメソッド→ResponseItemオブジェクト→getDataメソッド→Personオブジェクト→viewer変数に代入、という流れで処理を行います。
3. PersonオブジェクトのgetIdメソッドでIDを取り出します。
4. PersonオブジェクトのgetDisplayNameメソッドでニックネームを取り出します。
5. その他のフィールドについては、PersonオブジェクトのgetFieldメソッドを使って取り出します。

　サンプルでは、コールバック関数でレスポンスから取り出した情報をDOMを使ってdiv要素に代入し、画面表示しています。

　実行結果は次のような画面となります。

サンプル実行結果。VIEWERの情報が表示される（undefinedとなっているフィールドがあるのは、プロフィールが一部未入力のため）

まとめ

　今回はDataRequestオブジェクトの使い方の流れと、個人の情報を取得するためのリクエストについて説明しました。

　特にリクエスト作成の際の引数の作り方については、今後の連載で扱う他のリクエストでも重要な部分となりますので、しっかり理解しておきましょう。

　次回は友達の情報を取得するためのnewFetchPeopleRequestメソッドについて解説します。