coding my life

前回までで普通のWebのように画面表示、制御ができることがわかりました。ここまで分かったんだから、なにかアプリをつくろうということで「京都の天気」を作ってみました。

もともと天気予報のWidgetは付属してるんで全然いらないんだけど、まあ学習の一環です。

ライブドアが提供してる天気データXMLをAjaxで定期的に読み込んで、画面更新する方式です。ajax周りのデバッグでハマりがあったんですが、それさえ解決したらいつものやり方で済むのでサクッできました。

ソースツリーはまとめてココに入れています。KyotoWeather.zip

以下ハイライトで解説します。

prototype.js で Ajax + 定期更新

メインHTML上でprototype.js の読み込み(リンク)をします。今回使ったのは prototype.js 1.5.0_rc0 です。

weather.html <script src="javascripts/prototype.js" type="text/javascript" charset="utf-8"> </script> <script src="javascripts/weather.js" type="text/javascript" charset="utf-8"> </script>

prototype.js の後に今回のロジックのための JavaScript コードを格納した weather.js をリンクします。 そこで window.onload 時にデータ取得+定期実行の登録を行います。

ajaxの処理には prototype.js の Ajax.Updater クラスを、定期実行の処理には同じく prototype.js の PeriodicalExecuter を利用します。

weather.js // 結果表示 function showResponse(res) { var xml = res.responseXML; // 結果はオレオレXML。今回はtelopノードのデータを使います。 var telop = xml.getElementsByTagName('telop')[0]; $('content').innerHTML = telop.firstChild.nodeValue; } // 定期更新処理 function update() { var now = new Date(); $('date').innerHTML = now.toDateString() + '<br />' + now.toTimeString(); // ライブドアの天気データXML var url = 'http://weather.livedoor.com/forecast/webservice/rest/v1'; var params = 'city=79&day=today'; // 京都の今日のデータ var ajax = new Ajax.Request(url, { method: 'get', parameters: params, onComplete: showResponse }); } // 初期化 function onLoad(event) { update(); var periodicalAleter = new PeriodicalExecuter(update, 60); // 60秒ごとに update を呼ぶ } window.addEventListener('load', onLoad, false);

開発上のハマり: Consoleが欲しい！

実は今回、かなーりはまりました。しかも原因は JavaScript の文法エラー。

普段の Firefox の Firebug で作ってたので、Dashboard Widget のJavaScript Console やステップ実行がない環境があまりに不便だったのです。

たとえば以下のようなコードを書いてたんですが、なんだかこのあたりでいつも動かない。どうもなんかの例外が起きてそうなんだけど、さっぱり分からないわけです。

var ajax = new Ajax.Request(url, { method: 'get', parameters: params, onComplete: showResponse, });

この問題原因は、最後の showResponse のあとにある","でした。これが余計で文法エラーとなっていたのです。いいじゃねえかよ、ああ、Ruby なら許してくれるのに...というかいろんなスクリプト触りすぎてもうわけがわからん。

こりゃやっとれん！というわけで、いつものブラウザで開発することにしたんですが、今度は Ajax(XMLHttpRequest) のクロスドメイン制限のために、ライブドアにアクセスできません。仕方なく XML をローカルに落としてきて、開発中はURLをローカルのものにして開発していました。

Dashboard の開発環境はまだまだ不便です。Web側の開発が Firefox の WebDeveloper Plugins や Firebug などで格段に便利であるため余計にそう思うのでしょう。

ブラウザでこのWidgetが動くようになれば完璧なんだけど。そりゃ HTTP で取ってきた HTML が勝手に XMLHttpRequest を変なところにできちゃうとヤバいのはわかるんだけど、ローカルファイルならOKとかできないもんかね。アクセス時にセキュリティダイアログ出すとかでもいいからさ。

あーそれかせめて Dashboard で JavaScript コンソールは出せないもんかいな。にんともかんとも。