［Flex裏技集］クッキー保存、SWF通信、JavaScript連携：現場で使えるFlex実践テクニック（6）（1/2 ページ）

» 2007年12月14日 00時00分公開

[成瀬勉，クラスメソッド株式会社]

FlashPlayerの機能を超えろ！

　Flexの実行環境であるFlashPlayerには、FlashPlayerの外部との連携のための機構が備わっています。状況に応じて利用することで、FlashPlayerの機能を超えた範囲までFlexアプリケーションの利用シーンを広げることができるでしょう。

クッキーのようにローカルにデータを保存SharedObject

　SharedObjectを用いると、Webブラウザのクッキーのようにクライアントのマシン上にデータを保存できます。そのため、SharedObjectを利用して、ユーザーが一度入力した情報を次回ユーザーがアクセスしたときに再び表示するなどといったことを、サーバの技術を使用せずに行うことができます。

■ 訪問回数をカウントするサンプル

　サンプルでは、リロードするたびに訪問回数をカウントするアプリケーションを紹介します。

サンプル1　

SharedObjectSample.mxml

<?xml version="1.0" encoding="utf-8"?>

              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 

                layout="vertical"
            creationComplete="countUp()">

            

    <mx:Script>

    <![CDATA[

    [Bindable]

    private var count:int = 0;



    private function countUp():void{



        var so:SharedObject = SharedObject.getLocal("Counter");



        if(!so.data.counter){

            so.data.counter = 0;

        }

        count = ++so.data.counter;

        so.flush();

    }

]]>

</mx:Script>



    <mx:Label text="{count}回です" />

</mx:Application>

　SharedObject.getLocal（名前）とすることで、SharedObjectのインスタンスを取得します。初回にはデータファイルがローカル上に作成されます。SharedObjectは実行されているSWFのドメインごとにアクセス制御されます。

　永続化したいデータをdataプロパティの内部に格納し、flush()メソッドを実行することで、書き込みが行われます。データを消去するにはclear()メソッドを使用します。

■ SharedObject使用時の注意点

　SharedObjectの使用に際して注意する点があります。ローカルの領域としてSharedObjectが使用できる容量はデフォルトで100Kbytesですが、ユーザー側で0Kbyte（なし）～無制限まで設定することができますので、必ずしも有効であるとは限りません。必要な場合はユーザーに設定を促すか、SharedObjectはあくまでも補助的な利用にとどめるのがいいでしょう。

　容量を変更するには、FlashPlayer上で右クリックして表示される［設定］メニューを選択して開く、［Adobe Flash Player設定］ウィンドウから［ローカル記憶領域］のスライダーを調節します。

図1　FlashPlayer上で右クリック

図2　［Adobe Flash Player設定］ウィンドウ

SWF同士での通信LocalConnection

　LocalConnectionを用いると、同一のクライアントマシン上で動作している複数のSWF間で通信ができます。LocalConnectionを使用するには、送信用と受信用のSWFを作成し、それぞれ処理を記述する必要があります。

　以下は、テキストインプットに入力した文字を別のSWFに渡すサンプルです。

サンプル2　受信側

サンプル3　送信側

　受信用をReceiverSample.mxml、送信用をSenderSample.mxmlとします。

■ 受信側の操作

ReceiverSample.mxml

<?xml version="1.0" encoding="utf-8"?>

              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

                layout="vertical"
            creationComplete="receiveLC()">

    <mx:Script>

    <![CDATA[



    private var lc:LocalConnection;



    private function receiveLC():void{

        lc = new LocalConnection();

        lc.client = this;

        lc.connect("LCSample");

    }

    public function sampleMethod(prop:Array):void{

        receiveLabel.text = prop.toString();

    }



    ]]>

    </mx:Script>



    <mx:Label id="receiveLabel" />

</mx:Application>

　受信側では、LocalConnectionを待ち受け状態にするために、connect()メソッドでコネクション名を指定します。

　また、LocalConnectionを通じて実行されるメソッドを用意します。サンプルでは、sampleMethod(prop:Array):voidとします。引数は配列で渡されます。

　LocalConnectionを通じて実行されるメソッドを実装しているオブジェクトをclientに指定します。今回は、ReceiverSampleにsampleMethodを定義しましたので、clientにはthisを指定しています。

■ 送信側の操作

SenderSample.mxml

<?xml version="1.0" encoding="utf-8"?>

              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 

                 layout="vertical">

    <mx:Script>

    <![CDATA[



    private function sendLC():void{

        var lc:LocalConnection = new LocalConnection();

        lc.send("LCSample", "sampleMethod", [textInput.text]);

    }



    ]]>

    </mx:Script>



    <mx:TextInput id="textInput" />

    <mx:Button click="sendLC()" />

</mx:Application>