mixiアプリ.info

お久しぶりです、マイキーです。
mixiアプリが一般公開されたし自分もアプリ作ってみたくなっちゃった方のための・・・「mixiアプリ入門」シリーズ！
不定期すぎる更新でごめんなさい。

前回は、マイミク一覧をページ送りで表示する方法をご紹介しました。
今回はそのページ送り部分のロジックについて簡単に解説を行いたいと思います。

すでにmixiアプリにもマイミク一覧表示系のアプリがいくつかあるので、今回含むmixiアプリ入門シリーズを読んで　「このアプリの裏側は実はこんな風になってるのか！」　と思ってくだされば幸いです

以下は前回と同様のサンプルです。

<?xml version=”1.0″ encoding=”UTF-8″ ?>
<Module>
<ModulePrefs title=”マイミク一覧”>
<Require feature=”opensocial-0.8″/>
<Require feature=”dynamic-height”/>
</ModulePrefs>

<Content type=”html”>
<![CDATA[

<div id="friends"></div>

<script type="text/javascript">
sendDataRequest = function(offset) {
var MAX_NUMBER = 20;

var params = {};
params[opensocial.IdSpec.Field.USER_ID] = opensocial.IdSpec.PersonId.OWNER;
params[opensocial.IdSpec.Field.GROUP_ID] = “FRIENDS”;
var idSpec = opensocial.newIdSpec(params);

var req = opensocial.newDataRequest();

var dp = {};
dp[opensocial.DataRequest.PeopleRequestFields.MAX] = MAX_NUMBER;
dp[opensocial.DataRequest.PeopleRequestFields.FIRST] = offset;

req.add(req.newFetchPeopleRequest(idSpec, dp), “friends”);
req.send(function(data) {
document.getElementById(‘friends’).innerHTML = ”;
output = “”;
if (data.hadError()) {
var msg = data.getErrorMessage();
output += msg
} else {
var friends = data.get(“friends”).getData();
var offset = friends.getOffset();
var total = friends.getTotalSize();
var size = friends.size();

var pager = ‘<p>’
var maxPage = Math.ceil(total/MAX_NUMBER);
for (var i = 1; i <= maxPage; i++) {
if (i-1 != offset/MAX_NUMBER) {
pager += ‘| <a href=”#” onClick=”sendDataRequest(‘ + (i-1)*MAX_NUMBER + ‘)”>’ + i + ‘</a> ‘;
} else {
pager += ‘| ‘ + i + ‘ ‘;
}
}
pager += ‘|</p>’
output += pager

friends.each(function(friend) {
var id = friend.getId();
var name = friend.getDisplayName();

output += name + ‘<br />’;
});
}
document.getElementById(‘friends’).innerHTML = output;
gadgets.window.adjustHeight();
});
}
gadgets.util.registerOnLoadHandler(sendDataRequest(0));
</script>

]]>
</Content>
</Module>

まず、gadgets.util.registerOnLoadHandler() という関数に注目してください。
これを使って、一番最初に実行して欲しい関数を指定することができます。

サンプルでは

gadgets.util.registerOnLoadHandler(sendDataRequest(0))

となっていますので、sendDataRequest() に「0」の引数を渡したものを一番最初に実行させていることがわかります。

では、sendDataRequest() では何をしているかというと、指定されたページのマイミク情報を取得し、ページ送りのリンクを作成しています。
マイミク情報の取得方法については今までもご紹介してきましたが、今回マイミク情報の取得方法で一番重要なのは
opensocial.DataRequest.PeopleRequestFields.FIRST を指定しているところです。

ここで最初に取得するマイミク情報のインデックス値を指定するので、そこから MAX で指定した値（このサンプルでは、MAX_NUMBER で指定している 20）までのマイミク情報を取得することになります。
一番最初は sendDataRequest() に引数「0」を渡していますが、その値はそのまま FIRST へ指定される構造になっているので、インデックス値 0 から 19 までの計 20 名のマイミク情報を取得していることになります。

ここまで大丈夫ですかー！

ここまできたら、あとの考え方はもう簡単です。
一番最初（つまり、1 ページめ）はインデックス値 0 から 19 のマイミク情報を取得するのならば、2 ページめは 20 から始めればよいですよね。
じゃあ 3 ページめは？ …もちろん 40 からですね

ですので、ページ送りのリンクを作成する部分では、1 ページめへのリンクは「0」、2 ページめへのリンクは「20」、3 ページめのリンクは「40」… というように sendDataRequest() へ引数が渡るようにしています。
ちなみに、ページ送りを何ページまで作成するかは、マイミクの件数と 1 ページあたりの表示件数によって決まるようになっています。

コードはちょっと長くなってますが、内容はとてもシンプルですね。
ページ送りを作成する機会はあまりないかもしれませんが、
opensocial.DataRequest.PeopleRequestFields.MAX と FIRST にこんな使い方があるんだな〜ということをなんとなく覚えておけば、何かの役に立つかもしれませんね。

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

こんにちは、mixiのアプリ管理機能が充実しはじめててちょっとびびったマイキーです。
今回は久しぶりの「mixiアプリ入門」シリーズをおもむろに投稿します。

