読み書きプログラミング

日常のプログラミングで気づいたことを綴っています

音声ガイド付きストリートビューナビゲーション

(注: 2013年10月9日、サイトをmaps2013.herokuapp.comからy-ich.github.ioに引っ越しました。)

http://y-ich.github.io/maps/navi.html

最近、自転車で動き回っています。この前は住んでいる天理市から三重県鳥羽市まで行ってきました。
ろくに地図を確かめないせいか、全行程300kmのうち、20kmぐらいは無駄に走った気がします。

Google Mapsを活用させてもらったのですが、自動車経路だと自動車専用道路に連れて行かれるし、歩行経路だと迷路か獣道に連れて行かれるんですよね…自転車ルートが待ち望まれます。NAVITIMEの自転車ルートはPC版無料ですが、モバイル版は有料…

その時にはあまりに長距離でイヤホン付けて走るという発想がなかったのですが、その後、イヤホン付けて音楽聴きながら、Google Mapsの音声ガイドも使ったら気をつけるポイントはよくわかりました。でも交差点でどっちに進むのかはよくわからない。

地図じゃなくて、ストリートビューで同じ場所を表示して、「こっち」と矢印付けたらわかりやすいだろうと思って作ったのがこのアプリです。
残念ながら矢印つけるところまで至ってません。音声ガイドとストリートビューまで。
ここまでは単にサービスを組み合わせれば(色々苦労はあるんですが)作れるんですよね。
なので、いいマイルストーンかと思い、一度公開します。

ストリートビュー上でのガイダンスは果たして頓知でできるのか技術が居るのか、考えてみます。

それにしても、誰でも使えるサービス使ってこういうものが一日二日で作れる時代なんですね。すごい時代だと思いました。

使い方

  1. 検索枠に文字を入れて候補から選ぶと現在位置からのルート検索
  2. ルート候補を選択してNaviボタンをタップするとルートナビ開始
  3. ストリートビューと音声でナビします。ストリートビューが利用できない場所では地図を回転させてナビします。ナビから通常表示に戻るにはStopボタンをタップします。

ポイント

  • 地図は例によってGoogle Maps JavaScript APIを活用させていただいています。
  • 以前の実験でGeolocation APIのheadingプロパティ(たぶん移動方向から算出)は使えないなと思っていたら、コンパス情報が別途使えました。(webkitCompassHeading)
  • 音声合成にはGoogle翻訳のTextToSpeechを使いました。
  • iOSの音声再生は色々制約があるのですが、Web Audio API使うとほとんど制約がなくなりました。
  • iPhoneの自動ロックを避けるために、無音audioの無限再生というテクニックを使いました。