*

Titanium Mobile入門【TiShadow活用編】

公開日: : 最終更新日:2013/12/23 Titanium ,


スポンサードリンク



「Titanium Mobile入門【TiShadow導入編】」ではTiShadowの導入と接続用のアプリでエミューレータをtishadowのサーバプロセスに接続するところまでをを記載させていただきました。

なお、Titanium Mobileのインストールや各種設定については
お使いの環境がWindowsの場合は「Titanium Mobile入門【導入編】」
Macの場合は「Titanium Mobile入門【導入編 on Mac】」
を参照ください。

本エントリーではTitanium Mobileでスマートフォン向けアプリを実際に開発する際に、どのようにTiShadowを利用するかとの内容となります。
TiShadowを利用すればTitanium Mobileを用いたアプリケーション開発の速度が格段に向上するだけでなく、
TDD(Test Driven Development)やBDD(Behavior Driven Development)を実施できます。

本エントリーは以下の内容で構成されます。

  1. tishadowコマンドの説明
  2. 検証用のアプリのプロジェクトの作成
  3. アプリケーション開発時のtishadowの利用方法

 

tishadowコマンドの説明

tishadowコマンドでよく使うオプションを説明させていただきます。
良く利用するオプションは以下の3つです。他のオプション等の詳細はtishadowのページを参照ください。

オプション 概要
server tishadowのサーバプロセスを起動
run tishadowのサーバプロセスに接続している全てのデバイスに対象のアプリケーションをインストール
test tishadowのサーバプロセスに接続している全てのデバイスでテストを実行

詳細は後述いたします。

検証用のアプリのプロジェクトの作成

tishadowの動作確認を行うための検証用アプリのプロジェクトを作成します。

Windowsの場合はコマンドプロンプト、Macの場合はターミナルを起動後に以下のコマンドを実行してください。
(Windowsの場合は-pは androidのみを指定してください)

このコマンドでラベル(Hello, World)が表示されるプロジェクトが生成されます。

カレントディレクトリにtishadowTestフォルダが作成されますので、このフォルダに移動します。

プロジェクトにalloyフレームワークを適用します。

アプリケーション開発時のtishadowの利用方法

デバイスをtishadowサーバに接続

まず始めにtishadowサーバの起動とテスト対象のデバイス(もしくはiPhoneシュミレータ、Androidエミューレータ)をサーバプロセスに接続します。

tishadowサーバの起動

tishadowサーバの起動は以下のコマンドを実行することで行えます。なおこのコマンドは常駐(中断するまで終わらない)します。

PhoneシュミレータorAndroidエミューレータの起動

iPhoneシュミレータとAndroidエミューレータを起動します。
新しいコマンドプロンプトもしくはターミナルを起動してください。
ビルド対象アプリは「Titanium Mobile入門【TiShadow導入編】」で作成した「TiShadowサーバに接続するためのアプリ」となります。
このアプリのフォルダに移動後に

Androidエミューレータを起動

iPhoneシュミレータを起動

を行いWindowsまたはMacのIPアドレスを指定して「Connect」ボタンをクリックします。

なお、iPhoneシュミレータを起動はlocalhostの指定のままで接続可能ですが、
Androidエミュレータでは、localhostや127.0.0.1をエミュレータ自身のローカルループバックとして認識するためIPアドレスを指定する必要があります。

AndroidエミューレータとiPhoneシュミレータがサーバに接続された場合は
tishadowサーバのコンソールには以下のようなログが表示されます。

検証用のアプリのインストール

検証用(テスト対象)のアプリのインストールを行うには

  • 検証用アプリケーションのコンパイル
  • tishadowを利用してインストール

を行う必要があります。

TitaniumのAlloyフレームワークを利用したアプリケーションのコンパイルは、以下のコマンドで実行可能です。
tishadowのページによるとコンパイル対象のプラットフォームは単一しか指定できません。

working with alloy

alloy is fully supported on tishadow. you need to run the alloy compile command prior to sending the code. unfortunately, alloy (currently) only supports platform specific builds so you need to compile for your specific target platform. for example, you can run the following command to run your alloy project on tishadow

よってAndroidがターゲットの場合

