車載ナビアシスタントのメイン画面

AIコーディングで車載ナビを作ったら、AIラジオまでできた

Androidを搭載した車載ナビのChromeで動く、自分専用のナビアシスタントを作ってみました。

最初は現在地を地図に出すだけのつもりでした。それが、周辺施設検索、目的地管理、簡易ナビ、音声検索と少しずつ増えていき、今では目的地の話題を二人のキャラクターが話すAIラジオまで動いています。

今回は、細かな実装よりも、実際にできたことを中心に紹介します。

車載ナビアシスタントのメイン画面
現在のメイン画面。運転中でも押しやすいよう、よく使う機能を大きなボタンにしました。

車内での検索を、もっと楽にしたい

カーナビタイムのナビ機能には満足していますが、地点検索や小さな音声入力ボタンには使いにくさを感じていました。GoogleマップやYouTube Musicでも、車内での文字入力は面倒です。

そこで既存のナビを置き換えるのではなく、検索や音声操作を助ける、自分向けの車載アシスタントを作ることにしました。

AIを二つの意味で使ってみる

  • AIと相談しながら設計や実装を進める、AIコーディング
  • 作ったアプリの中で、LLMに案内文やラジオ番組を作ってもらうこと

作るときにも、できあがったアプリの中でもAIを使っています。

まずは車載機のChromeで動かしてみた

まずはChromeで動くWebアプリとして、GPSから現在地を取得し、地図と住所を表示しました。その後PWA化し、地図を全画面で使えるようにしています。

大きなボタンから、やりたいことをすぐ選べる

車載画面では押しやすさを優先し、よく使う機能を大きなボタンで並べました。

  • 周辺施設
  • 目的地リスト
  • Googleマップ検索
  • YouTube Musicの音楽検索
  • AIラジオ

Googleマップ検索と音楽検索は、音声で検索語を入力できます。標準の小さな音声入力ボタンを探す必要はありません。

音声による住所・場所検索画面
住所や場所は音声で入力し、自作地図への表示やGoogleマップ検索ができます。

周辺施設を探して、そのまま案内

道の駅、トイレ、コンビニ、ガソリンスタンド、観光地などを検索できます。結果には距離、方角、車での所要時間を表示し、そのまま地図表示や案内を始められます。

Googleマップで調べた場所を、あとで使えるリストに

Googleマップの共有URLから目的地を登録し、リストや地図へまとめて表示できます。選んだ場所はGoogleマップまたは簡易ナビで案内します。

地図上で動く簡易ナビ

次の曲がり角、残りの距離と時間を表示し、音声でも案内します。右側には案内地点の航空写真を表示します。交通規制などには対応できないため、本格的な案内はGoogleマップに任せます。

ルートと次の案内を表示した簡易ナビ画面
ルート、次の案内、航空写真のミニマップを表示した簡易ナビ画面。

目的地の話を聞けるAIラジオ

一番面白くなったのがAIドライブ・ラジオです。目的地の歴史、観光地、名産品、最近の話題を検索し、ローカルLLMが会話台本を作ります。四国めたんとずんだもんの声で、ラジオのように聞くことができます。

四国めたんとずんだもんによるAIドライブ・ラジオ画面
目的地の情報から番組を作り、四国めたんとずんだもんの声で再生します。

AIは、なかなか思いどおりに話してくれない

台本が途中で終わったり、同じ言葉を繰り返したりすることもありました。「おやすみ」を何十回も繰り返す、ちょっと怖い番組ができたこともあります。

現在は会話の順番や繰り返しを検査し、おかしい場合は作り直します。地名の読み間違いは辞書で補正できます。

使用した主な技術

  • フロントエンド:HTML、CSS、JavaScript、PWA
  • 地図表示:MapLibre GL JS、国土地理院タイル
  • 位置情報:Geolocation API
  • 音声入力:Web Speech API
  • バックエンド:Python、FastAPI
  • 周辺施設:OpenStreetMap系データ
  • 経路検索:OSRM
  • 目的地・辞書管理:SQLite
  • 最新情報検索:Tavily
  • AIによる文章・台本生成:Ollama、Qwen3 14B
  • 音声合成:VOICEVOX、ffmpeg
  • 外部アプリ連携:Googleマップ、YouTube Music
  • 公開方法:HTTPSリバースプロキシ

作ってみて分かったこと

  • 位置情報や音声機能は、早い段階で実機テストする
  • 交通規制など、自作が難しい部分はGoogleマップへ任せる
  • 車載画面では情報量より、ボタンの押しやすさを優先する

まとめ

現在地を表示するだけのページから始まり、簡易ナビやAIラジオまで増えました。気になるところを自分で直せるのが、自作の面白さです。

まあ、ほとんどAIが作ってくれたんですが。