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

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

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

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

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

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

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

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

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

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

HUD対応のアプリを作成！

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

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

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

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

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

HUD NAVIの使い方

使い方はシンプルです。

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

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

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

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

今回書いたのはこちら。

.map {
    transform: scale(-1, 1);
}

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

.map {
    transform: scaleX(-1);
}

改善すべき点

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

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

• Original:https://minory.org/hud-navi.html
• Source:Minory
• Author:管理者