mixiアプリを作ってみた、その２（マイミクのマイミクまでを含めた一覧表示）

前回、マイミクのマイミクまでを含めた一覧を表示するmixiアプリを作ってみたもののAPIの動きが安定してない感じで取得できない不具合が続いてましたが、先日mixi側が対応したらしくマイミク一覧を取得できるよーになってました。

で、動かしてみた様子が↓こんな感じ。

プライバシーの関係でモザイクだらけだけなのは勘弁。m(_ _)m

チャンとニックネームやプロフィール画面へのリンクも取得できてて動作するっぽい。
ただ、1回に取得できるのは20人までとなっている模様。

で、調べてみるとnewFetchPeopleRequestにオプションのMAXを指定しないとデフォルトの20が適用されちゃうらしい。

で、改良してみたコードが↓こんな感じ。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="FriendList">
    <Require feature="opensocial-0.8"/>
  </ModulePrefs>
  <Content type="html" preferred_height="400"><![CDATA[

<STYLE type="text/css">
.fixinline {
    display:-moz-inline-box;
    -moz-box-align: center;
    display: inline-block;
    vertical-align: middle;
    width:90px;
}
.thumimg {
    margin: 5px;
    vertical-align: middle;
}
</STYLE>

<div id="friendlist">
</div>

<script type="text/javascript">

//マイミク一覧の表示
gadgets.util.registerOnLoadHandler(function () {
    try {
        //アプリを組み込んだオーナーのマイミクから取得開始
        get_friends(opensocial.IdSpec.PersonId.OWNER,1,"friendlist");
    } catch(e) {
        element.innerHTML = element.innerHTML + "error!:" + e.description + "<br>";
    }
});

function get_friends(pId,level,elementId) {
   
    //マイミク一覧の表示要素を設定
    var element = document.getElementById(elementId);
   
    //opensocial.DataRequestオブジェクトを生成
    var request = opensocial.newDataRequest();
   
    //取得元となる人と取得内容がマイミクである事を指定
    var param = {};
    param[opensocial.IdSpec.Field.USER_ID] = pId;
    param[opensocial.IdSpec.Field.GROUP_ID] = "FRIENDS";
    var friends = opensocial.newIdSpec(param);
   
    //フェッチする際のオプションを指定
    var fetchOpt = {};
    fetchOpt[opensocial.DataRequest.PeopleRequestFields.MAX ] = 1000;
    fetchOpt[opensocial.DataRequest.PeopleRequestFields.SORT_ORDER] = opensocial.DataRequest.SortOrder.NAME;
   
    //マイミクを取得
    request.add(request.newFetchPeopleRequest(friends,fetchOpt), "friends_data");
    request.send(function (response) {
        var item = response.get("friends_data");
        if (item.hadError()) {
            // エラー処理
            element.innerHTML = element.innerHTML + "error!:" + item.getErrorMessage() + "<br>";
            return;
        }
       
        //マイミクのコレクションを返す
        var people = item.getData();
       
        //デバッグ用表示
        if (window.console) console.log("マイミクの全体数：" + people.getTotalSize());
        if (window.console) console.log("マイミクの取得数：" + people.size());
        if (window.console) console.log("階層　　　　　　：" + level);
        if (window.console) console.log("要素ID　　　　　：" + elementId);
        if (window.console) console.log(people);
       
        //マイミクの表示処理
        var fcnt = 0;
        if (people.size() > 0) {
            people.each(function (person) {
                //IDの取得
                var gid = person.getId();
                //ニックネームの取得
                var nickname = person.getDisplayName();
                //プロフィールURLの取得
                var prourl = person.getField(opensocial.Person.Field.PROFILE_URL);
                //サムネイルURLの取得
                var thumurl = person.getField(opensocial.Person.Field.THUMBNAIL_URL);
                               
                if (level == 1) {
                    //マイミク一覧の生成（マイミク用）
                    fcnt = fcnt + 1 ;
                    var ol = document.createElement('ol');
                    ol.id = "fid" + gid;
                    var div = document.createElement('div');
                    if (fcnt%2 == 0) {
                        div.style.backgroundColor = '#FFFFFF';
                    } else {
                        div.style.backgroundColor = '#FFF8E9';
                    }
                    div.innerHTML = "<span class='fixinline'><img src='" + thumurl + "' class='thumimg'></span><b><a href='" + prourl + "' target='_blank'>" + nickname + "</a></b>";
                    div.appendChild(ol);
                    element.appendChild(div);
                   
                    //マイミクのマイミクを取得
                    get_friends(gid,2,ol.id);
                } else {
                    //マイミク一覧の生成（マイミクのマイミク用）
                    var li = document.createElement('li');
                    li.innerHTML = "<span class='fixinline'><img src='" + thumurl + "' class='thumimg'></span><a href='" + prourl + "' target='_blank'>" + nickname + "</a>";
                    element.appendChild(li);
                }
            });
        } else {
            element.innerHTML = element.innerHTML + "友達いないよ・・・(´・ω・`)";
        }
    });
}
</script>

]]></Content>
</Module>

一応、並びを一定にするためにSORT_ORDERを指定して名前で並ぶよーにしているけど・・・ニックネーム表示じゃ、あんまり意味が無いかもね。（＾＾；A

あと、再帰処理の実装がかなり泥臭いですが気にしないで下さい。（￣▽￣；A

ちなみにプロフィール画像のサムネイルのサイズが揃ってないために、ニックネームの表示開始位置が揃わない事を防ぐため、ココに記載されているCSSテクニックの「インライン要素に固定幅を与える」を利用しています。

インディーズアプリとして下記URLで公開していますので、興味のある方は試してみてください。
http://platform001.mixi.jp/view_appli.pl?id=1377

【2009.06.02追記】

この後、数回改良を加えてます。その詳細はコチラです。