前回は、マイミク全員を一度に表示する方法をご紹介しました。
それに対抗して、今回はマイミク全員をページ送りで表示する方法についてご紹介します。

以下がサンプルコードです。
dynamic-height を使った縦幅調整つきバージョンで掲載！

<?xml version=”1.0″ encoding=”UTF-8″ ?>
<Module>
<ModulePrefs title=”マイミク一覧”>
<Require feature=”opensocial-0.8″/>
<Require feature=”dynamic-height”/>
</ModulePrefs>

<Content type=”html”>
<![CDATA[

<div id="friends"></div>

<script type="text/javascript">
sendDataRequest = function(offset) {
var  MAX_NUMBER = 20;

var params = {};
params[opensocial.IdSpec.Field.USER_ID] = opensocial.IdSpec.PersonId.OWNER;
params[opensocial.IdSpec.Field.GROUP_ID] = “FRIENDS”;
var idSpec = opensocial.newIdSpec(params);

var req = opensocial.newDataRequest();

var dp = {};
dp[opensocial.DataRequest.PeopleRequestFields.MAX] = MAX_NUMBER;
dp[opensocial.DataRequest.PeopleRequestFields.FIRST] = offset;

req.add(req.newFetchPeopleRequest(idSpec, dp), “friends”);
req.send(function(data) {
document.getElementById(‘friends’).innerHTML = ”;
output = “”;
if (data.hadError()) {
var msg = data.getErrorMessage();
output += msg
} else {
var friends = data.get(“friends”).getData();
var offset = friends.getOffset();
var total = friends.getTotalSize();
var size = friends.size();

var pager = ‘<p>’
var maxPage = Math.ceil(total/MAX_NUMBER);
for (var i = 1; i <= maxPage; i++) {
if (i-1 != offset/MAX_NUMBER) {
pager += ‘| <a href=”#” onClick=”sendDataRequest(‘ + (i-1)*MAX_NUMBER + ‘)”>’ + i + ‘</a> ‘;
} else {
pager += ‘| ‘ + i + ‘ ‘;
}
}
pager += ‘|</p>’
output += pager

friends.each(function(friend) {
var id = friend.getId();
var name = friend.getDisplayName();

output += name + ‘<br />’;
});
}
document.getElementById(‘friends’).innerHTML = output;
gadgets.window.adjustHeight();
});
}
gadgets.util.registerOnLoadHandler(sendDataRequest(0));
</script>

]]>
</Content>
</Module>

全マイミクの人数に応じて適切なページ数を作成しています。
サンプルでは、MAX_NUMBER に 20 を設定することによって、１リクエストあたり取得するマイミクの件数はデフォルトと同様の20件としました。
試しにこのサンプルを使ってページ送りつきのマイミク一覧を作ってみる際、MAX_NUMBER の値を変えるだけで１ページあたりのマイミク表示件数を変更することができますよ。

———————————
◆ サンプルをコピーして使用する際の注意
この引用文はなぜかダブルクオーテーションを「“とか”」に、シングルクオーテーションを「‘とか’」に変換してしまう謎仕様なので、コピーしたサンプルをはり付けたあと、それぞれ半角のものに書き換えてからご利用ください。（今までのサンプルも同様です）
お手数をお掛けしてすみません。。
———————————

ソースを掲載するとどうも長々としたエントリーになってしまいますね。
今回はこれくらいにして、次回にページ送り作成部分について解説を行ってみようと思います。

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

関東甲信地方の梅雨明け記念におもむろに投稿します。
今回も、いつものマイキーがお送りしてます。

前回はマイミク情報の取得方法についてご紹介しました。
しかし、ご紹介したサンプルではデフォルトの 20 件までしか表示されなかったかと思います。
そこで今回は、マイミク全員を一覧表示する方法をご紹介します。

以下は前回使用したサンプルコードです。

<?xml version=”1.0″ encoding=”UTF-8″ ?>
<Module>
<ModulePrefs title=”マイミク一覧”>
<Require feature=”opensocial-0.8″/>
</ModulePrefs>

<Content type=”html”>
<![CDATA[

<div id="friends"></div>

<script type="text/javascript">
var params = {};
params[opensocial.IdSpec.Field.USER_ID] = opensocial.IdSpec.PersonId.OWNER;
params[opensocial.IdSpec.Field.GROUP_ID] = “FRIENDS”;
var idSpec = opensocial.newIdSpec(params);

var req = opensocial.newDataRequest();
req.add(req.newFetchPeopleRequest(idSpec), “friends”);
req.send(function(data) {
output = “”;
if (data.hadError()) {
var msg = data.getErrorMessage();
output += msg // エラー時は、とりあえずエラーメッセージをそのまま表示させる
} else {
var friends = data.get(“friends”).getData();

friends.each(function(friend) {
var id = friend.getId();
var name = friend.getDisplayName();

output += name + ‘<br />’;
});
}
document.getElementById(‘friends’).innerHTML = output;
});

</script>

]]>
</Content>
</Module>

これですごく質素なマイミク一覧が取得できたわけですが、このままではマイミク情報が 20 件までしか表示されませんでしたね。

