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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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