Titanium MobileでiPhoneアプリ開発環境を作る

Titanium は、"チタニウム"ではなく"タイタニウム"と発音するらしい。Titan(巨人族)と関係あるのだろうか。JavascriptでiPhone, Androidアプリケーションの開発が出来る開発環境(SDK)だ。
この開発環境がすばらしいのは、iPhoneのAPIを操作できるアプリケーションを作成できること。カメラやGPS機能などを操作できるらしい。
早速、インストールしてみる。
ここを参考にしました。
http://developer.appcelerator.com/
http://developer.appcelerator.com/blog/2011/06/titanium-studio%E3%81%A8titanium-mobile-1-7%E3%82%92%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F.html?lang=ja

手順は

1. OSXに開発環境XCodeとiOS SDKをインストール
2. Titanium mobileをインストール
3. Hello Worldしてみる
4. Apple IDを取得(実機にインストールするため)

X Codeのインストール

1年前に入れたのだがバージョンが古いので、最新の4.0.2をMac AppStoreから、600円で購入。600円は高いのか、安いのか、よう判らん。昔は只なので。

インストールサイズは、なんと4G。一晩掛かりました。

Titaniumをインストール

Titaniumのアカウントを取得する。
参考にした記事では、Titanium SDKがダウンロードされるはずでしたが、Studioがダウンロードされました。有償の罠にはまったかとドキドキ。どうやら、6月14日から全てがStudio (Appcelerator Titanium Studio version 1.7)に統合され配布されることになった様子。オリジナルは、eclipusのらしい。日頃の開発はVimでやっているので、ちょっと不安。どうもIDEは、覚えなければならないことが余計にでてくるみたいで面倒なんだが。

Hello World

Appcelerator社の開発者サイトの記事通りにやって、特に問題なく終了。iPhoneシミュレータが起動した時には、ちょっとした感動ものです。(右図）

プロジェクトを作成した時に自動的に生成される初期ソースを以下解説。

view plainprint?

1. // Master UIView (Titanium.UI) に背景色をセットする  
2. Titanium.UI.setBackgroundColor('#000');  
3. // タブグループを用意。  
4. var tabGroup = Titanium.UI.createTabGroup();  
5. // ウインドウwin1を用意。  
6. var win1 = Titanium.UI.createWindow({    
7.     title:'Tab 1',  
8.     backgroundColor:'#fff'  
9. });  
10. // タブtab1を追加し、前に追加したウインドウwin1を結びつける  
11. var tab1 = Titanium.UI.createTab({    
12.     icon:'KS_nav_views.png',  
13.     title:'Tab 1',  
14.     window:win1  
15. });  
16. // ラベル label1を用意し、ウインドウwin1に追加。  
17. var label1 = Titanium.UI.createLabel({  
18.  color:'#999',  
19.  text:'I am Window 1',  
20.  font:{fontSize:20,fontFamily:'Helvetica Neue'},  
21.  textAlign:'center',  
22.  width:'auto'  
23. });  
24. win1.add(label1);  
25. // ウインドウ win2、タブ tab2 (win2をセット)、label2を用意。  
26. var win2 = Titanium.UI.createWindow({    
27.     title:'Tab 2',  
28.     backgroundColor:'#fff'  
29. });  
30. var tab2 = Titanium.UI.createTab({    
31.     icon:'KS_nav_ui.png',  
32.     title:'Tab 2',  
33.     window:win2  
34. });  
35. var label2 = Titanium.UI.createLabel({  
36.  color:'#999',  
37.  text:'I am Window 2',  
38.  font:{fontSize:20,fontFamily:'Helvetica Neue'},  
39.  textAlign:'center',  
40.  width:'auto'  
41. });  
42. win2.add(label2);  
43. // タブグループにtab1, tab2を追加  
44. tabGroup.addTab(tab1);    
45. tabGroup.addTab(tab2);    
46. // タブグループを（初期で）起動する  
47. tabGroup.open();  

// Master UIView (Titanium.UI) に背景色をセットする
Titanium.UI.setBackgroundColor('#000');
// タブグループを用意。
var tabGroup = Titanium.UI.createTabGroup();
// ウインドウwin1を用意。
var win1 = Titanium.UI.createWindow({  
    title:'Tab 1',
    backgroundColor:'#fff'
});
// タブtab1を追加し、前に追加したウインドウwin1を結びつける
var tab1 = Titanium.UI.createTab({  
    icon:'KS_nav_views.png',
    title:'Tab 1',
    window:win1
});
// ラベル label1を用意し、ウインドウwin1に追加。
var label1 = Titanium.UI.createLabel({
 color:'#999',
 text:'I am Window 1',
 font:{fontSize:20,fontFamily:'Helvetica Neue'},
 textAlign:'center',
 width:'auto'
});
win1.add(label1);
// ウインドウ win2、タブ tab2 (win2をセット)、label2を用意。
var win2 = Titanium.UI.createWindow({  
    title:'Tab 2',
    backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({  
    icon:'KS_nav_ui.png',
    title:'Tab 2',
    window:win2
});
var label2 = Titanium.UI.createLabel({
 color:'#999',
 text:'I am Window 2',
 font:{fontSize:20,fontFamily:'Helvetica Neue'},
 textAlign:'center',
 width:'auto'
});
win2.add(label2);
// タブグループにtab1, tab2を追加
tabGroup.addTab(tab1);  
tabGroup.addTab(tab2);  
// タブグループを（初期で）起動する
tabGroup.open();

Apple Developer Programへの参加

１万円ぐらいかかるので、もう少し技術が熟練してからですね :-p