これで解決!?Adobe AIR開発のハマりポイント

Blog_Icon.png

前回「ANE For Mobage Native SDKサンプルコード」を紹介させていただきましたテクニカルコンサルティンググループのホセです。

今回は同梱されているサンプルアプリのチュートリアルを紹介しながらつまづきがちなポイントを取り上げていきます。

 

 

チュートリアルの前に

既にご存知の方もいると思いますが、今年の2月より、Xcode5 (iOS7 SDK)によるビルドでないと、Appleのアプリケーション審査を通過できなくなりました。この新しい基準に対応できるAdobe AIRのバージョンが4.0以降になりますので注意してください。

ANE For Mobage Native SDKサンプルコードがAdobe AIR 4.0でもビルドできるようにextension.xmlとiOS-options.xmlを修正しましたので、最新のコードをGithubからpullしてください。

なお、Adobe Flash Builder以外でFlashDevelop(4.5 現在)を利用している場合はAdobe AIR 4.0には正式にサポートされていないので注意です。以下のフォーラムには方法が記載されていますが自己判断で使ってください。

http://www.flashdevelop.org/community/viewtopic.php?f=9&t=11509

サンプルアプリ「UICompSample」のチュートリアル

こちらのサンプルアプリ「UICompSample」はANE For Mobage Native SDKのソースコードに含まれており、実際にほぼ全てのAPIの動作を確認できる優れものです。名前に「UI」と入っていますが、UIのデザインに関するツッコミはカンベンしてください。

前提条件として前回紹介したブログのGithubのソースをダウンロードし、ANE(AIR Native Extension)を生成していることが前提としています。まだの方は前回のブログを見てみてください!

今回利用した環境です

- Mac OS X 10.9

- Flash Builder 4.7 (FLEX AIR 4.0)

- AIR SDK 4.0

- Xcode 5

- Android Developers Tools 23

 

プロジェクトをFlashBuilderにインポートしてみましょう。

上記のメニューから「File」=>「Import ...」

image1.png

Importの画面が表示されたら、

「General」=>「Existing Projects into Workspace」=>「Next」

image2.png

プロジェクトのファイルパスを選択し、「Finish」でインポートは完了です。GitHubからcloneした場合はファイルパスが「ANE4MobageNativeSDK/samples/UICompSample」になります。

image3.png

次は生成したANEをライブラリーに紐付けしましよう。

プロジェクトハイライトしている状態から上記のメニューから「File」=>「Properties」

image4.png

「Properties」画面が表示されたら、「ActionScript Build Path」を選択し、タブにある「Native Extensions」を選ぶ

image5.png

「Add ANE...」を選択して、生成したANEを選択してみましょう。デフォルトでは「ANE4MobageNativeSDK/as/ANE4MobageSDK.ane」がビルドされたANEになります。


インポートされたANEに「×」が表示されますが、これはMacをターゲットにしていない為のエラーで今回のANEはAndroidとiOSがターゲットなので無視してください。

image6.png

ここでポイントですが、上記ではプロジェクトにANEをライブラリーとして紐付けをしましたが、この段階ではapkやipaのビルド時にはANEが含まれません。

次の設定でビルド時のライブラリにANEを含めるようにしないとビルド時は動かない結果になってしまいます。。。

先ほどの「Properties」の画面から「ActionScript Build Path」を展開しますと、AndroidとiOSの設定が表示されます。

image7.png

それぞれ(Apple iOSとGoogle Android)で「Native Extensions」を選び、「ANE4MobageSDK.ane」が表示されていますので「Package」のところにチェックを入れれば、ビルド時にapkまたはipaにANEが含まれます。

image8.png

次には起動の為の設定を実施します。

プロジェクト内の「util/define.as」がMobageの初期化に必要な設定が記載されています。

image9.png

上記に入力する値はMobage Developers Japan (デベロッパーサイト)で登録したアプリケーションの「アプリケーション詳細」画面にあるConsumer KeyとConsumer Secretです。Application IDは「共有設定」画面に記載されています。もしアプリケーションをまだ登録していない場合はこちらのURLを参考に登録してみてください。

次は「UICompSample-app.xml」の設定です。AndroidとiOSで別々の設定が必要で大変ですが、こちらのxmlには事前に必要な設定がほぼ記載されており、あとはアプリケーション独自の部分を設定していきます。

UICompSampleのソースを上から読んでいくと

<id>UICompSample</id>

こちらはAndroidではpackage名になり、iOSではBundleIDになります。AndroidのPackage名は決まっており、prefixとして「jp.mbga.a${ApplicationID}」となります。iOSとAndroidでここの値を変えないといけないの注意してください。


Android側のAndroidManifestの設定を修正します。

<android>
<manifestAdditions><![CDATA[
….
]]></manifestAdditions>
</android>

上記の<android>の中に...

{ENTER_YOUR_PACKAGENAME} => AndroidのPackage名を入力してください。

{REGION} => 基本「jp」になります。

{APP_ID} => Application IDをここに入れてください。


iOS側のInfo.plistの設定を修正します。

 <iPhone>
<InfoAdditions><![CDATA[
....
<string>mobage-{REGION}-{APP_ID}</string>

]]></InfoAdditions>

上記の{REGION}と{APP_ID}はAndroidと同様の値になります。

<Entitlements>
<![CDATA[
……
<string>{ENTER_YOUR_PREFIX}.com.mobage.shared</string>

]]>
</Entitlements>

