1.Adobe AIR 紹介 2.デモ on Flex Builder 3 3.付録 (株)チェンジビジョン 梅田政利
Adobe AIR とは? AIRのうれしさは? 環境について
Adobe AIRとは? 概要 特徴 Adobe Integrated Runtimeの略 Adobe Integrated Runtimeの略 デスクトップで動作するRIA(Rich Internet Application) Adobe Labs(http://labs.adobe.com/)で公開 現在ベータ3。そろそろ正式リリース? 特徴 クロスOS Windows / Mac / Linux 色々なテクノロジーと連携 Flash / Flex / ActionScript HTML / CSS / JavaScript / Ajax PDF インストーラー作成が簡単
既存のWEB技術を用いてデスクトップアプリが作れる ブラウザ上のアプリでできないことができる AIRのうれしさは? 既存のWEB技術を用いてデスクトップアプリが作れる HTML / JavaScript / Flex / ActionScript など ブラウザ上のアプリでできないことができる ファイル操作 組み込みDB(SQLite)の操作 ドラッグ&ドロップ(外部から/外部への) クリップボード(コピー/ペースト) オフライン ネットワーク接続時に同期する、などももちろん可能 便利なコンポーネントやエフェクトが色々ある
環境について 実行環境 開発環境 ランタイムのインストールが必要 AIR SDK Flex Builder 3 インストーラーを使ったインストール シームレス・インストール(※参考URLが付録にあります) AIRアプリと同時にランタイムをインストールする機構 開発環境 AIR SDK フリー コマンドライン Flex Builder 3 有償 Eclipseベースの統合開発環境
2.デモ on Flex Builder 3 作成するアプリの説明 プロジェクト作成 ウィンドウ透明化 コンポーネント配置 コーディング エフェクト ファイル操作 ドラッグ&ドロップ 完成
作成するアプリの説明 目的 基本仕様 拡張仕様 ランダムな整数を取得するためのクラス(MyRandom)が使える 順番をランダムに決定する 人数入力欄にて人数を入力・変更する 人数の上限は99 名前入力欄から順番を決める人の名前を入力する 決定した順番と名前を、順番に沿って表に表示する 拡張仕様 順番が決まるところを、エフェクトで派手にする 表を外部にドラッグ&ドロップするとCSV形式でファイルに保存する ランダムな整数を取得するためのクラス(MyRandom)が使える MyRandom(lower:int, upper:int) コンストラクタ。引数は下限値と上限値。 getBoundedRandomInt 範囲内からランダムな値を取得。同じ値は返さない。なくなったらー1を返す
プロジェクト作成 Sequencing.mxml (MXMLソースファイル) Sequencing-app.xml (AIRアプリケーションXMLファイル)
ウィンドウ透明化 ________.mxml ____-app.xml <mx:WindowedApplication (~略~) backgroundColor="0xBBDDFF" 背景色 alpha="0.7"> アルファ(透過)値 <initialWindow> <systemChrome>none</systemChrome> AIRのウィンドウ(※) <transparent>true</transparent> 透過指定 </initialWindow> (※)デフォルトでは"standard”。OS標準のウィンドウになる。 透明化
コンポーネント配置 1.デザインビューに切り替え 2.コンポーネントを配置 ソースビューで直接コーディングすることも可能です。 3.コンポーネントの詳細設定
コンポーネント配置~人数入力部 <mx:Label x="10" y="13" text="人数"/> <mx:NumericStepper id="peopleNum" x="36" y="11" value="5" maximum="99" width="50"/>
コンポーネント配置~名前入力部 <mx:Label x="100" y="13" text="名前"/> <mx:TextInput id="nameForm" x="124" y="11" width="133"/> <mx:Button label="確定" x="261" y="11" width="56"/>
コンポーネント配置~結果表示部 <mx:DataGrid id="table" width="170" top="10" bottom="10" left="350" right="10"> <mx:columns> <mx:DataGridColumn headerText="No." dataField="col1" width="40"/> <mx:DataGridColumn headerText="名前" dataField="col2"/> </mx:columns> </mx:DataGrid>
コンポーネント配置~決定順番表示部 <mx:Label id="num" x="100" y="120" width="148" height="148" fontFamily="Arial" fontSize="256" textAlign="center"/> (※)“99”は、サイズとレイアウトの調整に利用しただけですので、MXMLからは削除しています
コーディング~アプリケーションの初期化 applicationComplete 起動シーケンスの最後に呼び出される関数を登録する <mx:WindowedApplication (略)applicationComplete="init()" > <mx:Script> <![CDATA[ private var myRandom:MyRandom; private function init():void { setup(peopleNum.value); } private function setup(num:int):void { myRandom = new MyRandom(1, num); } ]]> </mx:Script> この間にActionScriptを記述する 1からnumの範囲からランダムな値を取得するMyRandomオブジェクトを生成
コーディング~人数変更の監視 addEventListener イベントの種類と、その結果呼び出される関数を登録する private function init():void { setup(peopleNum.value); peopleNum.addEventListener(Event.CHANGE, changePeopleNum); } private function changePeopleNum(ev:Event):void { trace("人数が " + peopleNum.value + " に変わりました"); setup(peopleNum.value); } peopleNumの変更があれば、changePeopleNum関数を呼び出すように登録 デバッグ文をコンソールに出力する。 デバッグモードのときに有効。
コーディング~表のデータと初期化 import mx.collections.ArrayCollection; private var sequence:ArrayCollection; // 表に表示するデータ private function setup(num:int):void { sequence = new ArrayCollection(); for (var i:int = 0; i < num; i++) { sequence.addItem({no:"", name:""}); } myRandom = new MyRandom(1, num); } 指定された人数で表を初期化する。 属性noとnameに空文字列を代入したObjectオブジェクトをsequenceに追加 ※Objectの属性は動的に追加できる
コーディング~DataGridへのデータ表示 dataProvider 表示対象となるArrayやArrayCollectionなどをセットする 変数値の変化が、参照しているMXMLコンポーネントに通知され、値が反映されるようになる [Bindable] private var sequence:ArrayCollection; 表示データ群 <mx:DataGrid id="table" dataProvider="{sequence}" top="10" bottom="10" left="350" right="10"> <mx:columns> <mx:DataGridColumn headerText="No." dataField="no" width="40"/> <mx:DataGridColumn headerText="名前" dataField="name" /> </mx:columns> </mx:DataGrid> 表示するデータの属性
コーディング~順番の決定 sequencing() addSequence() private function sequencing():void { var randomInt:int = myRandom.getRandomBoundedInt(); if (randomInt == -1) { Alert.show(“設定人数を超過しました。”); return; } num.text = String(randomInt); addSequence(); } private function addSequence():void { var obj:Object = new Object(); obj.no = num.text; obj.name = nameForm.text; sequence.setItemAt(obj, int(num.text) - 1); nameForm.text = ""; } sequencing() addSequence() <mx:TextInput x="124" y="11" id="nameForm" width="133" enter="sequencing()" /> <mx:Button x="261" y="11" label="確定" width="56" click="sequencing()" /> 名前入力欄でEnterキーを押すか、確定ボタンをクリックすると、sequencing()が呼ばれる
エフェクト~定義 決定順番コンポーネントを、大きく→小さく→ちょっと大きく→ちょっと小さく ① ② id="num"のコンポーネントに対してエフェクトをかける エフェクトは、<mx:children>に定義されたエフェクトの順次(Sequence)実行である ② durationはエフェクト時間 origin[X | Y]は、拡大縮小の中心となるコンポーネント内の座標 zoom[Width | Height]Fromは、エフェクト開始時の縮尺 zoom[Width | Height]Toは、エフェクト終了時の縮尺 <mx:Sequence id="effect" target="{num}"> ① <mx:children> <mx:Zoom duration="700" originX="75" originY="75" zoomWidthFrom="1.0" zoomWidthTo="2.3" zoomHeightFrom="1.0" zoomHeightTo="2.3"/> ② <mx:Zoom duration="600" originX="75" originY="75" zoomWidthFrom="2.3" zoomWidthTo="1.0" zoomHeightFrom="2.3" zoomHeightTo="1.0"/> <mx:Zoom duration="140" originX="75" originY="75" zoomWidthFrom="1.0" zoomWidthTo="1.3" zoomHeightFrom="1.0" zoomHeightTo="1.3"/> <mx:Zoom duration="140" originX="75" originY="75" zoomWidthFrom="1.3" zoomWidthTo="1.0" zoomHeightFrom="1.3" zoomHeightTo="1.0"/> </mx:children> </mx:Sequence>
エフェクト~再生 挿入 sequencing() effect.play() addSequence() エフェクトeffectを再生する private function sequencing():void { (略) num.text = String(randomInt); effect.play(); } <mx:Sequence id="effect" target="{num}" effectEnd="addSequence()" > エフェクトeffectを再生する エフェクト終了時に、 addSequence()を呼ぶ
エフェクト~補足 Effect CompositeEffect Zoom(拡大縮小)、Move(移動)、Rotate(回転)、Blur(ぼかし)、 Glow(発光効果)など色々 一部のエフェクトは、埋め込みフォントを使わないと文字が表示されない ため、注意が必要(Rotateなど) エフェクト開始時やエフェクト終了時の処理を登録できる CompositeEffect Sequence(直列)とParallel(並列)がある Effectのサブクラス つまりCompositeEffectの入れ子も可能
ファイル操作 CSV形式の表データファイルを作成し、そのオブジェクトを返す ① 関数createCsvFile の宣言。private関数で返り値の型はFile。 ② テンポラリディレクトリの"sequence.csv"ファイルオブジェクトfile(Fileクラスの オブジェクト)を作成する ③④ fileに書き出すfileStream(FileStreamクラスのオブジェクト)を作成する ⑤ CSV形式でヘッダ情報をシフトJISコードで出力する ⑥ CSV形式で、sequence(表)の内容をシフトJISコードで出力する ⑦ fileStreamを閉じる ⑧ fileオブジェクトをリターンする private function createCsvFile():File { //① var file:File = File.createTempDirectory().resolvePath("sequence.csv"); //② var fileStream:FileStream = new FileStream(); //③ fileStream.open(file, FileMode.WRITE); //④ fileStream.writeMultiByte("No., 名前\n", "shift_jis"); //⑤ for (var i:int = 0; i < sequence.length; i++) { //⑥ fileStream.writeMultiByte(sequence.getItemAt(i).no + ", " + sequence.getItemAt(i).name + "\n", "shift_jis"); } fileStream.close(); //⑦ return file; //⑧ }
ドラッグ&ドロップ ドラッグ&ドロップとクリップボードをコントロールする ① アプリ初期化時に、マウスボタン押下時に実行する関数mouseDownと、 マウスボタンリリース時に実行する関数mouseUpを登録する ② アプリ外にマウスポインタが出たときに実行する関数dragOutを登録する ③ アプリ外にマウスポインタが出たときに実行する関数dragOutを登録解除する ④ クリップボードに表のCSVファイルをセットし、ドラッグマネージャーを初期化する private function init():void { //① : table.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown); table.addEventListener(MouseEvent.MOUSE_UP, mouseUp); } private function mouseDown(ev:MouseEvent):void { //② table.addEventListener(MouseEvent.ROLL_OUT, dragOut); } private function mouseUp(ev:MouseEvent):void { //③ table.removeEventListener(MouseEvent.ROLL_OUT, dragOut); } private function dragOut(ev:MouseEvent):void { //④ var clipboard:Clipboard = new Clipboard(); clipboard.setData(ClipboardFormats.FILE_LIST_FORMAT, [createCsvFile()]); NativeDragManager.doDrag(table, clipboard); } Arrayオブジェクト
完成
3.付録 ソースコード~ Sequencing.mxml ソースコード~ MyRandom.as アプリケーションXML~ Sequencing.xml URL一覧
ソースコード~ Sequencing.mxml① <?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx=http://www.adobe.com/2006/mxml layout="absolute“ alpha="0.7" backgroundColor="0xBBDDFF“ width="540" height="410“ applicationComplete="init()"> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.controls.Alert; [Bindable] private var sequence:ArrayCollection; private var myRandom:MyRandom; private function init():void { setup(peopleNum.value); peopleNum.addEventListener(Event.CHANGE, changePeopleNum); table.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown); table.addEventListener(MouseEvent.MOUSE_UP, mouseUp); } private function setup(num:int):void { sequence = new ArrayCollection(); for (var i:int = 0; i < num; i++) { sequence.addItem({no:"", name:""}); } myRandom = new MyRandom(1, num); } private function changePeopleNum(ev:Event):void { setup(peopleNum.value); } private function sequencing():void { var randomInt:int = myRandom.getRandomBoundedInt(); if (randomInt == -1) { Alert.show(“設定人数を超過しました。”); return; } num.text = String(randomInt); effect.play(); } ソースコード~ Sequencing.mxml①
ソースコード~ Sequencing.mxml② private function addSequence():void { var obj:Object = new Object(); obj.no = num.text; obj.name = nameForm.text; sequence.setItemAt(obj, int(num.text) - 1); nameForm.text = ""; } private function mouseDown(ev:MouseEvent):void { table.addEventListener(MouseEvent.ROLL_OUT, dragOut); } private function mouseUp(ev:MouseEvent):void { table.removeEventListener(MouseEvent.ROLL_OUT, dragOut); } private function dragOut(ev:MouseEvent):void { var clipboard:Clipboard = new Clipboard(); clipboard.setData(ClipboardFormats.FILE_LIST_FORMAT, [createCsvFile()]); NativeDragManager.doDrag(table, clipboard); } private function createCsvFile():File { var file:File = File.createTempDirectory().resolvePath("sequence.csv"); var fileStream:FileStream = new FileStream(); fileStream.open(file, FileMode.WRITE); fileStream.writeMultiByte("No., 名前\n", "shift_jis"); for (var i:int = 0; i < sequence.length; i++) { fileStream.writeMultiByte(sequence.getItemAt(i).no + ", “ + sequence.getItemAt(i).name + "\n", "shift_jis"); } fileStream.close(); return file; } ]]> </mx:Script>
ソースコード~ Sequencing.mxml③ <mx:Sequence id="effect" target="{num}“ effectEnd="addSequence()"> <mx:children> <mx:Zoom duration="700" originX="75" originY="75" zoomWidthFrom="1.0“ zoomWidthTo="2.3“ zoomHeightFrom="1.0" zoomHeightTo="2.3"/> <mx:Zoom duration="600" originX="75" originY="75" zoomWidthFrom="2.3“ zoomWidthTo="1.0“ zoomHeightFrom="2.3" zoomHeightTo="1.0"/> <mx:Zoom duration="140" originX="75" originY="75" zoomWidthFrom="1.0“ zoomWidthTo=“1.3” zoomHeightFrom=“1.0” zoomHeightTo=“1.3”/> <mx:Zoom duration=“140” originX=“75” originY=“75” zoomWidthFrom=“1.3“ zoomWidthTo=”1.0” zoomHeightFrom=“1.3” zoomHeightTo=“1.0”/> </mx:children> </mx:Sequence> <mx:Label x=“10” y=“13” text=“人数”/> <mx:NumericStepper id=“peopleNum” x=“36” y=“11” value=“5” maximum=“99” width=“50”/> <mx:Label x=“100” y=“13” text=“名前”/> <mx:TextInput id="nameForm" x="124" y="11" width="133" enter="sequencing()"/> <mx:Button x="261" y="11" label="確定" width="56" click="sequencing()"/> <mx:DataGrid id="table" dataProvider="{sequence}“ left="350" right="10" top="10" bottom="10"> <mx:columns> <mx:DataGridColumn headerText="No." dataField="no“ width="40"/> <mx:DataGridColumn headerText="名前" dataField="name"/> </mx:columns> </mx:DataGrid> <mx:Label id="num" x="100" y="120" width="148" height="148" fontFamily="Arial" fontSize="256" textAlign="center"/> </mx:WindowedApplication> ソースコード~ Sequencing.mxml③
ソースコード~ MyRandom.as package { import mx.collections.ArrayCollection; public class MyRandom { private var remainingValues:ArrayCollection = new ArrayCollection(); public function MyRandom(lower:int, upper:int) { remainingValues = new ArrayCollection(); for (var i:int = lower; i <= upper; i++) { remainingValues.addItem(i); } } public function getRandomBoundedInt():int { if (remainingValues.length == 0) { return -1; } var index:int = int(Math.random() * remainingValues.length); var randomInt:int = remainingValues.getItemAt(index) as int; remainingValues.removeItemAt(index); return randomInt; } } } ランダムに取得する整数の下限と上限を与え、その範囲の整数を、ArrayCollectionに代入する 残りがない場合は –1 を返す ランダムにArrayCollectionから値を取り出して返り値とする
アプリケーションXML~Sequencing.xml <?xml version="1.0" encoding="UTF-8"?> <application xmlns="http://ns.adobe.com/air/application/1.0.M6"> <!-- The application identifier string, unique to this application. Required. --> <id>Sequencing</id> <!-- Used as the filename for the application. Required. --> <filename>Sequencing</filename> <!-- An application version designator (such as "v1", "2.5", or "Alpha 1"). Required. --> <version>v1</version> <!-- Settings for the application's initial window. Required. --> <initialWindow> <content>[この値は Flex Builder の出力ファイル app.xml に上書きされます]</content> <systemChrome>none</systemChrome> <transparent>true</transparent> </initialWindow> </application> SDKにて開発するときは、この箇所をswf ファイル名に置き換える必要がある
URL一覧 ダウンロード 参考記事等 ユーザーコミュニティー まさとしのAIR自習帳 AIR実行環境 http://labs.adobe.com/downloads/air.html 開発環境のダウンロード http://labs.adobe.com/technologies/air/develop_flex.html 参考記事等 AIR実行環境のシームレス・インストール http://journal.mycom.co.jp/series/air/015/index.html サンプル公開 http://labs.adobe.com/technologies/air/samples/ ユーザーコミュニティー FxUG(Flex User Group) http://www.fxug.net/ まさとしのAIR自習帳 http://d.hatena.ne.jp/masatoshisw20/ 私のブログです。よろしくお願いします。m(._.)m
ご清聴ありがとう ございました