Document

Adobe AIR 入門
１．Adobe AIR 紹介
２．デモ on Flex Builder 3
３．付録
（株）チェンジビジョン
梅田政利
１．Adobe AIR 紹介
Adobe AIR とは？
AIRのうれしさは？
環境について
Adobe AIRとは？
• 概要
– ＡｄｏｂｅＩｎｔｅｇｒａｔｅｄＲｕｎｔｉｍｅの略
– デスクトップで動作するＲＩＡ（Rich Internet
Application）
– Adobe Labs（http://labs.adobe.com/）で公開
• 現在ベータ３。そろそろ正式リリース？
• 特徴
– クロスＯＳ
• Windows / Mac / Linux
– 色々なテクノロジーと連携
• Flash / Flex / ActionScript
• HTML / CSS / JavaScript / Ajax
• PDF
– インストーラー作成が簡単
2
AIRのうれしさは？
• 既存のWEB技術を用いてデスクトップアプリが作れる
– HTML / JavaScript / Flex / ActionScript など
• ブラウザ上のアプリでできないことができる
–
–
–
–
–
ファイル操作
組み込みDB（SQLite）の操作
ドラッグ＆ドロップ（外部から／外部への）
クリップボード（コピー／ペースト）
オフライン
• ネットワーク接続時に同期する、などももちろん可能
• 便利なコンポーネントやエフェクトが色々ある
3
環境について
• 実行環境
– ランタイムのインストールが必要
• インストーラーを使ったインストール
• シームレス・インストール（※参考URLが付録にあります）
– AIRアプリと同時にランタイムをインストールする機構
• 開発環境
– AIR SDK
• フリー
• コマンドライン
– Flex Builder 3
• 有償
• Eclipseベースの統合開発環境
4
２．デモ on Flex Builder 3
作成するアプリの説明
プロジェクト作成
ウィンドウ透明化
コンポーネント配置
コーディング
エフェクト
ファイル操作
ドラッグ＆ドロップ
完成
作成するアプリの説明
• 目的
– 順番をランダムに決定する
• 基本仕様
– 人数入力欄にて人数を入力・変更する
• 人数の上限は９９
– 名前入力欄から順番を決める人の名前を入力する
– 決定した順番と名前を、順番に沿って表に表示する
• 拡張仕様
– 順番が決まるところを、エフェクトで派手にする
– 表を外部にドラッグ＆ドロップするとCSV形式でファイルに保存する
• ランダムな整数を取得するためのクラス(MyRandom)が使える
– MyRandom(lower:int, upper:int)
• コンストラクタ。引数は下限値と上限値。
– getBoundedRandomInt
• 範囲内からランダムな値を取得。同じ値は返さない。なくなったらｰ1を返す
6
プロジェクト作成
Sequencing.mxml
（MXMLソースファイル）
Sequencing-app.xml
（AIRアプリケーションXMLファイル）
7
ウィンドウ透明化
• ________.mxml
<mx:WindowedApplication （～略～）
backgroundColor="0xBBDDFF"
alpha="0.7">
背景色
アルファ(透過)値
• ＿＿＿＿-app.xml
<initialWindow>
<systemChrome>none</systemChrome>
<transparent>true</transparent>
</initialWindow>
AIRのウィンドウ(※)
透過指定
（※）デフォルトでは"standard”。OS標準のウィンドウになる。
透明化
8
コンポーネント配置
１．デザインビューに切り替え
２．コンポーネントを配置
ソースビューで直接コーディングする
ことも可能です。
３．コンポーネントの詳細設定
9
コンポーネント配置～人数入力部
<mx:Label x="10" y="13" text="人数"/>
<mx:NumericStepper id="peopleNum" x="36" y="11" value="5" maximum="99" width="50"/>
10
コンポーネント配置～名前入力部
<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"/>
11
コンポーネント配置～結果表示部
<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>
12
コンポーネント配置～決定順番表示部
<mx:Label id="num" x="100" y="120" width="148" height="148" fontFamily="Arial"
fontSize="256" textAlign="center"/>
（※）“99”は、サイズとレイアウトの調整に利用しただけですので、MXMLからは削除しています
13
コーディング～アプリケーションの初期化
• applicationComplete
– 起動シーケンスの最後に呼び出される関数を登録する
<mx:WindowedApplication （略）applicationComplete="init()" >
<mx:Script>
<![CDATA[
private var myRandom:MyRandom;
private function init():void {
setup(peopleNum.value);
}
この間にActionScriptを記述する
private function setup(num:int):void {
myRandom = new MyRandom(1, num);
}
]]>
</mx:Script>
１からnumの範囲からランダムな値を取
得するMyRandomオブジェクトを生成
14
コーディング～人数変更の監視
• addEventListener
– イベントの種類と、その結果呼び出される関数を登録する
private function init():void {
setup(peopleNum.value);
peopleNum.addEventListener(Event.CHANGE, changePeopleNum);
}
peopleNumの変更があれば、
changePeopleNum関数を呼び出すように登録
private function changePeopleNum(ev:Event):void {
trace("人数が " + peopleNum.value + " に変わりました");
setup(peopleNum.value);
デバッグ文をコンソールに出力する。
}
デバッグモードのときに有効。
15
コーディング～表のデータと初期化
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の属性は動的に追加できる
16
コーディング～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>
17
コーディング～順番の決定
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()が呼ばれる
18
エフェクト～定義
• 決定順番コンポーネントを、大きく→小さく→ちょっと大きく→ちょっと小さく
– ①
• 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"
<mx:Zoom duration="600" originX="75" originY="75"
zoomWidthFrom="2.3" zoomWidthTo="1.0" zoomHeightFrom="2.3"
<mx:Zoom duration="140" originX="75" originY="75"
zoomWidthFrom="1.0" zoomWidthTo="1.3" zoomHeightFrom="1.0"
<mx:Zoom duration="140" originX="75" originY="75"
zoomWidthFrom="1.3" zoomWidthTo="1.0" zoomHeightFrom="1.3"
</mx:children>
</mx:Sequence>
zoomHeightTo="2.3"/> ②
zoomHeightTo="1.0"/>
zoomHeightTo="1.3"/>
zoomHeightTo="1.0"/>
19
エフェクト～再生
sequencing(
)
挿入
effect.play()
addSequence(
)
private function sequencing():void {
（略）
num.text = String(randomInt);
effect.play();
エフェクトeffectを再生する
}
<mx:Sequence id="effect" target="{num}" effectEnd="addSequence()" >
エフェクト終了時に、
addSequence()を呼ぶ
20
エフェクト～補足
• Effect
– Zoom（拡大縮小）、Move（移動）、Rotate（回転）、Blur（ぼかし）、
Glow（発光効果）など色々
• 一部のエフェクトは、埋め込みフォントを使わないと文字が表示されない
ため、注意が必要（Rotateなど）
– エフェクト開始時やエフェクト終了時の処理を登録できる
• CompositeEffect
– Sequence（直列）とParallel（並列）がある
– Effectのサブクラス
• つまりCompositeEffectの入れ子も可能
21
ファイル操作
• 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;
//⑦
//⑧
}
22
ドラッグ＆ドロップ
• ドラッグ＆ドロップとクリップボードをコントロールする
① アプリ初期化時に、マウスボタン押下時に実行する関数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オブジェクト
}
23
完成
24
３．付録
ソースコード～ Sequencing.mxml
ソースコード～ MyRandom.as
アプリケーションXML～ Sequencing.xml
URL一覧
private function sequencing():void {
var randomInt:int = myRandom.getRandomBoundedInt();
if (randomInt == -1) {
Alert.show(“設定人数を超過しました。”);
return;
}
num.text = String(randomInt);
effect.play();
}
private function changePeopleNum(ev:Event):void {
setup(peopleNum.value);
}
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 init():void {
setup(peopleNum.value);
peopleNum.addEventListener(Event.CHANGE, changePeopleNum);
table.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
table.addEventListener(MouseEvent.MOUSE_UP, mouseUp);
}
[Bindable]
private var sequence:ArrayCollection;
private var myRandom:MyRandom;
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
<?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()">
ソースコード～ Sequencing.mxml①
26
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>
private function dragOut(ev:MouseEvent):void {
var clipboard:Clipboard = new Clipboard();
clipboard.setData(ClipboardFormats.FILE_LIST_FORMAT,
[createCsvFile()]);
NativeDragManager.doDrag(table, clipboard);
}
private function mouseUp(ev:MouseEvent):void {
table.removeEventListener(MouseEvent.ROLL_OUT, dragOut);
}
private function mouseDown(ev:MouseEvent):void {
table.addEventListener(MouseEvent.ROLL_OUT, dragOut);
}
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.mxml②
27
</mx:WindowedApplication>
<mx:Label id="num" x="100" y="120" width="148" height="148"
fontFamily="Arial" fontSize="256" textAlign="center"/>
<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 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:Label x=“10” y=“13” text=“人数”/>
<mx:NumericStepper id=“peopleNum” x=“36” y=“11” value=“5”
maximum=“99” width=“50”/>
<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>
ソースコード～ Sequencing.mxml③
28
ソースコード～ 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);
}
}
ランダムに取得する整数の下限と上限を与
え、その範囲の整数を、ArrayCollectionに代
入する
public function getRandomBoundedInt():int {
if (remainingValues.length == 0) {
残りがない場合は –1 を返す
return -1;
}
var index:int = int(Math.random() * remainingValues.length);
var randomInt:int = remainingValues.getItemAt(index) as int;
remainingValues.removeItemAt(index);
ランダムにArrayCollectionから値を取り出し
return randomInt;
て返り値とする
}
}
}
29
アプリケーション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>
SDKにて開発するときは、この箇所をswf
ファイル名に置き換える必要がある
</application>
30
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
31
ご清聴ありがとう
ございました
32

Download Report