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

クラスメソッド株式会社
成瀬　勉
2007/12/14

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>

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

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

1-2

INDEX
現場で使えるFlex実践テクニック（6） ［Flex裏技集］クッキー保存、SWF通信、JavaScript連携
	Page1 FlashPlayerの機能を超えろ！ クッキーのようにローカルにデータを保存SharedObject SWF同士での通信LocalConnection
	Page2 JavaScriptとの連携を行うExtarnalInterFace 「Flexでこんなこともできるんだ！」r

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）