【誌面連動サンプルコード集】OpenSocial Web&モバイル開発入門

本特集のPart7では、PC版のmixiアプリを例に、サクッとOpenSocialアプリを作る方法を説明しています(執筆: 荻野淳也 空飛ぶ株式会社)

本章のサポートページはこちら。

本誌の該当ページはp68から。

fig.1

<?xml version="1.0" encoding="UTF-8" ?>
    <Module>
        <ModulePrefs title="Hello" description="はじめて作ったmixiアプリです"></ModulePrefs>
        <Content type="html" view="canvas">
            <![CDATA[
                <h1>Hello!</h1>
            ]]>
        </Content>
    </Module>

fig.2

<?xml version="1.0" encoding="UTF-8" ?>
    <Module>
        <ModulePrefs title="Hello 2" description="ユーザ情報の使用サンプル">
            <Require feature="opensocial-0.8"/>
        </ModulePrefs>
        <Content type="html" view="canvas">
        <![CDATA[
            <script type="text/javascript">
                function request() {
                    var req = opensocial.newDataRequest();
                    req.add(req.newFetchPersonRequest("OWNER"), "owner_data");
                    req.send(response);
                }

                function response(dataResponse) {
                    var owner = dataResponse.get("owner_data").getData();
                    var name = owner.getDisplayName();

                    document.getElementById('nickname').innerHTML = name;
                }
              gadgets.util.registerOnLoadHandler(request);
            </script>

            <h1>Hello! <span id="nickname"></span>さん!</h1>
        ]]>
        </Content>
    </Module>

fig.3

function get_friends(owner) {
    var request = opensocial.newDataRequest();
    var param = {};
    param[opensocial.IdSpec.Field.USER_ID] = opensocial.IdSpec.PersonId.OWNER;
    param[opensocial.IdSpec.Field.GROUP_ID] = "FRIENDS";

    var owner_friends = opensocial.newIdSpec(param);

    request.add(request.newFetchPeopleRequest(owner_friends), "friends_data");
    request.send(function (response) {
        var item = response.get("friends_data");

        var html = '';
        var people = item.getData();
        people.each(function (person) {
            var nickname = person.getDisplayName();
            var icon     = person.getField(opensocial.Person.Field.THUMBNAIL_URL);
            var url      = person.getField(opensocial.Person.Field.PROFILE_URL);

            var href = '<a href="' + url + '" target="_top">'
                + '<img src="' + icon + '" border="0" width="16" height="16" />'
                + nickname + '</a>'
            html += href + '<br />';

        });
        document.getElementById('dispbody').innerHTML = html;
    });
};

function initialize() {
    var request = opensocial.newDataRequest();
    request.add(request.newFetchPersonRequest(opensocial.IdSpec.PersonId.OWNER), "owner");

    request.send(function(res) {
        var owner = res.get("owner").getData();
        var name = owner.getDisplayName();
    document.getElementById('nickname').innerHTML = name;
        get_friends(owner);
    });
};

gadgets.util.registerOnLoadHandler(initialize);
-->
</script>

<h1>Hello! <span id="nickname"></span>さん!</h1>
<div id="dispbody">
  <span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
</div>

fig.4

        var owner_friends = opensocial.newIdSpec(param);
        var dp = {};
        dp[opensocial.DataRequest.PeopleRequestFields.MAX] = 1000;
        dp[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] = [
            opensocial.Person.Field.PROFILE_URL,
            opensocial.Person.Field.ADDRESSES,
            opensocial.Person.Field.AGE,
        ];

        request.add(request.newFetchPeopleRequest(owner_friends, dp), "friends_data");

fig.5

            var nickname = person.getDisplayName();
            var icon     = person.getField(opensocial.Person.Field.THUMBNAIL_URL);
            var url      = person.getField(opensocial.Person.Field.PROFILE_URL);
            var age      = person.getField(opensocial.Person.Field.AGE);

            var href = '<a href="' + url + '" target="_top">'
                    + '<img src="' + icon + '" border="0" width="16" height="16" />'
                    + nickname + '</a>'
            var line = href + ', ' + age + '<br />';

