スポンサーサイト

    上記の広告は1ヶ月以上更新のないブログに表示されています。
    新しい記事を書く事で広告が消せます。

    第29回「Flash CS 5.5でネイティブ拡張ライブラリを使ってみる。【AIR for Android編】」の巻

    「ネイティブ開発とは?」

    AIR 3.0から、ネイティブライブラリを利用して、
    いままでのAIRでは不可能だった
    各プラットフォーム固有の処理を可能にします。

    対応プラットフォーム
    • Windows
    • Mac OS X
    • iOS
    • Android
    • Black Berry
    • Google TV
    Flash(ActionScript)で開発を行う場合、
    様々なライブラリを使用して開発を行います。

    各種ライブラリは.swcファイルを使用して開発を
    行います。ネイティブ開発を行う場合、
    .ane(AIR Native Extensions)という
    ネイティブ拡張ライブラリファイルを使用して開発を行います。

    今回は、Flash CS5.5でネイティブ拡張ライブラリを使用した
    ネイティブアプリ(AIR for Android)の開発方法を説明します。

     

    「事前に準備するツール」
    「セットアップ」
      Flash CS 5.5にAIR 3を使用できるようにセットアップする
      必要があります。

      下記ページの説明に従い、セットアップを行って下さい。
      Flash Professional CS5.5 で Flash Player 11 と AIR 3 を使う方法

      ネイティブ拡張ライブラリを含む作業フォルダを
      以下からダウンロードします。
      作業フォルダ(ZIPファイル)

      作業フォルダを解凍します。
      a4aneSample_wsが作業フォルダとなります。

      a4aneSample_wsが、今回、作成する.flaファイルや
      .asファイル等を格納する作業ディレクトリとなります。

    a4aneSample_wsフォルダ内のlibsの中に
    「so.ane.android.basic.funcs.swc」と
    「so.ane.android.basic.funcs.ane」のファイルを
    確認してください。

    Android用のネイティブ拡張ライブラリとなり、
    Toast通知機能とステータスバーに通知する
    (Notification)機能を備えています。

    これからAndroid特有の機能をActionScriptから、
    呼ぶための簡単なアプリを開発していきます。

    「ネイティブアプリ開発」

    1. Flash CS 5.5を起動
    「テンプレートから作成」⇒「AIR for Android」をクリックします。

    20111128_01_flashcs_startup.png


    2. AIR for Androidテンプレートから作成
    カテゴリ:「AIR for Android」⇒
    テンプレート:「800x480 空白」を選択後、OKボタンを
    クリックします。

    20111128_02_air4android_ok.png

    3. スクリプトの設定
    プロパティのスクリプトでActionScript3.0を選択している
    右横にあるアイコンをクリックします。

    20111128_03_script.png

    4. SWCの設定
    ActionScript3.0詳細設定が起動している状態で
    SWCのアイコンをクリックします。

    20111128_05_swc_setting_02.png

    5. SWCの選択
    ダウンロード、解凍したa4aneSample_ws/libs/so.ane.android.basic.funcs.swcを
    選択します。

    20111128_06_selected_swc.png

    ※ so.ane.android.basic.funcs.swcは、
    so.ane.android.basic.funcs.aneの拡張子を
    swcに書き換えたファイルです。
    aneではFlash CS 5.5はライブラリと
    認識しないようです。
    その為、.aneから.swcに変える事で、
    Flash CS 5.5では、ライブラリとして認識させます。
    (コードアシスト機能によるコード補完も効きます。)

    6. リンクの種類を変更(SWC)
    a4aneSample_ws/libs/so.ane.android.basic.funcs.swcを選択後、
    リンクの種類を変更します。(コードにマージ⇒外部)
    変更後、OKボタンをクリックします。

    20111128_07_gaibu_selected.png

    20111128_07_gaib_set.png

    7. flaファイルを保存
    a4aneSample_ws直下に「a4aneSample.fla」の
    ファイル名で保存します。

    20111128_08_save.png

    8. ドキュメントクラスを作成
    「AneLabA4ADocClass」というドキュメントクラスを作成し、
    a4aneSample_ws直下に保存します。

    20111128_09_create_documentclass.png

    9. ネイティブ拡張ライブラリによる実装
    「AneLabA4ADocClass」にネイティブ拡張ライブラリを
    使用して実装作業を行います。

    package {

    import flash.display.MovieClip;
    import flash.text.TextField;
    import flash.text.TextFormat;
    import flash.text.TextFieldAutoSize;
    import flash.text.TextFieldType;
    import flash.events.TouchEvent;
    import flash.ui.Multitouch;
    import flash.ui.MultitouchInputMode;

    import so.ane.android.basic.funcs.AneLabAndroidExtensionContext;
    /**
    * AneLabA4ADocClass
    * @author http://twitter.com/tokufxug
    */
    public class AneLabA4ADocClass extends MovieClip {

    private var _t:TextField;
    private var _cmnt:TextField;
    private var _msg:TextField;

    private static const ANE_ANDROID:AneLabAndroidExtensionContext
    = new AneLabAndroidExtensionContext();


    public function AneLabA4ADocClass() {

    Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;

    addChild(createTextField(10, 0, "タイトル"));
    _t = createTextField(300, 0, "", true);
    addChild(_t);

    addChild(createTextField(10, 100, "コメント"));
    _cmnt = createTextField(300, 100, "", true);
    addChild(_cmnt);

    addChild(createTextField(10, 200, "メッセージ"));
    _msg = createTextField(300, 200, "", true);
    addChild(_msg);

    addChild(createButton("TOAST", toast, 10, 350));
    addChild(createButton("NOTIFY", notify, 220, 350));
    }

    private function toast(event:TouchEvent):void {
    ANE_ANDROID.toast(_msg.text);
    }

    private function notify(event:TouchEvent):void {
    ANE_ANDROID.notification(_t.text, _cmnt.text);
    }

    private function createTextField(localX:uint, localY:uint
    ,s:String,isEdit:Boolean = false):TextField {

    var label:TextField = new TextField();

    label.x = localX;
    label.y = localY;
    label.width = 400;
    label.height = 80;

    var format:TextFormat = new TextFormat();

    format.color = 0x000000;
    format.font = "_等幅";
    format.size = 48;
    label.defaultTextFormat = format;

    if (isEdit) {
    label.border = true;
    label.type = TextFieldType.INPUT;
    } else {
    label.selectable = false;
    }
    label.text = s;


    return label;
    }

    private function createButton(
    s:String,handler:Function,x:int,y:int):TextField {

    var button:TextField=new TextField();
    button.text = s;
    button.autoSize = TextFieldAutoSize.LEFT;
    button.selectable = false;
    button.border = true;
    button.background = true;
    button.backgroundColor = 0xdddddd;
    button.addEventListener(TouchEvent.TOUCH_TAP, handler);
    button.x = x;
    button.y = y;

    var format:TextFormat = new TextFormat();

    format.color = 0x000000;
    format.font = "_等幅";
    format.size = 48;
    button.setTextFormat(format);

    button.width = 400;
    button.height = 400;


    return button;
    }
    }
    }

    上記のサンプルコードは入力した文字を、
    ネイティブライブラリに渡して処理を行います。

    private static const ANE_ANDROID:AneLabAndroidExtensionContext =
    new AneLabAndroidExtensionContext();
    は、
    ネイティブ処理を行うクラスを生成しています。

    ANE_ANDROID.toast(_msg.text);は、
    トースト通知処理を行います。

    ANE_ANDROID.notification(_t.text, _cmnt.text);は、
    ステータスバーに通知する処理を行います。
    上記のようなネイティブライブラリの処理を行う場合、
    実機による稼動確認しか行えません。

    画面の作り込みを行う場合、
    ネイティブ処理は後回しに実装していきます。

    ネイティブ処理も含んだ全ての実装が
    完了したらswfの書き出しを行います。

    20111128_10_swf_write.png

    10. AIR for Android のアプリ設定
    AIR for Androidの権限設定を行います。
    画像内に振っている番号順に操作を行い、
    最後にflaファイルを保存します。
    20111128_11_app_setting.png

    次にa4aneSample_wsにa4aneSample-app.xmlが
    作成されています。
    a4aneSample-app.xmlをテキストエディタで開きます。

    開くとXMLコードが確認できます。

    <extensions>
    <extensionID>so.ane.android.basic.funcs</extensionID>
    </extensions>

    開いた段階では、上記のextensionIDコードは、ありません。
    このコードは自分自身で追加してください。
    追加後、a4aneSample-app.xmlを保存します。

    このコードはネイティブ拡張ライブラリを
    AIR for Androidで呼び出す為の設定です。

    ※ extensionIDとファイル名が一緒ですが、extensionIDは
    .aneファイルを作成する際に定義します。
    今回はファイル名と同じ名前をextensionIDとして定義しています。


    <?xml version="1.0" encoding="utf-8" standalone="yes"?>
    <application xmlns="http://ns.adobe.com/air/application/3.0">
    <id>a4aneSample</id>
    <versionNumber>1.0.0</versionNumber>
    <filename>a4aneSample</filename>
    <description></description>
    <!-- To localize the description, use the following format for the description element.
    <description>
    <text xml:lang="en">English App description goes here</text>
    <text xml:lang="fr">French App description goes here</text>
    <text xml:lang="ja">Japanese App description goes here</text>
    </description>
    -->
    <name>a4aneSample</name>
    <!-- To localize the name, use the following format for the name element.
    <name>
    <text xml:lang="en">English App name goes here</text>
    <text xml:lang="fr">French App name goes here</text>
    <text xml:lang="ja">Japanese App name goes here</text>
    </name>
    -->
    <copyright></copyright>
    <initialWindow>
    <content>a4aneSample.swf</content>
    <systemChrome>standard</systemChrome>
    <transparent>false</transparent>
    <visible>true</visible>
    <fullScreen>false</fullScreen>
    <autoOrients>false</autoOrients>
    <aspectRatio>portrait</aspectRatio>
    <renderMode>cpu</renderMode>
    </initialWindow>
    <customUpdateUI>false</customUpdateUI>
    <allowBrowserInvocation>false</allowBrowserInvocation>
    <icon></icon>
    <extensions>
    <extensionID>so.ane.android.basic.funcs</extensionID>
    </extensions>
    <android><manifestAdditions><![CDATA[<manifest><uses-permission android:name="android.permission.INTERNET"/></manifest>]]></manifestAdditions></android><versionLabel></versionLabel></application>


    11. AIR for Android アプリのビルド
    AIR for Androidのアプリのビルドは、
    Flash CS 5.5でなくAIR Developer Tool(adt)を使用します。
    事前に用意しているAIR SDK 3のフォルダの中にadtがあります。
    (Macならbinの中)
    20111128_12_adt.png

    このadtを使用して、AIR for Androidアプリのビルドを行います。
    この作業はコマンドラインで行います。

    cdコマンドでa4aneSample_wsまで移動します。
    移動後、adtコマンドを入力します。


    adt -package -target apk -storetype pkcs12 -keystore test.p12 a4aneSample.apk a4aneSample-app.xml a4aneSample.swf -extdir libs

    ※ adtのPATHを通していない場合、
    adtまでのフルパスまでを入力してください。

    ※ test.p12は、ダウンロードしたa4aneSample_ws内に
    用意していたファイルを使用します。
    (パスワードは0です。)

    ※ -extdir はネイティブ拡張ライブラリ(.ane)を
    読み込む為のディレクトリを設定します。
    libsには、既にso.ane.android.basic.funcs.aneを
    用意している為、adtは.aneファイルを
    ネイティブ拡張ファイルと認識します。
    (Flash CS 5.5によるネイティブ拡張ライブラリは
    swcを使用し、実際のビルド時にはaneファイルを
    使用します。)

    ※ このビルド中はタイムスタンプを取得する為、
    インターネットに接続している状態にしてください。

    20111128_12_create_apk.png
    ビルドが成功すると「a4aneSample.apk」ファイルが
    作成されます。

    11. Android実機へインストール
    インストールはAndroid SDKにあるadbを使用します。
    こちらの操作もコマンドラインで行います。
    (a4aneSample_wsで行います。)

    adb install a4aneSample.apk
    ※ adbのPATHを通していない場合、
    adbまでのフルパスまでを入力してください。
    (Macの場合は、android-sdk-mac_x86/platform-tools/)


    1704 KB/s (40427 bytes in 0.023s)
    pkg: /data/local/tmp/a4aneSample.apk
    Success
    上記のような結果が出れば、インストール成功です。

    実機によるインストール確認
    20111128_14_notufyinstall_convert_20111127234512.png

    Toast機能の確認
    20111128_15_notufytoast_convert_20111127234631.png

    ステータスバーに通知する機能の確認
    20111128_13_notufy.png

    上記のやりかたで上手くいかなかった方は、
    こちらに全てのファイルを含んだZIPファイルを
    アップしております。
    参考にしてもらえればと思います。
    スポンサーサイト

    テーマ : みんなに紹介したいこと
    ジャンル : ブログ

    コメント

    Secret

    プロフィール

    tokufxug

    Author:tokufxug
    FxUGの中の人。

    ガジェット

    最新記事
    最新コメント
    月別アーカイブ
    カテゴリ
    検索フォーム
    RSSリンクの表示
    リンク
    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。