AIR入門

Adobe AIR 入門１． Adobe AIR 紹介

２．デモ on Flex Builder 3

３．付録

（株）チェンジビジョン梅田政利

http://www.change-vision.com/

１． Adobe AIR 紹介Adobe AIR とは？

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

3

Adobe AIR とは？

• 概要– Ａｄｏｂｅ　Ｉｎｔｅｇｒａｔｅｄ　Ｒｕｎｔｉｍｅ

の略– デスクトップで動作するＲＩＡ（ Rich Internet

Application ）– Adobe Labs （ http://labs.adobe.com/ ）で公開

• 現在ベータ３。そろそろ正式リリース？

• 特徴– クロスＯＳ

• Windows / Mac / Linux

– 色々なテクノロジーと連携• Flash / Flex / ActionScript• HTML / CSS / JavaScript / Ajax• PDF

– インストーラー作成が簡単

4

AIR のうれしさは？

• 既存の WEB 技術を用いてデスクトップアプリが作れる– HTML / JavaScript / Flex / ActionScript など

• ブラウザ上のアプリでできないことができる– ファイル操作– 組み込み DB （ SQLite ）の操作– ドラッグ＆ドロップ（外部から／外部への）– クリップボード（コピー／ペースト）– オフライン

• ネットワーク接続時に同期する、などももちろん可能

• 便利なコンポーネントやエフェクトが色々ある

5

環境について

• 実行環境– ランタイムのインストールが必要

• インストーラーを使ったインストール• シームレス・インストール（※参考 URL が付録にありま

す）– AIR アプリと同時にランタイムをインストールする機構

• 開発環境– AIR SDK

• フリー• コマンドライン

– Flex Builder 3• 有償• Eclipse ベースの統合開発環境

２．デモ on Flex Builder 3作成するアプリの説明

プロジェクト作成ウィンドウ透明化

コンポーネント配置コーディング

エフェクトファイル操作

ドラッグ＆ドロップ完成

7

作成するアプリの説明• 目的

– 順番をランダムに決定する

• 基本仕様– 人数入力欄にて人数を入力・変更する

• 人数の上限は９９– 名前入力欄から順番を決める人の名前を入力する– 決定した順番と名前を、順番に沿って表に表示する

• 拡張仕様– 順番が決まるところを、エフェクトで派手にする– 表を外部にドラッグ＆ドロップすると CSV 形式でファイルに保存する

• ランダムな整数を取得するためのクラス (MyRandom) が使える– MyRandom(lower:int, upper:int)

• コンストラクタ。引数は下限値と上限値。– getBoundedRandomInt

• 範囲内からランダムな値を取得。同じ値は返さない。なくなったらｰ 1 を返す

8

プロジェクト作成

Sequencing.mxml　　　（ MXML ソースファイル）Sequencing-app.xml　　　（ AIR アプリケーション XMLファイル）

9

ウィンドウ透明化

• ________.mxml

• ＿＿＿＿ -app.xml

<mx:WindowedApplication （～略～）backgroundColor="0xBBDDFF" 背景色alpha="0.7"> アルファ (透過 )値

<initialWindow><systemChrome>none</systemChrome> AIRのウィン

ドウ (※)<transparent>true</transparent> 透過指定

</initialWindow>（※）デフォルトでは "standard”。 OS標準のウィンドウになる。

透明化

10

コンポーネント配置

１．デザインビューに切り替え

２．コンポーネントを配置

３．コンポーネントの詳細設定

ソースビューで直接コーディングすることも可能です。

11

コンポーネント配置～人数入力部

<mx:Label x="10" y="13" text="人数 "/><mx:NumericStepper id="peopleNum" x="36" y="11" value="5" maximum="99" width="50"/>

12

コンポーネント配置～名前入力部

<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"/>

13

コンポーネント配置～結果表示部

<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>

14

コンポーネント配置～決定順番表示部

<mx:Label id="num" x="100" y="120" width="148" height="148" fontFamily="Arial" fontSize="256" textAlign="center"/>

（※）“ 99”は、サイズとレイアウトの調整に利用しただけですので、 MXMLからは削除しています

15

コーディング～アプリケーションの初期化• 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>

１から num の範囲からランダムな値を取得する MyRandom オブジェクトを生成

この間に ActionScript を記述する

16

コーディング～人数変更の監視• 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 関数を呼び出すように登録

デバッグ文をコンソールに出力する。デバッグモードのときに有効。

17

コーディング～表のデータと初期化

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 の属性は動的に追加できる

18

[Bindable]private var sequence:ArrayCollection;

コーディング～ DataGrid へのデータ表示• dataProvider

– 表示対象となる Array や 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>

表示データ群

表示するデータの属性

変数値の変化が、参照している MXML コンポーネントに通知され、値が反映されるようになる

19

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

addSequence()

sequencing()

20

エフェクト～定義• 決定順番コンポーネントを、大きく→小さく→ちょっと大きく→

ちょっと小さく– ①

• 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>

21

private function sequencing():void { （略） num.text = String(randomInt); effect.play();}

<mx:Sequence id="effect" target="{num}" effectEnd="addSequence()" >

エフェクト～再生

エフェクト終了時に、addSequence() を呼ぶ

エフェクト effect を再生する

addSequence()

sequencing()

effect.play()挿入

22

エフェクト～補足• Effect

– Zoom （拡大縮小）、 Move （移動）、 Rotate （回転）、 Blur （ぼかし）、Glow （発光効果）など色々

• 一部のエフェクトは、埋め込みフォントを使わないと文字が表示されないため、注意が必要（ Rotate など）

– エフェクト開始時やエフェクト終了時の処理を登録できる

• CompositeEffect– Sequence （直列）と Parallel （並列）がある– Effect のサブクラス

• つまり CompositeEffect の入れ子も可能

23

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

24

ドラッグ＆ドロップ• ドラッグ＆ドロップとクリップボードをコントロールする

①　アプリ初期化時に、マウスボタン押下時に実行する関数 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 オブジェ

クト

25

完成

３．付録ソースコード～ Sequencing.mxml

ソースコード～ MyRandom.as

アプリケーション XML 　～ Sequencing.xml

URL一覧

27

ソースコード～ 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();

}

http://www.adobe.com/2006/mxml

28

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

29

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


zoomWidthFrom="2.3“ zoomWidthTo="1.0“

zoomHeightFrom="2.3" zoomHeightTo="1.0"/>


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>

30

ソースコード～ 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 に代入する

ランダムに ArrayCollection から値を取り出して返り値とする

残りがない場合は – 1 を返す

31

アプリケーション XML ～ Sequencing.xml

<?xml version="1.0" encoding="UTF-8"?> <application xmlns="http://ns.adobe.com/air/application/1.0.M6">

 <id>Sequencing</id>

 <filename>Sequencing</filename>

 <version>v1</version>

 <initialWindow> <content>[この値は Flex Builder の出力ファイル app.xml　に上書きされます ]</content> <systemChrome>none</systemChrome> <transparent>true</transparent> </initialWindow>

</application>

SDK にて開発するときは、この箇所をswfファイル名に置き換える必要がある

32

URL一覧

• ダウンロード– 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

33

ご清聴ありがとう

ございました

Documents

AIR入門