FlashDevelop4 RC1 & AIR3 でAIR for iOSを試してみた

By ton4 Comments

2011年10月4日、ついにFlash Player 11 と AIR 3 が出ましたね
FP11最大の目玉である3D機能とそのGPUレンダリング、その他にも地味に嬉しい新機能がいっぱいです
新機能の詳細は以下のリリースノートを御覧ください
Flash Player 11 および AIR 3 リリースノート

また少し前にFlashDevelop4のRC1がリリースされました
馬鹿全 – FlashDevelop4.0.0 RC1 リリース

このバージョンからAIR モバイルプロジェクトのテンプレートが追加されました
このプロジェクトを選択すると、AndroidとiOS向けのAIRを作成することができます
できればAndroidも試してみたかったのですが持ってないので、今回はAIR for iOSに絞って手順を紹介していきます

この記事で試した環境はWindows7 + Flex 4.5.1 SDK + AIR 3.0 SDK + FlashDevelop4.0.0RC1 + iPhone4 iOS 4.3.5 です

この記事を実際に試すには、有料のApple iOS Developer Program に登録する必要があります

こちらの記事も参考にするといいかもしれません
AIR2.7でAIR for iOSを試してみた

ちょっと長いので覚悟してくださいw

  1. Flex 4.5 SDKをダウンロード
  2. AIR 3 SDKをダウンロード
  3. playerglobal.swcをダウンロード
  4. FlashDevelop4.0.0 RC1をダウンロード
  5. AIR Mobile AS3 Appプロジェクトを作成
  6. Flex SDKの設定
  7. FP11&AIR3の設定
  8. ビルドする
  9. AIRアプリの設定
  10. 開発用証明書とプロビジョニングプロファイルの設定
  11. パッケージ化
  12. 実機でデバッグ
  13. まとめ

Flex 4.5 SDKをダウンロード

Flex SDKをダウンロードしてきます
Download Flex 4.5 – Flex SDK – Adobe Open Source
今の時点で最新バージョンの4.5.1.21328のAdobe Flex SDKをダウンロード
ダウンロードしたら解凍してフォルダを好きな場所に保存します

AIR 3 SDKをダウンロード

次にAIR SDKをダウンロードしてきます
rich Internet applications | Adobe AIR SDK
ここからダウンロードし、解凍したらフォルダの中身を全てFlex SDKのフォルダの中に移動します
色々上書きされると思いますがおkです

playerglobal.swcをダウンロード

追記
playerglobal.swcはFlashDevelopが自動的に用意してくれるので、自分でダウンロードしてくる必要はないみたいです
この項目は飛ばしてください
(@bkzenさんありがとうございます)
追記終わり

ここからplayerglobal.swcをダウンロードしてきます
本当はAIRでパブリッシュするならこれはいらないんですけど、一応FP11でパブリッシュする時のために用意しときましょうw
Adobe Flash Player – Downloads
Download the playerglobal.swc to target the 11.0 APIs (.swc, .329KB) というとこ
ダウンロードしたら、playerglobal11_0.swcという名前になっていると思うので、playerglobal.swcという名前に変更してください
次にFlex SDKフォルダの中のframeworkslibsplayerフォルダの中に11.0というフォルダを作ってその中にplayerglobal.swcを入れてください

FlashDevelop4.0.0 RC1をダウンロード

FlashDevelop4.0.0 RC1をダウンロードしてきます
FlashDevelop 4.0.0 RC1 released
このページの最後の方、Download FlashDevelop 4.0.0 RC1をクリックするとダウンロードできます

ダウンロードできたら、インストール
前のバージョンのFDが入ってる人はクリーンインストールをおすすめします
インストール時にFlex SDKとAIR SDKも一緒にダウンロードしてくれますが、今回は自分で落としてきたのでFlex SDKとAIR SDKのチェックは外しときます

AIR Mobile AS3 Appプロジェクトを作成

インストールしたらFlashDevelopを立ち上げ、メニューからProject>New Projectを選択して下さい
プロジェクト一覧にAIR Mobile AS3 Appというプロジェクトがあると思うので選んでプロジェクトを作成してください

Flex SDKの設定

次にFlashDevelopのFlex SDKの設定をします
ProjectパネルからProjectプロパティを選択

下のようにFlex 4.5.1, AIR 3.0 にはなってないと思うので、Manageボタンを選択します

Installed Flex SDKsという項目をクリックすると右端にボタンが出てくるのでクリック

