Google Maps APIでHUD用のカーナビアプリを作ってみた

hud-navi
  • URLをコピーしました!

今回は、Google Maps APIを使ってHUDヘッドアップディスプレイ)対応のカーナビを作成します。
今や無駄に高価なカーナビに頼らずとも、スマホさえあればルート検索から音声付きの道案内までしてくれます。
特にGoogleマップはあらゆるデバイスで無料で利用でき、正確な地図と位置情報が表示され、地図を更新する手間もかかりません。

目次

ヘッドアップディスプレイとは?

HUD(ヘッドアップディスプレイ)
HUD(ヘッドアップディスプレイ)

ところで皆さん、HUD(ヘッドアップディスプレイ)をご存知だろうか。
半透明の板に情報を反射させて表示し、視界を奪うことなく行き先を確認することができます。
であれば速度表示カーナビに用いられています。
有名所で言うと、カロッツェリアのサイバーナビ辺りではないだろうか。

ヘッドアップディスプレイ(英語: Head-Up Display、略称: HUD、「ハッド」と発音する)は、人間の視野に直接情報を映し出す手段である。
この技術は軍事航空分野において開発され、実験的にではあるがさまざまな分野に応用されている。
・・・
ヘッドアップディスプレイには以下の特徴がある。
このディスプレイは大きく透明で、情報はヘッドアップディスプレイ利用者の通常の視界と重なって表示される。
情報は無限遠の点に結像する。この事により、コンマ数秒程度かかる「焦点を合わせ直す」という生理現象が、ヘッドアップディスプレイ利用者が外界から映像に視点を切り替える際に生じない。

引用:ヘッドアップディスプレイ – Wikipedia

つまり、視線を移動させる必要が無いので圧倒的に見やすいのだ。

HUD対応のカーナビを探してみた

結論から言うと、無料で使える優れたアプリはありませんでした。
唯一、NAVITIMEナビタイム)の「HUDWAY Glass」が使えそうでしたが、1万円もする専用の車載ホルダーがないと使えず。
興味がある方はこちらをどうぞ。

また、「マップルナビ for HUD」というアプリもあるが、これも「GARMIN HUD」という2万円もする機器とBluetoothで連動させる必要があり、しかも生産終了しているからどうしようもない。
アプリも更新していない模様。よく見ると地図表示もしてれない。
他のはカーナビ以下。
速度距離の表示しかしてくれなかったり、ルート案内が大雑把。

ラマス(Ramasu)
¥25,298 (2024/08/15 05:31時点 | Amazon調べ)

HUD対応のアプリを作成!

ってことで、HUDヘッドアップディスプレイ)対応のカーナビアプリGoogle Maps APIを使って作成しました。
と言っても、ルート検索機能付きの地図をただ左右反転させるだけですが…。
もちろん、ルートの音声案内はありません(汗)

現在地を取得してルート検索

以下の参考サイトのサンプルほぼそのままですが、HUD用に少し改造しました。

出来上がったものがこちらです。
HUD NAVIと名付けました。

Google Maps APIが有料になったため、現在は機能しません

HUDナビ

ホーム画面にショートカットしておくと、フルスクリーンで表示できて使い勝手も向上します。

HUD NAVIの使い方

使い方はシンプルです。

  1. まず、1回タップして現在地を確定
  2. 次に行きたい場所をタップして目的地を決定
  3. ルート検索」ボタンを押して経路を表示
  4. HUDモード()ボタンを押す
  5. ボタン上の「」でメニューを閉じます
  6. フロントガラス付近にセット

すると、画面がこのようになります。

HUDナビ

もうお分かりですね?
そうです、左右が反転しています。
このままガラスミラーに移すと普通に見えるという仕組みです。

余談:CSSで左右を反転させる方法

忘れないようにメモしときます。
ある要素を変形させるには、transformを使います。
transformはただ反転するだけでなく、変形、移動、縮尺、回転、傾斜などの変形を適用することができます。

今回書いたのはこちら。

あと、scaleXも用意されているようなので、これでも行けると思います。

改善すべき点

ざっくりで作ったので、ちょっと使い勝手が悪いです。
暇があったら以下を改善します。

  • 地図が反転するので、タッチ操作も左右逆になってしまう
  • 高速移動しているとGPS座標取得が間に合わず、地図と現在地のズレが生じる
  • フルスクリーンに対応したつもりだが、ステータスバー分の余白ができてしまう

3番目はとりあえず横向きで起動すると解決できそうです。

著:勝又 雅史, 監修:株式会社ゴーガ
¥2,851 (2024/08/15 05:31時点 | Amazon調べ)
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (2件)

  • こんにちわ。
    同じくHUD用のiPhoneアプリを探していました。
    こちらのナビページをiPhoneXでアクセスすると
    For development purposes only
    と地図上に表示されGoogle mapsが利用できないようです。
    今後改善の予定はありますか?

    • コメントありがとうございます。

      原因としては、アプリ内で利用しているGoogle Maps APIが、今年になって「Google Maps Platform」として有償となり、請求先を設定していないAPI Keyを利用しているため「開発目的のみ(For development purposes only)」と表示されております。

      今後についてですが、Googleの料金体系を見ると、毎月200USD分は無料でそれ以降は従量課金制のようで、予想では無料範囲内で収まると思うのですが、外部に公開している限り料金が発生する可能性があるため、コメントを頂いたのに大変申し訳ございませんが、請求先を設定して現在の事象を改善する予定はございません。

      まだまだ改善点もあると思ってますので、もし、ふく様のような反響をたくさん頂き、クラウドファウンディング等で資金を調達できれば、有償版も契約して本格的に開発したいと思います。

コメントする

CAPTCHA


目次