今回は、AIR/Flex でファイルのアップロード(HTTPのPOST)について書こうと思います。

ファイルアップロードにおけるAIR/FlexとINPUTタグの違い

ファイルのアップロード自体は、わざわざAIR/Flexで行わなくても、HTMLのINPUTタグで可能ですが、AIR/Flexで行うと以下のような利点があります。

1. ブラウザが固まらない

INPUTタグによるファイルアップロードの場合、
アップロードを行っている間、ブラウザは無反応になります。
大きなファイルをアップロードしている場合、特に顕著に発生します。
その時にブラウザ内をクリックするとOSから「応答なし」という判断になることもあります。
AIR/Flexでは、そのようなことは起きません。
また、アップロード中に他の操作を受け付けることもできます。

2. アップロードの進捗が見えやすい

INPUTタグによるファイルアップロードの場合、
アップロードの進捗は見えない、もしくはプログレスバーが動いてはいるが、よくわからない、といった表示になります。
Ajaxを利用して、自作のプログレスバーを表示することもできますが、
クライアント側、サーバ側それぞれに仕組みが必要になります。
AIR/Flexでは、アップロードの進捗をイベントとして受け取ることができるので、クライアント側だけで、自作のプログレスバーを表示することができます。

3. ドラッグアンドドロップ等でファイルを選択できる(AIRのみ)

INPUTタグによるファイルアップロードの場合、
アップロードするファイルを指定する方法は、標準のファイル選択ダイアログのみとなりますが、AIRでは、ファイルパスの指定方法は限定されません。
Flexでは、標準のファイル選択ダイアログのみとなります。

基本的なファイルアップロード

AIR/Flexの場合

AIR/Flexでの基本的なファイルアップロードのサンプルコードです。
以下のように動作します。

1. ボタンをクリックすると、
2. ファイル参照ダイアログが開き、
3. ファイルを選択してOKをクリックすると、
4. ファイルがアップロードされます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="200">
  <mx:Script>
    <![CDATA[
 
    private function onClickBtn1 () : void {
 
      //ファイル参照オブジェクトを準備します
      var file:FileReference = new FileReference();
 
      //ファイル参照ダイアログで、ファイルが選択された場合に発生するイベント
      file.addEventListener(Event.SELECT, function (event:Event):void {
        //アップロードするURLを指定します
        var req:URLRequest = new URLRequest("http://localhost:8080/blogsample/upload.ctrl");
        req.method = URLRequestMethod.POST;
 
        //アップロード終了イベント
        file.addEventListener(Event.COMPLETE, function (event:Event):void{
          trace("complete");
        });
 
        //アップロード実行
        file.upload(req, "file1");
      });
 
      //ファイル参照ダイアログを開く
      file.browse();
    }
 
    ]]>
  </mx:Script>
 
  <mx:Button id="btn1" x="100" y="90" width="100" height="20" label="UPLOAD" click="onClickBtn1()"/>
 
</mx:Application>

Flexでは、flash.net.FileReference クラスを使います。
このクラスだけで、ファイルの選択（ダイアログ表示）とアップロードを行うことができます。

AIRの場合

AIR上では、このクラスだけでなく、flash.filesystem.Fileクラスも利用することができます。
このクラスではファイルパスを指定できるので、ファイル参照ダイアログを開かなくても、アップロードするファイルを指定できます。

これにより、ドラッグアンドドロップ等、様々な方法でアップロードするファイルを指定できます。

AIR上でflash.filesystem.Fileクラスを使用した場合のサンプルです。

以下のように動作します。

