not good but great

プログラミング、アート、映画・本の感想について書きます。

TitaniumでJRAのRSSフィードを読み込んで、ショボい競馬ニュースアプリを作ってみる

競馬ニュースアプリみたいなのを作る

f:id:naoyashiga:20140225212315j:plain
競馬をやるときに、シンプルにニュースだけ読みたいアプリがあったらいいなと思っていました。そこで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に使用する行データを定義します。この行データが一つのニュースと捉えます。

・参考
TableView - titanium-mobile-doc-ja - UIカタログ - TableView (基本編) - Appcelerator Titanium Mobileに関するドキュメントを日本語でまとめていくプロジェクト - Google 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を透明にしました。

タップイベントを作成

f:id:naoyashiga:20140225221716j:plain

//タップ時のイベント
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);
});

タップすると記事のリンクページに飛ぶようにしました。

・参考
Titanium Mobile を使って、シンプルなRSSリーダーを作る | バシャログ。

タイトルの文字色を変更

//タイトルのラベル
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のタイトル部分の表示を変えてみる。 - 闇忍日記
Titanium 3.X - Appcelerator Docs

タイトルバーの背景色を変える

var win1 = Ti.UI.createWindow({
	backgroundColor:"#F2E9E1",
	titleControl:titleLabel
});
//バーの色
win1.barColor = "#8C837B";

ウィンドウを定義した後に、barColorに背景色を設定しました。createWindowしたときに「barColor:"#8C837B",」と書いてみましたが動きませんでした。

今後の展望みたいなもの

フィードをJRAからしか取得していないので、複数から取得できれば便利だなあと思いました。それで今回は全く使えてなかったタブメニューを使って配信元を変更できたらいいかなと思っています。