状況に応じて地図の様子が自動で変わる！
YOLPで作る簡単便利地図アプリ 「今っぷ！」

スマホアプリ開発の最新トレンド！ ぜったい外せない位置情報活用術（8）

　本連載では、Yahoo! Open Local Platform（YOLP）を使ったさまざまなアプリ・サービスの実装例を紹介しています。今回は、状況に応じて地図の様子が自動で切り替わる「今っぷ！」をご紹介したいと思います。

はじめに

　みなさんもご存じのとおり、地図にはたくさんの種類があります。通常の地図はもちろん、航空写真をベースにしたものや鉄道路線地図など、Yahoo! Open Local Platform（YOLP）でもさまざまな種類の地図が提供されています。そして、どの地図を見るのが最適かは、その地図を見る目的、状況によって異なります。一方で、目的や状況に応じて、いちいち地図を切り替えるのは面倒です。

　今回はそんな皆さまの課題を解決すべく、地図の中心位置や利用時刻に応じて地図の状態が自動的に変化するWebアプリ、「今っぷ！」を紹介したいと思います。

　「今っぷ！」は、YOLPの提供するYahoo! JavaScriptマップAPI（以下、JavaScriptマップAPI）、気象情報API、標高APIを利用します。本文に沿って実際に開発を進めていただければ、「今っぷ！」をすぐに作成いただけますので、ぜひお試しください。また、作る前に「今っぷ！」を実際に試してみたいという方は、こちらからお試しいただけますので、ご利用ください。

機能概要

　「今っぷ！」では、以下の機能を実装しています。

• 現在地を取得して、現在地を中心に地図を表示
  （PCブラウザなどで現在地が取得できなかった場合は、東京ミッドタウンを中心に表示します）
• 現在地にアイコンを表示
• 表示中の地図の状態に関する情報を表示
  • 情報更新時刻
  • 中心位置の住所（町丁目レベル）
  • 表示している地図の種類
  • 中心位置の標高
  • 雨雲レーダー情報の有無
• 地図の中心座標における降雨予測値（現在時刻から1時間以内）が0.1mm/h以上の場合、雨雲レーダー情報を地図に重ねて表示
• 地図の中心座標における標高値に応じて地図を地形図に変更
• GPSから取得した現在地の高度情報に応じて地図を航空写真に変更
• 現在時刻（朝、昼、夕方、夜）に応じて、地図のスタイルを変更
• 現在時刻に応じて、飲食店の位置をマーカーで表示
• 飲食店のマーカーをタップすると現在地からの経路を表示

　以下の表に地図の状態とその変更条件を記載します。地図スタイルの変更において、時間に基づく変更と標高や高度に基づく変更が同時に成り立つ場合は、標高や高度に基づく変更を優先するようにしました。

地図の状態	条件	サンプル
航空写真	現在地が地上約20m以上
地形図	標高が100m以上
ブルー	現在時刻が4時～10時
ボールド	現在時刻が10時～16時
オレンジ	現在時刻が16時～20時
ミッドナイト	現在時刻が20時～翌4時
飲食店情報	現在時刻が11時～13時または18時～21時
雨雲情報	地図の中心に1時間以内に降る雨が0.1mm/h以上

開発環境の準備

アプリケーションIDの登録

　これまでの記事でも紹介しておりますが、YOLPで提供されているAPIを利用するにはアプリケーションIDが必要になります。すでにアプリケーションIDをお持ちの方はそちらを利用していただき、アプリケーションIDをお持ちでない方、新しいアプリケーションIDの登録を希望する方は、以下のページを参考にアプリケーションIDを登録してください。

• アプリケーションIDとは-YJDN
• アプリケーションIDを登録する-YJDN

　なお、アプリケーションIDを登録するためには、Yahoo! JAPAN IDでログインする必要があります。