エイバースの中の人

アプリとWEBサービスを作っているABARSのBLOGです。

AdobeFlex

Adobe AirでInvalid Bundleのエラーが出る

Adobe AirでiOSアプリを作成して申請すると、Application Loaderでは成功しますが、iTunes Connectの認証で以下のエラーが発生しました。

Invalid Bundle - The bundle at '/Payload/イラブペイント.app' does not contain a bundle executable.


ipaをunzipしてinfo.plistを確認しても、CFBundleExecutableは正しく記述されていますが、どうやら、日本語だと弾かれるようです。

xxx-app.xmlのfilenameを英語表記に変更し、nameにアプリ名を日本語で入力することで、回避できました。

FlexにおけるFlashコンテンツのHigh DPI対応

retinaディスプレイを搭載したノートパソコンや、4kディスプレイなど、High DPIな環境が増えてきました。Flash Playerでは11.2からバックバッファがネイティブ解像度で確保されるようになり、ベクトルデータは自動的にHigh DPI対応されるようになりました。

しかし、高速化のためにBitmapDataを使って画像をキャッシュしているような場合、自動的にはHigh DPI対応されません。この場合、アクションスクリプトからDPIを取得して、High DPI対応する必要があります。

現在のDPIはFlash Player 11.5から加わった、stage.contentsScaleFactorで取得することができます。(Adobe AIR Developer Center /Creating and using high resolution images in Flash Player

この値を使用して、以下のように、stage.contentsScaleFactor倍したBitmapDataを定義しておき、Bitmapインスタンスのwidthとheightをstage.contentsScaleFactorで割ってaddChildすることで、High DPIで描画することができます。

var myBitmapData:BitmapData = new BitmapData(
 tf.height*stage.contentsScaleFactor, tf.width*stage.contentsScaleFactor);
bitmap = new Bitmap(myBitmapData);
bitmap.height /= stage.contentsScaleFactor;
bitmap.width /= stage.contentsScaleFactor;
addChild(bitmap);

AdobeAir3.9でiOS7向けのアプリを開発する

AdobeAir3.9を使用することで、iOS7向けのアプリを開発することができます。 Flexのコードをそのまま使用できるので、Flashの資産を活用することができます。 Adobeの公式ドキュメントとしては、初めての AIR for iOS アプリケーションの作成がオススメです。

SDKのインストール

AdobeAir3.9でiOS7のアプリを開発するには、Flex4.6とAir3.9をインストールする必要があります。

Flex4.6は http://www.adobe.com/devnet/flex/flex-sdk-download.html からダウンロードします。ダウンロードが終わったら、/Library/flex_4.6など、適当なフォルダに展開します。

Air4.6は http://www.adobe.com/devnet/air/air-sdk-download.html からダウンロードします。目立つリンクではなく、下のリンク(Note: Flex users will need to download the original AIR SDK without the new compiler.)からダウンロードします。ダウンロードが終わったら、展開し、/Library/flex_4.6に上書きします。

MacはWindowsとは異なり、”常に上書きする”を選択すると、フォルダの上書き時に存在しないファイルを消してしまうので、上書きする時のダイアログで、”新しい方を使う”を選択して下さい。

最後に、~/.bash_profileにパスを追加します。

PATH=$PATH:/Library/flex_sdk_4.6_air39/bin
export PATH


これでインストールは完了です。

Air定義ファイルの作成

次のように、Air用の定義ファイルを作成します。[アプリ名]-app.xmlとして保存します。

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/3.9">
    <id>biz.abars.IllustBook</id>
    <versionNumber>1</versionNumber>
    <filename>イラブペイント</filename>
    <description>イラストブック 投稿用画像作成ツール</description>
    <copyright>(C) ABARS 2013</copyright>

    <initialWindow>
        <title>イラブペイント (C)2013 ABARS</title>
        <content>IllustBook.swf</content>
        <systemChrome>standard</systemChrome>
        <transparent>false</transparent>
        <visible>true</visible>
        <aspectRatio>landscape</aspectRatio>
        <autoOrients>false</autoOrients>
    </initialWindow>
    
    [次項を必要に応じて追加]
</application>


iOS用のアイコンを変更するには、iconsフォルダに画像を入れて、以下のように記述を追加します。iOS7から要求されるアイコンサイズが増えているので注意です。

    <icon> 
        <image72x72>icons/icon72.png</image72x72> 
        <image76x76>icons/icon76.png</image76x76> 
        <image144x144>icons/icon144.png</image144x144> 
        <image152x152>icons/icon152.png</image152x152> 
        <image512x512>icons/icon512.png</image512x512> 
    </icon> 


iPadだけで実行できるようにしたり、iOS7だけをターゲットにするような場合は、以下のようにCDATAセクションの記述を追加することで、iOS向けのplistを変更できます。

   <iPhone> 
        <InfoAdditions> 
            <![CDATA[ 
                <key>UIDeviceFamily</key> 
                <array>
                    <string>2</string>
                </array>
                <key>MinimumOSVersion</key>
                <string>7.0</string>
            ]]>
        </InfoAdditions> 
    </iPhone> 


Airアプリのビルドとデバッグ

amxmlcでswfを作成します。Flexのmxmlcの代わりにamxmlcを使うイメージです。

amxmlc -default-size 1024 768 IllustBook.as
作成した定義ファイルでadlコマンドを呼ぶと、PCで実行することができます。

adl IllustBook-app.xml


iOS向けの書き出し

iOS向けの書き出しには、iOS_Team_Provisioning_Profile_.mobileprovisionと、iphone_developer.p12が必要です。これらは、Appleの有料のiOS Developer Programに加入して取得する必要があります。既にiOSアプリの開発者の場合は、キーチェーンアクセスから”自分の証明書”を選択し、書き出しで取得できます。mobileprovisionはiOS Developer CenterのProvision Portalから取得します。

これらを取得できれば、次のコマンドでiOS向けの書き出しが行えます。

adt -package -target ipa-debug -keystore provision/iphone_developer.p12 
-storetype pkcs12 -storepass パスワード
-provisioning-profile provision/iOS_Team_Provisioning_Profile_.mobileprovision 
IllustBook.ipa IllustBook-app.xml IllustBook.swf icons Default-Landscape.png


アイコンを設定する場合、adtコマンドにフォルダを指定しないと、Icon is missing from package エラーが出ます。また、Default-Landscape.pngで、起動画像を設定することもできます。

生成されたipaは、iTunesのライブラリに追加した後、同期することで、実機に転送することができます。

iOS7でステータスバーにコンテンツが重なる

iOS7でAir3.9を使うと、ステータスバーにコンテンツが重なってしまいます。これは、iOS7の仕様で、自分で20px、コンテンツをずらしてやる必要があります。

Air3.2でiOS版が中華フォントになる

Air3.2ではiOS版が中華フォントになってしまいますが、Air3.9では治っています。

マルチタッチに対応する

MultitouchInputMode.GESTUREを使うと簡単です。

動作速度

昔、auのXoomのFlashPlayerでテストした時は、とてもとても遅くて使い物にならなかったのですが、AdobeAir3.9は普通にさくさく動いてびっくりしました。開発効率を考えると、FlexとAirで書いて、PC、iOS、Androidでマルチプラットフォーム展開するのは、結構、ありな気がします。

BZzWu8mCAAEKbbt

AdobeのScoutでFlashコンテンツをプロファイル

従来、Flexで作ったFlashのコンテンツをプロファイルする場合、FlashBuilderを購入する必要がありました。FlashBuilderは統合開発環境なので、プロファイルだけを使うのにはいろいろと面倒でした。

しかし、ついに、Adobeが次世代のプロファイラである、Scoutをリリースしました。これは、vTuneのような単独で動作するプロファイラで、無料でFlashBuilderよりも高度なプロファイルを取ることができます。

Getting started with Adobe Scout

まず、Scoutをダウンロードしてインストールします。後は、Scoutを起動して、ブラウザでFlashを再生すると自動的にプロファイルデータが表示されます。簡単です。

さらに、ActionScriptの関数まで表示させたい場合は、swfファイルにtelemetryのフラグを立てる必要があります。まず、add-opt-in.pyをダウンロードします。次に、コマンドラインで、./add-opt-in.py hoge.swfと実行すると、swfファイルにtelemetryフラグが立ちます。

この状態で、Scoutを実行すると、各関数の負荷がScoutに表示されます。試しに、イラストブックで実行してみると、以下のような感じになります。便利すぎます。

scout

Scout開発の背景としては、今後、Flashはゲーム向けにフォーカスしていくということで、パフォーマンス・チューニングに必要な高機能なプロファイラへの要求が大きかったようです。

Windows8のModernStyleでもFlashが使えるようになりましたし、モバイル端末のパフォーマンスの向上と共に、Flashの開発効率の高さが再評価されるとよいなと思います。HTML5のブラウザ依存が激しすぎるので、ゲームとかはFlashの方が楽です。

Flexでifdefのようなことをする

FlashPlayer11.2向けにビルドする時はMouseEvent.CONTEXT_MENUを使用して、そうでない時は使用しないということをやりたい場合があります。C言語の場合はifdefを使いますが、Flexの場合は条件付きコンパイルを使います。

コンパイルオプションに、defineを書きます。

mxmlc IllustBook.as -output IllustBook.swf -swf-version 15 -target-player 11.2 -define=CONFIG::context_menu_event_enable,true
mxmlc IllustBook.as -output IllustBook10.swf -swf-version 10 -target-player 10 -define=CONFIG::context_menu_event_enable,false


書いたdefineをActionScriptから参照します。

if(CONFIG::context_menu_event_enable){
m_child.addEventListener(MouseEvent.CONTEXT_MENU, onContextMenuHandler );
}


FlashPlayer10向けの環境ではMouseEvent.CONTEXT_MENUは定義されていませんが、CONFIG::context_menu_event_enableが定数最適化で消えるので、コンパイルエラーになりません。

Flexで特定のFlashPlayer向けにビルドする

FlashPlayer11.2からは右クリックイベントを取得できるようになっています。具体的に、

m_child.addEventListener(MouseEvent.CONTEXT_MENU, onContextMenuHandler );

のようにすると右クリックイベントを取得できます。

ただし、この機能は、FlashPlayer11.2向けにビルドしなければコンパイルエラーになります。特定のバージョン向けにビルドするには、swf-versionオプションとtarget-playerオプションを使います。具体的に、次のようにすると、FlashPlayer11.2向けとFlashPlayer10向けにビルドすることができます。

mxmlc IllustBook.as -output IllustBook11.swf -swf-version 15 -target-player 11.2
mxmlc IllustBook.as -output IllustBook10.swf -swf-version 10 -target-player 10

コンパイルには、該当するバージョンのFlashのライブラリが必要です。ライブラリは、

flex_sdk_4.6/frameworks/libs/player

フォルダにあります。ここに、11.2などのバージョンごとのフォルダがあり、その中にあるplayerglobal.swcがライブラリです。flex_sdk_4.6には11.1向けしか入っていないので、flex_sdk_4.1から10.0向けを、Google検索などから11.2向けをダウンロードしてきます。そうすると、ビルドが通るようになります。
Search
Profile

abars

アプリとWEBサービスを開発しています。最近はUnityとGAE/pyが主戦場。

ブラウザ向けMMOのメトセライズデストラクタ、イラストSNSのイラストブック、東証の適時開示情報を検索できるTDnetSearchを開発しています。

かつてエンターブレインのTECH Win誌でATULADOを連載しました。

サイト:ABARS
Twitter:abars
Github:abars

Twitter
TopHatenar
HotEntry
Counter

アクセス解析付きカウンター。あなたのBLOGにもどうですか?登録はこちらから。

TOP/ BLOG/ LECTURE/ ONLINE/ RUINA/ ADDON/ THREAD/ METHUSELAYZE/ IPHONE/ MET_IPHONE/ ENGLISH/ RANKING