Adobe AIR とは？ AIRのうれしさは？ 環境について

Presentation on theme: "Adobe AIR とは？ AIRのうれしさは？ 環境について"— Presentation transcript:

0 １．Adobe AIR 紹介 ２．デモ on Flex Builder 3 ３．付録 （株）チェンジビジョン 梅田政利

1 Adobe AIR とは？ AIRのうれしさは？ 環境について

2 Adobe AIRとは？ 概要 特徴 Ａｄｏｂｅ Ｉｎｔｅｇｒａｔｅｄ Ｒｕｎｔｉｍｅの略
Ａｄｏｂｅ　Ｉｎｔｅｇｒａｔｅｄ　Ｒｕｎｔｉｍｅの略 デスクトップで動作するＲＩＡ（Rich Internet Application） Adobe Labs（ 現在ベータ３。そろそろ正式リリース？ 特徴 クロスＯＳ Windows / Mac / Linux 色々なテクノロジーと連携 Flash / Flex / ActionScript HTML / CSS / JavaScript / Ajax PDF インストーラー作成が簡単

3 既存のWEB技術を用いてデスクトップアプリが作れる ブラウザ上のアプリでできないことができる
AIRのうれしさは？ 既存のWEB技術を用いてデスクトップアプリが作れる HTML / JavaScript / Flex / ActionScript など ブラウザ上のアプリでできないことができる ファイル操作 組み込みDB（SQLite）の操作 ドラッグ＆ドロップ（外部から／外部への） クリップボード（コピー／ペースト） オフライン ネットワーク接続時に同期する、などももちろん可能 便利なコンポーネントやエフェクトが色々ある

4 環境について 実行環境 開発環境 ランタイムのインストールが必要 AIR SDK Flex Builder 3
インストーラーを使ったインストール シームレス・インストール（※参考URLが付録にあります） AIRアプリと同時にランタイムをインストールする機構 開発環境 AIR SDK フリー コマンドライン Flex Builder 3 有償 Eclipseベースの統合開発環境

5 ２．デモ on Flex Builder 3 作成するアプリの説明 プロジェクト作成 ウィンドウ透明化 コンポーネント配置 コーディング
エフェクト ファイル操作 ドラッグ＆ドロップ 完成

6 作成するアプリの説明 目的 基本仕様 拡張仕様 ランダムな整数を取得するためのクラス(MyRandom)が使える 順番をランダムに決定する
人数入力欄にて人数を入力・変更する 人数の上限は９９ 名前入力欄から順番を決める人の名前を入力する 決定した順番と名前を、順番に沿って表に表示する 拡張仕様 順番が決まるところを、エフェクトで派手にする 表を外部にドラッグ＆ドロップするとCSV形式でファイルに保存する ランダムな整数を取得するためのクラス(MyRandom)が使える MyRandom(lower:int, upper:int) コンストラクタ。引数は下限値と上限値。 getBoundedRandomInt 範囲内からランダムな値を取得。同じ値は返さない。なくなったらｰ1を返す

7 プロジェクト作成 Sequencing.mxml 　　　（MXMLソースファイル） Sequencing-app.xml 　　　（AIRアプリケーションXMLファイル）

8 ウィンドウ透明化 ________.mxml ＿＿＿＿-app.xml
<mx:WindowedApplication （～略～） backgroundColor="0xBBDDFF"　　　背景色 alpha="0.7">　　　　　　　　　　アルファ(透過)値 <initialWindow> <systemChrome>none</systemChrome>　　 AIRのウィンドウ(※) <transparent>true</transparent> 透過指定 </initialWindow> （※）デフォルトでは"standard”。OS標準のウィンドウになる。 透明化

9 コンポーネント配置 １．デザインビューに切り替え ２．コンポーネントを配置 ソースビューで直接コーディングすることも可能です。
３．コンポーネントの詳細設定

10 コンポーネント配置～人数入力部 <mx:Label x="10" y="13" text="人数"/> <mx:NumericStepper id="peopleNum" x="36" y="11" value="5" maximum="99" width="50"/>

11 コンポーネント配置～名前入力部 <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"/>

12 コンポーネント配置～結果表示部 <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>

13 コンポーネント配置～決定順番表示部 <mx:Label id="num" x="100" y="120" width="148" height="148" fontFamily="Arial" 　　 fontSize="256" textAlign="center"/> （※）“99”は、サイズとレイアウトの調整に利用しただけですので、MXMLからは削除しています

14 コーディング～アプリケーションの初期化 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を記述する １からnumの範囲からランダムな値を取得するMyRandomオブジェクトを生成

15 コーディング～人数変更の監視 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関数を呼び出すように登録 デバッグ文をコンソールに出力する。 デバッグモードのときに有効。

16 コーディング～表のデータと初期化 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の属性は動的に追加できる

17 コーディング～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> 表示するデータの属性

18 コーディング～順番の決定 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()が呼ばれる

19 エフェクト～定義 決定順番コンポーネントを、大きく→小さく→ちょっと大きく→ちょっと小さく ① ②
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>

20 エフェクト～再生 挿入 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()を呼ぶ

21 エフェクト～補足 Effect CompositeEffect
Zoom（拡大縮小）、Move（移動）、Rotate（回転）、Blur（ぼかし）、 Glow（発光効果）など色々 一部のエフェクトは、埋め込みフォントを使わないと文字が表示されない ため、注意が必要（Rotateなど） エフェクト開始時やエフェクト終了時の処理を登録できる CompositeEffect Sequence（直列）とParallel（並列）がある Effectのサブクラス つまりCompositeEffectの入れ子も可能

22 ファイル操作 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; //⑧ }

23 ドラッグ＆ドロップ ドラッグ＆ドロップとクリップボードをコントロールする
① アプリ初期化時に、マウスボタン押下時に実行する関数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オブジェクト

24 完成

25 ３．付録 ソースコード～ Sequencing.mxml ソースコード～ MyRandom.as
アプリケーションXML～ Sequencing.xml URL一覧

26 ソースコード～ Sequencing.mxml①
<?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx= 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①

27 ソースコード～ 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>

28 ソースコード～ 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③

29 ソースコード～ 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から値を取り出して返り値とする

30 アプリケーションXML～Sequencing.xml <?xml version="1.0" encoding="UTF-8"?> <application xmlns=" <!-- 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 ファイル名に置き換える必要がある

31 URL一覧 ダウンロード 参考記事等 ユーザーコミュニティー まさとしのAIR自習帳 AIR実行環境
開発環境のダウンロード 参考記事等 AIR実行環境のシームレス・インストール サンプル公開 ユーザーコミュニティー FxUG(Flex User Group) まさとしのAIR自習帳 私のブログです。よろしくお願いします。m(._.)m

32 ご清聴ありがとう ございました