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

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

DataRequest#newFetchPersonRequestメソッド

DataRequestクラスのnewFetchPersonRequestメソッドの第1引数は、次のものが指定できます。

• ビューアー：opensocial.IdSpec.PersonId.VIEWER
• オーナー：opensocial.IdSpec.PersonId.OWNER
• そのほかのユーザー：直接ID指定

　ユーザー情報は常に取得できるわけではなく、mixiアプリでは次のような条件があります。

• VIEWER情報：ビューアーが、そのアプリをインストールしていれば取得できる。オーナーとマイミクである必要はない
• OWNER情報：ビューアーがそのアプリをインストールしていなくても取得できる。ビューアーとマイミクである必要はない
• 直接ID指定：指定されたユーザーがマイミクであれば取得できる。そのアプリをインストールしている必要はない

DataRequest#sendメソッド

　DataRequestクラスのsendメソッドにて、作成したリクエストを送信します。sendメソッドにはレスポンスのイベントハンドラを指定します。

    req.send(function(res) {
        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);
            }
        }
    });

DataResponseクラス

　sendメソッドのイベントハンドラには、DataResponseクラスのインスタンスが渡ります。

    req.send(function(res) {

　まず、リクエストが成功したかどうかを、hadErrorメソッドで検査し、失敗していた場合は、ビューの中でgetErrorMessageメソッドを使ってエラーメッセージを表示します。

コントローラー

    if (res.hadError()) {
        atmarkit.HitokotoView.showError(res);
    }

ビュー

    atmarkit.HitokotoView.showError = function(error) {
        $('#contents').html('エラーが発生しました: ' + error.getErrorMessage());
    }

　リクエストが成功していた場合は、getメソッドを使ってデータを取得します。getメソッドの第1引数には、DataRequest#addメソッドを呼び出す際に指定したキーとして、「fetchViewer」を指定します。getメソッドは結果として、ResponseItemクラスのインスタンスが返されます。

    var resItem = res.get("fetchViewer");

ResponseItemクラス

　ResponseItemクラスに関しても、データ取得が成功したかどうかを、hadErrorメソッドで検査し、失敗していた場合は、getErrorMessageメソッドを使ってエラーメッセージを表示します。

コントローラー

    if (resItem.hadError()) {
        atmarkit.HitokotoView.showError(resItem);
    }

ビュー

    atmarkit.HitokotoView.showError = function(error) {
        $('#contents').html('エラーが発生しました: ' + error.getErrorMessage());
    }

　データの取得が成功していたら、getDataメソッドを呼び出して、リクエストしたPersonインスタンスを取得します。

    var viewer = resItem.getData();

　リクエストが成功しても、データの取得に失敗する理由はgetErrorCodeメソッドの値と、定義済み定数の合致を検査することで確認できます。

Personクラス

　ビュー内で、PersonインスタンスのgetDisplayNameメソッドとgetFieldメソッドを使用して、ビューアーの名前とサムネイルを取得して表示します。

    $('#contents').html('名前:' + viewer.getDisplayName() + '<br />' + 
                        'サムネイル:' + '<img src="' + 
                         viewer.getField(opensocial.Person.Field.THUMBNAIL_URL) + 
                                        '" width="50" height="50" />');

　getFieldの第1引数は、指定可能なフィールドの定数の一覧から、選んで指定します。取得可能なフィールドはOpenSocialコンテナごとに異なるので、注意が必要です。opensocial.EnvironmentのsupportsFieldメソッドを使用すれば、動的に判定可能です。

【リファクタリング】モデルにユーザー情報を取得させる

　次に、OpenSocialコンテナからユーザー情報を取得するロジックをMVCのM（モデル）側に移すようにリファクタリングをしてみます。ガジェットXMLのcanvasビュー用のContentタグ内に、次の記述を追加しました。

        <script type="text/javascript" src="http://ドメイン/ディレクトリ/javascripts/user.js"></script>

　コントローラーではモデルに新たに用意した「loadViewer」を、正常終了時のハンドラと、エラー時のハンドラを渡しながら呼び出すように修正しました。

    onLoadCanvas: function() {
        atmarkit.User.loadViewer(
        function(viewer) {
            atmarkit.HitokotoView.showViewer(viewer);
        },
        function(error) {
            atmarkit.HitokotoView.showError(error);
        });
    }

モデルのコード

　コントローラーにあったOpenSocial JavaScript APIを使う部分は、モデルに次のように移しました。

    // コンストラクタ
    atmarkit.User = function() { }
  
    // クラスメソッド
  
    // ユーザー情報を取得して返す
    atmarkit.User.loadViewer = function(successHandler, errorHandler) {
        // OpenSocialコンテナへのリクエストの準備
        var req = opensocial.newDataRequest();
        req.add(req.newFetchPersonRequest(
            opensocial.IdSpec.PersonId.VIEWER),
            "fetchViewer");
        // OpenSocialコンテナへのリクエストの送信
        req.send(function(res) {      
            // OpenSocialコンテナからのレスポンスの処理
            if (res.hadError()) {
                errorHandler(res);
            }else {
                var resItem = res.get("fetchViewer");
                if (resItem.hadError()) {
                    errorHandler(resItem);
                }else {
                    var viewer = resItem.getData();
                    successHandler(viewer);
                }
            }
        });
    }

　このようにすることで、役割に応じてコードをすっきり整理できました。

次回は、文章を“保存”するには

　今回は、ビューアーの情報を取得するためのOpenSocial JavaScript APIについて説明しました。また、MVCの役割ごとでソースコードを分割することで、コードがすっきりすることを説明しました。次回以降は、ひとことの文章をOpenSocialコンテナに保存し、それを表示したり、それをマイミクに通知する方法について説明していきます。

　今回のソースコードをダウンロードすることもできるので、よろしければご覧ください。

著者紹介

株式会社アークウェブ

志田 裕樹（しだ ゆうき）

株式会社アークウェブ取締役。Webシステムのシステムエンジニアとして開発に従事している。

Ajax、Ruby on Rails等を使用したWeb 2.0的システムの開発実績を持つ。

オープンソースのECサイト用CMS、Zen Cartの日本語コミュニティでコミッターとして活動している。

「基礎から分かる、mixiアプリ作成入門」バックナンバー

• 一般公開されたmixiアプリ、その作り方は？
• まずは、mixiアプリを使ってみよう、作ってみよう