上記の{ENTER_YOUR_PREFIX}には利用いただくAppleのPREFIXを入力してください。BundleIDではなく、その前に付くPREFIXの英数字です。ここを間違えるとMobageの初期化に失敗してエラーが表示されますので注意してください。

 

さてここまで設定すればあとは実際にサンプルアプリを起動してみましょう。

上記のメニューから「Run」=> 「Run」

image10.png

「Run Configuration」が表示され以下のように表示されます。

image11.png

今回はAndroidで起動させてみましょう。

「Target platforms」を「Google Android」を選択する。

「Launch method」を「On device」にする。


あとは開発モードONの端末をPCに繋げて「Run」です。

image12.png

起動して上記の画面が表示されたら成功です!!

 

重要なポイント

ここまでで、動作確認はできましたが、さらに重要なメインAS「UICompSample.as」のコードについて細かく説明します。

public class UICompSample extends Sprite implements PlatformListener

まず「implements PlatformListener」の部分ですが、こちらはMobageのログインリスナーを実装する為の必要なinterfaceです。Mobageの初期化するASには実装してください。詳細なシーケンスはこちらです。

Mobage.initialize(
                    define.REGION,
                    define.SERVER_MODE,
                    define.ANDROID_CONSUMER_KEY,
                    define.ANDROID_CONSUMER_SECRET,
                    define.APPLICATION_ID,
                    this);

上記のコードではMobageとANE側が初期化されます。

Mobage.registerTick();

このコードは1.4.6以降のMobage SDKから不要になっております。

RemoteNotification.setListener();

このコードでプッシュ通知のリスナーが初期化され、「handleReceive」(Android)または「handleReceive_iOS」(iOS)にプッシュ通知が通知されます。

Mobage.addPlatformListener(this);

このコードで先ほどのPlatformListenerを渡すことによってログインリスナーが初期化され、このASにOnLoginComplete、onLoginRequiredなどのリスナーが届くようになります。

Mobage.addDashboardObserver(); //JP Only

このコードでMobageのDashboardを開いたり(DashboardLanched)、閉じたりする(DashboardDismiss)情報が通知されます。

Mobage.checkLoginStatus();

このコードでユーザーのログイン状態を確認され、OnLoginCompleteやonLoginRequiredのリスナーに通知されます。

public function onLoginRequired() :void {
            trace("Login required");
            Mobage.showLoginDialog();
        }

ここではMobage.checkLoginStatus()後にユーザーがログイン必要な場合に呼ばれます。そして Mobage.showLoginDialog()にてログイン画面を表示しています。

 public function onLoginComplete(userId :String) :void {
            trace("Login completed: " + userId);
           …..                
        }

ここではユーザーがログイン完了している場合に呼ばれます。

 

以上重要な部分のみを、かいつまんで説明させていただきましたが、他のAPIの使い方はサンプルコードの中を確認していただければと思います。

 

その他のつまづきがちなポイント

以下のFlash Builderに関するつまづきがちなポイントを紹介します。

  • Android apkへのエクスポート時に上手くビルドができない。

    • プロジェクトの「Build Automatically」のチェックを外して、再度実施してみてください。エクスポート途中にビルドが自動的に走る場合があり、エクスポートに失敗する可能性があります。

 

  • Androidビルド時にライブラリが競合しているとエラーが表示される。

    • これは複数のANEを利用している時に、それぞれANEが同じライブラリーを組み込んでいる場合に発生します。この場合どちらかのANEの競合ライブラリーを外して再度ANE化する必要あります。
      現在Mobage Native SDKで競合しやすいライブラリーが「android-support-v4.jar」となっており、必要な場合はMakefileから
      以下の行を削除(またはコメントアウト)して再ビルドすることでこのライブラリーが外されます。その場合は競合のANEが入っていないと動きませんので注意してください。

    unzip -o $(MOBAGE_SDK_JAR_FILE2) -d $(REGION)/bin/classes -x META-INF/*

AIR SDK 4.0から設定ファイルからライブラリーを追加できるようになるため、今後は問題が解消されていくと思います。この新しい実装方法は今後GitHubにpull requestする予定です。

       

  • Android apkのPackage名の先頭に「air.」が付いてしまい、Package名がMobageが指定したものと異なってしまう。

    • Mobage Developers Japan (デベロッパーサイト)でProductionビルドをアップロードする時に当社側でこのPackage名を修正していますので心配無用です。ただしプッシュ通知をテストしたい場合はPackage名を修正していただく必要あります。こちらのpdfの「How to setup correct Android package name when exporting for release build?」の部分を参考にしてもらえばと思います。

 

  • iOSのビルドに失敗することがある。

    • Adobe Flash Builder 4.7で最新のAIR SDK(4.0)利用して頂いていれば問題ないのですが、古いバージョンを使っている場合はビルドに失敗する恐れがあります。

 

  • iOS用の証明書パスワードを設定していないのにビルド時に聞かれる。

    • 残念ながらFlash Builderは必ずパスワードを聞いてくるので、証明書にパスワードを付けましょう。

 

  • iOSはビルドできたが端末にインストールできない。

    • 主な原因はiOS証明書とProvisioningファイルが端末と一致しない場合に発生します。またiOSのEntitlementsがProvisioningファイルと同様の設定でないと同様の問題が発生しますので、 アプリの「app.xml」にあるiOSの設定を再確認してみてください。


 

説明が長くなりましたが今回のブログで開発がスムーズに進められたらと思います。ご不明な点がありましたら、お気軽にコメントやMobageオープンプラットフォーム事務局までお問い合わせください。(パートナー様はこちらから)

 

ではまた次回のブログで!