TitaniumMobile勉強記

Web系エンジニア向けのキャリアアドバイザーやってましたが現在はフリーランスで開発含めて色々やってます。技術ネタとしてはRuby/RailsとJavaScript関連(Node.js、Titanium)あたり

今更ながらTiShadowの便利さを実感したので利用イメージをまとめてみた

食わず嫌いというよりも、イマイチそのメリットがわからずにスルーしていたTiShadowですが、GruntとTiShadowでTitaniumアプリのテストを自動化しようを読んでTitanium Mobile を実務的に使うための開発環境の整え方(2)を見ながら、環境構築して、いじりはじめたら、こんな便利なものをもっと早くから使っておくべきだったかなぁ ^^;

ひとまず便利だと思ったことはこんな感じ↓でしょうか。

  • ターミナル上で「ti build」としてから通常ならbuildが完了するまでに30秒程度は待つと思うけど、TiShadowの環境整っていれば、1秒程度で終わってしまう

  • 現在、iPhone/Android両対応のCraftBeerFanのアプリの機能追加作業中で、両方の実機に対しても一瞬で転送完了するので、実機での動作確認が捗る

  • GruntとTiShadowでTitaniumアプリのテストを自動化しようでも書かれてますが、TiShadow の Jasmine 連携機能を使うことで、テストコードを書きやすい環境が手に入る。(ただJasmineでのテストコードを書くための知識が別途必要になりますけどね)

なぜ、これまで使ってこなかったのか?

存在自体は結構前から知っていたし、なんとなく便利だというのも知っていたのに使わなかったのは、正直な所使うための方法が複雑なイメージがあったからなんです。

特に tishadowサーバとか、tishadowアプリとか、出てくるものが多いからその関係性がイマイチわからなかったので、敬遠してた所が正直ありました。

自分と似たような感覚を持ってる人がいるのかなとふと思ったので、tishadow つかうまでの流れについて、絵にしてみました。

TiShadowのインストール自体はとてもシンプルで、Titanium Mobile を実務的に使うための開発環境の整え方(2)を見ればすぐにわかるかと思いますのでこちらを参考にしてください

TiShadowアプリをbuildする

Titanium Mobile を実務的に使うための開発環境の整え方(2)の記事で

コマンドが有効になったら、シミュレータ・エミュレータ、または実機に TiShadow アプリをインストールしておきます。

という解説があります。これがどういうことなのかがイメージがわかない所があったのですが、実機で動作確認することをやっていたら、すぐにわかりました。

まずは、上記手順にしたがって、TiShadowアプリをbuildします

f:id:h5y1m141:20140302083909p:plain

buildが完了したら、そのアプリを

  • iPhoneの場合には、iTunes経由などでアプリをコピー
  • Androidの場合には、adb コマンドなどを使って実機にコピー

ということを行います。

この作業が完了することで、それぞれの端末上に、TiShadowというiPhoneアプリAndroidアプリがインストールされた状態になります。イメージとしてはこういう感じですね

f:id:h5y1m141:20140302084254p:plain

自分の中では、tishadowappの存在がいまいちピンと来なかったのですが、こうやって絵にしてまとめてみて改めて存在がよくわかりました。

TiShadowのServerを起動する

TiShadowアプリをbuildしたターミナルとは別のターミナルを立ち上げて、以下コマンドを実行します

tishadow server

ターミナルが2つ立ち上る状態なので、作業イメージとしてはこういう感じかと思います

f:id:h5y1m141:20140302084435p:plain

自分が現在作ってるアプリをbuildする

ターミナルが2つ立ち上ってる状態かと思いますが、さらに別のターミナルを立ち上げます。ホームディレクトリー直下に、myprojectとしてTitaniumのプロジェクトがあるとすると

cd ~/myproject

として、

tishadow run

とします。作業イメージとしてはこういう感じですね

f:id:h5y1m141:20140302084931p:plain

tishadow runを実行した後は、TiShadow Serverを通じて、buildされたアプリが実機に転送されます。こんなイメージですね

f:id:h5y1m141:20140302084943p:plain

この状態が出来上がってしまえば、

  1. コードを修正する
  2. tishadow runを実行
  3. 実機で確認

という部分の作業がかなりサクサク出来て、開発がとても捗るので、TiShadowまだ使ってない人にはぜひ利用することをオススメします(^^)