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

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

リニューアル第1回目はApolloがAIRになってからの新機能として、直感的にファイル／データをドラッグ＆ドロップする方法を紹介

　Adobe AIRベータ版がリリースされた！

　2007年6月11日、Adobe AIR（Adobe Integrated Runtime）の公開ベータ版がAdobe Labsのサイトよりリリースされました。いままでApolloというコードネームでしたが、今後AIRという名前になります。

編集部注：今回より、連載「Apolloプログラミング入門」は本連載「Apollo改めAIRプログラミング入門」にリニューアルしました。この連載をより深く理解するためには、連載「Apolloプログラミング入門」も併せてご覧ください。

　連載中に新しいバージョンが出ましたので、AIRベータ版の新機能をご紹介しようと思います。今回は、ドラッグ＆ドロップに注目して2つのサンプルを作成します。

　デスクトップとドラッグ＆ドロップでイロイロやりとりする

　一般的なWebアプリケーションでは、Webブラウザ内からデスクトップにファイルをドラック＆ドロップしたり、その逆にデスクトップ上のファイルをブラウザ上のアプリにドラッグ＆ドロップしたりすることはできませんでした。しかし、AIRを用いることによって、このような動きが実現できます。

　ちなみに、Flexアプリでは、コンポーネント間のドラッグ＆ドロップの制御が簡単にできます。AIRでも、Flexと同じようにドラッグ＆ドロップの制御ができるようになりました。

■ドラッグ＆ドロップできるファイル／データの種類

　AIRでは、ビットマップデータ、ファイル、テキスト、URL文字列、シリアライズされたオブジェクト、オブジェクトの参照などをドラッグ＆ドロップするデータとして扱えます。

　例えば、AIRアプリ内に表示してあるチャートをワードに張り付けたり、AIRアプリ内のテキストをエクセルに張り付けたり、デスクトップ上のエクセルをAIRアプリ内のデータグリッドに張り付けることができます。

　画像ファイルをAIRアプリにドラッグインしてみる

　下記のサンプルは、デスクトップ上の画像をAIRアプリ内にドロップする例です。

<?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"                         layout="vertical"                         applicationComplete="initApp()" >     <mx:Script>     <![CDATA[         import mx.controls.Image;         import mx.controls.Label;         import flash.filesystem.File;         import flash.desktop.TransferableFormats;         import flash.desktop.TransferableData;         import flash.desktop.DragManager;         private function initApp():void{             hello.addEventListener(                 NativeDragEvent.NATIVE_DRAG_ENTER, onDragIn);             hello.addEventListener(                 NativeDragEvent.NATIVE_DRAG_DROP, onDrop);         }         private function onDrop(event:NativeDragEvent):void{             trace("Drop");             var dropfiles:Array = event.transferable.             dataForFormat(                 TransferableFormats.FILE_LIST_FORMAT) as Array;             for each (var file:File in dropfiles){                 if(file.extension == "png"){                     var i:Image = new Image();                     i.source = file.nativePath;                     this.addChild(i);                 }             }         }         private function onDragIn(event:NativeDragEvent):void{             trace("DragIn");             DragManager.acceptDragDrop(hello);         }     ]]>     </mx:Script>     <mx:Label id="hello" text="Drop" fontSize="25"/> </mx:WindowedApplication>

■AIRベータ版の変更点の代表例

　AIRベータ版からは、ルートタグがWindowedApplicationになっています。また、FlexのApplicationタグと同じように、画面の初期化後の処理として、initAppメソッドが呼ばれています。

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"                         layout="vertical"                         applicationComplete="initApp()" >

　このLabelコンポーネントにデスクトップから画像ファイルをドロップします。

<mx:Label id="hello" text="Drop" fontSize="25"/>

　initAppメソッドでは、helloとID名の付いたLabelコンポーネントにイベント登録をしています。NativeDragEventクラスは、デスクトップアプリとの間でドラッグ＆ドロップが起こったときに発生するイベントです。ドラッグ開始時とドロップ時にイベントが発生し、それぞれonDragInメソッドとonDropメソッドが呼ばれています。

hello.addEventListener(                 NativeDragEvent.NATIVE_DRAG_ENTER, onDragIn);             hello.addEventListener(                 NativeDragEvent.NATIVE_DRAG_DROP, onDrop);

■デスクトップアプリとのドラッグ＆ドロップによって発生するイベントの種類

　デスクトップアプリとの間でのドラッグ＆ドロップによって発生するイベントの種類は以下のようなものがあります。

表1　NativeDragEventクラスのプロパティ

プロパティ名 説明 NATIVE_DRAG_START ドラッグの開始時に呼ばれる NATIVE_DRAG_COMPLETE ドラッグの終了時に呼ばれる NATIVE_DRAG_ENTER 対象物の境界内に入ると呼ばれる NATIVE_DRAG_DROP 対象物にドロップすると呼ばれる NATIVE_DRAG_EXIT 対象物の境界外に出ると呼ばれる NATIVE_DRAG_OVER 対象物に境界内で常に呼ばれる

■ドロップできる？ できない？

　デスクトップ上のファイルをLabelであるhello上にドラッグすると、ドラッグ中に表示されるアイコンに青い表示が現れます。これは、ドロップ可能であること表しています。あるオブジェクト上でドロップ可能にするには、DragManagerクラスのacceptDragDropメソッドを用います。

DragManager.acceptDragDrop(hello);

　以下は、デスクトップ上のファイルをドラッグしている途中を表しています。ドロップできる場所とできない場所が移動中のアイコンで分かります。

画面1　ドロップできない場所（赤いNGアイコン付き）

画面2　ドロップできる場所を通過中（青いOKアイコン付き）

1/3

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

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