kwik Tutorial

Step1

簡単な読上げのアプリを作成します。英語と日本語の他言語対応をさせます。まず キーボートとコントローラ対応を行う前に、通常の手法でアプリを作成して、 Corona Simulatorで動作を確認します。

新規プロジェクト

  • Page1 タイトルページ

  • Page2 読上げページ

  • Page3 設定

  • Page4 キー配置の設定

Page1

プロジェクト属性 > 一般> ナビゲーション作成

インタラクション > ボタン追加 を"NaviBtn" レイヤに行いいます。

Page2

オーディアの追加

  • en_hello_kwik.mp3

  • jp_hello_kwik.mp3

  • 言語設定(Set Language) を hellEnレイヤーに行います。

  • 言語設定(Set Language) 日本語として hellJpレイヤを helloEn グループに追加します。

  • 言語設定(Set Langauge) backEnレイヤーに行います。

  • 言語設定(Set Language) 日本語として、backJpレイヤーをbackEn グループに追加します。

  • 音声とテキストの同期を hellEnレイヤー に設定. 単語の読上げタイミングのファイルは assets/read2me/ に格納されています。

  • 音声とテキストの同期を hellJpレイヤー に設定. 単語の読上げタイミングのファイルは assets/read2me/ に格納されています。

  • ボタン追加を backEnレイヤーに行います。 Go to page1のアクションを追加します。

  • ボタン追加を backJpレイヤーに行います。 Go to page1のアクションを追加します。

  • Copy each word mp3 to build folder
    • assets/read2me/en_hello.mp3
    • assets/read2me/en_kwik.mp3
    • assets/read2me/jp_hello.mp3
    • assets/read2me/jp_kwik.mp3

Page3

グローバル変数として "langValue" を作せします。初期値は en です。 トラッキングを有効にします。

  • enBtn
    • set langauge english
    • show checkEn
    • hide checkJp
    • set variable langValue to en

  • jpBtn
    • set langauge japanese
    • show checkJp
    • hide checkEn
    • set variable langValue to jp

Init page3

  • act_init アクションを作成して、ページ起動時の timer に設定します。

    if composer.lang == "jp" then
      show checkJp
      hide checkEn
    else
      show checkEn
      hide checkJp
    end
    show jpBtn
    show enBtn
    

  • if 文の設定

  • timer の設定

他のボタン

  • Back ボタンは page1に戻ります。

  • act_hide アクションが controllers ボタンに設定されています。.このアクションは、"English"と"日本語"のテキストとチェックマークの表示をオフにするものです。

  • Controllers ボタンには act_hide アクションを追加します。( 次章にて、外部ライブラリを使用してコントローラ一覧を表示する方法を解説します。)

  • キー配置(key assignment)ボタンは、setup(page4)に遷移します。

キー配置 Setupページ

  • Backボタンは、設定ページ(page3)に戻ります。

( 次章にて、外部ライブラリを使用してキー配置一覧を表示する方法を解説します。)

Page1 の初期化とボタンについて

act_initアクションをページ起動時のタイマーに設定します。

  • act_init
    if langValue == "en" then
      Set Languge English
    else
      Set Language Japanese
    end
    

  • if 文の設定

  • timer の設定

  • btn1 ボタンは、page2 に遷移して、"read to me" を有効にします。

  • btn2ボタンは page2 に遷移して、"read to me" を無効化します。

  • Settingボタンは 設定 settingページに遷移します。

以上です。 パブリッシュして、Corona Simulatorで動作確認を行います。