一般公開されたmixiアプリ、その作り方は？：基礎から分かる、mixiアプリ作成入門（2）（2/3 ページ）

[志田裕樹，アークウェブ株式会社]

mixiアプリの作り方からOpenSocialの仕様を学ぶ

前回の記事で、「mixiアプリはOpenSocialの仕様に基付いている」と説明しました。具体的には、ガジェットからJavaScriptを実行し、OpenSocial JavaScript APIの、Personクラスのインスタンスを利用することで名前などの情報を取得できます。

オーナーとビューアー

　OpenSocialのアプリケーションでは、以下のようにユーザーを明確に分けて扱います。

• ビューアー：アプリケーションを閲覧している人：アプリケーションを閲覧している人
• オーナー：アプリケーションをインストールしている人：アプリケーションをインストールしている人

　例えば、AさんとBさんが「X」というアプリケーションをインストールしている場合、次のようなケースがあります。

表1　オーナーとビューアーの関係

	ビューアー	オーナー
Aさんが、BさんのプロフィールページでXアプリを開いた	Aさん	Bさん
Aさんが、AさんのプロフィールページでXアプリを開いた	Aさん	Aさん

　OpenSocialアプリケーションでは、ビューアーとオーナーが一致しているかどうかで表示内容を変更することがよくあります。

　「ひとこと」でも、新しくつぶやくための入力インターフェイスを、ビューアーとオーナーが一致している場合のみ表示することで、他人のアプリページからはつぶやけないようにしています。

　今回は、ビューアーの情報を表示してみましょう。

ビューアーの名前とサムネイルを表示するには？

　前回までのソースコードに手を加えて、APIを通じて、ビューアーのPersonオブジェクトを取得し、キャンバスビューにて名前とサムネイルを表示してみましょう。

　Personオブジェクトの取得はMVCのM（モデル）に行わせたいところですが、まずは、C（コントローラー）に書いて、その後モデルに処理を移すことにします。コントローラーのonLoadCanvasメソッドを、次のように書き変えました。

    onLoadCanvas: function() {
        // OpenSocialコンテナへのリクエストの準備
        var req = opensocial.newDataRequest();
        req.add(req.newFetchPersonRequest(
            opensocial.IdSpec.PersonId.VIEWER),
            "fetchViewer");
        // OpenSocialコンテナへのリクエストの送信
        req.send(function(res) {
            // OpenSocialコンテナからのレスポンスの処理
            if (res.hadError()) {
                atmarkit.HitokotoView.showError(res);
            }else {
                var resItem = res.get("fetchViewer");
                if (resItem.hadError()) {
                    atmarkit.HitokotoView.showError(resItem);
                }else {
                    var viewer = resItem.getData();
                    atmarkit.HitokotoView.showViewer(viewer);
                }
            }
        });
    }

ビューのコード

　コントローラーは、新たに用意されたV（ビュー）のメソッド「showError」「showViewer」を呼ぶようになっています。先に、ビューのコードを見ておきましょう。

    // ビューアーの情報を表示する
    atmarkit.HitokotoView.showViewer = function(viewer) {
        $('#contents').html('名前:' + viewer.getDisplayName() + '<br />' + 
                        'サムネイル:' + 
                        '<img src="' + 
                         viewer.getField(opensocial.Person.Field.THUMBNAIL_URL) + 
                                   '" width="50" height="50" />');
    }
  
    // エラーを表示する
    atmarkit.HitokotoView.showError = function(error) {
        $('#contents').html('エラーが発生しました: ' + error.getErrorMessage());
    }

実行結果

　このコードの実行結果は、次のようになります。

図2　サンプルの実行結果

ビューアー情報取得で使うOpenSocial JavaScript API

　上記のコントローラーとビューの中で使用されているOpenSocial JavaScript APIのメソッドは、表2のようになっています（表2のクラス一覧はインデックスになっています）。

表2　サンプルで使っているOpenSocial JavaScript APIのメソッド

クラス	メソッド
Opensocial	newDataRequest
DataRequest	add、newFetchPersonRequest、send
DataResponse	hadError、getErrorMessage、get
ResponseItem	hadError、getErrorMessage、getData
Person	getDisplayName、getField

　ここからは、これらのAPIの使い方について解説します。

OpensocialクラスでDataRequestインスタンスの生成

　まずコントローラーでは、OpensocialクラスのnewDataRequestメソッドを呼び出して、DataRequestクラスのインスタンスを取得します。

    var req = opensocial.newDataRequest();

DataRequestクラス

　DataRequestクラスは、以下の処理をOpenSocialコンテナに依頼するためのクラスです。

• ユーザーの情報の取得
• mixiアプリ上で行ったことのマイミクへの通知
• mixiアプリ上で行った作業情報の保存

DataRequest#addメソッド

　DataRequestクラスのaddメソッドを利用することで、ユーザー情報の取得を、リクエストのパラメータとして設定できます。

    req.add(req.newFetchPersonRequest(
            opensocial.IdSpec.PersonId.VIEWER), 
            "fetchViewer");

　addメソッドでは、第1引数に「どのデータを取得、または、更新するか」を指し示す、Request用オブジェクトを指定します。ユーザー情報を取得するためには、newFetchPersonRequestメソッドによって得られるオブジェクトを指定します。

　第2引数は、「依頼した結果受け取るレスポンスのうち、どの“キー”にデータが格納されるか」を指定します。詳しくは、レスポンスの処理の部分で再度説明します。

次ページでは、引き続きAPIを紹介して、最後にリファクタリングとして、モデルにユーザー情報を取得させます。