mixiアプリ.info

前回はmixiアプリ作成入門（2）で作成したコードについて簡単な解説を行いました。
今回は、ユーザの詳細なプロフィール情報の取得方法をご紹介したいと思います。

mixiアプリでは、以下のプロフィール情報とマイミク一覧を取得することができます。

• ID
• ニックネーム
• プロフィール写真
• プロフィールURL
• 現住所(県のみ)
• 年齢
• 生年月日
• 性別
• 血液型
• このアプリケーションをインストールしているかどうか

このうち、（2）のサンプル作成時に使用したnewFetchPersonRequest()関数で取得できるのは

• ID
• ニックネーム
• プロフィール写真

でした。

それ以外の情報はというと、取得したい項目をそれぞれ予め指定する必要があります。
その指定を行うためには、
opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS という定数を使用します。

以下では、DataRequestオブジェクトの生成前にその指定を行ってみました。

var params = {};
params[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] = [
opensocial.Person.Field.PROFILE_URL, // プロフィールのURL
opensocial.Person.Field.ADDRESSES, // 現住所(県のみ)
opensocial.Person.Field.AGE, // 年齢
opensocial.Person.Field.DATE_OF_BIRTH, // 生年月日
opensocial.Person.Field.GENDER, // 性別
mixi.PersonField.BLOOD_TYPE, // 血液型
opensocial.Person.Field.HAS_APP // このアプリケーションをインストールしているかどうか
];
var req = opensocial.newDataRequest();

そして、指定がつまったparamsをnewFetchPersonRequest()の第二引数として付与します。

req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER, params), “viewer”);

値によっては取得方法が少し異なります。以下をご参照ください。

req.send(function(data) {

var viewer =
data.get(“viewer”).getData();

var id =
viewer.getId();

var nickname =
viewer.getDisplayName();

var thumbnailUrl =
viewer.getField(opensocial.Person.Field.THUMBNAIL_URL);

var profileUrl =
viewer.getField(opensocial.Person.Field.PROFILE_URL);

var pref =
viewer.getField(opensocial.Person.Field.ADDRESSES)[0].getField(opensocial.Address.Field.UNSTRUCTURED_ADDRESS);

var age =
viewer.getField(opensocial.Person.Field.AGE);

var birth =
viewer.getField(opensocial.Person.Field.DATE_OF_BIRTH);

var gender =
viewer.getField(opensocial.Person.Field.GENDER).getKey();

var bloodType =
viewer.getField(mixi.PersonField.BLOOD_TYPE);

var hasApp =
viewer.getField(opensocial.Person.Field.HAS_APP);

}

尚、情報が「全体に公開」されていない場合、「undefined」と表示され値を取得することができませんのでご注意ください。

これだけの情報が取得できれば、mixiアプリの創造の幅が広がりますね。
これをもとに、サンプルアプリのさらなるカスタマイズにぜひチャレンジしてみてください。

次回は、ユーザのマイミク情報を取得してみようと思います。

Post Footer automatically generated by Add Post Footer Plugin for wordpress.

前回は、「Hello,（ニックネーム）!」とプロフィール写真を表示する、簡単なmixiアプリを作成してみました。

今回は前回作成したXMLをもとに、mixiアプリのコードについて簡単な説明をしてみたいと思います。
以下に前回のサンプルコードを記載します。

<?xml version=”1.0″ encoding=”UTF-8″?>

<Module>
<ModulePrefs title=”Hello, world!”>
<Require feature=”opensocial-0.8″ />
</ModulePrefs>
<Content type=”html”><![CDATA[

<div>Hello, <span id="target"></span>!</div>
<div id="photo"></div>

<script type="text/javascript">
function init() {
var req = opensocial.newDataRequest();
req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.VIEWER), "viewer");
req.send(function(data) {
var viewer = data.get("viewer").getData();
var name = viewer.getDisplayName();
var thumbnailUrl = viewer.getField(opensocial.Person.Field.THUMBNAIL_URL);
document.getElementById("target").innerHTML = name;
document.getElementById("photo").innerHTML = '<img src="' + thumbnailUrl + '" />';
});
}
gadgets.util.registerOnLoadHandler(init);
</script>

]]></Content>
</Module>

