AIR開発環境の導入あれこれ
2008/10/04
株式会社Fusic 平田 哲
Copyright © Fusic Co., Ltd. All rights reserved.

0. 自己紹介
Copyright © Fusic Co., Ltd. All rights reserved. 2

0. 自己紹介
平田 哲(id:debility)
・プログラマ
・Perl/Java/PHP/Ruby/他
・Directorも使います
・サーバもいぢります
・ © Mutsuking
Copyright © Fusic Co., Ltd. All rights reserved. 3

1. AIR開発環境の種類
Copyright © Fusic Co., Ltd. All rights reserved. 4

1. 開発環境の種類
Adobe Flex Builder 3
→有償 体験版あり
AIR GEAR
→無償Eclipseプラグ゗ン
AIR SDK
→無償 Adobe提供
なんかでも可能
Copyright © Fusic Co., Ltd. All rights reserved. 5

1. 開発環境の種類 – 選定
Adobe Flex Builder 3
→有償 体験版あり
→体験版は機能制限あり
→コード補完など強力
→これもEclipseベース
Copyright © Fusic Co., Ltd. All rights reserved. 6

1. 開発環境の種類 – 選定
AIR GEAR
→無償Eclipseプラグ゗ン
→Flexプロジェクトを作成
→現在バージョン1.0
→コード補完はまだない
Copyright © Fusic Co., Ltd. All rights reserved. 7

1. 開発環境の種類 – 選定
AIR SDK
→無償 Adobe提供
→コマンドラ゗ンで構築
→かなり使いづらい
Copyright © Fusic Co., Ltd. All rights reserved. 8

1. 開発環境の種類 – 結局
今日やること
・AIR GEARの導入
→ Eclipseベースの開発をつかむ
・Flex Builder 3の紹介
→ AIR GEARとの違いとか
Copyright © Fusic Co., Ltd. All rights reserved. 9

2. AIR GEARの導入
Copyright © Fusic Co., Ltd. All rights reserved. 10

2. AIR GEAR導入
登場人物
・Eclipse本体
・日本語化プラグ゗ン
・GEF(Graphical Editing Framework)
・AIR SDK
・Flex3 SDK
・AIR GEARプラグ゗ン
Copyright © Fusic Co., Ltd. All rights reserved. 11

2. AIR GEAR導入
Eclipse
・元はPure JavaのIDE
・オープンソースで開発
・様々なプラグ゗ンによる拡張
Copyright © Fusic Co., Ltd. All rights reserved. 12

2. AIR GEAR導入 - Eclipse
関連するリンク先
・Eclipse日本語Wiki
http://eclipsewiki.net/eclipse/index.php?Eclipse
・Eclipse公式
http://www.eclipse.org/
・Eclipseダウンロード(Windows版)
http://www.eclipse.org/downloads/download.php?
file=/technology/epp/downloads/release/ganymed
e/SR1/eclipse-java-ganymede-SR1-win32.zip
Copyright © Fusic Co., Ltd. All rights reserved. 13

2. AIR GEAR導入 - Eclipse
やること
・Eclipseをダウンロードして
・適当なデゖレクトリに置いて
・おしまい。
・で、起動してみる
Copyright © Fusic Co., Ltd. All rights reserved. 14

2. AIR GEAR導入 - Eclipse
起動ロゴ
Copyright © Fusic Co., Ltd. All rights reserved. 15

2. AIR GEAR導入 - Eclipse
なんか出る
→後ほど説明します。
Copyright © Fusic Co., Ltd. All rights reserved. 16

2. AIR GEAR導入 - Eclipse
OK押して起動
Copyright © Fusic Co., Ltd. All rights reserved. 17

2. AIR GEAR導入 - Eclipse
起動
Copyright © Fusic Co., Ltd. All rights reserved. 18

2. AIR GEAR導入 - Eclipse
いったん閉じる
Copyright © Fusic Co., Ltd. All rights reserved. 19

2. AIR GEAR導入 - Eclipse
なんか出る→後述
Copyright © Fusic Co., Ltd. All rights reserved. 20

2. AIR GEAR導入 - Eclipse
OK押して終了
Copyright © Fusic Co., Ltd. All rights reserved. 21

