一般公開された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の日本語コミュニティでコミッターとして活動している。
関連記事
Copyright © ITmedia, Inc. All Rights Reserved.
注目のテーマ
ITmediaはアイティメディア株式会社の登録商標です。