HTMLとJavaScriptでiPhone/Androidアプリが作れる『Titanium Mobile』を試してみた！

どうも、おはようございます。こんにちわ。こんばんわ。
ご機嫌いかがですか。阿部です。

突然ですが、iPhoneアプリはObjective-C(C/C++)でしか
作れないと思っておりませんが！？！？
いいえ、そんなことはございません。
Objective-C(C/C++)、以外にもC#やAS3.0、JS×HTML×CSSなどでも作れるのです。

今回はですね、その中でも皆さんおなじみのJS×HTML×CSSで開発が出来る
『Titanium Mobile』を試してみました！

Titaniumを使うメリット/デメリット

メリット
- なんて言っても、みんなが知ってるJS×HTML×CSSが開発が出来るので開発速度の向上する
- JavaScriptをサポートしているため、jQueryやYahoo! UI Libraryなどの豊富なJavaScript フレームワーク／ライブラリ資源を活用出来る
- Objectice-Cでの開発では不可能だったメモリ管理が自動化出来る(細かなメモリ管理が出来ないのでデメリットでもあります)

デメリット
- メモリ管理ができない
- Objective-Cによる開発に比べて実現できる範囲が制限されている(と思う。グラフィックの制御とか？)

Titaniumがサポートしている機能

- テーブル、ボタンなどデフォルトUI
- ファイルシステムへのアクセス
- GPSによる位置情報の取得(GoogleMapなど)
- 画像や動画などメディアプレイヤーの利用
- HTTP通信などのAPI
- SQLiteをベースにしたローカルストレージの利用
- 加速度センサのAPI

さーて、では実際の実装方法について

と書いてみようと思いましたが、@ITさんやgihyo.jp、とてもご丁寧に書かれていますので、
そちらをご覧頂いた方がよろしいかと思います＾＾；

- 【@IT】 itanium Mobileで作る！ iPhone／Androidアプリ
- 【gihyo.jp】 HTML＋JavaScriptでiPhone/Androidアプリを作れるTitanium Mobileとは

サンプルソース

最後に標準のサンプルソースをいじったものを載せておきます。
簡単なソースなんで少し読めば分かるかと思います。

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');

// create tab group
var tabGroup = Titanium.UI.createTabGroup();


//
// create controls tab and root window
// (1つめのタブとウィンドウの生成)
//
var win = Titanium.UI.createWindow({
    title:'Dear developper',
    backgroundColor:'#111',
    textAlign:'left'
});
var tab = Titanium.UI.createTab({
    icon:'KS_nav_ui.png',
    title:'Tab 1',
    window:win
});

var label1 = Titanium.UI.createLabel({
    color:'#aaa',
    top:0,
    height:220,
    text:"Let's enjoy SmartPhone Application Develop!!",
    font:{fontSize:45,fontColor:'#0000ff',fontFamily:'Helvetica Neue'},
    textAlign:'left'
});

var label2 = Titanium.UI.createLabel({
    bottom:1,
    height:100,
    color:'#aaa',
    text:"From @RyoAbe",
    font:{fontSize:20,fontFamily:'Helvetica Neue'},
    textAlign:'right'
});

//  add label
win.add(label1);
win.add(label2);



//
// create controls tab and root window
// (2つめのタブとウィンドウの生成)
//
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);


//  add tabs
tabGroup.addTab(tab);
tabGroup.addTab(tab2);


// open tab group
tabGroup.open();