前回は、はてブチェッカーのhomeビューでオーナーの「友達一覧⁠」⁠、「⁠プロフィール情報⁠」⁠、「⁠アプリデータに保存されたはてなID⁠」⁠、オーナーの友達の「アプリデータに保存したはてなID」という4つのリクエストを送信するところまで解説しました。

今回はそのレスポンスを受け取る部分と、友達にガジェットを紹介するための機能の利用方法について解説します。

DataResponseとResponseItem

opensocial.DataRequestで送信したリクエストのレスポンスは、opensocial.DataResponseオブジェクトのインスタンスを引数としてコールバック関数に返ってきます。

opensocial.DataResponseオブジェクトは、バッチで送信した複数のリクエストに対するレスポンスを1つにまとめて返すものです。複数のリクエストの結果、全て成功したのか、それともその中の1つでも失敗したリクエストがあったかを、hadErrorメソッドで確かめることができます。

function callback(response) {
  if (response.hadError()) {
    // ひとつでもエラーがある場合は中止する処理
  } else {
    // エラーがなければ継続する処理
  }
}

バッチで送信したリクエストに対する各レスポンスは、リクエスト追加時に付加したキーを使って個別に呼び出すことが出来ます。

var result = response.get('friends');

ここで得られるopensocial.ResponseItemオブジェクトのインスタンスは、リクエストに対する実際のレスポンス内容を含みます。このオブジェクトのhadErrorメソッドを使うことによって、リクエストごとにエラーが発生したかどうかをチェックすることが可能です。

if (result.hadError()) {
  // エラーがあればメッセージを表示する処理
} else {
  // エラーがなければ継続する処理
}

「opensocial.DataResponseオブジェクトとopensocial.ResponseItemオブジェクトのどちらでエラーチェックを行えばいいの？両方やるの？」と思う方もいらっしゃるかもしれません。使い分けとしては、バッチで送信した複数のリクエストの中に1つでもエラーがあるとNGの場合はopensocial.DataResponse、そうではない場合はopensocial.ResponseItemでチェックするのが定石と覚えておきましょう。

opensocial.ResponseItemオブジェクトのエラーチェックで問題ないことが分かったら、getDataメソッドでリクエストに応じた各種レスポンス内容を受け取ることができます。

プロフィール情報のレスポンス

プロフィール情報のレスポンスで返ってくるのはopensocial.Personオブジェクトです。opensocial.PersonオブジェクトはgetDisplayNameメソッドでニックネームを、getIdメソッドでIDを取得することが出来ます。その他の属性情報については、getFieldメソッドに欲しい情報のフィールド名を渡すことで取得することが出来ます。

var person = result.getData();
// ニックネームを取得
var name = person.getDisplayName();
// gooIDを取得
var id = person.getId();
// プロフィールアイコンのURLを取得
var icon = person.getField(opensocial.Person.Field.THUMBNAIL_URL);
// 予めPROFILE_DETAILSで指定をしていたため、関連URLを取得することができる
var urls = person.getField(opensocial.Person.Field.URLS);

ここではてブチェッカーに実装した、OpenSocialとgooホームだからこそ可能なテクニックをひとつご紹介しましょう。

gooホームには、FriendFeedのように外部利用サービスからフィードをインポートする機能があります。リクエストを行う際にPROFILE_DETAILSにURLSも指定を行っておくことにより、予めユーザが設定を行っている外部利用サービスのURLを取得することができます。もちろん、gooホームははてなブックマークにも対応しているため、はてなブックマークのURLも取得することが可能です。

そこで、はてブチェッカーでは、homeビューの「設定」タブからはてなIDを設定しなくても、もし外部利用サービスとしてはてなブックマークのURLが登録されていた場合には、そのURLから抽出したはてなIDを自動的に設定するようにしています。

下記はプロフィール情報からURLを取得して、はてなIDをアプリデータに保存する実際のコードです。