2. AIR GEAR導入
登場人物
・Eclipse本体
CLEARED
・日本語化プラグ゗ン
・GEF(Graphical Editing Framework)
・AIR SDK
・Flex3 SDK
・AIR GEARプラグ゗ン
Copyright © Fusic Co., Ltd. All rights reserved. 22

2. AIR GEAR導入 – 日本語化
やること
・pleiadesをダウンロード
・解凍
・中身をぼすっと乗せる ※
・設定フゔ゗ルに1行追加 ※
・以上。
※Macはちょっと違うので
注意してください
Copyright © Fusic Co., Ltd. All rights reserved. 23

2. AIR GEAR導入 – 日本語化
関連するリンク先
・pleiades公式
http://mergedoc.sourceforge.jp/
・pleiadesダウンロード
http://sourceforge.jp/projects/mergedoc/downloa
ds/33084/pleiades_1.2.3.p6.zip
Copyright © Fusic Co., Ltd. All rights reserved. 24

2. AIR GEAR導入 – 日本語化
解凍した中身
Copyright © Fusic Co., Ltd. All rights reserved. 25

2. AIR GEAR導入 – 日本語化
コピーする
この2つ
Copyright © Fusic Co., Ltd. All rights reserved. 26

2. AIR GEAR導入 – 日本語化
Eclipseのデゖレクトリ
Copyright © Fusic Co., Ltd. All rights reserved. 27

2. AIR GEAR導入 – 日本語化
貼る→ダ゗ゕログ出る
Copyright © Fusic Co., Ltd. All rights reserved. 28

2. AIR GEAR導入 – 日本語化
ぼすっと上書く前に
・Macは上書きしたらだめです
→中身をコピーして貼る
→でないと元が全部消える
Copyright © Fusic Co., Ltd. All rights reserved. 29

2. AIR GEAR導入 – 日本語化
ぼすっと上書き(Windows)
Copyright © Fusic Co., Ltd. All rights reserved. 30

2. AIR GEAR導入 – 日本語化
設定フゔ゗ル
eclipse.ini
※MacはEclipse.appの中にあります
Copyright © Fusic Co., Ltd. All rights reserved. 31

2. AIR GEAR導入 – 日本語化
メモ帳なりで開く
Copyright © Fusic Co., Ltd. All rights reserved. 32

2. AIR GEAR導入 – 日本語化
1行追加する
-javaagent:plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar
Macの場合は
-javaagent:/Applications/eclipse/plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar=no.mnemonic
もしくは
-javaagent:../../../plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar=no.mnemonic
みたいな感じになります。
no.mnemonic忘れずに
Copyright © Fusic Co., Ltd. All rights reserved. 33

2. AIR GEAR導入 – 日本語化
保存して閉じる
上書き保存
Copyright © Fusic Co., Ltd. All rights reserved. 34

2. AIR GEAR導入 – 日本語化
起動してみる
Copyright © Fusic Co., Ltd. All rights reserved. 35

2. AIR GEAR導入 – 日本語化
なんか出る
→日本語ですね
Copyright © Fusic Co., Ltd. All rights reserved. 36

2. AIR GEAR導入 – 日本語化
ワークスペースを決める
作業領域を決める
ワークスペースのデフォルトを固定しても
問題ないならチェックをつける
Copyright © Fusic Co., Ltd. All rights reserved. 37

2. AIR GEAR導入 – 日本語化
起動 日本語ですね
Copyright © Fusic Co., Ltd. All rights reserved. 38

2. AIR GEAR導入 – 日本語化
またいったん閉じる
Copyright © Fusic Co., Ltd. All rights reserved. 39

2. AIR GEAR導入 – 日本語化
終了確認ダ゗ゕログ
Copyright © Fusic Co., Ltd. All rights reserved. 40

2. AIR GEAR導入 – 日本語化
終了確認ダ゗ゕログ
お好みで。
Copyright © Fusic Co., Ltd. All rights reserved. 41

2. AIR GEAR導入
登場人物
・Eclipse本体
CLEARED
・日本語化プラグ゗ン
CLEARED
・GEF(Graphical Editing Framework)
・AIR SDK
・Flex3 SDK
・AIR GEARプラグ゗ン
Copyright © Fusic Co., Ltd. All rights reserved. 42

