Tishadow で爆速ビルド開発

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



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

![tishadow.png](https://qiita-image-store.s3.amazonaws.com/0/42248/94753b61-5d84-9a04-0721-57ba6e2149dc.png)


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

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

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


# 環境構築しよう

## 1. Tishadow のインストール
まずは Tishadow をインストールしましょう。

```
$ npm install -g tishadow
```

※権限で怒られた時は``sudo``を加えれば大丈夫です。<br/>
``sudo``が嫌だという人は nvm を使うことをオススメします。(僕は nvm を使ってます)

[【Node.js】nvmをインストールして設定するまでの方法](http://creator.cotapon.org/articles/node-js/%E3%80%90node-js%E3%80%91nvm%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%97%E3%81%A6%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B%E3%81%BE%E3%81%A7%E3%81%AE%E6%96%B9%E6%B3%95)


##### --注意事項--
何も考えずに``npm install``してしまうと最新の Tishadow が落ちてきます。<br/>
Tishadow は Tishadow アプリも同時にビルドするので、開発中のプロジェクトと Tishadow アプリの titanium SDK のバージョンが合わない場合があります。<br/>
[GitHub](https://github.com/dbankier/TiShadow) の tag から tiapp.xml を見て、自分のプロジェクトに合ったバージョンの Tishadow をインストールしましょう。(ということがあるので nvm を入れておくことを強くオススメします)

```
$ npm install -g tishadow@1.0.0
```

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



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

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

![スクリーンショット 2015-04-08 15.33.23.png](https://qiita-image-store.s3.amazonaws.com/0/42248/34e331e6-1bef-7c26-4103-0c8ad2930b35.png)


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

```bash
$ 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 ディレクトリの中身はこんなかんじです。

```bash
$ 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 アプリをビルドします。

```bash
$ pwd
[開発中のアプリのルートディレクトリ]/appify
$ ti build -p ios
```
これで tishadow の恩恵を受けたアプリが出来上がります。
先ほどのブラウザを確認してデバイスの接続が確認できていれば成功です。

![TiShadow.png](https://qiita-image-store.s3.amazonaws.com/0/42248/ea71f3e4-7969-8274-a364-e07edd0eb640.png)


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

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

```bash
$ 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 で編集部分の差分をアプリに即時反映させてみましょう。
開発中のアプリのわかりやすい部分を変更し、プロジェクトのルートディレクトリで以下のコマンドを打ってみてください。

```bash
$ tishadow run
```

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

 ![share.gif](https://qiita-image-store.s3.amazonaws.com/0/42248/e64babec-38a1-44b8-68ad-ab2fe07f7f8f.gif)

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

```
$ tishadow run --update
```


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


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

# 最後に
確実に使っていない時よりもサクサク開発できるようになります！
なるべく働きたくないのでどんどん自動化して効率の良い開発をしていきましょう！<br/>
Titanium Studio でも使えるようなんですが、Studio は元々不具合が多くて嫌いなので省略しました。
(Studio ユーザごめんちょ(m´・ω・｀)m))


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

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

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

```bash:.bashrc.zshrc
# 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"
```

こんな感じです。