Pebbleでサッカースコアライブ更新表示してみた

Pebble

Pebble Smartwatch | Smartwatch for iPhone & AndroidとSimply.jsででなんかできないかなぁと考えてみた。
わたし、サッカーをよく見るのですが、今開催されている試合の結果がリアルタイムで分かったら何か楽しそうなので、作ってみることにしました。
ワールドカップを来月開催されることだし。

まず、サッカースコアのライブ更新しているサイトを探すと以下が良さそう。
LiveScore Soccer : Live Soccer Scores by LiveScore.com
欧州リーグだけでなくJ1,J2,J3(!)もカバーしている。
もちろんワールドカップも。

このサイトから情報を取得するためのスクレイピングは、Javascriptに不慣れなのと、一度使って見たかった簡単にスクレイピングしてWebAPI化してくれるという
kimono : Turn websites into structured APIs from your browser in seconds
を使ってみたかったので、これでいく。

15分くらいで直感的にWebAPIができました。
以下がそのWebAPIで取得できるJ1の試合結果のJSONファイル。
https://www.kimonolabs.com/api/52h5eq42?apikey=664315ac6dd2128d90351faeb721fb63

また、Simply.jsの使い方は
ひとりぶろぐ » 2.0で面白くなったスマートウォッチPebbleを、JavaScriptゴリゴリでネット監視装置として使う
を参考にさせてもらいました。

あと、開発はCloudPebbleを利用してブラウザ上で実施。
ソースはこんな感じ。
ごちゃごちゃ書いてあるけど、やっていることは

  • Config用URL(スマホ上で)で情報を取得するリーグを選択
  • 60秒毎にスコア再取得。スコアはスマホ側に記録する。
  • スコアが前回と変わっていたらvibeする。

＃試し試しやっててかなり汚いです
＃あと、タイムゾーンがあってないです

var api_uri = 'http://www.kimonolabs.com/api/52h5eq42?apikey=664315ac6dd2128d90351faeb721fb63';
var match_text = '';

//simply.title('J1 League');

//simply.style('small');
simply.scrollable(true);

//simply.on('singleClick', function(e) {
function refresh(opt) {
	if( opt.length > 0 ) {
		var league = opt.match(/kimpath2=(.*)&kimpath3=(.*)/);
		console.log('league[0]=' + league[0]);
		console.log('league[1]=' + league[1]);
		console.log('league[2]=' + league[2]);
		if( league.length == 3 ) {
			opt = '&kimpath2=' + league[1] + '&kimpath3=' + league[2];
		} else {
			opt = '';
		}
	} else {
		opt = '';
	}
	
	api_uri_opt = api_uri + opt;
	ajax({ url: api_uri_opt, type: 'json' }, function(data) {
        var matches = data.results.collection1;
        var match_days = data.results.collection2;
		
		if( league.length == 3 ) {
			match_text += league[1] + '/' + league[2] + '\n';
		}
		
		for(var i=0; i < match_days.length; i++) {
			match_text += match_days[i].match_day + ',';
		}
		match_text += '\n';
		
		for(var i=0; i < matches.length; i++ ) {
			if( matches[i].score == "? - ?" ) { // not live
				score = ' ' + matches[i].score + ' '; 
			} else { // live
				score = ' ' + matches[i].score.text + ' '; 
			} 
			match_text +=
				matches[i].match_time + ': ' +
				matches[i].home_team_name + 
				score +
				matches[i].away_team_name + 
				'\n\n';
		}
		simply.text({
			body    : match_text
		});
		
		match_status = window.localStorage.getItem('match_status');
		if( match_status != match_text ) {
			simply.vibe();
		}
		window.localStorage.setItem('match_status', match_text);
		
	});
}

simply.begin = function() {
	try{
		var options = window.localStorage.getItem('options').split('/');
		if( options.length > 0 ) {
			for(var i=0; i < options.length - 1; i++) {
				console.log('opt is = ' + options[i]);
				refresh(options[i]);
			}
			setInterval(refresh, 60000);				
		}
	}catch(e){
		concole.log(e);
	}
};

// https://github.com/pebble-hacks/js-configure-demo/blob/master/src/js/pebble-js-app.js
Pebble.addEventListener("showConfiguration",
	function(e) {
    	console.log("showConfiguration!");
		Pebble.openURL('https://dl.dropboxusercontent.com/u/9794530/pebble_soccer_live/config.html');
	}
);

Pebble.addEventListener("webviewclosed", function(e) {
	console.log("configuration closed");
	// webview closed
	var options = JSON.parse(decodeURIComponent(e.response));
	var opt_str = '';
	console.log("Options = " + JSON.stringify(options));
	for(var key in options) {
		if( options[key] == true ) {
			var path_list = key.split('/');
			console.log('&kimpath2=' + path_list[1] + '&kimpath3=' + path_list[2] + '\n');
			opt_str += '&kimpath2=' + path_list[1] + '&kimpath3=' + path_list[2] + '/';
		}
	}
	window.localStorage.setItem('options', opt_str);
});

で、Pebbleで表示はできたんだけど1つ問題が。
１分毎にスコアを更新したいのだけど、下記記事によると
Pebble Javascript Tips And Tricks

setInterval(refresh, 60000);

はあまりよくないらしい。

でも、上の記事にあることをやろうとすると、Simply.jsでは力不足で、
WatchAppをCで、SmartPhone側のアプリをJavascriptで書く必要があるみたい。

う～ん。