次は奥さんの欲しいアプリを作ってみようと言う事になりました。奥さん曰く、普通の人はパソコンなんか触りたくない、できるなら全部携帯でやりたい、携帯アプリを作れとの事。奥さんはiPhoneを使っているのでiPhoneアプリです。でも、できればObjective-Cは書きたくありません。文字列を分割するだけでcomponentsSeparatedByString等と書くのはゴメンなのです。
iPhoneだけならRuby Motion一択なのですが、僕はAndroidを使っているので両方で動いた方が良いよね、というのでTitanium Mobileを覚える事にしました。僕は次の携帯はWindows Phoneを買おうと思っているので、最初は対応プラットフォーム数が多いPhoneGapを使いたかったのですが、手元のiPhone4で少し試したところ動作が遅過ぎたので諦めました。ちなみに現時点でTitanium MobileはiOSとAndroidに対応していて、BlackBerryサポートがベータまで来ています。(残念ながらWindows Phoneへの対応の予定は無いようです)。まぁオープンソースなので、スーパー本気出せば何だってできると言えばできます。
それで1.5ヶ月くらいで一個アプリを作りたいなぁと思っていて、それまでの過程を残していく事にします。
インストールはTitaniumのQuick Startに従って行いました。Androidの開発経験がないので、Androidの環境構築に少し抵抗がありましたが問題なく完了しました。
次にTitanium StudioのテンプレートからSingle Window Applicationを選んでプロジェクトを作ってみました。ところが、このHello Worldにあたるプロジェクトが既に複雑です。下記が生成されるディレクトリツリーです。
$ tree ├── CHANGELOG.txt ├── LICENSE ├── LICENSE.txt ├── README ├── Resources │ ├── KS_nav_ui.png │ ├── KS_nav_views.png │ ├── android │ │ ├── appicon.png │ │ ├── default.png │ │ └── images │ │ ├── res-long-land-hdpi │ │ │ └── default.png │ │ ├── res-long-land-ldpi │ │ │ └── default.png │ │ ├── res-long-port-hdpi │ │ │ └── default.png │ │ ├── res-long-port-ldpi │ │ │ └── default.png │ │ ├── res-notlong-land-hdpi │ │ │ └── default.png │ │ ├── res-notlong-land-ldpi │ │ │ └── default.png │ │ ├── res-notlong-land-mdpi │ │ │ └── default.png │ │ ├── res-notlong-port-hdpi │ │ │ └── default.png │ │ ├── res-notlong-port-ldpi │ │ │ └── default.png │ │ └── res-notlong-port-mdpi │ │ └── default.png │ ├── app.js │ ├── iphone │ │ ├── Default-Landscape.png │ │ ├── Default-Portrait.png │ │ ├── Default.png │ │ ├── Default@2x.png │ │ └── appicon.png │ └── ui │ ├── common │ │ └── FirstView.js │ ├── handheld │ │ ├── ApplicationWindow.js │ │ └── android │ │ └── ApplicationWindow.js │ └── tablet │ └── ApplicationWindow.js ├── i18n │ ├── en │ │ └── strings.xml │ └── ja │ └── strings.xml ├── manifest └── tiapp.xml
Resources/ui以下のJavaScriptファイルを書き足していく雰囲気なのですが、既にandroidとiPhoneでソースが分割されています。先行き不安です。ソースはなるだけ共通にしておきたいです。何の為にTitanum使うと思ってるんですか。更にソースコード読んでいこうにも、Titanium Studioとかいうどう見てもEclipseなIDEが重過ぎて、起動してたらマシン全体が重くなって辛いです。
このままでは始める前に、やる気が尽きてしまうという事で、コマンドラインツールを探してみるとちゃんと用意されていました。
以下のようにしてプロジェクトの作成や実行ができます。
$ titanium create --platform=iphone,android --name=helloworld --id=com.taichino.helloworld $ titanium run --platform=iphone
しかもコマンドラインからプロジェクトを作ると、Titanium Studioのテンプレートよりもシンプルな構成になっています。下記がその構成です。uiディレクトリが無くてJavaScriptはapp.jsだけです。初心者にはコチラの方が優しいですね。
├── LICENSE ├── README ├── Resources │ ├── KS_nav_ui.png │ ├── KS_nav_views.png │ ├── android │ │ ├── appicon.png │ │ ├── default.png │ │ └── images │ │ ├── res-long-land-hdpi │ │ │ └── default.png │ │ ├── res-long-land-ldpi │ │ │ └── default.png │ │ ├── res-long-port-hdpi │ │ │ └── default.png │ │ ├── res-long-port-ldpi │ │ │ └── default.png │ │ ├── res-notlong-land-hdpi │ │ │ └── default.png │ │ ├── res-notlong-land-ldpi │ │ │ └── default.png │ │ ├── res-notlong-land-mdpi │ │ │ └── default.png │ │ ├── res-notlong-port-hdpi │ │ │ └── default.png │ │ ├── res-notlong-port-ldpi │ │ │ └── default.png │ │ └── res-notlong-port-mdpi │ │ └── default.png │ ├── app.js │ └── iphone │ ├── Default-Landscape.png │ ├── Default-Portrait.png │ ├── Default.png │ ├── Default@2x.png │ └── appicon.png ├── build.log ├── tiapp.xml └── tree
これで作られたapp.jsを少しだけ弄ってHello Worldを書いてみました。どこまで自由度があるのかまだ分かりませんが、このコードの簡素さは魅力的ですね。合計30行ですからね。いちいちapplicationDidFinishLaunchingとか書いてたら日が暮れます。
Titanium.UI.setBackgroundColor('#000');
// create window
var win = Titanium.UI.createWindow({
title:'Hello Titanium',
backgroundColor:'#fff',
tabBarHidden:true
});
var label = Titanium.UI.createLabel({
color:'#999',
text:"I'll create a nice application!",
font:{fontSize:20,fontFamily:'Helvetica Neue'},
textAlign:'center',
width:'auto'
});
win.add(label);
if (Titanium.Platform.name == 'android') {
win.open();
}
else {
// create tab, tabgroup
var tabGroup = Titanium.UI.createTabGroup();
var tab = Titanium.UI.createTab({
title:'Tab',
window:win
});
tabGroup.addTab(tab);
tabGroup.open();
}
というわけでHello Worldプログラムができました。次は画面遷移をやってみたいと思います。