talking about …

by tango

「東京の空気2」

以前からテスト公開していた東京都環境局の大気汚染地図情報ビューワー「東京の空気」をバージョンアップしました。東京都環境局大気汚染地図情報では、気温 (TEMP)、風速 (WIND)、湿度 (HUM)、二酸化窒素 (NO2)、浮遊粒子状物質 (SPM)、光化学オキシダント (Ox)、二酸化硫黄 (SO2)、一酸化炭素 (CO)、一酸化窒素 (NO)、窒素酸化物 (NOx)、メタン (CH4)、非メタン炭化水素 (NMHC)、微小粒子状物質 (PM2.5)の一時間ごとの測定値が地図にマッピングされて提供されています。iPhone などのスマートフォンからの閲覧で文字化け(最近修正されたようです)やレイアウトなど使いにくさを感じていましたのでこのようなアプリケーションを作りました。

inst-05baron-01

前バージョンは PHP の練習用に書いたもので GET メソッドでパラメータの受け渡しをする仕組みでした。画像の切替時には画面推移を伴います。

今回は、スマートフォン用に、特に iPhone、iPad など iOS 機器でウェブアプリケーションとして使うため、プログラムを JavaScript / Ajax で全面的に書き換えました。これで iOS 機器で Web クリップアイコンから起動して使っていても画面推移時に MobileSafari.app に移ることがなくなります。


sett-01

また、こちらを見ていただくとわかるのですが、東京都環境局大気汚染地図情報の地図は東京都の輪郭のみで周辺情報がありません。
海岸線や県境の区別がなく、実際の地図とリンクしにくいと思っていましたので、周囲の都道府県の白地図をオーバーレイ表示するようにしました。道路や鉄道など、どこまでを表示要素にするか考えましたが、情報量を増やすとかえって見えにくくなりますので市区の行政区分と河川までを表示することにしました。

このオーバーレイ地図は透過度を自由に設定できるようにしてあります。

Ajax フレームワークとして、jQuery と jQuery Mobile を使用しています。
スマートフォンだけでなく Mac OS、Windows でも大丈夫です。イマドキのモダンブラウザーならほぼ表示に違いはないと思いますが、Internet Explorer 8 以下には対応しておりません。


2013/09/07 – ver.2.0.3 機能追加

パーマリンク(固定リンク)機能を追加しました。
特定の地図へのリンクが出来るようになりました。表示している地図の種類、日時などの情報そのままリンク出来ます。右肩の (i) ボタンからインフォメーションのページを開いて「Permalink」をご覧ください。
ただし日時については、画像が公開されている東京都環境局大気汚染地図情報の仕様のため現在より8日前の地図までしか表示されません。それより過去の地図が指定されていた場合は、その時点での最も過去の地図が表示されます。

COPYRIGHT (c) 2006-2016 ZERO OFFICE CO., LTD. | Powered by WordPress

Social Widgets powered by AB-WebLog.com.