Apollo改めAIRプログラミング入門（1）
AIRアプリはドラッグ＆ドロップでこんなことまで！

クラスメソッド
横田聡
2007/7/12

■LabelコンポーネントにMouseEventを登録　

　initAppメソッドでは、helloとID名の付いたLabelコンポーネントにイベント登録をしています。MouseEventクラスのMOUSE_DOWNイベントは、AIRアプリ内でマウスが押されたときに発生するイベントです。Label上でマウスが押されると、イベントリスナによって、onMouseDownメソッドが呼び出されます。

　また、同じように、MouseEventクラスのMOUSE_UPイベントによって、Label上でマウスが離されると、onMouseUpメソッドが呼び出されます。

hello.addEventListener(                 MouseEvent.MOUSE_DOWN,onMouseDown,false,0,true);             hello.addEventListener(                 MouseEvent.MOUSE_UP,onMouseUp,false,0,true);

■【実況中継】ラベルをテキストファイルとしてドラッグアウト！　

　次に、Labelをドラッグ中に表示されるアイコン画像を読み込むために、loadIconメソッドを呼び出しています。アイコンデータは、pngファイルを読み込み、ビットマップデータとして取り出した後、dragIconプロパティに格納しています。

　Label上でマウスを押しながら、マウスをAIRアプリの外に移動します。

画面5　ラベルをテキストファイルとしてドラッグアウト（その1）

　デスクトップ上まで持っていくと、ファイルをドロップできます。

画面6　ラベルをテキストファイルとしてドラッグアウト（その2）

　そして、ドロップした場所に新たにテキストファイルが置かれます。すごい！

画面7　ラベルをテキストファイルとしてドラッグアウト（その3）

■ソースコードはどうなっているか？　

　それでは、ソースコードの解説です。

　Label上でマウスが押された際に発生するイベントによって呼び出されるonMouseDownメソッドでは、新たにイベントを登録しています。MouseEventクラスのROLL_OUTイベントは、マウスを押しながら自身のコンポーネント外にドラッグされた際に発生します。このイベントに合わせて、AIRアプリの外にドラッグされた際の動作を指定します。

private function onMouseDown(event:MouseEvent):void{             trace("mouseDown");             hello.addEventListener(MouseEvent.ROLL_OUT,                 onDragOutGo,false,0,true);         }

　onDragOutGoメソッドでは、AIRアプリとデスクトップ間でやりとりするデータの入れ物である、TransferableDataをインスタンス化し、addDataメソッドで詰め込むデータを追加しています。

private function onDragOutGo(event:MouseEvent):void{             trace("DragOutGo");             var transfer:TransferableData = new TransferableData();             transfer.addData([createTxtFile()],                 TransferableFormats.FILE_LIST_FORMAT);             DragManager.doDrag(hello,transfer,dragIcon,null,null);         }

　addDataメソッドでは、第1引数にファイルの配列を指定し、第2引数にファイルの配列であることを明示しています。そして、DragManagerクラスのdoDragメソッドによって、AIRアプリ外へのドラッグを始めます。

　ドラッグを始めて、デスクトップ上でドロップすると、ドロップした場所にテキストファイルが生成されます。また、マウスが離されるのでMOUSE_UPイベントにより、onMouseUpメソッドが呼び出され、ROLL_OUTイベントに対応する処理のリスナーを削除をしています。

hello.removeEventListener(MouseEvent.ROLL_OUT,onDragOutGo);

　ドロップした際にデスクトップ上に保存するファイルは、createTxtFileメソッド内で定義されています。処理内容は、作業フォルダ内に新規にファイルを作成して、Label内の文字列を格納しています。

private function createTxtFile():File{             var file:File                 = File.createTempDirectory().resolve("hello.txt");             var fileStream:FileStream = new FileStream();             fileStream.open(file, FileMode.WRITE);             fileStream.writeUTFBytes(hello.text);             fileStream.close();             return file;         }

　エクセルファイルとしてもドラッグアウトしてみる

　この部分で、エクセルやワードや画像などを作成してあげれば、さまざまな形式のデータをAIRアプリ外にドロップ可能です。例えば、作成するファイルの拡張子をエクセルに変えてみましょう。

var file:File                 = File.createTempDirectory().resolve("hello.xls");

　以下は、実行結果です。

画面8　ラベルをエクセルファイルとしてドラッグアウト

　今回の例では、拡張子のみエクセル形式にしていますが、実際のところは、ファイルの中身もエクセル形式にする必要があります。

　AIRはエンタープライズ業務でも役立つ！

　以上のように、AIRのドラッグ＆ドロップAPIを用いることによって、いままでできなかった直感的な操作を実現できます。

　今回は紹介できませんでしたが、テキストファイル以外にも、エクセルやワード内にFlexのチャートデータを張り付けたりすることもできます。AIRアプリは、コンシューマ向けアプリのプラットフォームとして注目を浴びがちですが、エンタープライズの業務にも用途がたくさんありそうです。

　なお、今回のサンプルのソースはこちらよりダウンロードできます。

■＠IT関連記事

AIRとGearsの連携で注目のオフラインWebアプリ集 連載：Flash観測所（4）　Apolloが正式名AIRとなってGoogle Gearsと連携できるようになり、オフラインWebアプリがいま注目だ。Flashでも面白いものがあるので紹介しよう 「リッチクライアント ＆ 帳票」フ ォーラム 2007/7/3

プロフィール：横田　聡（よこた　さとし） クラスメソッド株式会社　 代表取締役 業務向けアプリのRIA化を推進している会社です。業務ポータル/ビジネスインテリジェンス/顧客管理/営業支援のシステムなどワンストップで作っています。 最近は、業務向けモバイルアプリ開発や特定ユーザー向けアプリ開発なども行なっています。主にApollo／Flex／Java／C#／Flash／JavaScriptを使って仕事をしています。社員募集中です。会社ブログ（さとしログ）と個人ブログ（FlexCoder）も更新中。

3/3

次回もお楽しみに

INDEX
Apollo改めAIRプログラミング入門（1）
	Page1 Adobe AIRベータ版がリリースされた！ デスクトップとドラッグ＆ドロップでイロイロやりとりする 画像ファイルをAIRアプリにドラッグインしてみる
	Page2 ラベルをテキストファイルとしてドラッグアウトしてみる
	Page3 エクセルファイルとしてもドラッグアウトしてみる AIRはエンタープライズ業務でも役立つ！

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