はじめての mixi アプリ

IE ではたぶん動きません。

友達一覧取得

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="simple mixi Appli">
    <Require feature="opensocial-0.8"/>
  </ModulePrefs>
  <Content type="html">
  <![CDATA[
        <script type="text/javacript">
                var req = opensocial.newDataRequest();
                req.add(req.newFetchPeopleRequest(opensocial.newIdSpec({ userId: 'OWNER', groupId: 'FRIENDS' }), { max: 1000 }), 'friends');
                req.send(function(res) { document.body.innerHTML = res.get('friends').getData().asArray().map(function(p) { return p.getDisplayName() }); });
        </script>
  ]]>
  </Content>
</Module>

友達エクスプローラ

次々にクリックして友達を探索

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="simple mixi Appli">
    <Require feature="opensocial-0.8"/>
  </ModulePrefs>
  <Content type="html">
  <![CDATA[
        <script type="text/javacript">
            var body = document.body;
            (function getFriends(id) {
                var req = opensocial.newDataRequest();
                req.add(req.newFetchPeopleRequest(opensocial.newIdSpec({ userId: id, groupId: 'FRIENDS' }), { max: 1000 }), 'friends');
                req.send(function(res) {
                    body.innerHTML = '';
                    res.get('friends').getData().each(function(p) {
                        var a = document.createElement('a');
                        a.appendChild(document.createTextNode(p.getDisplayName()));
                        a.href = 'javascript:void(0)';
                        a.onclick = function() { getFriends(p.getId()) };
                        a.style.display = 'block';
                        body.appendChild(a);
                    });
                });
            })("OWNER")
        </script>
  ]]>
  </Content>
</Module>

JSDeferred を導入する

非同期処理が多いから。 id:cho45 に感謝

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="simple mixi Appli">
    <Require feature="opensocial-0.8"/>
  </ModulePrefs>
  <Content type="html">
  <![CDATA[
<script type="text/javacript">
/* ... ここに JSDeferred をコピペ ... */
</script>
<script type="text/javacript">

Deferred.define();

function reqPerson() {
    var d = new Deferred();
    var req = opensocial.newDataRequest();
    for (var i = 0; i < arguments.length; i ++) {
        req.add(req.newFetchPersonRequest(arguments[i]), i);
    }
    var length = arguments.length;
    req.send(function(p) {
        var array = []
        for (var i = 0; i < length; i ++) array.push(p.get(i).getData());
        d.call.apply(d, array); 
    });
    return d;
}

reqPerson('OWNER', 'VIEWER').
next(function (owner, viewer) {
    document.body.innerHTML = owner.getField('nickname') + ' x ' + owner.getField('nickname');
}).
error(function(e) {
    console.log(e);
});

</script>
  ]]>
  </Content>
</Module>

アプリ貼った人と通りすがりの人の共通の友達一覧を取得

function reqPeople() {
    var d = new Deferred();
    var req = opensocial.newDataRequest();
    for (var i = 0; i < arguments.length; i ++) {
        req.add(req.newFetchPeopleRequest(opensocial.newIdSpec({ userId: arguments[i][0], groupId: arguments[i][1] }), arguments[i][2]), i);
    }
    var length = arguments.length;
    req.send(function(p) {
        var array = []
        for (var i = 0; i < length; i ++) array.push(p.get(i).getData().asArray());
        console.log(array);
        d.call(array); 
    });
    return d;
}

reqPeople(['OWNER', 'FRIENDS', { max: 1000 }], ['VIEWER', 'FRIENDS', { max: 1000 }]).
next(function (array) {
    var owners = array[0];
    var viewers = array[1];
    var seen = { };
    owners.forEach(function(p) { seen[p.getId()] = true });
    var commons = [];
    viewers.forEach(function(p) { if (p.getId() in seen) commons.push(p) });
    var body = document.body;
    commons.forEach(function(p) {
        var a = document.createElement('a');
        a.href = p.getField('profileUrl');
        a.textContent = p.getDisplayName();
        a.style.display = 'block';
        body.appendChild(a);
    });
}).
error(function(e) {
    console.log(e);
});

出力されたページによって見栄えを買える

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="simple mixi Appli">
    <Require feature="opensocial-0.8"/>
  </ModulePrefs>
  <Content type="html" view="profile">
  <![CDATA[ show_profile.pl, show_friend.pl  ]]>
  </Content>
  <Content type="html" view="canvas">
  <![CDATA[ run_appli.pl ]]>
  </Content>
  <Content type="html" view="home">
  <![CDATA[ home.pl ]]>
  </Content>
</Module>