OpenLaszloでmixiアプリの開発

第5回

mixiアプリの開発

　それでは環境が整ったところでmixiアプリを開発していきましょう。

　mixiでアプリを登録する際は、mixiアプリ（OpenLaszloで作成）の他に「ガジェットXML」が必要になります。ガジェットXMLには、ガジェットXMLを設置するURLと、mixiアプリのURLを指定しておきます。

オーナーの情報を取得

　flixiを利用すれば、オーナーの名前、ニックネーム、誕生日などを簡単に取得できます。なお、ここで言うオーナーとは、mixiアプリを登録した人を指します。

サンプルソース

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false">

  <view x="10">
    <text resize="true" text="固有の値:"/>
    <text id="txtID" x="130" resize ="true" fontstyle="bold"/>
  </view>
  <view x="10">
    <text resize="true" text="名前:"/>
    <text id="txtName" x="130" resize="true" fontstyle="bold"/>
  </view>
  <view x="10">
    <text resize="true" text="ニックネーム:"/>
    <text id="txtNickname" x="130" resize="true" fontstyle="bold"/>
  </view>
  <view x="10">
    <text resize="true" text="サムネイル画像のURL:"/>
    <text id="txtThumbnailURL" x="130" resize="true" fontstyle="bold"/>
  </view>
  <view x="10">
    <text resize="true" text="プロフィール画面のURL:"/>
    <text id="txtProfileURL" x="130" resize="true" fontstyle="bold"/>
  </view>
  <view x="10">
    <text resize="true" text="年齢:"/>
    <text id="txtAge" x="130" resize="true" fontstyle="bold"/>
  </view>
  <view x="10">
    <text resize="true" text="誕生日:"/>
    <text id="txtBirthDate" x="130" resize="true" fontstyle="bold"/>
  </view>
  <view x="10">
    <text resize="true" text="住所:"/>
    <text id="txtAddress" x="130" resize="true" fontstyle="bold"/>
  </view>
  <view x="10">
    <text resize="true" text="血液型:"/>
    <text id="txtBloodType" x="130" resize="true" fontstyle="bold"/>
  </view>

  <simplelayout axis="y" spacing="2" inset="10"/>

  <method name="init">
  <![CDATA[
    super.init();

    #passthrough {
      //flixiをインポートする
      import flixi.*;
    }#

    //flixiオブジェクトの生成する
    var v_flixi = new flixi.flixi();

    //flixiPersonEvent.GET_OWNERイベントのハンドラの作成
    v_flixi.addEventListener(
    flixi.flixiPersonEvent.GET_OWNER,
      function(p) {
        txtID.setAttribute('text', p.person.id); //固有の値
        txtName.setAttribute('text', p.person.name); //名前
        txtNickname.setAttribute('text', p.person.nickname); //ニックネーム
        txtThumbnailURL.setAttribute('text', p.person.thumbnailURL); //サムネイル画像のURL
        txtProfileURL.setAttribute('text', p.person.profileURL); //プロフィール画面のURL
        txtAge.setAttribute('text', p.person.age); //年齢
        txtBirthDate.setAttribute('text', p.person.birthDate); //誕生日
        txtAddress.setAttribute('text', p.person.address); //住所
        txtBloodType.setAttribute('text', p.person.bloodType); //血液型
      }
    );

    //オーナー情報はflixiPersonEvent.GET_OWNERイベントで取得する
    v_flixi.getOwner();
  ]]>
  </method>

</canvas>

　ガジェットXMLは以下のようになります。

ガジェットXML

<?xml version="1.0" encoding="UTF-8" ?>
<Module>

  <ModulePrefs title="テストアプリ">
    <Require feature="flash" />
    <Require feature="opensocial-0.8"/>
  </ModulePrefs>

  <Content type="html" view="canvas">
  <![CDATA[
    <script type="text/javascript">
    gadgets.util.registerOnLoadHandler(
      function () {
        //ガジェットXMLを設置するURLを指定します。
        var path = "http://xxx.xxx.xxx/mixitest/";
        //作成したmixiアプリのURLを指定します。
        var swf  = "http://xxx.xxx.xxx/mixitest/mixiApp.swf"

        function load() {
          loadFlash(swf, "600", "600");
        }
        var sc = document.createElement('script');
        sc.type = 'text/javascript';
        if (window.ActiveXObject) {
          sc.onreadystatechange = function() {
            if (sc.readyState == 'complete') 
              load();
            if (sc.readyState == 'loaded') 
              load();
          }
        } else {
          sc.onload = function() {
            load();
          }
        }
        sc.src = path + "flashConnector.js";
        document.body.appendChild(sc);
      }
    );
    </script>
  ]]>
  </Content>

</Module>

サンプルソースを実行した結果