連載
» 2009年08月31日 00時00分 公開

基礎から分かる、mixiアプリ作成入門(2):一般公開されたmixiアプリ、その作り方は? (3/3)

[志田裕樹,アークウェブ株式会社]
前のページへ 1|2|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の日本語コミュニティでコミッターとして活動している。


前のページへ 1|2|3       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。