Titaniumの基礎

2011/06/28

先週から、Titanium の勉強会に通っています。 仕事だとTittanium まで手を伸ばしている時間がないのと、JavaScriptの勉強もかねて。

果たして本当に効率よく作れるか? 限界はどこまでか?

スクリプト言語なんでファイル構成が悩ましいところですが、まずは簡単なサンプルから。

Tabウィンドウを作る


//TabGroup作成
var tabGroup = Titanium.UI.createTabGroup();

//Window作成
var topWindow = Titanium.UI.createWindow({  
    title:'Top',
    backgroundColor:'#000000'
});

//タブ画面作成
var topTab = Titanium.UI.createTab({  
    icon:'KS_nav_views.png',
    title:'Top',
    window:topWindow
});

//ラベル作成
var label1 = Titanium.UI.createLabel({
    color:'#999',
    text:'I am Window 1',
    font:{fontSize:20,fontFamily:'Helvetica Neue'},
    textAlign:'center',
    width:'auto'
});

//Window に Label を追加
topWindow.add(label1);

//TabGroup に Tabページを追加
tabGroup.addTab(topTab);  

//TabGroup を開く
tabGroup.open();

非常にわかりやすくて、簡単ですね。

ただ、全部コーディンしなきゃいけない

って事を考えると、画面設計を作るのはちょっと???という印象です。 InterfaceBuilder がいかに素晴らしいかってのがよくわかります。

しかし、Objective-C や Java では書くのが面倒くさい事を Titanium で簡単に実装できてしまったりします。

外部APIとの連動

例えば UITableView ないし ListView に Twitter のタイムラインを表示させる処理。


var twitterTableView = Titanium.UI.createTableView();
twitterWindow.add(twitterTableView);

var url = "http://api.twitter.com/1/statuses/user_timeline.json?screen_name=yoo_yoo_yoo";
if (Titanium.Network.onLine == false) {
    alert('オフラインです');
} else {
    var xhr = Titanium.Network.createHTTPClient();
    xhr.open("GET", url, false);
    xhr.onload = function () {
        var json = JSON.parse(this.responseText);
        var tableViewData = [];
        for (var i = 0; i < json.length; i++) {
            tableViewData.push({title :json[i].text});
        }
        twitterTableView.data = tableViewData;
    };
    xhr.onerror = function (error) {
        alert(error);
    }
    xhr.send();
}

iPhone は UITableView Delegateメソッド 、Android は ArrayAdapter を記述しますが、 結構長いコーディングになりがちです。 (それだけ細かい事ができるという事ですが) Titanium の場合、上記のような処理だけで動いてくれます。

素晴らしいのは、createHTTPClient() 移行の書き方です。 ちなみに、 open() の第3引数は同期/非同期の設定で、iPhone のみ有効です。

という訳で、何の処理が簡単に書けるか?を知るのが大切かと思います。 ちなみに、Twitter に関しては、iOS5ではもっと簡単にかけてしまいますが(笑)