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.