Titanium Mobile / TiShadow 導入→動作確認まで

さいしょに

TiShadow 導入→動作確認までのメモです。
まだ全然触れてないので詳しい機能についてはよく知りません。

公式：TiShadow

参考

導入にあたり astronaughtsさんのスライドを参考にしました。

スライド：TiShadow で iOS / Android アプリのプロトタイプを爆速で作る方法 by astronaughts

準備

TiShadow導入前に、まず「Node」と「Titanium CLI」の環境を整える（インストール）しておく必要があります。
すでに導入済みの方は読み飛ばしても問題はありません。
　

Node の環境について

今回は、node.js の「INSTALL」から最新版をインストール（上書き）しました。

$ npm -v
1.2.25
$ node -v
v0.10.10

Titanium CLI の環境について

■ titanium コマンドがインストールされてるか確認しましょう。

$ titanium -v
3.1.0

もし、入っていないようでしたら以下のコマンドで導入します。
※ Node環境必要

$ sudo npm install -g titanium

■ 次に「titanium setup」で「titanium コマンド」の初期設定が必要です。
※ 出来てないとビルド時にエラーが出て詰まりました。

$ titanium setup

いくつか対話形式で質問されるので入力して下さい。

自分はを以下のblog記事を参考にさせて頂きました。

# 先取り “新” Titanium CLI | old.imthinker.net
# Titanium CLIを使ってみる - 「気になる」を確かめてみるブログ
　

ここまで終わると Titaniumのproject作成であったり、ビルドなどがコマンドラインで出来るようになります。

TiShadow導入（PC側）

公式の手順に従います

tishadowをインストールします。

$ sudo npm install -g tishadow
$ tishadow -v
1.0.1

サーバーを起動する

※ 後で実機からこのサーバーに接続します。

$ tishadow server

http://localhost:3000/ アクセスして以下の様な画面が表示されれば大丈夫です。

f:id:tuki0918:20130610131019p:plain
　

TiShadow導入（実機側）

サーバーは起動しておかないといけないので、別ターミナルで作業するといいと思います。
　

TiShadowアプリを作成します。

$ mkdir ~/tishadowapp && tishadow app -d ~/tishadowapp

TiShadowアプリを実機（iphone）にインストールします。

$ cd ~/tishadowapp
$ titanium build -p iphone -T device -F universal

# build時に色々聞かれますが、よくわからないときは先にEnter押すと何を入力すればよいか教えてくれると思います。
　
# android の場合

$ titanium build -p android -T device

　
f:id:tuki0918:20130610133801p:plain
# サーバーを立ててるPCのIPアドレスを入力して接続します。
※ 同一ネットワーク上にいるか注意して下さい。

f:id:tuki0918:20130610134335p:plain

#「http://localhost:3000/」の「Devices項目」に接続しているデバイスが表示されれば大丈夫です。
　

TiShadowを使ってアプリをビルドする

ここまでこればあと少しです。　頑張りましょう。

「http://localhost:3000/ 」は表示されていますか？
「http://localhost:3000/ 」の「Devices項目」に実機が接続されていますか？

確認して下さい。
　

それでは、自分の作ったアプリのフォルダに移動します。

$ cd appName

あとは「tishadow run」で実機に反映されれば完了です。

$ tishadow run

　
おつかれさまでした。
　

Jasmine について

astronaughtsさんのスライドを見れば、、、
「アプリフォルダ/Resources/spec/xxx_spec.js」にテストコード書いて
「tishadow spec」すればいいよーって書いてるのでそれを試して終わりにします。

公式：Jasmine
　

「xxx_spec.js」の内容

describe("A suite", function() {
  it("contains spec with an expectation", function() {
    expect(true).toBe(true);
  });
});

describe("A suite is just a function", function() {
  var a;
  it("and so is a spec", function() {
    a = true;
    expect(a).toBe(true);
  });
});