2. AIR GEAR導入 – GEF
やること
・GEFをダウンロード
・解凍
・中身をぼすっと乗せる ※
・以上。
※Macはやっぱりちょっと違うので
注意してください
Copyright © Fusic Co., Ltd. All rights reserved. 43

2. AIR GEAR導入 – GEF
関連するリンク先
・Eclipse公式 - GEF
http://www.eclipse.org/gef/
・GEFダウンロード
http://www.eclipse.org/downloads/download.php?
file=/tools/gef/downloads/drops/3.4.1/R20080910
1400/GEF-ALL-3.4.1.zip
Copyright © Fusic Co., Ltd. All rights reserved. 44

2. AIR GEAR導入 – GEF
解凍した中身
Copyright © Fusic Co., Ltd. All rights reserved. 45

2. AIR GEAR導入 – GEF
コピー→上書き（同様です）
この2つ
Copyright © Fusic Co., Ltd. All rights reserved. 46

2. AIR GEAR導入 – GEF
確認する ヘルプ→ソフトウェゕ更新
Copyright © Fusic Co., Ltd. All rights reserved. 47

2. AIR GEAR導入 – GEF
確認する
このへんが確認できればOK
Copyright © Fusic Co., Ltd. All rights reserved. 48

2. AIR GEAR導入
登場人物
・Eclipse本体
CLEARED
・日本語化プラグ゗ン
CLEARED
・GEF(Graphical Editing Framework)
CLEARED
・AIR SDK
・Flex3 SDK
・AIR GEARプラグ゗ン
Copyright © Fusic Co., Ltd. All rights reserved. 49

2. AIR GEAR導入 – SDK×2
やること
・ダウンロード
・解凍
・適当なところに置く
→置いた場所は覚えておく
→あとで使います
・以上。
Copyright © Fusic Co., Ltd. All rights reserved. 50

2. AIR GEAR導入 – SDK×2
関連するリンク先
・AIR GEAR使用方法
http://amateras.sourceforge.jp/cgi-
bin/fswiki/wiki.cgi?page=AIRGEARDoc
・AIR SDKダウンロード
http://www.adobe.com/products/air/tools/sdk/
・Flex3 SDKダウンロード
http://www.adobe.com/products/flex/flexdownloa
ds/#sdk
Copyright © Fusic Co., Ltd. All rights reserved. 51

2. AIR GEAR導入 – SDK×2
解凍して置くだけなので略
・しつこいようですが
→置いた場所は覚えておく
→すぐ使います
Copyright © Fusic Co., Ltd. All rights reserved. 52

2. AIR GEAR導入
登場人物
・Eclipse本体
CLEARED
・日本語化プラグ゗ン
CLEARED
・GEF(Graphical Editing Framework)
CLEARED
・AIR SDK
CLEARED
・Flex3 SDK
CLEARED
・AIR GEARプラグ゗ン
Copyright © Fusic Co., Ltd. All rights reserved. 53

2. AIR GEAR導入 – AG Plugin
やること
・jarをダウンロード
・pluginsデゖレクトリに置く
・以上。
Copyright © Fusic Co., Ltd. All rights reserved. 54

2. AIR GEAR導入 – AG Plugin
関連するリンク先
・AmaterasAIR公式
http://amateras.sourceforge.jp/cgi-
bin/fswiki/wiki.cgi?page=AmaterasAIR
・AIR GEARプラグ゗ンダウンロード
http://sourceforge.jp/projects/amateras/download
s/31824/net.sf.amateras.air_1.0.0.jar
Copyright © Fusic Co., Ltd. All rights reserved. 55

2. AIR GEAR導入 – AG Plugin
ダウンロード
こんなの
Copyright © Fusic Co., Ltd. All rights reserved. 56

2. AIR GEAR導入 – AG Plugin
Eclipseのデゖレクトリ
pluginsデゖレクトリ
Copyright © Fusic Co., Ltd. All rights reserved. 57

2. AIR GEAR導入 – AG Plugin
pluginsデゖレクトリを開く
Copyright © Fusic Co., Ltd. All rights reserved. 58

2. AIR GEAR導入 – AG Plugin
さっきのフゔ゗ルを置く
Copyright © Fusic Co., Ltd. All rights reserved. 59