追加ボタンを選択すると新しいSDKの設定が追加されます
右側のPathという項目を選択し右端のボタンをクリック
フォルダを選択するウィンドウが出てくるので、先程ダウンロードしたFlex SDKのフォルダを選択してください

Flex SDKのフォルダを選択するとFlexとAIRのバージョンが出てくるので、先程ダウンロードしたバージョンと一致していればおkです
このSDKをデフォルトのSDKにしたい場合は、上矢印のボタンをクリックして、0番目に持ってくればおkです

Manageボタンを押したとこまで戻り、Flex 4.5.1, AIR 3.0の項目を選択し、OKをクリック

もうちょっとですw

プロジェクトのbatフォルダの中にSetupSDK.batというファイルがあるはずです
これを編集
4行目のset FLEX_SDKというところを先程のFlex SDKのフォルダのパスにします
デフォルトのSDKを設定している人はそのSDKのパスが既に書かれていると思います

これでFlex SDKの設定はおkです

FP11&AIR3の設定

次にFP11とAIR3の新機能を使うための設定です

まずProjectプロパティを開いて、AIR Mobileの3.0にしましょう

次にProjectプロパティのCompiler Optionsタブ、一番上のAdditional Compiler Optionsという項目の右端のボタンをクリック
文字列コレクションエディタというウィンドウが出てくるので

-swf-version=13

という文字を追加してください

最後に、プロジェクトの中にあるapplication.xmlを開いてください
2行目に書いてあるxmlnsの最後の数字を3.0にしてください

< application xmlns="http://ns.adobe.com/air/application/3.0" >

これでFP11とAIR3の機能が使えるようになりました

ビルドする

ようやくビルドできます
F5を押してください
エラーが出る場合は設定がおかしいかもしれません、もう一度上の手順を確認してください
実行できた場合はウィンドウが出てきますが、デフォルトではNexusOneのサイズになってます
Run.batファイルの17行目をコメントアウトし、18行目のコメントを外すとiPhoneRetinaのサイズになります

ちなみに名前をiPhoneやiPadに変更するとそれぞれのサイズに変更することができます

AIRアプリの設定

AIRアプリ固有の設定を行います
AIRアプリの設定はProjectプロパティボタンの隣にあるAIR Appプロパティボタンから編集できます
ここを編集すると、application.xmlに反映されます

IDのところは、後述するプロビジョニングプロファイルを取得する際に設定したアプリケーションIDと同じにする必要があります
また、IDを変更した場合はbatフォルダのSetupApplication.batの35行目、APP_IDに同じIDを書く必要があります

application.xmlの例を貼っときます

開発用証明書とプロビジョニングプロファイルの設定

実機に転送するには、開発用証明書とプロビジョニングプロファイルというものが必要です
これはApple iOS Developer Program に登録して、Appleのサイトから取得してくる必要があります
Overview – iOS Provisioning Portal – Apple Developer
結構めんどくさいので省きますが、Adobe Flash Platform * iPhone 開発ファイルの入手と操作を参考にするか、ググったらいっぱいでてきますよw

用意できたら、それをプロジェクトのcertフォルダの中に入れてください
次にbatフォルダの中のSetupApplication.batを編集
19行目のIOS_DEV_CERT_FILEに開発用証明書の場所
20行目のIOS_DEV_PASSに開発用証明書のパスワード
21行目のIOS_PROVISIONにプロビジョニングプロファイルの場所
を設定してください

18行目のIOS_DIST_CERT_FILEというところはアプリを配布するときに必要な証明書の場所を書くのですが今回は配布しないので必要ありません。配布するときには配布用の証明書を用意して、ここを設定しましょう

もしパスワードを書きたくなければ、24行目の

 -storepass %IOS_DEV_CERT_PASS%

というところを削除してください
そうするとパッケージ化するときにコマンドプロンプト上でパスを聞かれるようになります

パッケージ化

AIRをiOS用にパッケージ化します

あ、その前に、プロジェクトの中にiconsフォルダがあるんですが、binフォルダの中にもiconsフォルダがあります
このbinフォルダの中のiconsフォルダはFDのバグなので消してください
消さないとパッケージ化に失敗してしまいます
アイコン画像は、icons/ios/iconsの中に保存するようにしてください

PackageApp.batを実行してください
FDからはPackageApp.batを右クリックでExecuteを選ぶと実行できます
するとメニューが出てくるので、目的の番号を入力してエンターを押すとパッケージ化されます

