スポンサーサイト

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

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

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

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

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

    FlashやAIRによるネイティブ依存がない場合、
    通常は、各種ライブラリ(.swcファイル)を使用して、
    開発を行います。

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

    前回、作成したTextToSpeechの
    「ネイティブ拡張ライブラリ」を使用して、
    AIR for Androidアプリを作成します。
    使用するツールは、Flash Pro CS 5.5です。

    今回、はじめての方で、
    ネイティブ拡張ライブラリ作成を行わず、
    TextToSpeechを使用した
    AIR for Androidアプリを開発したい方は…

    ココにネイティブ拡張ライブラリを
    含んだワークフォルダを用意しました。
    こちらを使用してください。

    ≪PR≫
    来る2012年3月17日(土)10時30分 ~ 18時30分まで
    Native Extension Lab in Osaka 2 を
    ホテルリブマックス大手前(会議室)で開催します。
    もし、ご興味がありましたらご参加ください。(参加費無料)

    ネイティブ拡張 for Adobe AIR Native Extension Lab Osaka 2

     
    ≪PR≫

    TextToSpeech機能を使用したアプリ作成

    今回は、「テキスト読み上げ機能を行う」
    AIR for Androidアプリを作成します。

    AIR側で入力した文字を、
    ネイティブ拡張ライブラリ経由で、
    ネイティブ機能にアクセスを行い、
    音声変換を行うようにします。

    ※ 前回もお話した通り、日本語のエンジンは、
    KDDI研究所様が開発した「N2」
    インストールして動作させています。

    事前に準備するツール
    Flash CS 5.5
    AIR SDK 3.1(3.0でも問題ありません。)
    Android SDK(インストールしている状態にしておく。)

    セットアップ
    はじめての方は、Flash CS 5.5にAIR 3を
    使用できるようにセットアップする必要があります。

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

    前回、ネイティブ拡張ライブラリを作成された方、
    以前、このブログでFlash CS 5.5による
    Androidアプリ、iOSアプリを開発された方は、
    上記の作業は不要です。

    ワークフォルダ作成

    ◯ はじめての方:
    既にネイティブ拡張が格納した
    ワークフォルダをダウンロードしている為、
    この作業は不要です。

    ◯ ネイティブ拡張ライブラリを作成した方:
    AIR for Androidアプリ開発を
    行う為のワークフォルダの作成を行います。
    この作業は、ネイティブ拡張ライブラリを
    作成した方の作業となります。

    まずは「text2speech4app_ws」の
    フォルダを作成します。
    フォルダ内に「libs」フォルダを作成します。
    ネイティブ拡張 for Adobe AIR for Android テキスト読み上げ2 001

    前回、作成した
    TTSMain.ane,TTSMain.swcは、
    text2speech4app_ws/libsの中に
    移動します。TTSMain.p12は、
    text2speech4app_ws直下に移動します。

    ネイティブ拡張 for Adobe AIR for Android テキスト読み上げ2 002

    移動したイメージ
    ネイティブ拡張 for Adobe AIR for Android テキスト読み上げ2 002
    ※ .DS_Storeは、Mac環境で自動作成される
    ファイルです。
    本作業では、関係ないファイルな為、
    無視してください。

    ネイティブアプリ開発

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

    ネイティブ拡張 for Adobe AIR for Android テキスト読み上げ2 003

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

    ネイティブ拡張 for Adobe AIR for Android テキスト読み上げ2 004

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

    ネイティブ拡張 for Adobe AIR for Android テキスト読み上げ2 004

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

    ネイティブ拡張 for Adobe AIR for Android テキスト読み上げ2 005

    5. TTSMain.swcの設定
    text2speech4app_ws/libsにある
    「TTSMain.swc」を開きます。
    ネイティブ拡張 for Adobe AIR for Android テキスト読み上げ2 003

    6. リンクの種類を変更
    TTSMain.swcがライブラリパスで
    設定している状態となりました。
    次は「リンクの種類」を変更します。
    「リンクの種類」をダブルクリックします。
    ネイティブ拡張 for Adobe AIR for Android テキスト読み上げ2 004

    「リンクの種類」を「外部」に変更後、
    OKボタンをクリックします。
    ネイティブ拡張 for Adobe AIR for Android テキスト読み上げ2 005

    7. ドキュメントクラスの名称入力
    TTSMain.swcのリンクの種類が「外部」に
    変更した事を確認できましたら、
    ドキュメントクラスの入力欄に
    「TTSMain」と入力後、OKボタンをクリックします。
    (更に警告ウィンドウが表示した場合、OKボタンをクリックしてください。)
    ネイティブ拡張 for Adobe AIR for Android テキスト読み上げ2 006

    8. FLAファイルの保存
    Flash Proのワークスペースに戻った時点で、
    一度、FLAファイルを保存します。
    text2speech4app_ws直下に保存します。
    ファイル名を「TTSMain.fla」とします。
    ネイティブ拡張 for Adobe AIR for Android テキスト読み上げ2 007

    9. ドキュメントクラスの編集
    ネイティブ拡張ライブラリを使用した
    ActionScriptクラスの実装を行います。

    「TTSMain」と入力しているテキスト欄の横にある、
    アイコンをクリックします。
    ネイティブ拡張 for Adobe AIR for Android テキスト読み上げ2 009

    Flash Professionalを選択している状態で、
    OKボタンをクリックします。
    ネイティブ拡張 for Adobe AIR for Android テキスト読み上げ2 010

    以下のコードを書きます。

    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.extension.TTSExtension;
    import so.ane.event.TTSEvent;

    public class TTSMain extends MovieClip {


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

    private static const TTS_ANDROID:TTSExtension =
    new TTSExtension();


    public function TTSMain() {

    TTS_ANDROID.addEventListener(TTSEvent.CREATE_SUCCESS,
    onSuccess);

    TTS_ANDROID.create();

    Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;

    addChild(createTextField(0, 30, "テキスト"));
    _t = createTextField(0, 100, "第33回、Flash CS 5.5でネイティブ拡張ライブラリを作ってみる。エアー for Android編の巻。後編", true);
    addChild(_t);

    }

    private function onSuccess(event:TTSEvent):void {
    addChild(createButton("SPEECH", speech, 0, 200));
    }

    private function speech(event:TouchEvent):void {
    TTS_ANDROID.speak(_t.text, 1.7, 0.8);
    }

    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 TTS_ANDROID:TTSExtension =
    new TTSExtension();
    は、
    ネイティブ処理を行うクラスを生成しています。

    TTS_ANDROID.addEventListener(TTSEvent.CREATE_SUCCESS,
    onSuccess);
    は、使用可能になったイベントを受け取る為、
    登録しています。

    TTS_ANDROID.create();を実行した後に
    使用可能であれば、TTSEvent.CREATE_SUCCESSイベントを、
    ネイティブ側が発行します。
    その為、create処理を行う前にイベント登録を、
    必ず行わないといけません。

    TTS_ANDROID.speak(_t.text, 1.7, 0.8);は、
    文字列から、音声変換処理を行います。
    メソッドに渡している引数の詳細は、
    コチラでご確認ください。

    10. ドキュメントクラスの保存
    ドキュメントクラスの保存を行います。

    text2speech4app_ws直下に保存します。
    ファイル名を「TTSMain.as」とします。
    ネイティブ拡張 for Adobe AIR for Android テキスト読み上げ2 011

    11. SWFの書き出し
    ドキュメントクラスの実装が完了しました。
    次にSWFの書き出しを行います。

    AIR 3 SDKを使用して、SWFの書き出しを行う為、
    Playerを「AIR for Android」→「AIR 2.6」に変更します。
    ※「AIR 2.6」が AIR 3 SDKで設定している為。

    ネイティブ拡張 for Adobe AIR for Android テキスト読み上げ2 020

    ドキュメントクラスの編集している状態であれば、
    TTSMain.flaを選択します。
    その後、「書き出し」→「ムービーの書き出し」を選択します。
    ネイティブ拡張 for Adobe AIR for Android テキスト読み上げ2 012

    text2speech4app_ws直下に保存します。
    ファイル名を「TTSMain.swf」とします。
    ネイティブ拡張 for Adobe AIR for Android テキスト読み上げ2 013

    保存ボタンをクリックすると、書き出し処理が行われます。
    完了後、text2speech4app_ws直下に
    TTSMain.swfが出力されます。
    ネイティブ拡張 for Adobe AIR for Android テキスト読み上げ2 014

    AIR for Androidの作業を行うため、
    Playerを「AIR 2.6」→「AIR for Android」に設定を戻します。
    ネイティブ拡張 for Adobe AIR for Android テキスト読み上げ2 019

    12. AIR for Androidの設定ファイルの作成
    AIR for Androidの設定ファイルの作成から、
    ネイティブ拡張の設定までを行います。

    Player - AIR for Androidの右横にあるアイコンをクリックします。
    ネイティブ拡張 for Adobe AIR for Android テキスト読み上げ2 015

    AIR for Androidの設定画面が表示します。
    ここでは権限を選択後、OKボタンをクリックします。
    ネイティブ拡張 for Adobe AIR for Android テキスト読み上げ2 016

    text2speech4app_ws直下にTTSMain-app.xml
    ファイルが出力されます。
    ネイティブ拡張 for Adobe AIR for Android テキスト読み上げ2 017

    TTSMain-app.xmlをテキストエディタで
    開き、以下の赤字箇所を追加します。

    <?xml version="1.0" encoding="utf-8" standalone="yes"?>
    <application xmlns="http://ns.adobe.com/air/application/3.1">
    <id>TTSMain</id>
    <versionNumber>1.0.0</versionNumber>
    <filename>TTSMain</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>TTSMain</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>TTSMain.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.tts.TTS</extensionID>
    </extensions>

    <android><manifestAdditions><![CDATA[<manifest></manifest>]]></manifestAdditions></android><versionLabel></versionLabel></application>

    <extensions>
    <extensionID>so.ane.tts.TTS</extensionID>
    </extensions>
    は、
    今回、使用するネイティブ拡張ライブラリのIDです。

    これをTTSMain-app.xmlに設定することで、
    AIR for Android側から、ネイティブ機能を
    使用する事ができます。

    編集後、TTSMain-app.xmlを保存します。

    AIR for Androidのビルド
    アプリに必要な実行ファイルと設定ファイルは、
    全て整いました。

    ビルド作業を行います。ネイティブ拡張を利用した
    AIR for Androidアプリをビルドする際、
    Flash Pro 5.5を使用しません。

    ビルドを行う場合、
    AIR Developer Tool(adt)を使用します。

    Flash CS 5.5 に AIR 3 SDKの設定を行った場合、
    AIR2.6フォルダに配備していれば、
    Adobe Flash CS 5.5/AIR2.6/bin/内に
    AIR Developer Tool(adt)があります。

    ここからは、コマンドラインの作業になります。

    1. cdコマンドでtext2speech4app_ws直下まで移動します。

    2. Windowsならdirコマンド、
    Macならlsコマンドを入力し、
    今まで作成したファイルの確認をしてください。
    ネイティブ拡張 for Adobe AIR for Android テキスト読み上げ2 018

    3. ビルド
    AIR Developer Toolを使用して、
    ビルド作業を行います。

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

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

    パスワードは、ネイティブ拡張ライブラリ作成時に
    使用した自己証明書(.p12)を使用している場合は、
    その時に設定したパスワードを入力します。

    こちらで用意した「TTSMain.p12」を
    使用している場合は、「0」を入力してください。

    ※ -extdir はネイティブ拡張ライブラリ(.ane)を
    読み込む為のディレクトリを設定します。

    libsには、既に作成したTTSMain.aneを用意している為、
    adtは.aneファイルを、ネイティブ拡張ライブラリとして認識します。

    (Flash CS 5.5によるネイティブ拡張ライブラリはswcを使用し、
    実際のビルド時にはaneファイルを使用します。)

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

    以下のメッセージが出力されます。
    権限の設定を行っていない為に表示するメッセージです。
    今回は設定しないため、問題ありません。

    Warning: Application has not specified its permission requirements in application.xml


    ビルドが完了すると「TTSMain.apk」が
    text2speech4app_ws直下に作成されます。

    ネイティブ拡張 for Adobe AIR for Android テキスト読み上げ2 021
    これでAndroid端末で検証できる準備が整いました。

    Android端末で動作確認
    作成された「TTSMain.apk」のインストールから
    動作の確認までを行います。

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

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


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


    インストールしたアプリの動画です。
    同じように動作していればOKです。

    以上が、テキスト音声変換機能を実装した
    AIR for Androidアプリの構築手順となります。

    行き詰まった方は、お問い合わせして頂ければ、回答させて頂きます。
    (twitter, メール…etc)

    twitter:@tokufxug
    メール:tokufxugアットgmail.com

    ココに全て含んだファイルを置きました。
    参考にして頂ければと思います。
    スポンサーサイト

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

    コメント

    Secret

    プロフィール

    tokufxug

    Author:tokufxug
    FxUGの中の人。

    ガジェット

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