1. ボタンをクリックすると、
2. ファイルがアップロードされます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="200">
  <mx:Script>
    <![CDATA[
 
    private function onClickBtn1 () : void {
 
      //ファイルオブジェクトを準備します
      var file:File = new File("c:\\uploadsample.txt");
 
      //アップロードするURLを指定します
      var req:URLRequest = new URLRequest("http://localhost:8080/blogsample/upload.ctrl");
      req.method = URLRequestMethod.POST;
 
      //アップロード終了イベント
      file.addEventListener(Event.COMPLETE, function (event:Event):void{
        trace("complete");
      });
 
      //アップロード実行
      file.upload(req, "file1");
    }
 
    ]]>
  </mx:Script>
 
  <mx:Button id="btn1" x="100" y="90" width="100" height="20" label="UPLOAD" click="onClickBtn1()"/>
 
</mx:WindowedApplication>

アップロード時のパラメータ

ファイルのアップロード時、一緒にリクエストパラメータを送信する場合は、
flash.net.URLVariablesクラスを使用します。

URLVariablesクラスに、リクエストパラメータのキー名をプロパティ名、値をプロパティの値として設定し、URLRequestクラスのdataプロパティに設定することにより、送信できます。

1
2
3
4

var req = new URLRequest();
var param:URLVariables = new URLVariables();
param.hogekey="hogevalue";
req.data = param;

アップロードの進捗の取得

アップロードの進捗度合いは、flash.net.FileReference クラスもしくは、flash.filesystem.Fileクラスのflash.events.ProgressEventから、全体のバイト数(bytesTotal)と現在アップロードしたバイト数(bytesLoaded)を取得できます。

1
2
3
4

file.addEventListener(ProgressEvent.PROGRESS, function (event:ProgressEvent):void {
  trace("bytesTotal=" + event.bytesTotal);
  trace("bytesLoaded=" + event.bytesLoaded);
});

まとめ

以上で、ファイルアップロードに関しては一通り行えると思います。
これを利用して、詳細なプログレスバーが出る、
HTMLでは実現が難しいようなアップローダー等が実現できます。

INPUTタグでのアップロードでは、大きなファイルになればなるほど、
問題が大きく、インタフェースとして使いにくいものですので、
ぜひ活用していきたく思っています。

使用したソフトウェア

あわせて読みたい

• AIR/Flex でドラッグ アンド ドロップ
• リッチなAdobe AIR/Flexのツールチップをよりリッチに

近々新バージョンのニュースリリースをおこなう予定の弊社製品easyFiLEXですが､
僕自身も開発者として本プロジェクトに参加していました｡

今回バージョンアップとなるeasyFiLEXの注目の機能として､
Adobe AIR上で動作するデスクトップアプリからファイルの送信が可能になったことが第一に挙げられます｡

そんな目玉機能の一部を任され､
初めてのデスクトップアプリ､
初めてのAdobe AIR/Flex､
さらに初めてのActionScriptと何から何まで初めてづくしの開発となりました｡

そんな初めてだらけの中で試行錯誤しつつ､
｢これは知ってると便利!!｣と思ったことを紹介しようと思います｡

カスタムツールチップの作成

今回紹介するのはAdobe AIR/Flexのツールチップについてです｡
Adobe Flex リファレンスガイドではツールヒントと呼んでいますが本記事ではツールチップと呼ぶことにします｡

ツールチップそのものをただ使うだけであれば､

1

<mx:Label text="This is Label" toolTip="mx.controls.Label" />

のようにtoolTipプロパティを設定するだけの極々簡単なものです｡

このツールチップは設定した文字列を､
カーソルが重なった時にポップアップして表示するだけのものですが､
以下のように少し複雑なツールチップを表示することも出来ます｡

なんだか少し良い感じに見えますよね。

では､このツールチップをどうやって実装するのか説明したいと思います｡

まずはmx.core.IToolTipインターフェイスをインプリメントしたコンポーネントを作成します｡