iOSがターゲットの場合

のどちらかを実行する必要があります。

コンパイル後にアプリケーションを端末にインストール&実行するには、以下のコマンドを実行します。

tishadowに接続している複数端末に対してalloy compileでコンパイルしたモジュールをインストールして実行することが可能です。

テストの実行

テストの実行は以下のコマンドで実行可能です。

テストケースのJavaScriptはプロジェクト配下のspecフォルダに含まれるJasmine形式のファイルとなります。

最後に検証用アプリケーションに対する簡単なテストケースを作成し実行してみます。

まずはプロジェクトフォルダ配下にspecフォルダを作成します。
このフォルダ配下にindex_spec.jsファイルを作成し内容を以下のようにします。

tishadowサーバが起動していて、
テストしたい端末(もしくはエミューレータorシュミレータ)がtishadowサーバに接続済で
テスト対象のアプリケーションが対象端末にインストールされ実行中で
あれば

を実行することでテストが実行されます。

index_spec.jsの実行結果は以下のようになるはずです。

わざと失敗するテストを書いています。
ではテストが成功するようにindex.xmlのlabelのテキストを「Hello, World」から「こんにちは」に変更します。
変更後のindex.xmlは以下のようになります。

再度テストを実行してみます。
すると当然のように失敗します。テスト対象のアプリケーション修正していますね・・・
と言うことでテスト対象のアプリケーションのコンパイルとインストールを行います。
今回は&&を利用してコンパイルとtishadow runをいっきに実行してみます。

速攻で処理が完了して以下のような画面が表示されると思います。この早さがなんとも言えません。
スクリーンショット 2013-12-06 19.15.53

これでテストは成功するはずです!

を実行すると以下のような結果になりました。


スポンサードリンク

Googleアドセンス

Googleアドセンス




関連記事

Titanium Mobile応用【JasmineとTiShadowでBDD編:数値ボタンの1回押し処理】

前回の続きで、「BDD編その2」です。 BDD編その1をまずはご参照ください。 今後のBDD

記事を読む

Titanium Mobile入門【導入編 on Mac】

いよいよTitanium Mobile入門【導入編 on Mac】です。 Titanium Mob

記事を読む

Titanium Mobile入門【TiShadow導入編】

Androidだと格段に作業が早くなる。 複数のエミューレータで同時にテストを実行できる

記事を読む

TitaniumのTableViewを試してみる【何故か前編】

Mac miniの環境が完成したので、新たなTitaniumを利用したBDDシリーズを開始する予定で

記事を読む

Titanium MobileのAlloyにおけるUIコンポーネントの配置【後編】

Titanium MobileのAlloyにおけるUIコンポーネントの配置【前編】 に引き続き T

記事を読む

no image

Titanium Mobile応用【JasmineとTiShadowでBDD編:テストが時々失敗する理由】

前回の最後に残った問題点の解決方法が分かりましたので 「BDD編その5」として記載させていただきま

記事を読む

no image

Titanium mobileでAndroidのActionBarを利用する。

Titanium mobileで基本的な画面遷移を試そうと思い、画面遷移のイベントを仕込むボタンをど

記事を読む

TitaniumのTableViewを試してみる【何故か後編】

「TitaniumのTableViewを試してみる【何故か前編】」では、予想に反してiOSシュミレー

記事を読む

Titanium Mobile応用【JasmineとTiShadowでBDD編:対象アプリ説明】

本格的にTitanium Mobile CLIを利用してBDDを行いたいと思います。 まずは、計算

記事を読む

Titanium Mobile応用【JasmineとTiShadowでBDD編:15桁入力処理】

前回の続きで、「BDD編その3」です。 「BDD編その1」 「BDD編その2」をまずはご参照くだ

記事を読む

