|
HTML5＋CSS3 |
Webアプリケーション編
|
| Lesson 07 | Webアプリケーションの作成(2) 位置情報を使ったアプリ(後編) |
|||
| 制作・文 | 外村和仁（ピクセルグリッド） |
| HTML5を使ったWebアプリケーションの二つ目として、位置情報のAPIを使って近くのお店を検索するアプリケーションを作成しよう。地図やリンクを表示すると簡単で便利なアプリケーションになる。 |
※前編はこちら
APIからお店のリストを
次に位置情報とフォームの値を元に、API で近くのお店を取得する処理を実装する。
API にはYahoo! ローカルサーチAPI を使う。このAPI はキーワードやキーワードから学校、病院、郵便局、駅などさまざまなものを対象に検索することができるAPI だ。このAPI にはYahoo!クーポンを対象に検索できるオプションがあるので、これを使いYahoo! クーポン対象のお店を現在地から近い順に取得する。今回使用するAPI のパラメータは【1】のようになっている。アプリケー ションID はAPI を利用するのに必要なID で、あらかじめYahoo! デベロッパーネットワークで取得しておく必要がある。この他にもオプションは用意されているので、詳細についてはドキュメントのページ【2】を参照してほしい。
このパラメータを指定したAjax のリクエスト処理を位置情報成功時のところに記述する【3】。
まずはAPI に必要なパラメータを設定する【3】（1）。次にajax のリクエストを送り、成功時の処理13 （2）と失敗時の処理【3】（3）をそれぞれ記述する。失敗時の処理は位置情報の取得に失敗したときと同じようにアラートを出しフォーム画面に戻るようにする。成功時にはレスポンスを元に検索結果画面にリストを作成する。リストを作成する処理は14 のようになる。
前回の検索結果が残らないように、追加する前にempty() でリストの中を空にしている【4】（1）。検索結果画面には取得されたお店の名前がリストで表示される【5】。
【1】今回使用するAPIのパラメータ
【2】ドキュメントのページ(http://developer.yahoo.co.jp/webapi/map/localsearch/v1/localsearch.html)
【3】
【4】
【5】検索結果画面（リスト表示）
APIからお店のリストを
取得する
次に位置情報とフォームの値を元に、API で近くのお店を取得する処理を実装する。API にはYahoo! ローカルサーチAPI を使う。このAPI はキーワードやキーワードから学校、病院、郵便局、駅などさまざまなものを対象に検索することができるAPI だ。このAPI にはYahoo!クーポンを対象に検索できるオプションがあるので、これを使いYahoo! クーポン対象のお店を現在地から近い順に取得する。今回使用するAPI のパラメータは【1】のようになっている。アプリケー ションID はAPI を利用するのに必要なID で、あらかじめYahoo! デベロッパーネットワークで取得しておく必要がある。この他にもオプションは用意されているので、詳細についてはドキュメントのページ【2】を参照してほしい。
このパラメータを指定したAjax のリクエスト処理を位置情報成功時のところに記述する【3】。
まずはAPI に必要なパラメータを設定する【3】（1）。次にajax のリクエストを送り、成功時の処理13 （2）と失敗時の処理【3】（3）をそれぞれ記述する。失敗時の処理は位置情報の取得に失敗したときと同じようにアラートを出しフォーム画面に戻るようにする。成功時にはレスポンスを元に検索結果画面にリストを作成する。リストを作成する処理は14 のようになる。
前回の検索結果が残らないように、追加する前にempty() でリストの中を空にしている【4】（1）。検索結果画面には取得されたお店の名前がリストで表示される【5】。
【1】今回使用するAPIのパラメータ
【2】ドキュメントのページ(http://developer.yahoo.co.jp/webapi/map/localsearch/v1/localsearch.html)
【3】
【4】
【5】検索結果画面（リスト表示）
地図やリンクを表示する
これでアプリケーションの機能はほぼ完成だが、一手間加えてもう少し表示する情報を増やしてみよう。まずはGoogle Static Maps API 【6】というサービスを使い、GoogleMap の地図画像を表示する。Google StaticMaps API はimg 要素のsrc 属性に位置情報を付けたURL を指定することで、簡単にGoogleMap の静的な画像を表示できる便利なサービスだ。API の取得結果にはお店の位置情報も含まれているので、リストを作成する処理を【7】のように変更する。
これでタイトルに加えて地図画像を表示できた【8】。
せっかく地図画像を表示できたので、地図画像にはGoogleMap へリンクすると便利だろう。また、API の結果にはYahoo! クーポンページのURL も含まれているので、こちらにもリンクしたい。このように追加する要素が増えた場合、HTMLをJavaScriptの中でつくるとコードが煩雑になってしまうので、テンプレートエンジンを使うといいだろう。今回はjQuery Templates というjQueryプラグインのテンプレートエンジンを使用する。jQuery テンプレートでは【9】のようなコードをHTML のファイルに記述する。
この中で${...} となっているところにJavaScript から指定した変数が適用されるという仕組みだ。このテンプレートを使うとリストを作成する処理は【10】のようになる。
【6】Google Static Maps API(http://code.google.com/intl/ja/apis/maps/documentation/staticmaps/)
【7】
【8】検索結果画面（地図表示）
【9】
【10】
スタイルを調整する
地図へのリンクやクーポン情報のへリンクも追加されて、アプリケーションとして実用的なものになった。最後に、見た目を調整するために簡単なスタイルをあてて完成だ【11】。このように、位置情報のAPI は既存のAPI サービスと組み合わせることで、簡単に便利なアプリケーションをつくることができる。スマートフォン中心で使う機能なのでアプリケーションをつくるにあたって、CSS3 などの技術もフルに使うことができるのもこういったアプリケーションの魅力の一つといえるだろう。
【11】(1)
【11】(2)
【11】(3)
アプリの実行例（画面遷移）
