Titanium Studioで最新のKitchen Sinkをインポート
遂にTitanium Studio、そしてTitanium Mobile SDK 1.7が正式リリースされました。
新機能などの情報は、予告されていた通りで、詳細はデベロッパサイトで確認してください。
今後、Titanium Developerはオープンソースとして残りますが、本流はTitanium StudioとSDKという組み合わせになります。Titanium Mobileで開発を行っていくのであれば、Titanium Studioに早く慣れてしまった方が良いでしょう。
さて、Titaniumで最も参考になるサンプルと言えば、「Kitchen Sink」です。
このKitchen Sinkを動かす際、Titanium Developerを使用したいた際は、自分でダウンロードして、プロジェクトをインポートと言う方法を採っていたと思います。
一方、Titanium Studioではどうでしょう？
実は、Titanium Studioでは、簡単にKitchen Sinkプロジェクトを管理することができます。
下のスクリーンショットのように、左下のSamplesというタブを開くと、Titanium Mobileという項目があり、トグルを開くとKitchen Sinkが並んでいます。ここで、右クリックでプロジェクトをインポートすることができます。
Finishをクリックすると、ダウンロードが始まります。
ありがたい事に、Kitchen Sinkプロジェクトをgit repoから持ってきてくれるのです。
是非皆さんも試してみてください。
Titanium Developerのデバッグモード起動
Appcelerator社は、Titanium Studioによる開発環境にシフトしつつある昨今ですが、EmacsやTextMate, BBEdit, Codaなどエディタ系で開発をしているユーザーも多いかと思います。早くからTitaniumを使っているユーザーほど、まだまだTitanium Developerを使っているのではないでしょうか？
そこで今更かもしれませんが、敢えてTitanium DeveloperのTipsを紹介します。
Titanium Developerには、実はデバッグモードがあります。
このモードで立ち上げておくと、Titanium Developer自体が裏で何をやっているかが分かったりします。
[MacOSXの場合]
1. Terminal.appを起動しておきます。
2. アプリケーションフォルダのTitanium Developer.appを選択状態で、マウス右クリックで「パッケージの内容表示」選択します。すると、Titanium Developer.appパッケージ内容が表示されます。
3. Contents/MacOS/Titanium DeveloperをマウスでTerminal.appへドラッグ＆ドロップします。
4. 続けて--debugオプションを付けて、エンターキーを押します。
すると、以下のようにずらずらーっと表示されます。
それがどうしたと言われると困りますが、参考程度に捉えてください。
Titanium Studioをオフラインで使う方法
実はPreview版が公開された直後では、インターネットに繋がっていなければ起動すらできない状況でした。
これは、開発環境として致命的な問題であり、多くのユーザーが指摘した結果、現在では起動して編集するところまでは利用可能です。
しかし、シミュレータや実機での動作確認はできません。
Appcelerator側のサーバと通信する必要があるのは分かりますが、オフライン作業くらい是非実現して欲しいところです。
今日たまたま使えないよ〜ってツイートを英語で書いたところ、Aidori開発時にお世話になった@skypantherさんが技を教えてくれたので、ここで紹介します。
方法は簡単です。
1. インターネットに接続している状態で、Titanium Studioを起動する。
（つまりログインしておく）
2. ここでマシンをスリープ、もしくはハイバネーションさせる。
（これでインターネット接続を切る）
3. オフライン状態で、マシンを復帰させる。
以上で、シミュレータ動作など使うことが可能になります。
これは一時的な対応策なので、一日も早くオフラインでちゃんと使えるようにしてもらいたい。
iPhoneのようにNavigationBarを残してページ遷移する技
Titaniumでは、iPhoneのNavigationBarを残してページ遷移を行うには、tabGroupを使うのが一般であるが、Androidでは、iPhoneのコードのままでは同じようには動かないし、タブを隠すことができない。
そこで、以下のような技を使うと実現できる。
(※この技がいつまで使えるかは分かりません。iPhoneでは異なる動きをします。)
app.js
var mainwindow = Ti.UI.createWindow({
backgroundColor:'#fff',
navBarHidden:'false',
url:'another.js'
});
mainwindow.open();
tabGroupは使わず、さらのWindowを作ります。
another.js
var win = Ti.UI.currentWindow;
//タイトルバーを残してページ遷移するためのアニメーション
var b2 = Titanium.UI.createButton({
title:'Open',
width:200,
height:50,
top:150
});
win.add(b2);b2.addEventListener('click', function()
{
var options = {
height:0,
width:0,
backgroundColor:'#fff',
bottom:0,
right:0
};
if (Ti.Platform.name == 'android') {
options.navBarHidden = false;
}
var w = Titanium.UI.createWindow(options);
var a = Titanium.UI.createAnimation();a.height = Titanium.Platform.displayCaps.platformHeight;
a.width = Titanium.Platform.displayCaps.platformWidth;
a.duration = 300;var b = Titanium.UI.createButton({
title:'Close',
height:50,
width:150
});
w.add(b);
b.addEventListener('click', function()
{
a.height = 0;
a.width = 0;
w.close(a);
});
w.open(a);
});
つまり、こんな感じで自前でアニメーションを作ってしまえば良いということ。
お試しあれ〜。
iPhoneのUnlockの動きをTitaniumで再現（解説：前編）
ツイッターのタイムラインでiPhoneのUnlockする時の動きのパーツを探しているツイートを見たので、Titaniumで再現してみた。
ソースは、こちら。
Slider ON/OFFボタンをタップすると、下からアンロックスライダーViewが上がってくるようにする。
まず、アンロックスライダーの背景Viewとスライダーが動く溝のView、そしてスライダーボタンを含んだコンテナViewを定義する。最初は、「bottom:-100」を設定して隠しておく。
var unlockview = Ti.UI.createView({
backgroundImage:'images/sliderTrack.png',
width:'100%',
height:100,
bottom:-100,
backgroundColor:'#666'
});
sliderwin.add(unlockview);
複数のパーツを一括してアニメーションさせたい時は、コンテナViewを作っておくと良い。
そして、Slider ON/OFFボタンをタップした時のEventListenerを以下のように定義する。
startbtn.addEventListener('click', function(e){
sliderButton.animate({center:{x:(sliderView.left+sliderButton.width/2),y:(sliderButton.top+(sliderButton.height/2))}, duration:100});
if (unlockview._up == true) {
unlockview.animate({bottom:-100,duration:500});
unlockview._up = false;
} else {
unlockview.animate({bottom:0,duration:500});
unlockview._up = true;
}
});
上のソースのように、unlockview.animateを設定することで、ON/OFFボタンをタップする毎に、下からアンロックスライダーViewが上がってきたり、下に隠れたりアニメーションする。
この仕組みを応用すれば、スライド式メニューをアプリ内に組み込むこともできる。
Titanium Studioの便利なところ その1 最新のContinuous Buildを簡単インストール！
Titanium Studioを利用するなら、まだしばらくはアップデートをこまめにした方が良いだろう。
ついでにTitanium SDKもアップデートしておきたいところだ。
Titanium Studioは、Titanium SDK自体が簡単にアップデートできるので紹介しよう。
ブルダウンメニューから「master」を選択し、OSXバージョンのリンクをコピーします。
「Help」から「Install Titanium SDK from URL」を選択する。
ここで、先ほどコピーしたURLをペーストし、Finishを押すと、以下の画面のように、ダウンロード及びインストールが始まる。
これだけで最新SDKを利用できるようになるので、是非試してみて欲しい。
Titanium用Androidモジュールのビルドがうまく行かない時
人が作ったAndroid用のモジュールソースをビルドしようとした時にビルドが失敗することがある。
iPhone用のモジュールと違って、注意しなければならないポイントがあるので必ずビルド前に確認しておこう。
この中で、確認しておかなければならないのはbuild.propertiesだ。
このファイルにはAndroidプラットフォームとgoogleAPIへのパスが明記されている。
つまり、Android用モジュールをtitanium.py createコマンドで生成した時に指定したものになる。
そのため、他の環境に移動した場合、これらのパスが一致しないとビルドに失敗すると言う訳でである。
build.properties開くと、以下のようになっている。
titanium.platform=/Library/Application Support/Titanium/mobilesdk/osx/1.7.0/android
android.platform=/android-sdk/platforms/android-4
google.apis=/android-sdk/add-ons/addon_google_apis_google_inc_4
/android-sdk/より上のパスが自分のSDKのパスと一致するか確認して欲しい。
上記パスを自分の環境に合わせて修正した後、ant clean & antでビルドが成功するはずだ。
iPhone以上にAndroid用モジュールが必要であろうと感じている。引き続きAndroid用モジュールに注目していきたい。