mixiアプリはXML形式で記述されますが、そのファイルはすべて「Gadget XMLファイル」と呼ばれるものです。
たった一つのGadget XMLファイルの中に、mixiアプリに関するすべての機能を記述することができます。
尚、mixiアプリのGadget XMLファイルは、OpenSocial および Gadgets の仕様に準拠しているそうです。

Gadget XMLファイルの具体的な記述方法は以下です。

• <Module> をルート要素として記述する。
• mixiアプリのタイトルや説明等の情報や利用するAPIについて、 <ModulePrefs> 要素に記述する。
• <Content> 要素の中にmixiアプリの中身をHTMLで記述する。
  （中身をCDATAセクションで囲むことにより、HTMLタグがXMLとして処理されないようにしておきます）

では、サンプルにおけるこれらの要素を見てみましょう。

<Module>

ルート要素として記述しています。

<ModulePrefs>

<Require feature=”opensocial-0.8″ /> を宣言しています。
これは、ニックネームやプロフィール写真のURLパスなどの情報を使用するためです。

<Content>

ここにはHTMLを記述できますので、HTMLタグやJavaScriptを記述しています。

表示部分は、staticな「Hello, 」文字列と取得したユーザ情報を挿入するための場所を用意しただけのシンプルな構造です。

<div>Hello, <span id=”target”></span>!</div>
<div id=”photo”></div>

あとは、target にニックネーム、photo にプロフィール写真がそれぞれ挿入されるようJavaScriptで記述していきます。

ユーザ情報は、JavaScriptコード中の newFetchPersonRequest() 関数によって取得することができます。
この第1引数に取得したいユーザを特定するための値を指定するのですが、今回は取得したいユーザとして「Viewer」が指定されています。

———————————
◆「Owner」と「Viewer」
OpenSocialでは「Owner」と「Viewer」という概念があり、それぞれ「Owner = mixiアプリをインストールしているユーザ」「Viewer = mixiアプリを操作しているユーザ」を意味しています。
サンプルの例で言いますと、「Owner」が指定された場合、そのmixiアプリがインストールされた自分のページを誰が閲覧しようとも、常に自分のニックネームと写真が表示されます。しかし、「Viewer」指定の場合は訪問者によって表示される情報が変わるような仕組みです。
———————————

実は、newFetchPersonRequest()関数を使うと、一気に以下の 3 つの情報が呼び出せます。

• ID
  getId()
• ニックネーム
  getDisplayName()
• プロフィール写真
  getField(opensocial.Person.Field.THUMBNAIL_URL)

サンプルをカスタマイズするとき、ニックネームの他にプロフィール写真も表示することにしたのは、そんな理由からでもありました。

リクエストを送る処理には、DataRequestオブジェクトを使用します。
まず、newDataRequest() 関数によりリクエスト送信用オブジェクトを生成し、add()関数を使用して DataRequest オブジェクトに要求を追加しています。
このとき、第1引数に newFetchPersonRequest() 関数などで生成されたリクエストオブジェクト、第2引数にこのリクエストの結果を取り出すためのキー文字列を指定します。
send()関数でリクエスト送信後、取得したユーザ情報からそれぞれの情報を取り出し、document上の意図した場所へ挿入するよう記述したら完成です！

このままのコードでは何の彩色もないシンプルな表示の完成図ですが、CSSや画像を使ってもう少しリッチな表示にチャレンジしてみてもいいかもしれませんね。
CSSは<Content> の中にもちろん記述できますが、画像や外部CSSの読み込みをする際は、それらのファイルがWebサーバ上に存在しなければなりませんのでご注意ください。

次回は、newFetchPersonRequest() では取得できないユーザ情報の取得方法についてご紹介したいと思います。

Post Footer automatically generated by Add Post Footer Plugin for wordpress.