PersonToolTip.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="150" height="80"
	alpha=".8" implements="mx.core.IToolTip"
	borderStyle="solid" dropShadowEnabled="true"
	backgroundColor="#FCFCCB">
	<mx:Script>
		<![CDATA[
			import mx.controls.Text;
			[Bindable]
			public var person:Object;
 
			public function get text():String { 
				return null; 
			} 
 
			public function set text(value:String):void {
			}
		]]>
	</mx:Script>	
	<mx:Form paddingTop="5" paddingRight="5" paddingBottom="5" paddingLeft="5">
		<mx:FormItem label="name : ">
			<mx:Label text="{person.name}" />
		</mx:FormItem>
		<mx:FormItem label="age : ">
			<mx:Label text="{person.age}" />
		</mx:FormItem>
		<mx:FormItem label="address : ">
			<mx:Label text="{person.address}" />
		</mx:FormItem>
	</mx:Form>
</mx:HBox>

mx.core.IToolTipをインプリメントしたコンポーネントを作成したら､
そのコンポーネントを使うアプリケーションを作成します｡

Person.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	width="300" height="200">
	<mx:Script>
		<![CDATA[
			import mx.events.ToolTipEvent;
 
			private function toolTipCreateEventHandle(event:ToolTipEvent) : void {
				var toolTip:PersonToolTip = new PersonToolTip();
				toolTip.person = personModel;
				event.toolTip = toolTip;
			}
		]]>
	</mx:Script>
 
	<mx:Model id="personModel">
		<person>
			<name>taro</name>
			<age>20</age>
			<address>Osaka</address>
		</person>
	</mx:Model>
	<mx:Panel title="Person" height="75%" width="75%" paddingTop="10" paddingLeft="10">
		<mx:Label text="{personModel.name}"
			toolTip=" " toolTipCreate="toolTipCreateEventHandle(event)" />
	</mx:Panel>
</mx:WindowedApplication>

この二つのファイルを作成したら後は実行するだけです｡

どうでしたか?
凄く簡単でしたよね?

簡単に動作を説明すると､

1. taroにカーソルを合わせる
2. toolTipプロパティで設定した" "という文字列でツールチップを作成
3. ツールチップが作成される際に投げられるtoolTipCreateイベント処理開始
4. イベントにPersonToolTipコンポーネントを渡す
5. カスタムツールチップ表示

といった具合に処理されています｡

toolTipプロパティに""ではなくて､" "(空白文字)を渡している点に注意してください｡

toolTipプロパティが""では､空文字となるためツールチップが作成されません｡
つまり､toolTipCreateイベントが投げられないのでカスタムツールチップに差し替えることが出来ないのです｡
逆に言ってしまえばtoolTipCreateイベントが投げられれば良いので､"hoge"でも"foo"でも"bar"でも構いません｡

ところで､toolTipCreateイベントの処理の中で
イベント自身であるmx.events.ToolTipEventクラスのtoolTipプロパティにPersonToolTipコンポーネントを渡すだけでツールチップが差し替えられるのは何故なのでしょうか?

mx.core.UIComponentクラス のtoolTipCreateイベントのリファレンスガイドには以下のように書いてあります｡

独自の IToolTip オブジェクトを作成し、それに対する参照をイベントオブジェクトの toolTip プロパティに格納し、これを toolTipCreate ハンドラに渡すと、ToolTipManager によってそのカスタムツールヒントが表示されます。

上記の機能を利用してツールチップをカスタムツールチップに差し替えているわけです｡

ComboBoxとカスタムツールチップを組み合わせてみる

このカスタムツールチップは何かと使えそうなので､
mx.controls.ComboBoxコントロールにこのカスタムツールチップを使用する方法を考えてみました｡

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	width="300" height="200" creationComplete="init()">
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.events.ToolTipEvent;
 
			[Bindable]
			public var persons:ArrayCollection = new ArrayCollection(
				[ {name:"taro", age:20, address:"Osaka"},
				  {name:"hanako", age:18, address:"Tokyo"},
				  {name:"ichiro", age:24, address:"Hukuoka"}
				]);
 
			private function toolTipCreateEventHandle(event:ToolTipEvent) : void {
				var toolTip:PersonToolTip = new PersonToolTip();
				toolTip.person = personsComboBox.selectedItem;
				event.toolTip = toolTip;
			}
		]]>
	</mx:Script>
 
	<mx:Panel title="Persons" height="75%" width="75%" paddingTop="10" paddingLeft="10">
		<mx:ComboBox id="personsComboBox" dataProvider="{persons}" labelField="name"
			toolTip=" " toolTipCreate="toolTipCreateEventHandle(event)" />
	</mx:Panel>
