はじめに
空を見上げて、「今にも雨が降ってきそうだ」と思った時に、いつから雨が降ってくるのかすぐに知りたい！と思ったことはありませんか。そんな皆さまのご要望にお応えすべく、今回はYOLPの提供するJavaScriptマップAPIと、最新のアップデートで追加された気象情報APIを利用して、「雨フル？タッチ」を開発してみたいと思います。「雨フル？タッチ」は、地図をタッチするとその場所の1時間後までの雨の強さを表す降水強度予測を確認することができるWebアプリです。
本文に沿って実際に開発を進めていただければ、「雨フル？タッチ」をすぐに作成いただけますので、ぜひお試しください。また、作る前に「雨フル？タッチ」を実際に使ってみたい、という方は、こちらからお試しいただけますので、あわせてご利用ください。
機能概要
「雨フル？タッチ」では、以下の機能を実装します。
-
起動後、現在地を取得してその位置を中心とした地図と最新の雨雲レーダーレイヤーを表示します。
-
PCブラウザなどで現在地が取得できなかった場合は日本へそ公園を表示
- 日本へそ公園は兵庫県西脇市上比延町にある公園で、東経135度、北緯35度に位置しており、日本は東経123度～147度、北緯24度～46度の枠に収まっているので、東経135度、北緯35度のこの地点がまさに日本の中心であり“へそ”だということです。
-
PCブラウザなどで現在地が取得できなかった場合は日本へそ公園を表示
-
画面上部にサブウィンドウを表示して、中心点に関する情報を表示します。
- 最新時点から10分ごとに60分後までの降水強度予測値を表示します。
- 住所を表示します。
- 各降水強度予測値をタップすると、該当する時間帯の雨雲レーダーレイヤーを地図に重ねて表示します。
-
地図上で任意の場所をタップすると、ピンを表示してサブウィンドウ内の情報を更新します。
- 雨雲レーダーレイヤーもタップ時点で最新の情報に更新されます。
開発環境の準備
アプリケーションIDの登録
これまでの記事でも紹介しておりますが、YOLPで提供されているAPIを利用するには、アプリケーションIDが必要になります。すでにアプリケーションIDをお持ちの方はそちらを利用していただき、アプリケーションIDをお持ちでない方、新しいアプリケーションIDの登録を希望する方は、以下のページを参考にアプリケーションIDを登録してください。
なお、アプリケーションIDを登録するためには、Yahoo! JAPAN IDでログインする必要があります。
