Titanium Mobileで作る! iPhone/Androidアプリ

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

この記事を読むのに必要な時間:およそ 2.5 分

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

仮のデータでは面白くないので,いよいよ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パーザーを使いましょう。

図3 完成画面

図3 完成画面

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

まとめ

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

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

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

著者プロフィール

倉井龍太郎(くらいりゅうたろう)

株式会社はてな アプリケーションエンジニア。

スマートフォンアプリからSQLチューニングまで幅広く格闘中。好きな言語はRuby。

URLhttp://d.hatena.ne.jp/r_kurain/
Twitter@kurain