BLOG



カテゴリー "blog":6件

最近のAIR for iOS事情(2014/6)

6/27に無事iOSアプリが公開された「connect block」ですが、制作絡みで気になった点を、備忘録としてまとめておきます。

 

アプリ申請するには、最新のSDKが必要


制作中、自分のiPhoneでテストする限りは問題がありませんが、最後にApplication Loaderでipaを送信しようとするタイミングで次のようなエラーで弾かれてしまいます。

 

ERROR ITMS-9000: “This bundle is invalid. New apps and app updates submitted to the App Store must be built with Xcode ● and iOS ▲ SDK.” at SoftwareAssets/SoftwareAsset (MZItmspSoftwareAssetPackage)

 

「現在のiOS に対応していません」という旨のエラーです。
解決策としては、最新のAIR SDKを公式のこちらよりダウンロードして、再度パブリッシュします。

問題なのは次の2点で、場合によっては致命的です。

1) 出たばかりのFlash(CC 2014)が標準装備しているSDKがすでに時代遅れ(AIR 13.0。最新は14.0)

2) iOSが新しくなる→AIR SDKが更新されるまでにタイムラグがあるので、タイミングによっては、最新のSDKがリリースされるまで公開が待たされる場合がある。

 

Flashで対応されていない必須アイコン画像をどうにか埋め込む必要がある


iOS7以降で必須となった「80×80」、「120×120」、「152×152(iPad)」のアイコン画像を、Flashの「AIR for iOS 設定」から登録することができません。(Flash CCまで。CC 2014では項目が追加された

これもApplication Loaderで送信するタイミングでエラーになります。

 

ERROR ITMS-9000: “This bundle is invalid. The file is not a valid application bundle.” at SoftwareAssets/SoftwareAsset (MZItmspSoftwareAssetPackage)

 

この場合は、Macのコンソールから「パブリッシュしたipaを一度開いて画像を追加し、再度パッケージングを行う」ことが必要になります。

次の先人お二人の知恵に助けられました。
http://webconsole.blogspot.jp/2014/02/air-for-iositunes-connect.html
https://discussionsjapan.apple.com/message/100814182

 

すでに使えなくったANEもある


広告表示やアプリ内課金、GameCenterなどを利用したいがために、ANEが必要になる場合もあります。
自作ができなくても、無料・有料を含めていくつかのANEは公開されています。(まとめサイトなどもある)

ですが、公開されているもの・実際に使用実績があるものであっても、現在のiOSやAIR SDKで使えなくなってしまったものも多くあるようです。
connect blockの場合ですと、当初、アプリ内課金とGameCenterにAdobe Gaming SDK 1.3のANEを利用する予定でしたが、結局うまくいきませんでした。

その他いろいろ試して回りましたが、結局MilkmanGames のANEに落ち着きました。
有料・英語ですが、リファレンスやサンプル、PDFによる実装までのチュートリアルもキチンとありますし、購入後1年はメールサポートとANEのアップデートを無料で受けることができます。(アップデートもかなり精力的です)

恐らく次のAndroid版のリリースや、他のアプリ制作のときも利用させていただくことになると思います。

 

以上

 

Flash制作者としての立場から言わせていただくと、もう少し公式のレスポンスが早かったり、こういった裏ワザ的なことをせずに済むようになれば、大変助かるのですが….

LWF:privateDataを拾う

ようやく気がつけたのでまとめ。

loadLWF()するところで、privateDataを次のように設定したとする。

// privateDataに渡すパラメータ
var _param =
{
  test: "あいうえお"
}

window.onload = function() {
    var stage = document.createElement("canvas");
    stage.width = 0;
    stage.height = 0;
    document.body.appendChild(stage);

    LWF.useCanvasRenderer();
    cache = LWF.ResourceCache.get();
    cache.loadLWF({
        lwf: "hoge.lwf",
        prefix: "hoge.lwfdata",
        stage: stage,
        privateData: _param,
        onload: function(lwf) {
             window.lwf = lwf;
             window.lwf.setFrameRate(60);
        },
    });
};

 

自動生成される「hoge.js」内で取得するには、次のような感じ

trace( global.LWF.privateData.test ); // "あいうえお"がコンソールログに表示

はじめから定義されている、「LWF(= global.LWF.LWF)」経由ではダメらしい。

LWF_Publishを実行して、フリーズしたときの対処

開発を進めていき、フレームスクリプトにJavaScriptの組み込みを行っていると、ふとしたタイミングで「LWF_Publish」の実行時に画面がフリーズしてしまう場合がある。

こうなると一旦Flashを強制終了するしかないのだが、一度フリーズを経験したのち、問題のflaファイルを開いて再度LWF_Publishを実行しても、まだフリーズが続いてしまうことがある。
(保存できずに強制終了しているのだから、おかしくなる前のデータのはずなのに!)

 

こういったJavaScripがらみでのフリーズが頻発するようになった場合に復活させる方法は次のとおり。


1) [パブリッシュ設定]より、「非表示レイヤーを含める」のチェックを外す