iOS用のメニューの意味は次の通りです

  • [4] fast test (ipa-test-interpreter)
  • [6] slow test と機能的には同じですが、コンパイル時間が短くなります。ただし、ActionScript バイトコードが解釈され、マシンコードには変換されません。そのため、インタープリターパッケージではコードの実行が遅くなります。

  • [5] fast debug (ipa-debug-interpreter)
  • [7] slow debug と機能的には同じですが、コンパイル時間が短くなります。ただし、ActionScript バイトコードが解釈され、マシンコードには変換されません。そのため、インタープリターパッケージではコードの実行が遅くなります。

  • [6] slow test (ipa-test)
  • 最適化やデバッグ情報を含まずにコンパイルされた iOS パッケージです。

  • [7] slow debug (ipa-debug)
  • 追加のデバッグ情報を含む iOS パッケージです(アプリケーション内の SWF ファイルも、デバッグサポートを使用してコンパイルする必要があります)。

  • [8] “ad-hoc” (ipa-ad-hoc)
  • アドホック配布用の iOS パッケージです。

  • [9] App Store (ipa-app-store)
  • Apple App Store 配布用の iOS パッケージです。

    パッケージ化するとdistフォルダが作られ、その中にipaファイルが作成されます
    ipaファイルを実行するか、iTunesにドラッグ&ドロップするとiTunes内に送ることができるので、後はiPhoneと同期すれば転送完了です

    実機でデバッグ

    iPhoneで動かしながらデバッグしてみます
    これはiPhoneを無線LANに接続する必要があります

    まず一回デバッグビルドしておきます
    次にSetupApplication.batの42行目、DEBUG_IPのところにFlashDevelopを起動してるPCのIPアドレスを書きます
    ここは書かなくても動きますが、iPhoneからアプリを起動するたびにIPアドレスを聞かれるようになるので、毎回打つのがめんどい人は書いておいた方がいいですw

    次にパッケージ化します
    この時にメニューの[5]か[7]のデバッグモードでパッケージしてください
    ipaファイルが書き出されたら、それを実機に転送します

    アプリを起動する前に、無線LANに接続し、iPhoneがデバッグするPCと同じLANに接続されていることを確認してください

    FDのDebugメニューの一番下、StartRemoteSessionを選択します

    そうするとリモートデバッグの待機状態になるので、iPhoneから転送したアプリを起動してください
    接続できるとデバッグパネルが起動します
    アプリを起動したときにIPアドレスを求められた場合は、IPアドレスが間違っているかRemoteSessionが終了している可能性があるので、もう一度StartRemoteSessionを押し、IPアドレスを直打ちしてみてください

    無事リモートデバッグが開始されると、コード内のtrace文が表示されるようになったり、ブレークポイントを設定して任意の場所で一時停止し、変数の中身を見ることもできます
    普通のデバッグと同じことが実機で動かしながらできるわけです!

    ブレークポイントの設定の仕方は、一時停止させたいコードの行数が書いてある所の左をクリックしてください
    赤い丸が出てきたらおkです

    リモートデバッグしたときにこのコードの場所が実行されると自動的に一時停止するようになります

    一時停止したときにそこから参照できる変数とその中身がデバッグパネルから見ることができます
    便利ですねw

    まとめ

    ようやくFlashDevelopでiOSとAndroid書き出しができるようになりましたね
    今まではコマンドラインでやる必要があったので、これでだいぶ開発しやすくなったのではないかと思います
    特にリモートデバッグはコマンドラインでやるより格段にわかりやすくなりました

    しかしまだbatファイルの中を色々編集しなければいけないので少し面倒くさいのが正直な所ですw
    batファイルを完全に見えないようにして全てプロパティから設定できるようになればもう少し楽になるのかなーと思います
    まだまだこれからのFlashDevelopに期待ですね!


    AIR, AS3, Flash, iPhone

    4 Comments to “FlashDevelop4 RC1 & AIR3 でAIR for iOSを試してみた”

    1. […] 参考サイト FlashDevelop4 RC1 & AIR3 でAIR for iOSを試してみた FlashDevelop4でAIR for iOSの実機確認ができるまで for Windows iPhoneアプリ開発開始時に気をつけるべきファイルの取り扱い (2) […]

    2. […] 也可參考這篇 : http://ton-up.net/blog/archives/767 本篇發表於 [ Air ] 與標籤於 air ios flashdevelop 由 jack.chen。固定網址書籤。 […]

    3. […] iPhoneに関する、はてなブックマーク新着情報です。 FlashDevelop4 RC1 & AIR3 でAIR for iOSを試してみた | ton-up blog – とんぶろ […]

    Leave your Comment

    メールアドレスが公開されることはありません。

    Blue Taste Theme created by Jabox