2. AIR GEAR導入 – AG Plugin
Eclipse起動
Copyright © Fusic Co., Ltd. All rights reserved. 60

2. AIR GEAR導入 – AG Plugin
設定画面を開く ウゖンドウ→設定
Copyright © Fusic Co., Ltd. All rights reserved. 61

2. AIR GEAR導入 – AG Plugin
Eclipse設定画面
！
Copyright © Fusic Co., Ltd. All rights reserved. 62

2. AIR GEAR導入 – AG Plugin
AIR GEAR設定画面
ここを設定する
Copyright © Fusic Co., Ltd. All rights reserved. 63

2. AIR GEAR導入 – AG Plugin
AIR GEAR設定画面
Copyright © Fusic Co., Ltd. All rights reserved. 64

2. AIR GEAR導入 – AG Plugin
AIR SDK選択
さっき置いたAIR SDK
Copyright © Fusic Co., Ltd. All rights reserved. 65

2. AIR GEAR導入 – AG Plugin
AIR GEAR設定画面
Copyright © Fusic Co., Ltd. All rights reserved. 66

2. AIR GEAR導入 – AG Plugin
Flex3 SDK選択
さっき置いたFlex3 SDK
Copyright © Fusic Co., Ltd. All rights reserved. 67

2. AIR GEAR導入 – AG Plugin
AIR GEAR設定画面
Copyright © Fusic Co., Ltd. All rights reserved. 68

2. AIR GEAR導入
登場人物
・Eclipse本体
CLEARED
・日本語化プラグ゗ン
CLEARED
・GEF(Graphical Editing Framework)
CLEARED
・AIR SDK
CLEARED
・Flex3 SDK
CLEARED
・AIR GEARプラグ゗ン
CLEARED
Copyright © Fusic Co., Ltd. All rights reserved. 69

3. AIR GEARで開発
Copyright © Fusic Co., Ltd. All rights reserved. 70

3. AIR GEAR開発
Eclipse起動
Copyright © Fusic Co., Ltd. All rights reserved. 71

3. AIR GEAR開発
新規プロジェクトを作る
フゔ゗ル→新規→その他...
Copyright © Fusic Co., Ltd. All rights reserved. 72

3. AIR GEAR開発
ウゖザード選択
Copyright © Fusic Co., Ltd. All rights reserved. 73

3. AIR GEAR開発
ウゖザード選択
Copyright © Fusic Co., Ltd. All rights reserved. 74

3. AIR GEAR開発
プロジェクト名を決める
Copyright © Fusic Co., Ltd. All rights reserved. 75

3. AIR GEAR開発
完了する
Copyright © Fusic Co., Ltd. All rights reserved. 76

3. AIR GEAR開発
AIR GEAR関連付け
Copyright © Fusic Co., Ltd. All rights reserved. 77

3. AIR GEAR開発
プロジェクトができた
Copyright © Fusic Co., Ltd. All rights reserved. 78

3. AIR GEAR開発
フゔ゗ルもできてる
Copyright © Fusic Co., Ltd. All rights reserved. 79

3. AIR GEAR開発
application.xml
Copyright © Fusic Co., Ltd. All rights reserved. 80

3. AIR GEAR開発
FirstAir.as
Copyright © Fusic Co., Ltd. All rights reserved. 81

3. AIR GEAR開発
FirstAir.mxml
Copyright © Fusic Co., Ltd. All rights reserved. 82

3. AIR GEAR開発
動かしてみる
Copyright © Fusic Co., Ltd. All rights reserved. 83

3. AIR GEAR開発
起動した
Copyright © Fusic Co., Ltd. All rights reserved. 84

3. AIR GEAR開発
Addを押してみる
Copyright © Fusic Co., Ltd. All rights reserved. 85

3. AIR GEAR開発
足し算された
Copyright © Fusic Co., Ltd. All rights reserved. 86

3. AIR GEAR開発
戻ってFirstAir.as
add()関数
→ cにaとbを足した値をセットする
Copyright © Fusic Co., Ltd. All rights reserved. 87

3. AIR GEAR開発
戻ってFirstAir.mxml
idがa
Copyright © Fusic Co., Ltd. All rights reserved. 88

3. AIR GEAR開発
戻ってFirstAir.mxml
idがb
Copyright © Fusic Co., Ltd. All rights reserved. 89