2) 一旦_root上のすべてのレイヤーを非表示にして、LWF_Publishを行う
  ※何もないのでさすがにこれは通るはず

3) パブリッシュ後、非表示にしたレイヤーを元に戻し、再度LWF_Publishを行う

 

要するに、「ステージ上に何もない」状態でのパブリッシュを挟むと、フリーズせずに書き出すことができる模様。(パブリッシュキャッシュの影響とか?けど、クリアしても変わらずフリーズだったし…)

「ステージ上に何もない」状態を作れば良いので、「レイヤーを一度全削除する」とか「すべてのレイヤーをガイドにする」とかもたぶんOKだと思うけど、上記のやり方のほうが楽ちんなはず。

LWF:初期化時にインスタンス名からフレーム移動

例えば、「card」という名前のMovieClipシンボルが図のように5つあって、それぞれ「c1~c5」のインスタンス名がついている。
sample01_pic_01

MovieClipシンボルは次のように、フレームごとに別の画像が入っている感じ。
sample01_pic_02

これをLWFの初期化のタイミングでインスタンス名に応じて、フレーム移動して表示を切り替えたい(c3 ならば 3フレーム目の画像を出す)としたいとき、ちょっと手こずった。

 

1)LWFのonloadのタイミングで指定した場合

→ 例えば次のようにHTMLのloadLWF()のonloadパラメータに記述してみる。

"onload": function( lwf )
{
  window.lwf = lwf;

  window.lwf.rootMovie.c1.gotoAndStop( 1 );
  window.lwf.rootMovie.c2.gotoAndStop( 2 );
  window.lwf.rootMovie.c3.gotoAndStop( 3 );
  window.lwf.rootMovie.c4.gotoAndStop( 4 );
  window.lwf.rootMovie.c5.gotoAndStop( 5 );
 }

これは反映されない。
ブラウザコンソールでエラーが出ているので確認すると、次のようになっている。

Uncaught TypeError: Cannot read property 'c1' of undefined
※ Google Chromeの場合

シンボルの準備ができていないので「undefined」扱いとなり、gotoAndStop()しても利かない模様。

 

2) Flashの_rootのフレームスクリプトでJavaScriptで呼び出す

→ 次のような構成でJavaScriptを記述。

■ 1フレーム目:
/* js
this.c1.gotoAndStop( 1 );
this.c2.gotoAndStop( 2 );
this.c3.gotoAndStop( 3 );
this.c4.gotoAndStop( 4 );
this.c5.gotoAndStop( 5 );
*/

■ 2フレーム目:
フレームラベルで「loop」を設定

■ 16フレーム目(最終フレーム):
/* js
this.gotoAndPlay("loop");
*/

sample01_pic_03
反映されるがワンテンポ遅れる。一瞬始めの状態の「1」の表示が見切れてしまう。

/* js_load    (MovieClipが生成されたタイミングで1回だけ実行)
/*js_postLoad    (MovieClipが再生準備が整った時に1回だけ実行)
という指定の方法もあるので、変更して試してみたが、これも特に変わらず。
(書きだされるJavaScriptは変更をうけているが…)

 

3) Flashのcardシンボル内のフレームスクリプトでJavaScriptで呼び出す

→ _root/c1にもぐって、cardシンボル内のフレームスクリプトに以下のように記述。

stop();

/* js

// 3) これだとタイミングがバッチリ

// インスタンス名から、番号部分を取得
var _id = this.name.substr( 1 );
// そのままだと、文字列扱いなので数値化
_id = parseInt( _id );
// フレーム移動で切り替え
this.gotoAndStop( _id );

*/

これはうまく反映された。ここまでもぐって記述しないとダメみたい?

という一連の結果でした。
その他、LWFでも有効となっているtellTarget()も試してみたのですが、ちょっと使い方が分らず。

参考までに、検証に使用したファイル一式(Fla_CS6)も置いておきます。
sample01.zip