var owner = result.getData();
// オーナーのプロフィールからはてなIDを抽出する処理
if (owner.getField(opensocial.Person.Field.URLS)) {
  var urls = owner.getField(opensocial.Person.Field.URLS);
  // 取得したURLSをループ
  for (var key in urls) {
    var url = urls[key].getField(opensocial.Url.Field.ADDRESS);
    // プロフィール情報にはてブURLが含まれ、アプリデータにまだIDが保存されていない場合
    // プロフィール情報のはてブURLからはてなIDを補完して保存する
    if (url.match(/^http:\/\/b\.hatena\.ne\.jp/) && hatena_id == '') {
      hatena_id = url.replace(/^http:\/\/b\.hatena\.ne\.jp\/(.*?)\/.*$/, '$1');
      // その場でアプリデータに保存
      var req = opensocial.newDataRequest();
      req.add(req.newUpdatePersonAppDataRequest('VIEWER', 'id', hatena_id));
      req.send();
    }
  }
}

友達一覧のレスポンス

友達一覧のレスポンスで返ってくるのはopensocial.Collectionオブジェクトです。opensocial.Collectionオブジェクトは配列を拡張したオブジェクトで、eachメソッドを使ってイテレートを行ったり、Idの指定によるユーザー情報の取得を行ったりすることが出来ます。各要素はそれぞれopensocial.Personオブジェクトになっているため、ループで回しながら上記で解説したプロフィール情報を扱うやり方で処理を行うことができます。

var friends = result.getData();
// Collectionオブジェクトのためeachループが使える
friends.each(function(friend) {
  // ニックネームを取得
  var name = friend.getDisplayName();
  // gooIDを取得
  var id = friend.getId();
  // プロフィールアイコンのURLを取得
  var icon = friend.getField(opensocial.Person.Field.THUMBNAIL_URL);
});

アプリデータのレスポンス

アプリデータのレスポンスはユーザーIDをキーとしたオブジェクトで返ってきます。今回のサンプルではオーナーの「アプリデータに保存されたはてなID」とオーナーの友達の「アプリデータに保存されたはてなID」の2つをリクエストしましたが、結果がひとつなのか、複数なのかの違いだけで、レスポンスの構造は同じです。for/inループで取得するとよいでしょう。

var appdata = result.getData();
// for/inループでイテレート
for (var userid in appdata) {
  // ユーザーIDをキーにデータを取得する
  var data = appdata[userid];
}

今回はてブチェッカーでは、アプリデータにはてなIDを保存しています。アプリデータの使いどころや詳しい利用方法については、また別の機会に解説します。

ガジェットを友達に教える

OpenSocial JavaScript APIには、ソーシャルアプリらしい機能のひとつとしてガジェットを友達に紹介するopensocial.requestShareAppメソッドが含まれています。gooホームではopensocial.requestShareAppメソッドを使うと、教えたい友達にガジェットを紹介するメッセージを送信することが出来ます。

はてブチェッカーのhomeビューでは、同じガジェットを使っている友達の新着ブックマークをまとめて表示する機能がありますが、友達に使っている人がいなければ意味がありません。だからといって何も表示しないのも考えものです。そこで、友達にはてブチェッカーを使っている人がいない場合、友達に教えるリンクを表示します。

// 絵文字変換
var tpl = goohome.Emoji.convert('{/m_0151/}はてブチェッカーを友達に教える{/m_0204/}');
var inv = document.getElementById('invitation')
inv.innerHTML = tpl;
// onclickイベントを追加
inv.onclick = function() {
  // ガジェットを友達に教えるリクエスト
  opensocial.requestShareApp(
    'VIEWER_FRIENDS',
    opensocial.newMessage('はてブチェッカーを使ってみませんか？')
  );
};

gooホーム独自の拡張である絵文字フィーチャーを使って少し派手にしてあるのがポイントです。コンテナごとにこういった独自機能が利用できるのも面白い所ですね。

まとめ

さて、今回はDataResponse、ResponseItem、requestShareAppについて解説しました。はてブチェッカーの実際のコードでは、これらの組み合わせで友達のはてなIDを取得、最新のはてなブックマークを取得し、時系列に並べ替えて表示しています。ここに掲載したものより少し複雑ですが、これでOpenSocialの主な機能は使えるようになったはずです。

次回以降は外部APIからデータを取得するmakeRequestや、アプリデータの詳細、少し複雑なパーミッションの話をしていきます。