Umi Uyuraのブログ

プログラミング関連の作業ログ

Appcelerator StudioのLiveViewを触ってみた

Titanium Studioより機能が優れているAppcelerator Studioですが、その中でLiveView機能を触ってみました。

LiveViewとは

Appcelerator Studio上から実行したアプリに対して、ソースコードの変更を素早く反映してくれる機能です。

どんなものかは、Appcelerator Universityの動画を見てみるとわかりやすいと思います。

LiveView - Appcelerator University

以前からCLIベースでは TiShadow という爆速プロトタイピングツールがありましたが、それのStudio版といったところでしょうか。

TiShadowについては、こちらのスライドがわかりやすいです。

Rapid Prototyping by TiShadow // Speaker Deck

使い方

基本的な使い方(シミュレータ/エミュレータ

まずはiOSシミュレータやAndroidエミュレータで実行する場合の使い方です。

LiveViewを有効にする

プロジェクトを実行する前に、LiveViewを有効にしておく必要があります。

LiveViewの有効無効は、Studioのツールバーにあるアイコンで切り替えます。

f:id:umi-uyura:20150612233001p:plain

トグル式になっているので、利用する場合はキャプチャのように押した状態にしておいてください。

プロジェクトを実行する

起動モードを Run にして、ターゲットの中から実行するプラットフォームに合わせて、 iOS Simulator もしくは Titanium Android Emulator を選び、さらに端末/AVDを選びます。

f:id:umi-uyura:20150612233014p:plain

その後、 起動ボタン を押すと、選択したターゲットが起動します。

※ターゲットドロップダウンリスト内の Launch Automatically が有効になっている場合は、起動ボタンを押さなくても、ターゲットを選択した時点で自動的に起動されます。

ソースコードを編集する

シミュレータ/エミュレータが起動後、Studioや起動したアプリなどにエラーが表示されなければ、うまくいっていると思います。

試しにソースコードを編集してみると、先の動画のように、その結果がすぐにアプリ側へ反映されるようになります。

実機での使い方

実機に対してLiveViewを実行する場合、手順については基本的にはシミュレータ/エミュレータと同様です。

異なるのは、以下のように、いくつか環境と準備が必要な点です。

実機へ送る環境

まず当然ですが、最初に一度はアプリをビルドしなければならないので、そのアプリを実機へ送ることができる前提です。

私はUSB接続でしか試していませんが、別途iTunes経由だったり、DeployGateやTestFlightなどで実機に送ることができれば、リモートでも使えそうな感じはします。

ネットワーク周りの環境

それに加えて、

  • 実機とPCが同一のWiFiネットワーク内にいること
  • 必要なポートが開放されていること(8323、8324)
  • WiFiネットワークがクライアント同士の接続ができること(公衆無線LANやポケットWiFiなども許可されていない場合があるようです)

この点は実機デバッグに関連してくるところなので、以下の記事も参考になるかもしれません。

実機での実行

環境が整っていれば、ターゲットの iOS Device もしくは Android Device から対象を選択することでアプリが実機にインストールされます。

インストールされたアプリを起動すると、バックグラウンドでStudioとアプリが接続されて、LiveViewが使えるようになります。

ネットワークを介す分、シミュレータ/エミュレータより若干タイムラグがありますが、コードの編集結果が自動的に反映されます。

使い方のポイント

注意点としては、あくまでビルドとアプリへの反映→再起動を自動的に実行してくれるということなので、再起動後、アプリは初期画面(起動直後の画面)に戻ります。

階層構造の深いところの画面などを実装するような場合は、毎回該当の画面まで遷移していくことになります。

それでも、毎回シミュレータを終了して、ビルドして、また実行して…を繰り返すよりも効率は良いと思いますので、開発初期でUIを色々といじっているときなどには、非常にありがたいのではないでしょうか。

ちなみに、コードの修正はStudioじゃなくても大丈夫で、Emacsから修正しても検知してくれました。

詳しいことは、ドキュメントの方も参考にしてください。

LiveView - Appcelerator Platform - Appcelerator Docs

トラブルシューティング

実機とLiveViewで接続できない

LiveViewで接続できない場合、アプリを実行すると、こんな画面が出るようです。

f:id:umi-uyura:20150612233050p:plain

また、Studio側にもこんな感じのログが出力されます。

-- Start application log -----------------------------------------------------
[INFO] :   LiveViewDemo/1.0 (0.0.0.9239ff9)
[ERROR] :  Analytics error sending request: The request timed out.
[ERROR] :  Script Error {
[ERROR] :      column = 225;
[ERROR] :      line = 567;
[ERROR] :      message = "[LiveView] File Server unavailable. Host Unreachable @ 192.168.20.109:8324\n[LiveView] Please ensure your device and computer are on the same network and the port is not blocked.";
[ERROR] :      sourceURL = "file:///private/var/mobile/Containers/Bundle/Application/5C846F45-6C3D-41C3-8613-6D6033ED958C/LiveViewDemo.app/app.js";
[ERROR] :      stack = "_getRemoteSource@file:///private/var/mobile/Containers/Bundle/Application/5C846F45-6C3D-41C3-8613-6D6033ED958C/LiveViewDemo.app/app.js:567:22\n_getSource@file:///private/var/mobile/Containers/Bundle/Application/5C846F45-6C3D-41C3-8613-6D6033ED958C/LiveViewDemo.app/app.js:586:33\n_compile@file:///private/var/mobile/Containers/Bundle/Application/5C846F45-6C3D-41C3-8613-6D6033ED958C/LiveViewDemo.app/app.js:632:28\nrequire@file:///private/var/mobile/Containers/Bundle/Application/5C846F45-6C3D-41C3-8613-6D6033ED958C/LiveViewDemo.app/app.js:502:23\npatch@file:///private/var/mobile/Containers/Bundle/Application/5C846F45-6C3D-41C3-8613-6D6033ED958C/LiveViewDemo.app/app.js:399:43\nfile:///private/var/mobile/Containers/Bundle/Application/5C846F45-6C3D-41C3-8613-6D6033ED958C/LiveViewDemo.app/app.js:676:15\nglobal code@file:///private/var/mobile/Containers/Bundle/Application/5C846F45-6C3D-41C3-8613-6D6033ED958C/LiveViewDemo.app/app.js:682:3";
[ERROR] :  }

その場合は、先に書いたように、

  • PCと端末が同じWiFiネットワーク内にいるか?
  • PC側の必要なポートが開いているか?

などを確認してみると良いと思います。

プロジェクトの実行に失敗する

新しいファイルを追加したりリビルドした後でプロジェクトの実行に失敗するようになった場合は、一度プロジェクトを Clean した後、

$ killall node

を実行するそうです。

Node.js使ってLiveViewを実現しているだけなく、Studioのバックグラウンド処理でもnodeプロセスが色々と動いているようですね。

どおりで気付いたら、覚えのないNodeプロセスがシステムモニタ上に出てくると思いました。

Studioを落としても残っている場合があるので、気になる場合は(他にNode.jsを使っていなければ)、 $ killall node してあげてみるのも手かもしれません。

最後に

便利そうなんですが、MacBook Air的にAppcelerator Studioは少々ヘビーな感じなので、自分はTiShadowを使っていくことになりそうです。