</mx:WindowedApplication>

ただ､これだとComboBox自身のツールチップは表示されるのですが､
ドロップダウンリストでのツールチップが有効にならないのでイマイチ使い勝手はよくありません｡

どうにか実現出来ないかと､

• dropdown.showDataTipsプロパティにtrueを設定
• Listを継承しイベントリスナーにToolTipEvent.TOOL_TIP_CREATEイベントを追加したクラスを作成してdropdownFactoryプロパティに設定
• ItemRollOver､ItemRollOutイベントを駆使

と色々と試行錯誤してみたのですが､どれも上手くいってません｡
上手く実現出来た方がいれば是非教えてください｡

ToolTipManagerクラスにIToolTipインターフェイスの実装クラスを渡したら､
そのままツールチップとして表示してくれるメソッドが用意されていれば簡単だったのですが･･･

まとめ

結局､ComboBoxとの夢の共演は果たせなかったのですが､
このカスタムツールチップは色々な所で使える便利な機能だと思います。

最初から便利なコンポーネントが用意されているAIR/Flex環境ですが､
少しだけ工夫をすることで更に便利なものにすることが出来てしまいます。

今回は紹介出来ませんでしたが､
まだ他にもちょっとしたTipsのような形で紹介出来そうなことも発見しました｡

また次の機会にでも､
ちょっとした工夫を紹介出来たらと思います｡

使用したソフトウェア

参考ドキュメント

• Flex 3 開発ガイド ツールヒントマネージャの使用
• Personalise your information bubbles (ToolTip)

あわせて読みたい

• AIR/Flex でファイルアップロード
• AIR/Flex でドラッグ アンド ドロップ

プロダクト&サービス事業部の笹山です。

今回は、SeleniumRCを用いてWebアプリケーションのテスト中に、Flex部分のみを手動操作し、
その後再び自動テストを継続させる方法について書きたいと思います。

有名なツールなのでみなさんご存知と思いますが、まずSeleniumRCとは、
「Webブラウザの操作を自動化させ、Webアプリケーションの画面表示や画面遷移のテストを行うツール」で
Webアプリケーションのテストには欠かせないツールです。

今回弊社では、easyFiLEXのテストをSeleniumRCを用いて行うことになりました。

easyFiLEXテストでSeleniumRCを使用する際の問題

弊社Tech Blog(05/18)記事にもあるように、easyFiLEXではFlexを採用しています。
easyFiLEXには、Wizard形式の画面があり、その一部画面にFlexが採用されています。

しかし、SeleniumRCは一般的なWebアプリケーションのテストを行うツールで、Flexには対応していません。
そのため、Flexが採用されているWizard形式の１画面がクリアできず、次の画面のテストができないのです。

ここをどう解決するか非常に悩みました。

FlashSelenium発見と挫折

まずは、Google先生に聞いてみました。

すると以下のサイトが検索に引っ掛かりました。

• 「Selenium RCによるFlash用の機能テストの作成と実行」

FlashSeleniumというSeleniumRCとFlexを連携させるツールです。

「これで解決！（Flex部分のテストも自動化できる！）」と思いました。
意気揚揚と公開されているサンプルを動かしはじめましたが、サンプルすら動きませんでした。（動いた方は教えてください。）

• FlashSeleniumのサンプルFlash
• FlashSeleniumのサンプルテストコード

解決方法の発見

途方に暮れselenium-client-driverのJavaDocを眺めていた時、ふと目に入った文字が・・・。

com.thoughtworks.selenium.Wait

