AIR開発環境の導入あれこれ

5,052
-1

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
5,052
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

AIR開発環境の導入あれこれ

  1. 1. AIR開発環境の導入あれこれ 2008/10/04 株式会社Fusic 平田 哲 Copyright © Fusic Co., Ltd. All rights reserved.
  2. 2. 0. 自己紹介 Copyright © Fusic Co., Ltd. All rights reserved. 2
  3. 3. 0. 自己紹介 平田 哲(id:debility) ・プログラマ ・Perl/Java/PHP/Ruby/他 ・Directorも使います ・サーバもいぢります ・ © Mutsuking Copyright © Fusic Co., Ltd. All rights reserved. 3
  4. 4. 1. AIR開発環境の種類 Copyright © Fusic Co., Ltd. All rights reserved. 4
  5. 5. 1. 開発環境の種類 Adobe Flex Builder 3 →有償 体験版あり AIR GEAR →無償Eclipseプラグ゗ン AIR SDK →無償 Adobe提供 なんかでも可能 Copyright © Fusic Co., Ltd. All rights reserved. 5
  6. 6. 1. 開発環境の種類 – 選定 Adobe Flex Builder 3 →有償 体験版あり →体験版は機能制限あり →コード補完など強力 →これもEclipseベース Copyright © Fusic Co., Ltd. All rights reserved. 6
  7. 7. 1. 開発環境の種類 – 選定 AIR GEAR →無償Eclipseプラグ゗ン →Flexプロジェクトを作成 →現在バージョン1.0 →コード補完はまだない Copyright © Fusic Co., Ltd. All rights reserved. 7
  8. 8. 1. 開発環境の種類 – 選定 AIR SDK →無償 Adobe提供 →コマンドラ゗ンで構築 →かなり使いづらい Copyright © Fusic Co., Ltd. All rights reserved. 8
  9. 9. 1. 開発環境の種類 – 結局 今日やること ・AIR GEARの導入 → Eclipseベースの開発をつかむ ・Flex Builder 3の紹介 → AIR GEARとの違いとか Copyright © Fusic Co., Ltd. All rights reserved. 9
  10. 10. 2. AIR GEARの導入 Copyright © Fusic Co., Ltd. All rights reserved. 10
  11. 11. 2. AIR GEAR導入 登場人物 ・Eclipse本体 ・日本語化プラグ゗ン ・GEF(Graphical Editing Framework) ・AIR SDK ・Flex3 SDK ・AIR GEARプラグ゗ン Copyright © Fusic Co., Ltd. All rights reserved. 11
  12. 12. 2. AIR GEAR導入 Eclipse ・元はPure JavaのIDE ・オープンソースで開発 ・様々なプラグ゗ンによる拡張 Copyright © Fusic Co., Ltd. All rights reserved. 12
  13. 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. 14. 2. AIR GEAR導入 - Eclipse やること ・Eclipseをダウンロードして ・適当なデゖレクトリに置いて ・おしまい。 ・で、起動してみる Copyright © Fusic Co., Ltd. All rights reserved. 14
  15. 15. 2. AIR GEAR導入 - Eclipse 起動ロゴ Copyright © Fusic Co., Ltd. All rights reserved. 15
  16. 16. 2. AIR GEAR導入 - Eclipse なんか出る →後ほど説明します。 Copyright © Fusic Co., Ltd. All rights reserved. 16
  17. 17. 2. AIR GEAR導入 - Eclipse OK押して起動 Copyright © Fusic Co., Ltd. All rights reserved. 17
  18. 18. 2. AIR GEAR導入 - Eclipse 起動 Copyright © Fusic Co., Ltd. All rights reserved. 18
  19. 19. 2. AIR GEAR導入 - Eclipse いったん閉じる Copyright © Fusic Co., Ltd. All rights reserved. 19
  20. 20. 2. AIR GEAR導入 - Eclipse なんか出る→後述 Copyright © Fusic Co., Ltd. All rights reserved. 20
  21. 21. 2. AIR GEAR導入 - Eclipse OK押して終了 Copyright © Fusic Co., Ltd. All rights reserved. 21
  22. 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. 23. 2. AIR GEAR導入 – 日本語化 やること ・pleiadesをダウンロード ・解凍 ・中身をぼすっと乗せる ※ ・設定フゔ゗ルに1行追加 ※ ・以上。 ※Macはちょっと違うので 注意してください Copyright © Fusic Co., Ltd. All rights reserved. 23
  24. 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. 25. 2. AIR GEAR導入 – 日本語化 解凍した中身 Copyright © Fusic Co., Ltd. All rights reserved. 25
  26. 26. 2. AIR GEAR導入 – 日本語化 コピーする この2つ Copyright © Fusic Co., Ltd. All rights reserved. 26
  27. 27. 2. AIR GEAR導入 – 日本語化 Eclipseのデゖレクトリ Copyright © Fusic Co., Ltd. All rights reserved. 27
  28. 28. 2. AIR GEAR導入 – 日本語化 貼る→ダ゗ゕログ出る Copyright © Fusic Co., Ltd. All rights reserved. 28
  29. 29. 2. AIR GEAR導入 – 日本語化 ぼすっと上書く前に ・Macは上書きしたらだめです →中身をコピーして貼る →でないと元が全部消える Copyright © Fusic Co., Ltd. All rights reserved. 29
  30. 30. 2. AIR GEAR導入 – 日本語化 ぼすっと上書き(Windows) Copyright © Fusic Co., Ltd. All rights reserved. 30
  31. 31. 2. AIR GEAR導入 – 日本語化 設定フゔ゗ル eclipse.ini ※MacはEclipse.appの中にあります Copyright © Fusic Co., Ltd. All rights reserved. 31
  32. 32. 2. AIR GEAR導入 – 日本語化 メモ帳なりで開く Copyright © Fusic Co., Ltd. All rights reserved. 32
  33. 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. 34. 2. AIR GEAR導入 – 日本語化 保存して閉じる 上書き保存 Copyright © Fusic Co., Ltd. All rights reserved. 34
  35. 35. 2. AIR GEAR導入 – 日本語化 起動してみる Copyright © Fusic Co., Ltd. All rights reserved. 35
  36. 36. 2. AIR GEAR導入 – 日本語化 なんか出る →日本語ですね Copyright © Fusic Co., Ltd. All rights reserved. 36
  37. 37. 2. AIR GEAR導入 – 日本語化 ワークスペースを決める 作業領域を決める ワークスペースのデフォルトを固定しても 問題ないならチェックをつける Copyright © Fusic Co., Ltd. All rights reserved. 37
  38. 38. 2. AIR GEAR導入 – 日本語化 起動 日本語ですね Copyright © Fusic Co., Ltd. All rights reserved. 38
  39. 39. 2. AIR GEAR導入 – 日本語化 またいったん閉じる Copyright © Fusic Co., Ltd. All rights reserved. 39
  40. 40. 2. AIR GEAR導入 – 日本語化 終了確認ダ゗ゕログ Copyright © Fusic Co., Ltd. All rights reserved. 40
  41. 41. 2. AIR GEAR導入 – 日本語化 終了確認ダ゗ゕログ お好みで。 Copyright © Fusic Co., Ltd. All rights reserved. 41
  42. 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. 43. 2. AIR GEAR導入 – GEF やること ・GEFをダウンロード ・解凍 ・中身をぼすっと乗せる ※ ・以上。 ※Macはやっぱりちょっと違うので 注意してください Copyright © Fusic Co., Ltd. All rights reserved. 43
  44. 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. 45. 2. AIR GEAR導入 – GEF 解凍した中身 Copyright © Fusic Co., Ltd. All rights reserved. 45
  46. 46. 2. AIR GEAR導入 – GEF コピー→上書き(同様です) この2つ Copyright © Fusic Co., Ltd. All rights reserved. 46
  47. 47. 2. AIR GEAR導入 – GEF 確認する ヘルプ→ソフトウェゕ更新 Copyright © Fusic Co., Ltd. All rights reserved. 47
  48. 48. 2. AIR GEAR導入 – GEF 確認する このへんが確認できればOK Copyright © Fusic Co., Ltd. All rights reserved. 48
  49. 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. 50. 2. AIR GEAR導入 – SDK×2 やること ・ダウンロード ・解凍 ・適当なところに置く →置いた場所は覚えておく →あとで使います ・以上。 Copyright © Fusic Co., Ltd. All rights reserved. 50
  51. 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. 52. 2. AIR GEAR導入 – SDK×2 解凍して置くだけなので略 ・しつこいようですが →置いた場所は覚えておく →すぐ使います Copyright © Fusic Co., Ltd. All rights reserved. 52
  53. 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. 54. 2. AIR GEAR導入 – AG Plugin やること ・jarをダウンロード ・pluginsデゖレクトリに置く ・以上。 Copyright © Fusic Co., Ltd. All rights reserved. 54
  55. 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. 56. 2. AIR GEAR導入 – AG Plugin ダウンロード こんなの Copyright © Fusic Co., Ltd. All rights reserved. 56
  57. 57. 2. AIR GEAR導入 – AG Plugin Eclipseのデゖレクトリ pluginsデゖレクトリ Copyright © Fusic Co., Ltd. All rights reserved. 57
  58. 58. 2. AIR GEAR導入 – AG Plugin pluginsデゖレクトリを開く Copyright © Fusic Co., Ltd. All rights reserved. 58
  59. 59. 2. AIR GEAR導入 – AG Plugin さっきのフゔ゗ルを置く Copyright © Fusic Co., Ltd. All rights reserved. 59
  60. 60. 2. AIR GEAR導入 – AG Plugin Eclipse起動 Copyright © Fusic Co., Ltd. All rights reserved. 60
  61. 61. 2. AIR GEAR導入 – AG Plugin 設定画面を開く ウゖンドウ→設定 Copyright © Fusic Co., Ltd. All rights reserved. 61
  62. 62. 2. AIR GEAR導入 – AG Plugin Eclipse設定画面 ! Copyright © Fusic Co., Ltd. All rights reserved. 62
  63. 63. 2. AIR GEAR導入 – AG Plugin AIR GEAR設定画面 ここを設定する Copyright © Fusic Co., Ltd. All rights reserved. 63
  64. 64. 2. AIR GEAR導入 – AG Plugin AIR GEAR設定画面 Copyright © Fusic Co., Ltd. All rights reserved. 64
  65. 65. 2. AIR GEAR導入 – AG Plugin AIR SDK選択 さっき置いたAIR SDK Copyright © Fusic Co., Ltd. All rights reserved. 65
  66. 66. 2. AIR GEAR導入 – AG Plugin AIR GEAR設定画面 Copyright © Fusic Co., Ltd. All rights reserved. 66
  67. 67. 2. AIR GEAR導入 – AG Plugin Flex3 SDK選択 さっき置いたFlex3 SDK Copyright © Fusic Co., Ltd. All rights reserved. 67
  68. 68. 2. AIR GEAR導入 – AG Plugin AIR GEAR設定画面 Copyright © Fusic Co., Ltd. All rights reserved. 68
  69. 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. 70. 3. AIR GEARで開発 Copyright © Fusic Co., Ltd. All rights reserved. 70
  71. 71. 3. AIR GEAR開発 Eclipse起動 Copyright © Fusic Co., Ltd. All rights reserved. 71
  72. 72. 3. AIR GEAR開発 新規プロジェクトを作る フゔ゗ル→新規→その他... Copyright © Fusic Co., Ltd. All rights reserved. 72
  73. 73. 3. AIR GEAR開発 ウゖザード選択 Copyright © Fusic Co., Ltd. All rights reserved. 73
  74. 74. 3. AIR GEAR開発 ウゖザード選択 Copyright © Fusic Co., Ltd. All rights reserved. 74
  75. 75. 3. AIR GEAR開発 プロジェクト名を決める Copyright © Fusic Co., Ltd. All rights reserved. 75
  76. 76. 3. AIR GEAR開発 完了する Copyright © Fusic Co., Ltd. All rights reserved. 76
  77. 77. 3. AIR GEAR開発 AIR GEAR関連付け Copyright © Fusic Co., Ltd. All rights reserved. 77
  78. 78. 3. AIR GEAR開発 プロジェクトができた Copyright © Fusic Co., Ltd. All rights reserved. 78
  79. 79. 3. AIR GEAR開発 フゔ゗ルもできてる Copyright © Fusic Co., Ltd. All rights reserved. 79
  80. 80. 3. AIR GEAR開発 application.xml Copyright © Fusic Co., Ltd. All rights reserved. 80
  81. 81. 3. AIR GEAR開発 FirstAir.as Copyright © Fusic Co., Ltd. All rights reserved. 81
  82. 82. 3. AIR GEAR開発 FirstAir.mxml Copyright © Fusic Co., Ltd. All rights reserved. 82
  83. 83. 3. AIR GEAR開発 動かしてみる Copyright © Fusic Co., Ltd. All rights reserved. 83
  84. 84. 3. AIR GEAR開発 起動した Copyright © Fusic Co., Ltd. All rights reserved. 84
  85. 85. 3. AIR GEAR開発 Addを押してみる Copyright © Fusic Co., Ltd. All rights reserved. 85
  86. 86. 3. AIR GEAR開発 足し算された Copyright © Fusic Co., Ltd. All rights reserved. 86
  87. 87. 3. AIR GEAR開発 戻ってFirstAir.as add()関数 → cにaとbを足した値をセットする Copyright © Fusic Co., Ltd. All rights reserved. 87
  88. 88. 3. AIR GEAR開発 戻ってFirstAir.mxml idがa Copyright © Fusic Co., Ltd. All rights reserved. 88
  89. 89. 3. AIR GEAR開発 戻ってFirstAir.mxml idがb Copyright © Fusic Co., Ltd. All rights reserved. 89
  90. 90. 3. AIR GEAR開発 戻ってFirstAir.mxml idがc Copyright © Fusic Co., Ltd. All rights reserved. 90
  91. 91. 3. AIR GEAR開発 戻ってFirstAir.mxml clickしたら add()を呼ぶ Copyright © Fusic Co., Ltd. All rights reserved. 91
  92. 92. 3. AIR GEAR開発 Airフゔ゗ルを作ってみる Copyright © Fusic Co., Ltd. All rights reserved. 92
  93. 93. 3. AIR GEAR開発 エクスポート先選択 Copyright © Fusic Co., Ltd. All rights reserved. 93
  94. 94. 3. AIR GEAR開発 AIR Packageを選択 Copyright © Fusic Co., Ltd. All rights reserved. 94
  95. 95. 3. AIR GEAR開発 Airパッケージ出力設定 Copyright © Fusic Co., Ltd. All rights reserved. 95
  96. 96. 3. AIR GEAR開発 電子自己署名(KeyStore)作成 Copyright © Fusic Co., Ltd. All rights reserved. 96
  97. 97. 3. AIR GEAR開発 パスワード入力 Copyright © Fusic Co., Ltd. All rights reserved. 97
  98. 98. 3. AIR GEAR開発 KeyStoreが出来ているのを確認 Copyright © Fusic Co., Ltd. All rights reserved. 98
  99. 99. 3. AIR GEAR開発 できた Copyright © Fusic Co., Ltd. All rights reserved. 99
  100. 100. と、こんな感じです。 Copyright © Fusic Co., Ltd. All rights reserved. 100
  101. 101. 4. Flex3 Builderの話 Copyright © Fusic Co., Ltd. All rights reserved. 101
  102. 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. 103. 4. Flex Builder 3 やること ・゗ンストーラをダウンロード ・゗ンストール ・以上。 Copyright © Fusic Co., Ltd. All rights reserved. 103
  104. 104. 4. Flex Builder 3 ゗ンストーラ起動 Copyright © Fusic Co., Ltd. All rights reserved. 104
  105. 105. 4. Flex Builder 3 ゗ンストール Copyright © Fusic Co., Ltd. All rights reserved. 105
  106. 106. 4. Flex Builder 3 ゗ンストール Copyright © Fusic Co., Ltd. All rights reserved. 106
  107. 107. 4. Flex Builder 3 ゗ンストール Copyright © Fusic Co., Ltd. All rights reserved. 107
  108. 108. 4. Flex Builder 3 ゗ンストール Copyright © Fusic Co., Ltd. All rights reserved. 108
  109. 109. 4. Flex Builder 3 ゗ンストール Copyright © Fusic Co., Ltd. All rights reserved. 109
  110. 110. 4. Flex Builder 3 ゗ンストール Copyright © Fusic Co., Ltd. All rights reserved. 110
  111. 111. 4. Flex Builder 3 ゗ンストール Copyright © Fusic Co., Ltd. All rights reserved. 111
  112. 112. 4. Flex Builder 3 起動 Copyright © Fusic Co., Ltd. All rights reserved. 112
  113. 113. 4. Flex Builder 3 新規プロジェクト Copyright © Fusic Co., Ltd. All rights reserved. 113
  114. 114. 4. Flex Builder 3 名前決めて作成 Copyright © Fusic Co., Ltd. All rights reserved. 114
  115. 115. 4. Flex Builder 3 できた Copyright © Fusic Co., Ltd. All rights reserved. 115
  116. 116. …手間が違いすぎる。 Copyright © Fusic Co., Ltd. All rights reserved. 116
  117. 117. 5. まとめ Copyright © Fusic Co., Ltd. All rights reserved. 117
  118. 118. Flex Builder最強! Copyright © Fusic Co., Ltd. All rights reserved. 118
  119. 119. …ではなく、 Copyright © Fusic Co., Ltd. All rights reserved. 119
  120. 120. 5. まとめ まとめ(ざっくり) ・Flex Builder 3が現状一番便利 ・AIR開発環境への取っ掛かり →AIR GEARはすぐ手が出せる →まずAIR GEARで慣れて 頃合いを見てFlex Builderに と言うのも選択肢の一つ Copyright © Fusic Co., Ltd. All rights reserved. 120
  121. 121. ご清聴ありがとうございました。 Copyright © Fusic Co., Ltd. All rights reserved. 121
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×