Comment

  1. たろを より:

    はじめまして.たろをと申します.
    Tishadowがうまく動かせなかったので質問です.

    実行環境は
    OS:Windows7
    ビルド:実機
    コマンドプロンプトとテキストエディタで開発をしています.

    GenymotionやAndroidエミュレータにTishadowアプリを入れられなかったので,GooglePlayからTishadowアプリを実機にインストールしてビルドに挑みました.

    以下,Tishadowに接続する部分からです.
    >tishadow server
    をした後,実機にインストールしたTishadowアプリをサーバに接続しました.
    ([INFO][端末の情報] Connectedとでたので成功しているはず…)
    >alloy compile –config platform=android
    >tishadow run
    とやるとTishadowアプリが落ちてしまいます.
    何か解決策をご存知でしたらご教授いただいでもよろしいですか.

    • おふ×3 より:

      たろを様

      はじめまして、コメントありがとうございます。

      調べてみたのですが、
      Androidの実デバイスでtishadow runがクラッシュすることは、よくある問題のようです。
      デバイス依存の原因かどうかも不明みたいですが、ファイルシステムの実装方法に起因する原因等が考えられるようです。

      英語でこの問題を訴えている人が少ないところから考えると微妙です。

      参考URL
      http://www.tdtsh.com/blog/archives/3206

      私、通常時には、実機はiPhoneしか持っておりませんので、Android実機で試したことがないです。

      2つ試していただきたいのは
      ・TishadowアプリをGooglePlayからではなく、自分でコンパイルしてインストールしてみる。
      ・処理が殆どないアプリを対象にrunする。

      以上、よろしくお願いいたします。

      • たろを より:

        おふ×3 様
        たろをです.
        先日はコメント返信ありがとうございました.

        >・TishadowアプリをGooglePlayからではなく、自分でコンパイルしてインストールしてみる。
        >・処理が殆どないアプリを対象にrunする。
        Tishadowアプリを自分でコンパイルし,インストールする部分をを試しましたのでお伝えします.

        ・TishadowアプリをGooglePlayからでなく自分でコンパイルするところで詰まりました.
        そのためrunはできていません.(runに使おうと思っていたアプリはalloyの初期状態でのアプリを使う予定でした)
        ビルドを行う前には常に>titanium cleanを実行しています.
        ・試したことは
        1.参考URLを元にTishadowインストール用のプロジェクトを作成
        2.上記プロジェクトをGenymotionとエミュレータでのビルド
        3.ビルドと端末へのインストールを別々に行う

        詳細を下記に記します.

        以下,下記URLを参考にした時の実行の流れです.
        http://www.tdtsh.com/blog/archives/3206

        1.端末にインストールするためのTishadowプロジェクトを作成
        >mkdir tishadowapp
        >tishadow app -d ./tishadowapp
        Enter app id [com.yydigital.tishadowapp]: com.example.tishadowapp
        >cd tishadowapp/
        2.Genymotionとエミュレータへのビルド
        -Genymotionとエミュレータにインストールするためにビルド
        >ti build -p android -device-id 192.168.56.101:5555
        3.2.3
        >ti build -p android -device-id “Google Nexus 4 – 4.4.2 – API 19 – 768×1280”
        3.2.3
        >ti build -p android -device-id emulator-5554
        3.2.3
        # Genymotionやエミュレータを指定しようとするとTitaniumのバージョンが出てきてしまう…

        -Genymotionの名前をビルド時に指定しなかった場合
        参考は以下
        http://tuki0918.hatenablog.com/entry/2013/06/10/141941
        -Genymotionを立ち上げた状態だと(Genymotionのみ立ち上がっている場合)
        >titanium build –platform android –target device

        [ERROR] Failed to install apk on “192.168.56.101:5555”
        [ERROR] Error: INSTALL_FAILED_MISSING_SHARED_LIBRARY
        というエラーが出る.

        -Genymotionを立ち上げていない状態だと(エミュレータのみ立ち上がっている場合)
        >titanium build –platform android

        [ERROR] Failed to install apk on “emulator-5554”
        [ERROR] Error: INSTALL_FAILED_MISSING_SHARED_LIBRARY
        というエラーが出る.

        ◯ビルドとインストールを切り分けてみる
        下記を参考にビルドとGenymotionへのインストールを別々に行いました.
        http://qiita.com/sngmr/items/d7c244114d7242c681c5

        ・プロジェクトの作成方法は変更なし
        ・ビルドのみ
        >titanium build –platform=android –build-only
        ビルドの成功とbuild/android/bin/以下にTishadow.apkが作成されたことを確認
        >adb -s 192.168.56.101:5555 install -r build/android/bin/Tishadow.apk
        WARNING: linker: libdvm.so has text relocations. This is wasting memory and is a security risk. Please fix.
        pkg: /data/local/tmp/Tishadow.apk
        Failure [INSTALL_FAILED_MISSING_SHARED_LIBRARY]

        端末へのインストール時にエラー…

        ・Tishadowのアプリを自分でコンパイルしインストールする部分で詰まっているのが現状です…
        もしよろしければまたご教授いただいてもよろしいですか.

        • おふ×3 より:

          すいません、参考URLの内容を完全勘違いしていました。
          この参考URLはandroidの実デバイスでtishadow runがうまく行かない例のつもりだったのですが・・・
          そうじゃないですね。

          Genymotionで動作するエミュレータへのビルドではなく
          お使いのandroid端末にTishadowアプリを直接インストールして確認していただきたいのです。

          1.端末にインストールするためのTishadowプロジェクトを作成
          >mkdir tishadowapp
          >tishadow app -d ./tishadowapp
          Enter app id [com.yydigital.tishadowapp]: com.example.tishadowapp
          >cd tishadowapp/
          2.Genymotionとエミュレータへのビルド ▶︎Genymotionではなく、androidの実機にインストールしてください。
          titanium setup
          titanium build -p android –log-level trace –target device ▶︎実デバイスを指定して

          Android実機にインストールするときには
          設定 → セキュリティ → 提供元不明のアプリ
          設定 → 開発者向けオプション → USBデバッグ
          がオンになっていないと認識してくれませんので、事前に設定変更をお願いたします。

          以上、よろしくお願いいたします。

          • たろを より:

            おふ×3様

            私の方こそ勘違いしていて申し訳ありません…
            >titanium setup
            ではどの部分を設定したらよろしいでしょうか

          • たろを より:

            おふ×3様

            >titanium setup
            での設定の仕方はわかりませんでしたが
            >adb -s 1bc210 install -r build/android/bin/TiShadow.apk
            とすることでTiShadowアプリを実機にインストールすることができました.

            違うプロジェクトを作成し,HelloWorldができるのか確認しました.(プロジェクト作りたての何もしていない状態です)

            文字や背景色を変更後,tishadow run とすると内容の反映が即座に行われました.
            コメント欄でお手数をかけてしまいましたが無事動くところまで持って行くことができました.

            ありがとうございました.

          • おふ×3 より:

            たろを様

            やはりGooglePlayで公開しているTishadowアプリと
            実際に利用しているTishadowの非互換が原因だったのですね。
            (非互換と言い切る事もできないか・・・)

            良くあるんですよね、バージョンによる非互換って・・・
            自分もたまに作り込んで、痛い目にあいます。

            これはStack OverflowにQ&Aで挙がっていたので、試す価値ありと思ってました。

            インストール方法も
            android/bin/TiShadow.apkは直にandroid実機にインストール
            可能なパッケージですので、この方法でも問題ないです。

            とりあえず、無事動作して良かったです。

            以上、よろしくお願いいたします。

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

動画で英語を学習できるiOSの無料アプリCapTubeをリリースいたしました。

個人では初となるiOSアプリをリリースいたしました。 何度もリジ

no image
Ruby on rails4系でBootstrapを利用するためのtips

MacでRuby on rails4系のBootstrapを利用しよう

no image
Java、Eclipse、JUnit関連のエントリーの移行のお知らせ

Java、Eclipse、JUnit関連のエントリーは http:/

iOS8開発者向けお勧め本紹介[詳細! Swift iPhoneアプリ開発 入門ノート Swift 1.1+Xcode 6.1+iOS 8.1対応]

iOS7開発者向けお勧め本紹介を以前に紹介させていただきまいたが、今回

Swift入門(Xcode6のXCTestフレームワークで学ぶ) 第二回「関数(メソッド)とクロージャーの利用方法」

前回はSwiftの概要をザックリと説明させていただきました。 今

→もっと見る

Optimization WordPress Plugins & Solutions by W3 EDGE
PAGE TOP ↑