第2回　TitaniumでTwitterクライアント

前回の記事で環境構築と土台となるプロジェクとの作成ができたので、今回から実用的なアプリの制作に入ります。数回にわけてTwitterクライアントを作成しますので、ネットワーク周りや画像の取り扱いまでTitaniumの簡便さを体験していただければと思います。

どんなものを作るか

まずは、実際に作るアプリのイメージを固めましょう。TwitterアプリはiPhoneアプリの中でも優れたアプリが多く激戦区となっているジャンルです。一方でTwitterを使い込んでいくと自分のよく使うWebサービスと連携させたくなり、自分の使い方にカスタマイズしたアプリも欲しくなるものです。ということで、Twitterのひと通りの機能を実装しつつ拡張しやすいシンプルなアプリを目指しましょう。

画面構成としてはこのようなアプリをイメージしておきましょう。

まずはTableView

Twitterアプリを作るなら、まずはタイムラインを表示しないことには始まりません。タイムラインといえばユーザーアイコン、ユーザー名、コメント、時刻が、時系列順に並んだものですね。今回はこれを単純にTableViewというリストの表示に格納します。iPhone開発者の方はUITableViewを使うのと同じだと考えてください。

では早速TableViewを作成します。前回作ったプロジェクトのResources/app.jsを以下のように変更してください。

Titanium.UI.setBackgroundColor('#000');
var tabGroup = Titanium.UI.createTabGroup({});
var win1 = Titanium.UI.createWindow({  
    title:'Tab 1',
    backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({
    window:win1 //前回、必要な引数まで削除していました。すいません!
}); 

//label1 に関するコードを削除
//ここから追加
var tableView = Ti.UI.createTableView({
    data:[]
});
win1.add(tableView);
//追加終わり

win1.hideTabBar();
tabGroup.addTab(tab1);  
tabGroup.open();

不要になったコードを削除していますが、実質的には4行のコードを追加しただけです。たったこれだけで、空のTableViewが描画されます。一度Titaniumの画面に戻って、エミュレータを起動し、実際に動くことを確認してみてください。短いコードなのであまり解説することがありませんが、TitaniumオブジェクトがTiと省略できることに注意してください。

TableViewにデータを表示しよう

空のテーブルを表示していても仕方がないので、続いてTableViewにデータを入れていきます。Twitterからタイムラインを取得する前に仮のデータで実装してみましょう。

先の追加したところを次のように変更します。

var tab1 = Titanium.UI.createTab({
    window:win1 //前回必要な引数まで削除されていました。すいません!
}); 
//label1 に関するコードを削除
//ここから変更

var timeline = [{text:'コメント1'},{text:'コメント2'},{text:'コメント3'}];//仮のデータです
var data = [];
for (var i=0;i<timeline.length;i++) {
    var tweet = timeline[i];
    var row = Ti.UI.createTableViewRow();
    var commentLabel = Ti.UI.createLabel();
    commentLabel.text = tweet.text;
    row.add(commentLabel);
    data.push(row);
}
var tableView = Ti.UI.createTableView({
    data:data
});

//変更ここまで
win1.add(tableView);

先程は、Ti.UI.createTableViewの引数に渡していたオブジェクトでdataパラメータに対して空配列を渡していました。しかし、実際にテーブルに何かを表示するには、TableViewRowオブジェクトが格納された配列が必要です。よって、上のサンプルコードでは仮のデータの配列を用意し、その要素一つ一つに対してTableViewRowオブジェクトを作成しています（for文の中を参照してください⁠）⁠。

実際のデータを使ってみよう

仮のデータでは面白くないので、いよいよTwitterから実際のタイムラインを取得して表示します。HTTPを利用したデータの取得にはTitanium.Network.Clientオブジェクトを利用します。

var tab1 = Titanium.UI.createTab({
    window:win1 //前回必要な引数まで削除されていました。すいません!
}); 
//label1 に関するコードを削除
//ここから変更

var data = [];
var tableView = Ti.UI.createTableView({
    data:data
});

function updateTimeline (timeline) {
    var currentData = [];
    for (var i=0;i<timeline.length;i++) {
        var tweet = timeline[i];
        var row = Ti.UI.createTableViewRow();
        var commentLabel = Ti.UI.createLabel();
        commentLabel.text = tweet.text;
        row.add(commentLabel);
        currentData.push(row);
    }
    tableView.setData(currentData);
}

var xhr = Ti.Network.createHTTPClient();
var user = 'hatenatech';
var url = "http://api.twitter.com/1/statuses/user_timeline.json?screen_name=" + user;
xhr.open('GET', url);
xhr.onload = function() {
    var timeline = JSON.parse(this.responseText);
    updateTimeline(timeline);
};
xhr.send();
//変更ここまで
win1.add(tableView);

すこし、コードの順序が変わっているので注意してください。上から解説すると、まず空配列dataを利用して空のTableViewを作成しています。Ti.Network.HTTPClientは非同期に実行されるので、TableViewを作る段階ではTwitterの情報を取得できないためです。

続いで、TableViewのデータを更新するuptdataTimeline関数を定義しています。ひとつ前のサンプルで作成した、TableViewRowを作成するfor文のコードとほとんど同じですが、最後にtableView.setData()を用いてTableViewのデータを更新しているところが重要です。

その後の、Ti.Network.createHTTPClient()以降がネットワーク接続の主な部分です。

作られたTi.Netowerk.HTTPClientオブジェクドに対して、openメソッドで、HTTPのメソッドと取得先urlを指定しています。そして、取得が完了すると、xhr.onloadにセットしたコールバック関数が呼ばれます。

ここではthis.responseTextで取得したデータが得られるので、これをJSONとしてパースしています。TitaniumにはJSONのパーザーが初めから実装されているので、evalするのではなく必ずJSONパーザーを使いましょう。

このコードに変更し実行してみると、画面のようにuserに指定したユーザーのタイムラインが表示されるかと思います。是非自分のユーザー名で試してみてください。

まとめ

Titanium.UI.TableViewによるテーブルの表示方法と、Titanium.Network.HTTPClientを利用したネットワーク越しのデータの取得についてご紹介しました。まだ自分のTweetが見えるだけで、まったく実用ではありません。しかし、かなり簡単にネットワークを利用したアプリを作成できることが体感できたのではないでしょうか。

次回は、だいぶ長くなってしまったサンプルコードをいくつかのファイルに分割したり、もう少し見た目を綺麗にタイムラインを表示する方法を解説していく予定です。次回もよろしくお願いします。

今回紹介したTitaniumの各オブジェクトの詳細はAppceleratorのAPIリファレンスから参照できますので、ぜひ一度御覧ください。