Más contenido relacionado
Similar a AIR開発環境の導入あれこれ (20)
Más de Satoshi Hirata (20)
AIR開発環境の導入あれこれ
- 1. AIR開発環境の導入あれこれ
2008/10/04
株式会社Fusic 平田 哲
Copyright © Fusic Co., Ltd. All rights reserved.
- 3. 0. 自己紹介
平田 哲(id:debility)
・プログラマ
・Perl/Java/PHP/Ruby/他
・Directorも使います
・サーバもいぢります
・ © Mutsuking
Copyright © Fusic Co., Ltd. All rights reserved. 3
- 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
- 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
- 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
- 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
- 120. 5. まとめ
まとめ(ざっくり)
・Flex Builder 3が現状一番便利
・AIR開発環境への取っ掛かり
→AIR GEARはすぐ手が出せる
→まずAIR GEARで慣れて
頃合いを見てFlex Builderに
と言うのも選択肢の一つ
Copyright © Fusic Co., Ltd. All rights reserved. 120