|
HTML5＋CSS3 |
Webアプリケーション編
|
| Lesson 06 | Webアプリケーションの作成(2) 位置情報を使ったアプリ(前編) |
|||
| 制作・文 | 外村和仁（ピクセルグリッド） |
| HTML5を使ったWebアプリケーションの二つ目として、位置情報のAPIを使って近くのお店を検索するアプリケーションを作成しよう。地図やリンクを表示すると簡単で便利なアプリケーションになる。 |
位置情報を使ったアプリの仕様
二つ目はスマートフォン向けの位置情報を使ったアプリケーションを実装する。仕様は【1】のようなアプリケーションだ。
【1】位置情報を使ったアプリの仕様
入力フォームを実装する
まず始めに、検索条件を設定するフォームを作成しよう。HTMLファイルを用意し、【2】のようなHTML を記述する。ここではHTML5 Forms の「number属性値」、「min 属性」、「max 属性」などを使用している。input 要素でtype 属性にnumber 属性値を指定すると、「数字を入力するためのテキストボックスである」という指定になり、ブラウザによっては数字以外を入力できなくしたり、独自のUI を提供する。min 属性、max 属性は入力する数値の最小値と最大値を設定することができる。
【2】
画面遷移を実装する
今回は「フォームを送信したときにJavaScriptで表示を切り替えて、フォーム画面を非表示にし、検索結果画面を表示する」という処理にする。フォームを送信してAPI のレスポンスが返ってくるまでの間に時間がかかる可能性もあるのでローディングの表示も必要だろう。検索結果画面とローディング画面のHTML は【3】のように最初は非表示にした状態で記述しておこう。次にフォームを送信したときにJavaScript で画面を切り替える処理だけをまず実装する【4】。
まずフォームがサブミットされたらフォーム画面を非表示にして、ローディング画面を表示する。次に、近くのお店を検索する処理を実行する【4】（2）。しかしここではまだ実際に処理は記述せずにsetTimeout で代替えし、ページ遷移のみを確認できるようにする【4】（3）。これでフォーム画面→ローディング画面→検索結果画面という画面の切り替えが実装された【5】。
このままではブラウザの戻るボタンを押しても検索結果画面からフォーム画面に戻ることができないので、HisotryAPI を使って、戻るボタンを押したときに期待通りに動作するように実装しよう【6】。
まずフォームが送信された際にhistory.pushState を使って検索結果画面の履歴情報を追加する06 （1）。初期ロード時は必ずフォーム画面が表示されるので、初期ロードのときはhistory.replaceState を使ってフォーム画面の履歴情報を記録しておく【6】（2）。最後に、戻る、進むボタンが押されたときに発生するpopstate とイベントを使って戻る、進むボタンの処理をハンドリングする【6】（3）。ここではイベントオブジェクトのstate プロパティにpushState、replaceState で第一引数に指定した値が渡ってくるので、その値によって表示するコンテンツを決めている。なお、2011 年4 月にHistory APIの仕様に変更があり、window.history.state というプロパティでもstate の情報を取得できるようになっている。執筆時点でその仕様を実装しているのはFirefox 4 のみなので、ここではevent.stateから取得するようにしている。
戻る、進むボタンが押されたときはローディングを見せる必要はないので、ローディング画面は飛ばして表示していいだろう。これで【7】のような遷移を実装することができた。
【3】
【4】
【5】画面遷移図(1)
【6】
【7】画面遷移図(2)
位置情報を取得する
これで画面遷移の処理はできたので、次に近くのお店を取得する処理を実装しよう。まずはAPI をコールする前に位置情報を取得する必要があるので、こちらの処理を先に実装する。先ほどsetTimeoutを使って代替えしていた関数を08 のように書き変える。
Geolocation API を使って位置情報を取得する【8】（1）。Geolocation API のgetCurrentPosition は第一引数に成功時の処理、第二引数に位置情報の取得に失敗したときの処理を記述する。
まず成功時に、位置情報が取得できているか確認するために検索結果画面に取得した位置情報を表示するだけにしておく【8】（2） 【9】。
またエラー時はエラーメッセージのアラートをだし、ローディング画面からフォーム画面に戻るような処理にする【8】（3） 【10】。このエラー時の処理を実装していないと、エラー時にローディング画面で止まってしまい、そのあとに何も処理できなくなってしまうのでエラー時の処理はとても大切だ。
【8】
【9】成功時の画面
【10】失敗時の画面（アラートを閉じた後フォーム画面に遷移）
＞＞目次に戻る
