基礎から分かる、mixiアプリ作成入門
基礎から分かる、mixiアプリ作成入門（2）

一般公開されたmixiアプリ、その作り方は？


アークウェブ株式会社
志田 裕樹
2009/8/31

■ DataRequest#newFetchPersonRequestメソッド

- PR -

　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コンテナに保存し、それを表示したり、それをマイミクに通知する方法について説明していきます。

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

■ ＠IT関連記事

一攫千金！ デザイナのためのmixiアプリ制作のコツ
一撃デザインの種明かし（8）　ケータイ版の提供もスタートして、ますます注目を集める「mixiアプリ」。mixiの特徴を生かした制作事例とデザイナが制作する際のポイントを紹介
OpenSocialアプリケーション作成のための基礎知識
SNSやWebを変える!? OpenSocial徹底解説（後編）　SNSの共通APIとして発表されたOpenSocialを使ったアプリの作り方を一から解説するので、ぜひ試してみてください
「リッチクライアント ＆ 帳票」フ ォーラム 2008/4/23
OpenSocialアプリ、開発者にとっての魅力
インタビュー特集：Google直伝！（5）　OpenSocialの国内外での盛り上がりや、OpenSocialアプリケーション開発の心得やOpenSocialコンテナになる方法を聞いた
「リッチクライアント ＆ 帳票」フ ォーラム 2009/6/19
Google Labsさん、Ajaxライブラリ標準化はありますか
Google Developer Day 2008特集（3）　Google Labs、OpenSocial、Gearsの担当者にそれぞれ話を聞いた。社内プログラミングで利用している、おすすめの開発環境とは？
「リッチクライアント ＆ 帳票」フ ォーラム 2008/7/14
mixiは徹底した社内コミュニケーションからできている
WebとUIをつなぐトリックスター（1）　Webサイト制作の要となるエンジニアとデザイナのチームワーク。異なる者同士をつなぐトリックスターからヒントを探る。まずはmixiに聞いた
パターンとライブラリで作るAjaxおいしいレシピ
Ajax開発においてみなさんはMVCを意識していますか？ 本連載では、デザインパターンとライブラリを活用し、MVCで設計する分かりやすいプログラミングの仕方をサンプルを見ながら解説します
Ajax時代のJavaScriptプログラミング再入門
Ajax全盛のいま、オブジェクト指向ベースのJavaScript知識は不可欠。過去を振り返りつつ、まずは最新開発事情をチェック
「Insider.NET」フォーラム
初めてのJavaScriptプログラミング
初めてのプログラミングにはJavaScriptがお勧め。Webブラウザとメモ帳があれば、本格的なプログラミングに挑戦できます
「Coding Edge」フォーラム
プロフィール：志田 裕樹（しだ ゆうき）

株式会社アークウェブ取締役。Webシステムのシステムエンジニアとして開発に従事している。
Ajax、Ruby on Rails等を使用したWeb 2.0的システムの開発実績を持つ。
オープンソースのECサイト用CMS、Zen Cartの日本語コミュニティでコミッターとして活動している。

1-2-3  

　INDEX
基礎から分かる、mixiアプリ作成入門（2）
一般公開されたmixiアプリ、その作り方は？
  Page1
mixiアプリが一般公開されました
mixiアプリを使ってもらうための「カテゴリ申請」とは
復習：Twitterのように「ひとこと」をつぶやくmixiアプリ
  Page2
mixiアプリの作り方からOpenSocialの仕様を学ぶ
ビューアーの名前とサムネイルを表示するには？
ビューアー情報取得で使うOpenSocial JavaScript API
Page3
【リファクタリング】モデルにユーザー情報を取得させる
次回は、文章を“保存”するには

基礎から分かる、mixiアプリ作成入門 バックナンバー 連載インデックスへ»

ご意見、ご感想は Smart＆Social 会議室へどうぞ


　Smart＆Social フォーラム トップページへ


TechTargetジャパン

Smart ＆ Social フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る
- PR -

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH