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

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

2008/10/04 株式会社Fusic 平田哲

Copyright © Fusic Co., Ltd. All rights reserved.

0. 自己紹介

2Copyright © Fusic Co., Ltd. All rights reserved.

0. 自己紹介

平田哲(id:debility)

・プログラマ・Perl/Java/PHP/Ruby/他・Directorも使います・サーバもいぢります・

3

© Mutsuking


1. AIR開発環境の種類


1. 開発環境の種類

Adobe Flex Builder 3→有償体験版あり

AIR GEAR→無償Eclipseプラグン

AIR SDK→無償 Adobe提供

なんかでも可能5Copyright © Fusic Co., Ltd. All rights reserved.

1. 開発環境の種類 – 選定

Adobe Flex Builder 3→有償体験版あり→体験版は機能制限あり→コード補完など強力→これもEclipseベース



AIR GEAR→無償Eclipseプラグン→Flexプロジェクトを作成→現在バージョン1.0→コード補完はまだない



AIR SDK→無償 Adobe提供→コマンドランで構築→かなり使いづらい


1. 開発環境の種類 – 結局

今日やること・AIR GEARの導入→ Eclipseベースの開発をつかむ・Flex Builder 3の紹介→ AIR GEARとの違いとか


2. AIR GEARの導入


2. AIR GEAR導入

登場人物・Eclipse本体・日本語化プラグン・GEF(Graphical Editing Framework)

・AIR SDK・Flex3 SDK・AIR GEARプラグン


2. AIR GEAR導入

Eclipse・元はPure JavaのIDE・オープンソースで開発・様々なプラグンによる拡張


2. AIR GEAR導入 - Eclipse

・Eclipse日本語Wikihttp://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/ganymede/SR1/eclipse-java-ganymede-SR1-win32.zip

関連するリンク先


http://eclipsewiki.net/eclipse/index.php?Eclipse

http://www.eclipse.org/

http://www.eclipse.org/downloads/download.php?file=/technology/epp/downloads/release/ganymede/SR1/eclipse-java-ganymede-SR1-win32.zip













やること・Eclipseをダウンロードして・適当なデゖレクトリに置いて・おしまい。・で、起動してみる



起動ロゴ



なんか出る

→後ほど説明します。16Copyright © Fusic Co., Ltd. All rights reserved.


OK押して起動



起動



いったん閉じる



なんか出る→後述



OK押して終了


2. AIR GEAR導入



CLEARED


2. AIR GEAR導入 – 日本語化

やること・pleiadesをダウンロード・解凍・中身をぼすっと乗せる・設定フゔルに1行追加・以上。

23

※Macはちょっと違うので注意してください

※

※



・pleiades公式http://mergedoc.sourceforge.jp/・pleiadesダウンロードhttp://sourceforge.jp/projects/mergedoc/downloads/33084/pleiades_1.2.3.p6.zip



http://mergedoc.sourceforge.jp/

http://sourceforge.jp/projects/mergedoc/downloads/33084/pleiades_1.2.3.p6.zip

http://sourceforge.jp/projects/mergedoc/downloads/33084/pleiades_1.2.3.p6.zip


解凍した中身



コピーする

この2つ



Eclipseのデゖレクトリ



貼る→ダゕログ出る



ぼすっと上書く前に

・Macは上書きしたらだめです→中身をコピーして貼る→でないと元が全部消える



ぼすっと上書き(Windows)



設定フゔル

eclipse.ini

31

※MacはEclipse.appの中にあります



メモ帳なりで開く



1行追加する

-javaagent:plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar

33

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忘れずに



保存して閉じる

上書き保存



起動してみる



なんか出る

→日本語ですね36Copyright © Fusic Co., Ltd. All rights reserved.


ワークスペースを決める

ワークスペースのデフォルトを固定しても問題ないならチェックをつける

作業領域を決める



起動日本語ですね



またいったん閉じる



終了確認ダゕログ



終了確認ダゕログ

お好みで。


2. AIR GEAR導入



CLEARED

CLEARED


2. AIR GEAR導入 – GEF

やること・GEFをダウンロード・解凍・中身をぼすっと乗せる・以上。

43

※Macはやっぱりちょっと違うので注意してください

※



・Eclipse公式 - GEFhttp://www.eclipse.org/gef/・GEFダウンロードhttp://www.eclipse.org/downloads/download.php?file=/tools/gef/downloads/drops/3.4.1/R200809101400/GEF-ALL-3.4.1.zip



http://www.eclipse.org/gef/

http://www.eclipse.org/gef/

http://www.eclipse.org/downloads/download.php?file=/tools/gef/downloads/drops/3.4.1/R200809101400/GEF-ALL-3.4.1.zip








解凍した中身



コピー→上書き（同様です）

この2つ



確認するヘルプ→ソフトウェゕ更新



確認する

このへんが確認できればOK


2. AIR GEAR導入



CLEARED

CLEARED

CLEARED


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/flexdownloads/#sdk



http://amateras.sourceforge.jp/cgi-bin/fswiki/wiki.cgi?page=AIRGEARDoc



http://www.adobe.com/products/air/tools/sdk/

http://www.adobe.com/products/flex/flexdownloads/

http://www.adobe.com/products/flex/flexdownloads/


解凍して置くだけなので略・しつこいようですが

→置いた場所は覚えておく→すぐ使います


2. AIR GEAR導入



CLEARED

CLEARED

CLEARED

CLEARED

CLEARED


2. AIR GEAR導入 – AG Plugin

やること・jarをダウンロード・pluginsデゖレクトリに置く・以上。



・AmaterasAIR公式http://amateras.sourceforge.jp/cgi-bin/fswiki/wiki.cgi?page=AmaterasAIR・AIR GEARプラグンダウンロードhttp://sourceforge.jp/projects/amateras/downloads/31824/net.sf.amateras.air_1.0.0.jar



http://amateras.sourceforge.jp/cgi-bin/fswiki/wiki.cgi?page=AmaterasAIR



http://sourceforge.jp/projects/amateras/downloads/31824/net.sf.amateras.air_1.0.0.jar

http://sourceforge.jp/projects/amateras/downloads/31824/net.sf.amateras.air_1.0.0.jar


ダウンロード

こんなの



Eclipseのデゖレクトリ

pluginsデゖレクトリ



pluginsデゖレクトリを開く



さっきのフゔルを置く



Eclipse起動



設定画面を開くウゖンドウ→設定



Eclipse設定画面

！



AIR GEAR設定画面

ここを設定する



AIR SDK選択

さっき置いたAIR SDK



Flex3 SDK選択

さっき置いたFlex3 SDK


2. AIR GEAR導入



CLEARED

CLEARED

CLEARED

CLEARED

CLEARED

CLEARED


3. AIR GEARで開発


3. AIR GEAR開発

Eclipse起動


3. AIR GEAR開発

新規プロジェクトを作る

フゔル→新規→その他...


3. AIR GEAR開発

ウゖザード選択


3. AIR GEAR開発

プロジェクト名を決める


3. AIR GEAR開発

完了する


3. AIR GEAR開発

AIR GEAR関連付け


3. AIR GEAR開発

プロジェクトができた


3. AIR GEAR開発

フゔルもできてる


3. AIR GEAR開発

application.xml


3. AIR GEAR開発

FirstAir.as


3. AIR GEAR開発

FirstAir.mxml


3. AIR GEAR開発

動かしてみる


3. AIR GEAR開発

起動した


3. AIR GEAR開発

Addを押してみる


3. AIR GEAR開発

足し算された


3. AIR GEAR開発

戻ってFirstAir.as

add()関数→ cにaとbを足した値をセットする


3. AIR GEAR開発

戻ってFirstAir.mxml

88

idがa


3. AIR GEAR開発


89

idがb


3. AIR GEAR開発


90

idがc


3. AIR GEAR開発


91

clickしたらadd()を呼ぶ


3. AIR GEAR開発

Airフゔルを作ってみる


3. AIR GEAR開発

エクスポート先選択


3. AIR GEAR開発

AIR Packageを選択


3. AIR GEAR開発

Airパッケージ出力設定


3. AIR GEAR開発

電子自己署名(KeyStore)作成


3. AIR GEAR開発

パスワード入力


3. AIR GEAR開発

KeyStoreが出来ているのを確認


3. AIR GEAR開発

できた


と、こんな感じです。


4. Flex3 Builderの話


4. Flex3 Builder

・Flex3公式http://www.adobe.com/jp/products/flex/・Flex3 Builderダウンロード（ログンページ）https://www.adobe.com/cfusion/tdrc/index.cfm?loc=ja&product=flex



http://www.adobe.com/jp/products/flex/

http://www.adobe.com/jp/products/flex/

https://www.adobe.com/cfusion/tdrc/index.cfm?loc=ja&product=flex

https://www.adobe.com/cfusion/tdrc/index.cfm?loc=ja&product=flex

4. Flex Builder 3

やること・ンストーラをダウンロード・ンストール・以上。


4. Flex Builder 3

ンストーラ起動


4. Flex Builder 3

ンストール


4. Flex Builder 3

起動


4. Flex Builder 3

新規プロジェクト


4. Flex Builder 3

名前決めて作成


4. Flex Builder 3

できた


…手間が違いすぎる。


5. まとめ


Flex Builder最強！


…ではなく、


5. まとめ

まとめ（ざっくり）・Flex Builder 3が現状一番便利・AIR開発環境への取っ掛かり

→AIR GEARはすぐ手が出せる→まずAIR GEARで慣れて

頃合いを見てFlex Builderにと言うのも選択肢の一つ


ご清聴ありがとうございました。


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

Technology

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