便利なクラスがselenium-client-driverに用意されていました。

「条件がtrueになるまで、指定時間待つ」というものです。
easyFiLEXのテストでは以下の手順で使用しました。

手順内の画面は、

Flexが採用されているWizard形式の１画面で、「ファイルのアップロード後、送信先を指定する画面」です。
送信先を指定しない限り、次の画面へ進むことができないようになっています。

1. Flexが採用されている画面までは、SeleniumRCを用いてWizard形式画面の自動テストを行います。
2. Flexが採用されている画面に遷移後、SeleniumRCで送信先を指定せずに「次へ」ボタンを押下させ、バリデーションエラーを発生させます。
   バリデーションエラー：「送信先が選択されていません。1つ以上選択してください。」
   

   easyFiLEX送信先設定画面におけるバリデーションエラー発生時の画面

3. バリデーションエラーが画面上に表示されている間は、指定時間待機させます。（以下コード参照）
4. 待機中にFlex操作を手動で行い、バリデーションエラーが画面上から消えると、再び自動テストが始まります。

Selenium実行途中でWaitをかけるコード

1
2
3
4
5
6
7
8
9

new Wait() {
    public boolean until() {
        if(!selenium.isTextPresent("送信先が選択されていません。1つ以上選択してください。")) {
            return true;
        } else {
            return false;
        }
    }
}.wait("タイムアウト", 60000);

最後に

Flex部分だけは手動操作になってしまいますが、それ以降はスムーズに自動テストできるので現時点ではこの方法でテストを行っています。

時間の都合上、FlashSeleniumについて深く調査はしていませんが、調査をして「このブログに公開できたら・・・」と思っています。

公式サイト

• Selenium公式サイト

あわせて読みたい

SeleniumRCで自己署名証明書使用のWEBアプリケーションをテストする際、セキュリティ警告を表示させない方法

初めての本格的な投稿なのですが、
今回はAdobe AIR/Flexでのドラッグ アンド ドロップについて書こうと思います。

弊社製品にeasyFiLEXというものがあるのですが、
そこで、ドラッグ アンド ドロップがしたいんだ！ という強い要望があり、
Adobe AIR/Flexの技術を利用して実現しました。
いまどきだと、Ajaxでも実現できるのですが、今回はFlexを採用しました。

AIRとFlexそしてブラウザの関係ですが、AIRはローカルマシン上の環境、
FlexはAIR上、もしくはWebブラウザ上のFlash Player(Plugin)で動作します。

Webブラウザ上 →　Flex
AIR 　→　Flex

AIRの上ではFlexではない、通常のHTMLとJavaScriptでも動作します。
Flexを利用すると、Webブラウザ上でもローカルマシン上のAIRでも、
同じ技術でリッチなインタフェースを実現でき、
さらに、最初からドラッグ アンド ドロップがサポートされています。

Flexでは、Flexコンポーネント間のドラッグ アンド ドロップが簡単に実現できます。
しかしeasyFiLEXは、ローカルマシン上にあるファイルをWebアプリであるeasyFiLEXにアップロードして、
他の人とファイルをやり取りする仕組みのアプリケーションです。
ですので、実現したかったのは、ローカルマシンにある(例えばデスクトップにある)ファイルを
ドラッグしてブラウザ上に持って行き、ドロップすると、そのファイルがアップロードされる、
という操作を実現したかったのです。

しかし、ブラウザ上のFlexでは、コンポーネント間のドラッグアンドドロップは簡単にできますが、
ローカルマシン上のオブジェクトからFlexコンポーネント、または逆、といった環境の場合実現できないことがわかりました。
（もしできるのであればぜひ教えてください！ ActiveXであれば実現できるようです）

そこで、AIRの出番です。
ブラウザ上のFlexでは(おそらく)セキュリティ上の関係で、
ローカルマシン上にあるファイルにはアクセスできない仕様になっていると思われますが、
AIRはローカルマシンにインストールして利用するため、この制限がゆるくなっています。
なので、AIR上のFlexでは、Flexコンポーネントとローカルマシン上のオブジェクトの間でドラッグアンドドロップが可能です。