全マイミクを呼び出すためには、DataRequest オブジェクト使用時にその指定をする必要があるので、リクエスト送信前にそのためのコードを追記しましょう。
今回は、DataRequestオブジェクト生成前に追記してみました。

var req = opensocial.newDataRequest(); // このあとに2行追記

var dp = {};
dp[opensocial.DataRequest.PeopleRequestFields.MAX] = 1000;

デフォルトでは、1リクエストあたりの取得される最大件数を指定する PeopleRequestFields.MAX が 20 に設定されているため、20 件しか表示されていなかったわけです。
この最大取得件数を 1000 に設定します。

そして、dp変数をnewFetchPeopleRequest()の第二引数として付与するよう変更します。

req.add(req.newFetchPeopleRequest(idSpec, dp), “friends”);

以上でマイミク全員を取得するための変更は終了です。
たった3行のコードを追加・変更するだけでしたね。

ちなみに、MAX として指定した「1000」の数字はどこから出てきたかというと、マイミク登録可能数が最大1000人だからです。（但し、公認アカウントについてはこの制限を受けないようです。）
しかし、この方法ではmixi側での最大数に応じてアプリ側も適宜この数字を変えなければならない可能性があるので、わたしたちは常にその恐怖と戦い続けなければなりません。
もっとスマートに全マイミクが取得できる方法があればいいんですけどね。。

次回は、そんなもしもの仕様変更にも負けないための一策として、ページ送りでマイミク一覧を表示する方法をご紹介します。

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

前回は、ユーザのプロフィール情報の取得方法についてご紹介しました。
さまざまな種類のプロフィール情報を取得することによって、mixiアプリの作成の幅が広がったかと思います。

前回までは「Owner」または「Viewer」単体のプロフィール情報の取得についてご紹介しておりましたが、その他、mixiアプリではそのマイミクのプロフィール情報も取得することができます。
今回はその方法についてご紹介してみたいと思います。

まずは以下にサンプルとして、マイミクの名前を一覧を表示するmixiアプリのサンプルコードを記述します。
こちらも、mixi Developer Center上に公開されているサンプルを参考にしています。

<?xml version=”1.0″ encoding=”UTF-8″ ?>
<Module>
<ModulePrefs title=”マイミク一覧”>
<Require feature=”opensocial-0.8″/>
</ModulePrefs>

<Content type=”html”>
<![CDATA[

<div id="friends"></div>

<script type="text/javascript">// <![CDATA[
var params = {};
params[opensocial.IdSpec.Field.USER_ID] = opensocial.IdSpec.PersonId.OWNER;
params[opensocial.IdSpec.Field.GROUP_ID] = “FRIENDS”;
var idSpec = opensocial.newIdSpec(params);

var req = opensocial.newDataRequest();
req.add(req.newFetchPeopleRequest(idSpec), “friends”);
req.send(function(data) {
output = “”;
if (data.hadError()) {
var msg = data.getErrorMessage();
output += msg // エラー時は、とりあえずエラーメッセージをそのまま表示させる
} else {
var friends = data.get(“friends”).getData();

friends.each(function(friend) {
var id = friend.getId();
var name = friend.getDisplayName();

output += name + ‘<br />’;
});
}
document.getElementById(‘friends’).innerHTML = output;
});

</script>

]]>
</Content>
</Module>

マイミク情報を扱う際は、opensocial.IdSpec オブジェクトを使用します。
これにより、以下の 3 つの条件を指定することができます。

• USER_ID – 基準となるユーザのID
• GROUP_ID – ユーザ間の関係
• NETWORK_DISTANCE – 基準ユーザからの関係の距離

mixiアプリでは、GROUP_IDに「SELF(USER_IDで指定されたユーザ自身)」または「FRIENDS（マイミク）」を指定することができます。
また、NETWORK_DISTANCE は、mixiでいうと 1 でマイミク、2 でマイミクのマイミクを示しますが、mixiアプリで取得可能なものはマイミクの一覧ですので、NETWORK_DISTANCE は常に 1 となります。

マイミク情報は、newFetchPeopleRequest() 関数を呼び出して取得します。
単体のプロフィール情報を取得する際は newFetchPersonRequest() で「Person」でしたが、マイミク情報の場合は「People」と複数形ですね。
「People」になっても、この関数で取得可能な情報は同じです。

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

この 3 種類でしたね。

DataRequest オブジェクトの主な使い方は newFetchPersonRequest() 関数の場合と同じなので、マイミク情報を取得するからといって特に難しくなるようなことはありません。
但し、取得結果が複数になるので、取得後はそれに応じた処理を行うことになります。

さて、早速アプリを作成し、mixi上でマイミクの名前が一覧表示されるのをしてみましたか？
もしかしたら、マイミク一覧のはずなのにちょっと少ないな・・・とお気付きになられたかたがいらっしゃるかもしれません。
そう、実はデフォルトでは、マイミク情報は 20 件しか表示されないんです！

そんなわけで、次回はその解決方法として、一覧表示やページ送り処理方法についてご紹介したいと思います。

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

前回は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.