簡単にFlashでmixiデータにアクセスする方法

mixiアプリ


mixiアプリが公式に公開されました。
せっかくなので開発に役に立ちそうなサンプルプログラムを作成しました。
flixiというライブラリを使用すると

  • オーナー
  • マイミク
  • コミュニティ

これからの情報をFlashのActionScriptで

fx = new flixi();
fx.addEventListener( flixiPersonEvent.GET_OWNER               , onGetPerson    );
fx.addEventListener( flixiPeopleEvent.GET_OWNERS_PEOPLE       , onGetPeople    );
fx.addEventListener( flixiCommunityEvent.GET_OWNERS_COMMUNITY , onGetCommunity );
fx.getOwner();
fx.getOwnersPeople();
fx.getOwnersCommunity();

と書くだけで簡単に取得することができます。
サンプルページはこちら
http://mixi.jp/run_appli.pl?id=7077
#IE6はちょっと表示されないのでもちっと待っててください汗

flixiの設置方法

まずはライブラリのダウンロード
flixiコミュのflixi パッケージからダウンロード
次にダウンロードして解凍して得られる opensocial_xml フォルダの中の flashConnector.js を自分のサーバーにアップロードして設置。
これがFlashとjsが連携してFlashから簡単に情報を取得できるようになります。
ガジェットxmlの設定。とりあえず という大きい表示ページのみ。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="moetenMixiTest">
  <Require feature="flash" />
  <Require feature="opensocial-0.8"/>
</ModulePrefs>
<Content type="html" view="canvas">
<![CDATA[
<script type="text/javascript">
gadgets.util.registerOnLoadHandler(
  function () {
    var path   = "http://hogehoge/";//flashConnector.jsを置いたディレクトリ
    var date   = new Date();
    var swf    = "http://hogehoge/mixiapp.swf?" + date.getTime();//swfファイルの位置
    var width  = "940";
    var height = "500";
    function load(){
      loadFlash( swf , width , height );
    }
    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>

このガジェットxmlのURLをmixi側に教えてあげれば
http://hogehoge/mixiapp.swf が動作します。キャッシュ関係で再読み込みでは表示されない場合があるので、何度かブラウザの戻るや進むで表示させてみるといいと思います。
Flexのソースコードはこちら

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
    horizontalAlign="left" creationComplete="init()"
    backgroundColor="0xffffff" width="940" height="500">
<mx:Script>
<![CDATA[
import flixi.*;
private var fx:flixi;
private function init():void{
    fx = new flixi();
    fx.addEventListener( flixiPersonEvent.GET_OWNER               , onGetPerson    );
    fx.addEventListener( flixiPeopleEvent.GET_OWNERS_PEOPLE       , onGetPeople    );
    fx.addEventListener( flixiCommunityEvent.GET_OWNERS_COMMUNITY , onGetCommunity );
    fx.getOwner();
    fx.getOwnersPeople();
    fx.getOwnersCommunity();
}
private function onGetPerson(iEvent: flixiPersonEvent): void{
    dg1.dataProvider = iEvent.person;
}
private function onGetPeople(iEvent: flixiPeopleEvent): void{
    var personArr:Array = new Array();
    for (var i: int = 0; i < iEvent.length; i++) {
        personArr.push( iEvent.getItemByIndex(i) );
    }
    dg2.dataProvider = personArr;
}
private function onGetCommunity(iEvent: flixiCommunityEvent): void{
    var communityArr:Array = new Array();
    for (var i: int = 0; i < iEvent.length; i++) {
        communityArr.push( iEvent.getItemByIndex(i) );
    }
    dg3.dataProvider = communityArr;
}
]]>
</mx:Script>
<mx:Text text="オーナー情報(getOwner())"/>
<mx:DataGrid id="dg1" y="10" x="10" height="50" rowCount="1" width="100%">
    <mx:columns>
        <mx:DataGridColumn>
            <mx:itemRenderer>
                <mx:Component>
                    <mx:Image source="{data.thumbnailURL}"/>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
        <mx:DataGridColumn headerText="isOwner"      dataField="isOwner"/>
        <mx:DataGridColumn headerText="isViewer"     dataField="isViewer"/>
        <mx:DataGridColumn headerText="hasApp"       dataField="hasApp"/>
        <mx:DataGridColumn headerText="name"         dataField="name"/>
        <mx:DataGridColumn headerText="nickname"     dataField="nickname"/>
        <mx:DataGridColumn headerText="id"           dataField="id"/>
        <mx:DataGridColumn headerText="thumbnailURL" dataField="thumbnailURL"/>
        <mx:DataGridColumn headerText="profileURL"   dataField="profileURL"/>
        <mx:DataGridColumn headerText="age"          dataField="age"/>
        <mx:DataGridColumn headerText="birthDate"    dataField="birthDate"/>
        <mx:DataGridColumn headerText="address"      dataField="address"/>
        <mx:DataGridColumn headerText="gender"       dataField="gender"/>
        <mx:DataGridColumn headerText="bloodType"    dataField="bloodType"/>
    </mx:columns>
</mx:DataGrid>
<mx:Text text="マイミク情報(getOwnersPeople())"/>
<mx:DataGrid id="dg2" y="68" x="10" height="171" width="100%">
    <mx:columns>
        <mx:DataGridColumn>
            <mx:itemRenderer>
                <mx:Component>
                    <mx:Image source="{data.thumbnailURL}"/>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
        <mx:DataGridColumn headerText="isOwner"      dataField="isOwner"/>
        <mx:DataGridColumn headerText="isViewer"     dataField="isViewer"/>
        <mx:DataGridColumn headerText="hasApp"       dataField="hasApp"/>
        <mx:DataGridColumn headerText="name"         dataField="name"/>
        <mx:DataGridColumn headerText="nickname"     dataField="nickname"/>
        <mx:DataGridColumn headerText="id"           dataField="id"/>
        <mx:DataGridColumn headerText="thumbnailURL" dataField="thumbnailURL"/>
        <mx:DataGridColumn headerText="profileURL"   dataField="profileURL"/>
        <mx:DataGridColumn headerText="age"          dataField="age"/>
        <mx:DataGridColumn headerText="birthDate"    dataField="birthDate"/>
        <mx:DataGridColumn headerText="address"      dataField="address"/>
        <mx:DataGridColumn headerText="gender"       dataField="gender"/>
        <mx:DataGridColumn headerText="bloodType"    dataField="bloodType"/>
    </mx:columns>
</mx:DataGrid>
<mx:Text text="コミュニティ情報(getOwnersCommunity())"/>
<mx:DataGrid id="dg3" y="310" x="10" height="153" width="100%">
    <mx:columns>
        <mx:DataGridColumn>
            <mx:itemRenderer>
                <mx:Component>
                    <mx:Image source="{data.thumbnailURL}"/>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
        <mx:DataGridColumn headerText="id"       dataField="id"/>
        <mx:DataGridColumn headerText="name"     dataField="name"/>
        <mx:DataGridColumn headerText="isOwner"  dataField="isOwner"/>
        <mx:DataGridColumn headerText="isViewer" dataField="isViewer"/>
    </mx:columns>
</mx:DataGrid>
</mx:Application>