競馬ニュースアプリみたいなのを作る
競馬をやるときに、シンプルにニュースだけ読みたいアプリがあったらいいなと思っていました。そこでTitaniumでRSSフィードを読み込んで表示するだけのものを作ってみることにしました。
ニュース元はJRAが配信しているニュースから引っ張ってきました。
すべてのニュース JRA
まだまだ完成度は低いですが、現時点でやってきたことを書いていこうと思います。
フィードを読み込む
クエリを作成
var feedURL = "http://www.jra.go.jp/rss/jra-info.rdf"; //読み込み件数 var limit = 5; //読み込むフィードの位置 var offset = 1; var query = "select * from rss where url='"+feedURL+"'limit "+limit+" offset "+offset;
Yahoo YQLを使う
//フィードを取得 Ti.Yahoo.yql(query,function(d){ var row, i, title, date, rssItems = d.data.item;//フィードデータ /* *rssItemsから必要なデータを抜き取り、表示させる処理 */ });
htmlをパースする時はYQLを使うと便利らしいです。なぜかはまだよくわかっていないです笑。SQLのように命令することで簡単に欲しい情報をとってこれる・・・ということかな?
・参考
第20回 ネットワークまわりの落穂ひろい:Titanium Mobileで作る! iPhone/Androidアプリ|gihyo.jp … 技術評論社
名前 | 内容 |
about | 記事リンク |
date | 日時 |
description | 記事詳細 |
link | 記事リンク |
title | 記事タイトル |
フィードから得られるデータは上のようになります。これを適宜使いたい形に変形して表示させます。
Tableに使う行データを作成
for(i = 0;i < rssItems.length;i++){ row = Ti.UI.createTableViewRow(); row.selectedBackgroundColor = "#fff"; row.height = 130; row.className = "daterow"; /* *ラベルを記述 */ rowData.push(row); }
createTableViewRow()を用いて、TableViewに使用する行データを定義します。この行データが一つのニュースと捉えます。
・参考
Google Code Archive - Long-term storage for Google Code Project Hosting.
Labelを作成
行データには以下にある3つの情報を盛り込みます。
- タイトル
- 詳細
- ニュース配信日時
これらの情報はLabelで作成します。
タイトルを作成
//タイトル var title = Ti.UI.createLabel({ color:"#222F3D", font:{ fontSize:20, fontWeight:"bold" }, width:Ti.UI.SIZE, height:30, top:8, left:30, text:rssItems[i].title }); title.rowNum = i; //行データに追加 row.add(title);
Labelの位置はTableViewの行ごとに決まる相対的な位置となります。Labelが定義できたら、行データに追加します。
日時を作成
date = "2014-02-25T10:00:05+09:00"
日時は上のようなデータになっているので、表示したいデータになるように整形します。
//必要な日時に整形 var time = rssItems[i].date.split("+")[0].split("T"); //西暦を消去 time[0] = time[0].slice(5); //秒を消去 time[1] = time[1].slice(0,-3);
sliceやsplitをうまく使えば、整形できます。
var date = Ti.UI.createLabel({ color:"#A69D95", font:{fontSize:12}, width:Ti.UI.SIZE, height:20, bottom:5, left:30, text:time[0] + " " + time[1] });
Labelのtextに整形後のテキストを記述します。
02-25 10:00
結果、このような日時を表示することができます。
TableViewを作成
行データを集計
rowData.push(row);
各ラベルが定義できたら、行データ一つ一つをまとめて扱う配列に行データを追加します。
rowDataをTableViewに設定
tableView = Ti.UI.createTableView({ backgroundColor:"transparent", data:rowData }); win1.add(tableView);
TableViewのdataにrowDataを設定します。これまで定義してきた行データが一つのTableViewのデータとして扱われるようになります。
なお背景色についてですが、windowとTableViewの色を同じにしたかったので、TableViewを透明にしました。
タップイベントを作成
//タップ時のイベント tableView.addEventListener("click",function(e){ var entryWindow, entryView; //win entryWindow = Ti.UI.createWindow({ title:rssItems[e.index].title }); //view entryView = Ti.UI.createWebView({ url:rssItems[e.index].link }); entryWindow.add(entryView); tab1.open(entryWindow); });
タップすると記事のリンクページに飛ぶようにしました。
タイトルの文字色を変更
//タイトルのラベル var titleLabel = Ti.UI.createLabel({ text:"競馬ニュース", color:"#FFF6EE", font:{ fontSize:20, fontWeight:"bold" } }); var win1 = Ti.UI.createWindow({ backgroundColor:"#F2E9E1", titleControl:titleLabel });
window上部に表示されるタイトルの文字色を変えたかったのですが、createWindowでcolorを定義しても反映されませんでした。そこでタイトルをラベルで定義することにしました。titleControlを使えばタイトルの部分にラベルを表示できます。
・参考
Titanium MobileでWindowのタイトル部分の表示を変えてみる。 - あんにんにっき。
Appcelerator Documentation
タイトルバーの背景色を変える
var win1 = Ti.UI.createWindow({ backgroundColor:"#F2E9E1", titleControl:titleLabel }); //バーの色 win1.barColor = "#8C837B";
ウィンドウを定義した後に、barColorに背景色を設定しました。createWindowしたときに「barColor:"#8C837B",」と書いてみましたが動きませんでした。