CodeZine(コードジン)

特集ページ一覧

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

mixiアプリで始めるOpenSocial入門(4)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2009/11/04 14:00
目次

レスポンスの処理

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

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

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

DataResponseオブジェクトからソーシャル情報を取り出す手順
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となっているフィールドがあるのは、プロフィールが一部未入力のため)
サンプル実行結果。VIEWERの情報が表示される(undefinedとなっているフィールドがあるのは、プロフィールが一部未入力のため

まとめ

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

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

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



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:mixiアプリで始めるOpenSocial入門

もっと読む

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

  • WINGSプロジェクト 土井 毅(ドイ ツヨシ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5