最近 Titanium のビルドで眠くなりそうだったので噂のTishadowを使ってみた。

Tishadow って何？

Tishadow とは Titanium のビルドを楽にしてくれるツールです。

本来 Titanium で作業をしていると、確認のたびに毎回毎回ビルドをして長い時間またされますが、Tishadow はサーバを介して差分のみ反映してくれるので爆速で開発ができるようになります。

仕組み

Tishadow は 「Tishadowサーバと、Tishadowアプリ、自分のプロジェクトのアプリ」の３つの構成で動作します。

Tishadowサーバ

Tishadowサーバはtishadow runコマンドを受け取ると、
サーバに接続している端末のTishadowアプリに変更部分の差分を送ります。
さらに接続している端末が出力するlogを受け取ることができます。

Tishadowアプリ

Tishadowアプリは実際に目に見えるものではなく開発中のアプリの下地として存在するものです。
接続しているTishadowサーバから送られてきた差分を受け取り
開発中のアプリに反映させ再起動をかけます。
アプリ起動中のコンソールはサーバ側に送られます。

環境構築しよう

1. Tishadow のインストール

まずは Tishadow をインストールしましょう。

$ npm install -g tishadow

※権限で怒られた時はsudoを加えれば大丈夫です。

sudoが嫌だという人は nvm を使うことをオススメします。(僕は nvm を使ってます)

【Node.js】nvmをインストールして設定するまでの方法

--注意事項--

何も考えずにnpm installしてしまうと最新の Tishadow が落ちてきます。

Tishadow は Tishadow アプリも同時にビルドするので、開発中のプロジェクトと Tishadow アプリの titanium SDK のバージョンが合わない場合があります。

GitHub の tag から tiapp.xml を見て、自分のプロジェクトに合ったバージョンの Tishadow をインストールしましょう。(ということがあるので nvm を入れておくことを強くオススメします)

$ npm install -g [email protected]

上記のようにパッケージ名の後ろに@マークをつけることでバージョンを指定することができます。

2. Ttishadow サーバを起動

以下のコマンドから Tishadow サーバを起動します。

$ tishadow server

起動するとデフォルトlocalhost:3000でアクセスできるサーバが立ち上がります。
実際にブラウザでアクセスしてみるとこんな感じです。

3. appifyを使ったTishadowアプリの生成

本来Tishadowアプリは別アプリとしてビルドをしますが、今回はappifyを使って下地としてのTishadowアプリを生成します。

$ cd [開発中のアプリのルートディレクトリ]
$ mkdir appify
$ tishadow appify -d appify/
[INFO] Beginning Build Process
[INFO] 14 file(s) bundled.
[INFO] Bundle Ready: /Users/sawada/develop/testapp/build/tishadow/dist/testapp.zip
[INFO] Creating new app...
[INFO] TiShadow app ready

これで appify のアプリの準備ができました。
実際に appify ディレクトリの中身はこんなかんじです。

$ cd appify
$ ls -la
drwxr-xr-x   8 sawada  staff   272  4  8 16:17 .
drwxr-xr-x   8 sawada  staff   272  4  8 16:17 ..
-rw-r--r--   1 sawada  staff    58  4  8 16:17 .npmignore
drwxr-xr-x  10 sawada  staff   340  4  8 16:17 Resources
-rw-r--r--   1 sawada  staff   174  4  8 16:17 manifest
drwxr-xr-x   4 sawada  staff   136  4  8 16:17 modules
drwxr-xr-x   3 sawada  staff   102  4  8 16:17 platform
-rw-r--r--   1 sawada  staff  2570  4  8 16:17 tiapp.xml

4. アプリのビルド

ここが一番のポイントで今まではプロジェクトルートなどからビルドコマンドを叩いていたと思うのですが、
appify を使う場合はappify/からビルドコマンドを叩いて、appify アプリをビルドします。

$ pwd
[開発中のアプリのルートディレクトリ]/appify
$ ti build -p ios

これで tishadow の恩恵を受けたアプリが出来上がります。
先ほどのブラウザを確認してデバイスの接続が確認できていれば成功です。

このようにappifyアプリを各端末にビルドしておくことで
差分を一気に反映させることができるようになります。

ちなみにデフォルトではlocalhost:3000を見に行くアプリができるので、
実機で試したい場合などは予め自分のPC(サーバ)のローカルIPを向くような
appifyを用意する必要があります。

$ cd [開発中のアプリのルートディレクトリ]
$ mkdir appify
$ tishadow appify -d appify/ --host 192.168.x.x
[INFO] Beginning Build Process
[INFO] 14 file(s) bundled.
[INFO] Bundle Ready: /Users/sawada/develop/testapp/build/tishadow/dist/testapp.zip
[INFO] Creating new app...
[INFO] TiShadow app ready

差分を反映させる

では実際に Tishadow で編集部分の差分をアプリに即時反映させてみましょう。
開発中のアプリのわかりやすい部分を変更し、プロジェクトのルートディレクトリで以下のコマンドを打ってみてください。

$ tishadow run

以下の画像のように反映されましたか？
もう元の開発の仕方には戻れませんね☆･:ﾟｵｫヾ(o´∀｀o)ﾉｫｵﾟ:･☆

ちなみに以下のコマンドの場合だとホントに編集したファイルだけを反映してくれるのでもう少し早いです。

$ tishadow run --update

良いところ

• 即時反映してくれてブラウザ開発の様にスムーズに開発ができる
• ネットワーク経由からだから USB ケーブルをわざわざ繋げていなくても良い
  • 一回目だけは必要
• ブラウザからコンソールが見られる
• クラッシュして落ちてもコンソールが出続ける！！！
• 複数端末に一気に反映してくれる！
• 何より早い！！！！

悪いところ

• ネットワーク経由だからネットワークから外れたらオジャン
• 極稀に view の違いが発生する(webviewなど)

最後に

確実に使っていない時よりもサクサク開発できるようになります！
なるべく働きたくないのでどんどん自動化して効率の良い開発をしていきましょう！

Titanium Studio でも使えるようなんですが、Studio は元々不具合が多くて嫌いなので省略しました。
(Studio ユーザごめんちょ(m´・ω・｀)m))

おまけ

Titanium CLI でiOSの4inchのシミュレータで検証したい場合、以下のようなコマンドになります。

$ ti build -p ios -T simulator --log-level debug --retina --tall --sim-64bit

あまりに長いのでエイリアスを.bashrcもしくは.zshrcに追記しておくといいでしょう。
自分はttttにエイリアスをかけています。(怒られるのでもっといいコマンド名にしましょう)

# iPhone Retina 4.5-inch
alias tttt='ti build -p ios -T simulator --log-level debug --retina --tall --sim-64bit'

# アンドロイド実機デバック
alias aaaad="ti build -p android --log-level trace --target device"

こんな感じです。