3. AIR GEAR開発
戻ってFirstAir.mxml
idがc
Copyright © Fusic Co., Ltd. All rights reserved. 90

3. AIR GEAR開発
戻ってFirstAir.mxml
clickしたら
add()を呼ぶ
Copyright © Fusic Co., Ltd. All rights reserved. 91

3. AIR GEAR開発
Airフゔ゗ルを作ってみる
Copyright © Fusic Co., Ltd. All rights reserved. 92

3. AIR GEAR開発
エクスポート先選択
Copyright © Fusic Co., Ltd. All rights reserved. 93

3. AIR GEAR開発
AIR Packageを選択
Copyright © Fusic Co., Ltd. All rights reserved. 94

3. AIR GEAR開発
Airパッケージ出力設定
Copyright © Fusic Co., Ltd. All rights reserved. 95

3. AIR GEAR開発
電子自己署名(KeyStore)作成
Copyright © Fusic Co., Ltd. All rights reserved. 96

3. AIR GEAR開発
パスワード入力
Copyright © Fusic Co., Ltd. All rights reserved. 97

3. AIR GEAR開発
KeyStoreが出来ているのを確認
Copyright © Fusic Co., Ltd. All rights reserved. 98

3. AIR GEAR開発
できた
Copyright © Fusic Co., Ltd. All rights reserved. 99

と、こんな感じです。
Copyright © Fusic Co., Ltd. All rights reserved. 100

4. Flex3 Builderの話
Copyright © Fusic Co., Ltd. All rights reserved. 101

4. Flex3 Builder
関連するリンク先
・Flex3公式
http://www.adobe.com/jp/products/flex/
・Flex3 Builderダウンロード（ログ゗ンページ）
https://www.adobe.com/cfusion/tdrc/index.cfm?lo
c=ja&product=flex
Copyright © Fusic Co., Ltd. All rights reserved. 102

4. Flex Builder 3
やること
・゗ンストーラをダウンロード
・゗ンストール
・以上。
Copyright © Fusic Co., Ltd. All rights reserved. 103

4. Flex Builder 3
゗ンストーラ起動
Copyright © Fusic Co., Ltd. All rights reserved. 104

4. Flex Builder 3
゗ンストール
Copyright © Fusic Co., Ltd. All rights reserved. 105

4. Flex Builder 3
゗ンストール
Copyright © Fusic Co., Ltd. All rights reserved. 106

4. Flex Builder 3
゗ンストール
Copyright © Fusic Co., Ltd. All rights reserved. 107

4. Flex Builder 3
゗ンストール
Copyright © Fusic Co., Ltd. All rights reserved. 108

4. Flex Builder 3
゗ンストール
Copyright © Fusic Co., Ltd. All rights reserved. 109

4. Flex Builder 3
゗ンストール
Copyright © Fusic Co., Ltd. All rights reserved. 110

4. Flex Builder 3
゗ンストール
Copyright © Fusic Co., Ltd. All rights reserved. 111

4. Flex Builder 3
起動
Copyright © Fusic Co., Ltd. All rights reserved. 112

4. Flex Builder 3
新規プロジェクト
Copyright © Fusic Co., Ltd. All rights reserved. 113

4. Flex Builder 3
名前決めて作成
Copyright © Fusic Co., Ltd. All rights reserved. 114

4. Flex Builder 3
できた
Copyright © Fusic Co., Ltd. All rights reserved. 115

…手間が違いすぎる。
Copyright © Fusic Co., Ltd. All rights reserved. 116

5. まとめ
Copyright © Fusic Co., Ltd. All rights reserved. 117

Flex Builder最強！
Copyright © Fusic Co., Ltd. All rights reserved. 118

…ではなく、
Copyright © Fusic Co., Ltd. All rights reserved. 119

5. まとめ
まとめ（ざっくり）
・Flex Builder 3が現状一番便利
・AIR開発環境への取っ掛かり
→AIR GEARはすぐ手が出せる
→まずAIR GEARで慣れて
頃合いを見てFlex Builderに
と言うのも選択肢の一つ
Copyright © Fusic Co., Ltd. All rights reserved. 120

ご清聴ありがとうございました。
Copyright © Fusic Co., Ltd. All rights reserved. 121