fig.6

function get_friends(owner) {
    var request = opensocial.newDataRequest();
    var param = {};
    param[opensocial.IdSpec.Field.USER_ID] = opensocial.IdSpec.PersonId.OWNER;
    param[opensocial.IdSpec.Field.GROUP_ID] = "FRIENDS";

    var owner_friends = opensocial.newIdSpec(param);
    var dp = {};
    dp[opensocial.DataRequest.PeopleRequestFields.MAX] = 1000;
    dp[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] = [
        opensocial.Person.Field.PROFILE_URL,
        opensocial.Person.Field.ADDRESSES,
        opensocial.Person.Field.AGE,
    ];
    request.add(request.newFetchPeopleRequest(owner_friends, dp), "friends_data");
    request.send(function (response) {
    var item = response.get("friends_data");

    var owner_age = parseInt(owner.getField(opensocial.Person.Field.AGE));
    var html1 = '<p>年上なひとたち</p>';
    var html2 = '<p>同い年なひとたち</p>';
    var html3 = '<p>年下なひとたち</p>';
    var age_total = 0;
    var num_koukai = 0;
    var num_hikoukai = 0;

    var people = item.getData();
    people.each(function (person) {
        var nickname = person.getDisplayName();
        var icon     = person.getField(opensocial.Person.Field.THUMBNAIL_URL);
        var url      = person.getField(opensocial.Person.Field.PROFILE_URL);
        var age      = person.getField(opensocial.Person.Field.AGE);

        if (age != undefined) {
            var friend_age = parseInt(age);

            var href = '<a href="' + url + '" target="_top">'
                + '<img src="' + icon + '" border="0" width="16" height="16" />'
                + nickname + '</a>'
            var line = href + ', ' + age + '<br />';

            if (owner_age < friend_age) {
                html1 += line;
            }
            else if (owner_age == friend_age) {
                html2 += line;
            }
            else if (owner_age > friend_age) {
                html3 += line;
            }
            else {
                // ?

fig.7

  <Content type="html" view="profile,home">
    <![CDATA[ 
    <script type="text/javascript"><!--

    function initialize() {
        var request = opensocial.newDataRequest();
        request.add(request.newFetchPersonRequest(opensocial.IdSpec.PersonId.OWNER), "owner");
        var dp = {};
        dp[opensocial.DataRequest.PeopleRequestFields.MAX] = 1000;
        dp[opensocial.DataRequest.PeopleRequestFields.PROFILE_DETAILS] = [
            opensocial.Person.Field.AGE,
        ];
        var ip = {};
        ip[opensocial.IdSpec.Field.USER_ID] = opensocial.IdSpec.PersonId.OWNER;
        ip[opensocial.IdSpec.Field.GROUP_ID] = "FRIENDS";
        var spec = opensocial.newIdSpec(ip);
        request.add(request.newFetchPeopleRequest(spec, dp), "friends");
        request.send(function(res) {
            var owner = res.get("owner").getData();
            var friends = res.get("friends").getData();
            document.getElementById('owner_name').innerHTML = owner.getDisplayName();
            document.getElementById('age_mean').innerHTML = age_mean(friends);
        });
    }

    function age_mean(people) {
        var age_total = 0;
        var num_koukai = 0;
        people.each(function (person) {
            var age      = person.getField(opensocial.Person.Field.AGE);

            if (age != undefined) {
                var friend_age = parseInt(age);
                age_total += friend_age;
                num_koukai++;
            }
        });
        return num_koukai != 0 ? age_total / num_koukai : '不明';
    }

    gadgets.util.registerOnLoadHandler(initialize);
-->
    </script>
    <div>
        <span id="owner_name" style="font-size:large;font-weight:bold;">???</span>さんのマイミクの平均年齢は、<span id="age_mean" style="font-size:large;font-weight:bold;">??.??</span>才のようです。
    </div>
    ]]>
  </Content>