LWFの導入とデモ確認までの流れ(windows)

業務の関係で、LWFをテストする機会があったので、導入までの流れをまとめてみました。
(LWFSについてはまた別の機会に)

 

1) LWFをダウンロードする

次の2箇所にアクセスしてGitかzipでファイルをダウンロードします。

https://github.com/gree/lwf
https://github.com/gree/lwf-demo

サイトのダウンロード場所
(ダウンロード場所は、サムネイル参照)

 

どちらにしろ「スペースが含まれている」「日本語(2バイト)を含む」ようなフォルダにはダウンロードしないこと。
のちのちトラブルの原因になります。

また、ダウンロードしたフォルダはそれぞれ「lwf」「lwf-demo」に名前変更してください。
htmlやjsファイル内のパスを変更することなく、デモファイルを確認できるようになります。

 

2) jsflをインストールする

lwf/tools/flash内に次の2つのjsflが入っています。

・include JavaScript for LWF.jsfl
・LWF_Publish.jsfl

いずれもFlashにインストールすると、LWFの書き出しに必要な

・LWFフォーマットのチェック
・ASリンケージの自動設定
・画像ファイルの抽出(「○○.bitmap」フォルダに書き出される)
・SWFの書き出し

を一度にしてくれます。

ただし、JPEGファイルは強制的に「ロスレスPNG」として扱われるようです。
(書き出される画像ファイルもPNG。自分の環境だけ?)

 

3) Rubyをインストールする

swfからlwfへのコンバートを行う「swf2lwf.rb」はRubyのファイルなので、windowsの場合は別途Rubyのインストールが必要です。
LWFSのドキュメントからの参照ですが、 Ruby1.9.3とDevKitが必要なようなので、http://rubyinstaller.org/downloads/より、次の2つをダウンロードします。

・Ruby 1.9.3-p429
・DevKit-tdm-32-4.5.2-20111229-1559-sfx.exe

 

インストール方法については、下記の説明がわかりやすいです。

http://www.rubylife.jp/install/install/index1.html
http://www.rubylife.jp/railsinstall/rails/index4.html

 

4) ローカルでデモページを確認する

LWFでは、動的にlwfファイルからJavaScriptでローカルファイルを作成している(っぽい)ため、ブラウザによっては「ローカルファイルの作成」が引っかかって正常に表示されない場合があります。
(サーバー上での確認であれば引っかからないので問題なし)

https://github.com/gree/lwf/wiki/ForHTML5にGoogle Chromeで表示を有効にする方法が書いてありましたが、自分のところではうまくいきませんでした。

 

その他の方法として、自分で試したのは以下の方法です。

 

1)  xamppなどのローカルサーバー環境を作成して確認

「サーバーが必要なら用意すればいい」ということで、環境を作成し、そこから確認を取る方法。
これだとブラウザ別でのチェックもできます。

インストールについては、下記の説明を参考にしてください。
http://www.adminweb.jp/xampp/install/index1.html

 

2) Dreamweaverのライブビューで確認

作業の過程で気がついたのですが、Dreamweaverの[ライブビュー]からでも動作確認を取ることができました。コードを書く作業と合わせるととても便利です。
また、[サイトレポート]ウインドウを見ればtraceの内容なども確認することができます。

 

自分の場合は、Dreamweaverでの作業が身軽でしたのでこれを採用して進めています。

LWF_Publish.jsflの警告メッセージの意味とその対応

備忘録代りに。

Flashから「LWF_Publish.jsfl」を実行したときに出てくる警告メッセージについて、その意味とどう対応すればよいかをまとめ。(適時追記)

Fixed warning no extention [数字]. symbole name = ○○

=  画像の名前に「拡張子(.pngなど)」がない
→ 名前に拡張子を付け足すと回避できる。

Warning shape is contained [数字]. symbole name  = ○○

=  シンボルの中にシェイプが含まれている
→ シェイプをビットマップに置き換える。
なお「グループ」が含まれていても警告は出るようなので注意。(ただし表示は問題なくされる)

Fixed error missing text instance name [数字]. text name = ○○. symbole name =

=  ダイナミックテキストにインスタンス名が設定されていないので、自動修正した
→ 修正されているので、当然のことながら二度目の書き出しでは引っかからない。

Fixed error missing text variable [数字]. text name = ○○. symbole name =

=  ダイナミックテキストに変数名([オプション]→[変数])が設定されていないので、自動修正した
→ 修正されているので、当然のことながら二度目の書き出しでは引っかからない。