JavaScriptの習作。Yahooの住所ディレクトリAPIと気象情報APIを利用して一時間後の予想降水量を調べるWEBアプリのサンプルを作ってみました。

カテゴリー:
jQuery

Yahoo デベロッパーネットワーク というYahooが開発/提供しているツール群があります。その中のに全国の市町村名を取得することができるAPIと、予想降水量を取得できるAPIがあるのですが、それを利用して指定した地域の一時間後の予想降水量を取得できるWEBアプリのサンプルを練習がてら作ってみました。

アプリにアクセスしたりクリックイベントが発火するとJavaScriptのgetJSONからproxy_rest.phpにデータが渡され、そのデータに基づいて各種APIからデータを取り出し、htmlに表示する、という流れで動作します。

上記のデモページにアクセスすると、select要素の中に都道府県が入っています。loadイベント実行時に、getJSONを使ってAPIから都道府県のデータを取得して表示します。

select要素から任意の選択肢を選ぶと自動的にchangeイベントが発火し、市町村名を五十音順でフィルタリングしたボタンが表示されます。このボタンはjsファイルに記述してある連想配列と、前段階で取得しているAPIから得たデータを組み合わせて生成しています。

同時に戻るボタンも出ます。文字通りひとつ前の段階に戻る機能を持っていますが、やっていることはhtml要素にclassをつけたり外したりしてCSS3のtransitionを利用してウィンドウの外に追い出したり引き入れたりして画面表示を変更しているだけです。

五十音ボタンをクリックすると、属する市町村名ボタンが出ます。こちらもAPIからデータを取得して生成しています。次の段階で利用する緯度経度の値をdata属性として持たせています。

最後に市町村名ボタンをクリックすると、一時間後の予想降水量が表示されます。ボタンの中に入れてある緯度経度の値をAPIに渡してデータを取得することにより実現してます。

と、文章で書いてもなかなか伝わりませよね。コードを掲載してみます。

JavaScript

JavaScript初学者が作った学習用のコードのため、間違いや非効率なコードが含まれている可能性があります。ご了承ください。ご指摘、ご助言いただけますと非常にありがたいです!コメント欄をご利用ください。

PHP

Html

まとめ

一部例外処理を省略してはいますが、概ね期待した動作をしています。コードは割りとシンプルに書けたかな、とは思いますが、いかんせん経験不足なためコードの良し悪しを自己評価するのが難しいです。良くないところとか改善できるところがたくさんあるのだろうとは思うのですが、もうこれは経験を積み重ねた後に解ることなので精進あるのみですね。

もっと機能を追加する場合は、APIから取得したデータをhtmlに埋め込むのではなく、配列を作ってキャッシュし、必要に応じてデータを再利用しやすくするような感じがいいのでしょうかね。

たとえば、複数の地域の降水量情報を並列で表示して、一方のデータのみ切り替えて比較するような動作とか、降水量は一時間おきだけじゃなく、2時間後、3時間後とかもたしかとれるはずなので平均値を求めたり、まぁいろいろあると思います。

そうなるとAngularJSとかVue.jsとかMVCフレームワークの出番があるのかなーとか思います。想像していると楽しくなってきますね。そういったフレームワークも機会があれば勉強してみたいと思います。

今後の予定は、さしあたってアニメーションに特化したjsライブラリをやってみようかなと検討しています。候補にあるのがTweenMaxというやつ。なんか便利そう。p5.jsもいいらしい。いろいろ試してみようと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です