[Titanium勉強日記 1] Hello Titanium World

次は奥さんの欲しいアプリを作ってみようと言う事になりました。奥さん曰く、普通の人はパソコンなんか触りたくない、できるなら全部携帯でやりたい、携帯アプリを作れとの事。奥さんは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();
}
HelloWorld on iPhone Simulator
Hello World on android simulator

というわけでHello Worldプログラムができました。次は画面遷移をやってみたいと思います。

Leave a Reply

Your email address will not be published. Required fields are marked *