連載
» 2007年12月14日 00時00分 UPDATE

現場で使えるFlex実践テクニック(6):[Flex裏技集]クッキー保存、SWF通信、JavaScript連携 (1/2)

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

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上で右クリック 図1 FlashPlayer上で右クリック
図2 [Adobe Flash Player設定]ウィンドウ 図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>

 送信側では、送信を行いたいタイミングでsend()メソッドを実行します。第1引数には待ち受け状態になっているLocalConnectionのコネクション名を指定し、第2引数には、実行するメソッド名を文字列で指定します。第3引数には、メソッドに渡す引数を配列で指定します。

 続いて次ページでは、FlexからJavaScriptを、JavaScriptからFlexを呼び出すための実践テクニックを解説します。

       1|2 次のページへ

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。