酢ろぐ！

カレーが嫌いなスマートフォンアプリプログラマのブログ。

Titanium MobileでJSONデータをダウンロードしてTableViewに表示する

開発 開発-Titanium Mobile

今回ご紹介するTipsは、Titanim Mobileを使って、サーバーからJSONデータをダウンロードして、JSONパースを行い、その内容をテーブルへ表示させてみましょう。

今回使用するJOSNデータについて

JSONパースするのサンプルプログラム用に以下のページにて、プロ野球の順位表をJSON形式で提供しています。

  • 野球情報データAPI (現在は非公開となっております)

JSONデータの作りとしては以下の通りになっています。JSONデータの構造は本質的なものでは無いので、説明を簡単にする為にcentralLeague以下の配列の仕様する要素だけピックアップしました。

{
　"centralLeague":[
        {"Rank":"1位",
          "TeamName":"中日",
          "GameCount":"144",
          〜勝ち数や負け数など〜
　　{"Rank":"2位",
          〜セ・リーグの2位以下の成績〜
		],
　　〜パ・リーグの成績〜
　　〜交流戦の成績〜
}

今回は、順位とチーム名と試合数の3つを使用します。

ソースコード

通信にはTitanium.Network.createHTTPClientを使用します。オブジェクトを生成して、onloadイベント時に実行される匿名メソッドを設定しましょう。

onloadイベントでチーム名称、順位、試合数のLabelオブジェクトを生成して、「Titanium MobileでListViewを使ってJSONデータを表示する - 酢ろぐ！」の通り、TableViewにデータソースを設定します。

// この辺りはテンプレートプロジェクトのソースコードのままです
var win2 = Titanium.UI.createWindow({  
    title:'パ・リーグ',
    backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({  
    icon:'KS_nav_ui.png',
    title:'Baseball',
    window:win2
});
 

(function() {
  // オブジェクトを生成します。
  var xhr = Titanium.Network.createHTTPClient();
  xhr.open('GET', 'http://api.ch3cooh.jp/baseball/standings.json');
  // データダウンロード時のイベント処理
  xhr.onload = function() {
    // JSONパース
    var json = JSON.parse(this.responseText);
    // パ・リーグのデータ
	var data =[];
    for (var i=0; i<json.centralLeague.length;i++) {
      var info = json.centralLeague[i];
 
      // ここからCellを生成する
      // チーム名称のラベルを生成
      var labelName = Titanium.UI.createLabel({
        text:info.TeamName,
        font:{fontSize:15,fontWeight:'bold'}, textAlign:'left',
        color:'#000',top:0, left:30, width:40, height:60
        });
      // 順位のラベルを生成
      var labelRank = Titanium.UI.createLabel({
        text:info.Rank,
        font:{fontSize:12,fontWeight:'bold'}, textAlign:'left',
        color:'#000',top:0, left:3, width:'auto'
      });
      // 試合数のラベルを生成
      var labelGameCount = Titanium.UI.createLabel({
        text:'試合数：' + info.GameCount,
        font:{fontSize:10}, textAlign:'left',
        color:'#000',top:0, left:130, width:'auto',  height:20
      });
      // Cellのクラス名と高さを定義
      var row = Ti.UI.createTableViewRow({
        className:"NomalCell",
        height:60
      });
 
      // RowにLabelオブジェクトの追加
      row.add(labelGameCount);
      row.add(labelName);
      row.add(labelRank);
      data.push(row);
    }
 
    // TableViewの作成
    var table =Ti.UI.createTableView({
      data:data
    });
    win2.add(table);
  };
  // HTTPリクエストの送信
  xhr.send();
})();

実行結果

上記のソースコードを実行しました。非同期で処理される為、アプリ起動直後にはTableViewには何も表示されず、少し待った後に表示されると思います。

ハマりどころは、createTableViewRowメソッドで生成したTableViewRow(iPhoneで言うところのUITableViewCell)に対して、追加しているLabelはheightプロパティに値を設定しておかないと'auto'が設定されてしまい、中央に配置されてしまうので気をつけましょう。