せっかくなので、ドラッグ アンド ドロップを実現するコードを紹介したいと思います。

※対象バージョン/環境
Adobe AIR 1.5.1 SDK
Adobe Flex 3.3.0 SDK

コード全体

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
  applicationComplete="init()">
  <mx:Script>
    <![CDATA[
 
    private function init () : void {
      this.addEventListener(flash.events.NativeDragEvent.NATIVE_DRAG_ENTER, onDragEnter);
      this.addEventListener(flash.events.NativeDragEvent.NATIVE_DRAG_DROP, onDragDrop);
    }
 
    private function onDragEnter (event:flash.events.NativeDragEvent):void {
      if (event.target is InteractiveObject) {
        flash.desktop.NativeDragManager.acceptDragDrop(InteractiveObject(event.target));
      }
    }
 
    private function onDragDrop (event:flash.events.NativeDragEvent):void {
      if(event.clipboard.hasFormat(ClipboardFormats.FILE_LIST_FORMAT)){
        var list:Array = event.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
        for each (var file:flash.filesystem.File in list) {
          trace(file.nativePath);
        }
      }
    }
 
    ]]>
  </mx:Script>
  <mx:Panel width="100%" height="100%" layout="absolute">
  </mx:Panel>
</mx:WindowedApplication>

イベントリスナーの設定

1
2

this.addEventListener(flash.events.NativeDragEvent.NATIVE_DRAG_ENTER, onDragEnter);
this.addEventListener(flash.events.NativeDragEvent.NATIVE_DRAG_DROP, onDragDrop);

まず、2つのイベントリスナーを設定します。
flash.events.NativeDragEvent.NATIVE_DRAG_ENTER が、ドラッグしてきてオブジェクトの境界内に入った時
flash.events.NativeDragEvent.NATIVE_DRAG_DROP が、ドラッグしてきたアイテムをオブジェクトの上で離した時
の2つです。
AIR上とWeb上でまず違うのがここです。
そもそも、flash.events.NativeDragEventのイベントがAIRでしか発生しません。

私はここではまりました。
私はFlex Builderを使っているのですが、Flex Builderのデバッグモードで動作させた場合、
このイベントが発生しません。
一度リリースビルドを行い、インストールするとイベントが発生しました。

flash.events.NativeDragEvent.NATIVE_DRAG_ENTERイベント

このイベントは、ドラッグしてきてオブジェクトの境界内に入った時に発生します。
この際、ドラッグしてきてOKです、とシステムに知らさなければいけません。

1

flash.desktop.NativeDragManager.acceptDragDrop(obj:InteractiveObject);

を呼ぶことにより、ドラッグを受け付けることになります。
このメソッドを呼ぶと、マウスポインタが「＋」マークのついたポインタに変わります。

flash.events.NativeDragEvent.NATIVE_DRAG_DROPイベント

このイベントは、実際にドロップされたときに発生します。
先の、NativeDragManager.acceptDragDrop()が事前に呼ばれていないと発生しません。

ドロップされたオブジェクトは、

1

flash.events.NativeDragEvent.clipboard.getData();

で取得できます。
そのオブジェクトは、flash.desktop.Clipboardというクラスを経由して様々な情報を取得できます。
今回は、ローカルのファイル情報を取得しましたが、テキストデータやイメージデータ等も取得できます。

以上が、AIR/FlexでFlexコンポーネントとローカルマシン上のオブジェクトの間のドラッグ アンド ドロップを実現する方法です。
詳細はAIR/Flexのドキュメントにも詳しく書かれていますが、もひとつわかりにくい気もします。

それでは！

あわせて読みたい

• AIR/Flex でファイルアップロード
• リッチなAdobe AIR/Flexのツールチップをよりリッチに