YOLPで挑戦～「マクドナルドはどこだ」アプリをHTML5で作る！

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

　連載1回目ではYOLP（Yahoo! Open Local Platform）の提供するAndroid Map SDKを使って、簡易道のり測定を行うアプリを30分で作ってみました。2回目となる今回は、JavaScriptマップAPIを使って簡易ナビゲーションを行うWebアプリを作ってみたいと思います。

美味しいハンバーガーは好きですか？

　皆さんハンバーガーは好きですか？ 僕はそれなりに好きです。それなりに好きな程度なのに時々無性に食べたくなるのは、ハンバーガーという食べ物の魔力でしょう。街を歩いていてハンバーガーが急に食べたくなった。1秒でも早く食べたい！ 最寄りのハンバーガー屋はどこだ今すぐ連れてけ！ そんな衝動に答えるアプリ「マクドナルドはどこだ」略して「マクどこ」が今回のテーマです。

アプリのストーリー

　「マクどこ」で実現したい主なストーリーは以下のとおりです。

• 起動すると何も指示しなくても現在地から最寄りのマクドナルドまでのルートが地図に表示される
• 目的のマクドナルドの名称や電話番号が表示される

　ではさっそくこれらストーリーを実現するアプリを作成してみましょう。

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

　おっとその前に、JavaScriptマップAPIを利用するためにはアプリケーションIDが必要になります。すでにアプリケーションIDをお持ちの方はそちらを。アプリケーションIDが未登録の方、新しいアプリケーションIDの登録を希望する方は、以下のページを参考にアプリケーションIDを登録してください。

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

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

アプリの大きな流れ

　さて。「起動すると何も指示しなくても現在地から最寄りのマクドナルドまでのルートが地図に表示される」というストーリーなので、アプリの大きな流れとしては以下のように考えられます。

• 現在位置を取得する
• 取得した現在位置から最寄りのマクドナルドを検索する
• 現在位置からマクドナルドまでのルートを検索する
• ルートを地図に描画する

　これに沿ってアプリを書いていきましょう。

ビューを書く

　まずエンドイメージとなるビューを大まかに決めます。アプリのメインコンテンツは地図に表示されたルートなので、なるべく地図を大きく見せるために全画面に表示することにします。「目的のマクドナルドの名称や電話番号が表示される」必要があるので、それらの情報は地図の上にオーバーレイした小さなウィンドウに表示することにしましょう。

<!DOCTYPE html>
<html>
<head>
<title>マクどこ</title>
</head>
<body>

<div id="container" style="width:100%; height:100%; position:relative;">
<div id="map" style="width:100%; height:100%;"></div>
<div id="label" style="position:absolute; bottom:4px; right:4px; width:92%; height:64px">
    <div id="title">マクどこ</div>
    <div id="desc">always I'm lovin'it</div>
</div>
</div>
</body>
</html>

　全画面に表示する<div id="container">の中に<div id="map">と<div id="label">が子要素として並列に並ぶシンプルな構造です。<div id="map">に地図を、<div id="label">に名称や電話番号を表示します。

　<div id="label">を<div id="map">の子要素にしないのは、JavaScriptマップAPIが地図として初期化する際にコンテナとして指定された<div>の中身をすべて消去するからです。