SETUP GUIDE

iPhoneで使う準備

1. 実データを接続する

Windowsのプロジェクトフォルダで npm run setup を実行します。作成された .env の GOOGLE_MAPS_API_KEY に、Google Cloudで取得したキーを記入してください。チャットへの貼り付けは不要です。

1. Google Cloudで専用プロジェクトを作成し、請求先を設定します。
2. Routes API を有効にします。
3. APIキーを作り、API制限を「Routes API」に限定します。サーバーの固定送信元IPが使える場合はIP制限も設定します。
4. Google Cloud側の割当量と請求アラートも設定します。請求アラートだけでは課金は停止しません。
5. .env にキーを保存し、サーバーを再起動します。Google Cloudの専用プロジェクト名は route-companion を推奨します。APP_TOKEN はこのアプリへの接続専用の別の秘密文字列です。

初期のアプリ側制限はUTCで1日300回・月1,500回です。APIエラーも保守的に1回として数えます。他のプロジェクトやGoogleの請求全体を制限する仕組みではありません。

C：Sulafat の音声を接続する

まず、このPCでCの声を鳴らすところまで進めます。 Google Cloudで音声用のキーを作り、このPCの設定ファイルへ保存します。音声テストだけなら、交通情報APIやiPhone向け公開は先に済ませなくても大丈夫です。

① Google Cloudで専用プロジェクトを選ぶ

Google Cloudを開く ↗ → 画面上部のプロジェクト名をクリック → route-companionを選びます。ここから先は、このプロジェクトで操作してください。

② 請求先を確認する

左上の≡ → お支払いを開きます。「このプロジェクトには請求先アカウントがありません」と表示された場合は、請求先アカウントをリンクから登録済みの請求先を選びます。請求先自体がない場合は、画面の案内に沿って作成・支払い方法の登録が必要です。既にリンク済みなら、そのまま③へ進めます。

音声APIには無料枠がありますが、利用開始には請求先の設定が必要です。無料枠の超過分は課金対象です。Google公式料金

③ 音声を作る機能を有効にする

画面上部の検索欄で Cloud Text-to-Speech API を検索 → 同じ名前の結果を開く → 有効にするを押します。「管理」と表示される場合は、既に有効になっています。

④ 音声用のAPIキーを作る

≡ → APIとサービス → 認証情報 → 認証情報を作成 → APIキーの順に進みます。新しいキーの名前は ROUTECUE音声用 とすると区別しやすくなります。

作成したキーの編集画面で、APIの制限 → キーを制限 → Cloud Text-to-Speech API → 保存と進みます。制限先の候補にない場合は、③が完了しているか確認してから画面を更新してください。

アプリケーションの制限は、このPCで接続確認する段階では「なし」にします。キーを使うのはPC上のサーバーなので、「ウェブサイト」や「iOSアプリ」は選びません。公開時に固定の送信元IPを用意できれば、IP制限を追加します。

キーの文字列をコピーします。このキーは次の⑤のファイルに貼ります。チャットやスクリーンショットには載せないでください。

⑤ このPCの設定ファイルへ貼り付ける

エクスプローラーでROUTECUEのプロジェクトフォルダを開き、.envをメモ帳で開きます。.env.exampleは見本なので、編集するファイルを間違えないようにしてください。

次の行を追加します。既に同じ名前の行がある場合は、その行の「=」の右側だけを置き換えます。

GOOGLE_TTS_API_KEY=ここにコピーしたキーを貼る

「ここにコピーしたキーを貼る」という日本語は残さず、キーの文字列に置き換えてCtrl＋Sで保存します。既存の APP_TOKEN や他の設定はそのまま残します。ファイル名が .env.txt になっていないことも確認してください。

⑥ 再起動して、Cの声を試す

保存できたら、チャットで「キーを保存した」と伝えてください。アプリの再起動と接続確認はこちらで進めます。キーの内容を送る必要はありません。

再起動後はROUTECUEの画面を再読み込みします。右上の「設定」→「端末間の共有」を開き、.envの APP_TOKEN= の右側の文字列を接続用トークン欄へ貼ります。これは④のGoogleのキーとは別です。

案内の声：C：Sulafat → 音声をテストで、実際の案内文を確認します。再生ボタンが表示されたら押してください。「音声API未接続」のままなら、⑤の保存先・設定名と再起動を確認します。

参照：Google公式の利用開始手順 · APIキーの作成と制限

同じWi-FiのiPhoneで試す

このPCは現在、自宅ネットワークから接続できるように設定しています。iPhoneのSafariで http://192.168.68.120:8787/ を開いてください（2026年9月18日時点のPCのアドレス）。PCとサーバーを起動したまま、同じ自宅Wi-Fiで使います。PCのアドレスが変わった場合は接続先も変わります。

この接続では出発地を「住所・施設名を入力」にして確認します。現在地取得と現在地を使った自動確認にはHTTPSが必要です。外出先の携帯回線からは、この自宅内アドレスに接続できません。

地図を表示するには、Google Cloudの「ROUTECUE地図表示用」キーのウェブサイト制限に http://192.168.68.120:8787/* を追加します。既存の127.0.0.1とlocalhostは残してください。接続用APP_TOKENはiPhoneの画面にも入力します。このHTTP接続は暗号化されないため、試用は自宅内に限定し、ドライブ用には次のHTTPS接続を用意します。

2. 外出先のiPhoneから開く

ROUTECUEはConoHa VPSで常時稼働し、接続先は https://routecue.edgeman.jp/ です。自宅PCの電源やTailscale接続は不要です。

1. Google Cloudの「ROUTECUE地図表示用」キーで、ウェブサイトの制限へ https://routecue.edgeman.jp/* を追加します。
2. iPhoneのSafariで公開先を開き、右上の「設定」→「端末間の共有」に APP_TOKEN を入力します。
3. 「接続を確認」を押し、保存旅行と登録地点が表示されることを確認します。
4. Wi-Fiを切って携帯回線でも開き、現在地・ルート検索・地図・音声を停車中に確認します。

通信はHTTPSで暗号化され、API操作は接続用トークンで保護されます。GoogleのAPIキーや接続用トークンをURLへ入れないでください。

3. まず画面で確認する

1. iPhoneのSafariで公開先を開きます。
2. 右上の「設定」→「端末間の共有」を開き、APP_TOKENを入力します。「接続を確認」を押してルート画面へ戻り、「保存したルートを開く」から保存済みのルートを選びます。通常は実際の交通情報を使います。
3. 出発地欄の下の「現在地」を押し、位置情報を許可します。位置の誤差が500mを超える場合や取得時刻が2分以上古い場合は比較を見送ります。
4. 「ルートを検索」で、入力した出発地点・目的地・候補の内容をGoogleマップと照合してください。別荘の住所が正しく解決されるか、必ず停車中に確認します。
5. 「設定」→「音声をテスト」で音量とCarPlayへの出力を確認します。

ホーム画面への追加も可能です。自動確認は5分／10分を選択できますが、画面を表示している間だけです。画面が非表示になった場合は定期確認を一時停止し、戻ったときに再確認します。画面を閉じても監視が続くPWAではありません。

4. 共通ショートカット「ルート確認」を作る

iPhoneの「ショートカット」アプリで作成します。Windowsから署名済みショートカットを直接インストールする機能はこの試作にはありません。

1. 新しいショートカットを作り、名前をルート確認にします。
2. 「ショートカットの入力」が定期なら、変数 Action を scheduled にします。それ以外は manual にします。これでSiri実行時は必ず結果を読み、定期実行時は変化がある場合だけ読みます。
3. 「現在地を取得」を追加します。
4. 「場所の詳細を取得」で、直前の現在地から緯度と経度をそれぞれ取得します。
5. 「現在の日付」→「日付をフォーマット」を追加します。フォーマットはカスタム yyyy-MM-dd'T'HH:mm:ssXXX を指定します。ここでの時刻は今取得した現在地に対してのみ使ってください。
6. 「URL」に https://あなたの公開先/api/compare を設定します。
7. 「URLの内容を取得」を追加し、メソッドをPOSTにします。ヘッダに Authorization = Bearer あなたのAPP_TOKEN、Content-Type = application/jsonを設定します。
8. 本文をJSONにして下表を入力します。緯度・経度・日時・Actionは前のアクションの変数を選びます。

9. 応答の「辞書の値を取得」で speech を取り出します。
10. 「もし」でspeechに値がある場合だけ「テキストを読み上げる」を実行します。空なら何も読みません。エラー時にJSONが返れば失敗理由を読みますが、通信自体が失敗した場合はショートカットのエラーになることがあります。
11. 停車中に直接実行し、通信・位置情報・読み上げの権限を許可します。
12. 「Siri、ルート確認」と呼びかけて動作を確認します。

5. 10分ごとの時刻オートメーション

「ショートカット」→「オートメーション」→「時刻」で、10:00、10:10、10:20…の実行時刻をそれぞれ登録します。最初は首都高を抜ける間の10:00〜12:00（13件）に限定すると設定量を抑えられます。この時間は監視の設定例で、首都高を抜ける時刻の予測ではありません。

1. 各時刻のオートメーションを「すぐに実行」に設定します。バージョンによっては「実行の前に尋ねる」をオフにする表示です。
2. 当日限定にするため「現在の日付」を yyyy-MM-dd 形式で取得し、2026-09-24 の場合だけ続ける条件を追加します。
3. 「テキスト」に 定期 と入力します。
4. 「ショートカットを実行」で「ルート確認」を選び、入力として上の「定期」を渡します。
5. 旅行後は各オートメーションを無効にします。

自動実行は予定時刻のトリガーに対応していますが、位置取得・通信・音声出力がロック状態やCarPlayでも完了するかは端末での確認が必要です。実機で失敗する場合はSiriによる随時確認を使ってください。「10分待機」を繰り返す長時間ショートカットは採用していません。

6. 出発前の実機テスト

• CarPlay＋Yahooカーナビで案内しながら、Siriから実行できる。
• Spotify再生中に読み上げが聞こえ、終了後の再生状態を確認できる。
• ロック中・別のアプリ使用中に時刻実行が完了する。
• 候補不足・通信失敗を「変化なし」と誤解しない。
• 実際の分岐位置・車線はナビで確認する。アプリはナビの経路を自動変更しない。

出発地と目的地は自由に入力できます。住所同士なら入れ替えて復路の検索もできます。PCでは「このルートを保存」、iPhoneでは同じHTTPS接続先の「保存したルートを開く」から選ぶだけで開けます。一覧は起動時・画面へ戻ったときに自動取得します。保存済みの旅行は「変更を保存」で更新し、「別名で保存」で複製します。旅行名・出発地・目的地・出発日時・確認間隔・通知基準を保存し、当日の経路と所要時間は再検索します。以前の「この端末のみ」の旅行も、選んで「このルートを保存」すると共有できます。Siriへは自動同期されません。旅行を変えるときはショートカット内の目的地と、時刻オートメーションの日付条件も変更してください。

出発日時を指定して予習する

1. ルート画面で出発地・目的地に直接入力します。登録地点を使うときは、各欄の下の「登録地点から選ぶ」を押します。
2. 常に表示されている出発日時の日付・時刻を変更します。日本時間で指定すると、自動で予習モードに切り替わります。例：9月24日 9:00。
3. この日時で予測するを押すと、その時刻の交通予測を考慮した候補と到着日時を表示します。
4. 「このルートを保存」で日時も保存できます。保存済みの旅行は「変更を保存」で更新します。
5. 当日は現在時刻に戻すを押し、最新情報で確認します。過去の日時は予習検索できません。

予習とデモは別の機能です。予習はGoogle Routes APIを使うため、通常のルート検索と同じ利用回数を消費します。未来の予測ほど過去の交通傾向が重視され、当日の渋滞を保証するものではありません。Google公式：出発時刻と交通予測

予習中は自動確認を行いません。また、地図の渋滞線は現在の交通情報なので予習中は非表示にします。Googleマップへ移動するリンクに出発日時は引き継がれません。

登録地点と設定

右上の「設定」に、登録地点・端末間の共有・旅行の管理・確認間隔・通知基準・音声設定をまとめています。登録地点は名前と住所・施設名を保存し、同じ接続先のPCとiPhoneで使えます。登録地点を編集しても、保存済みの旅行の住所は自動で変わりません。音声と通常の確認設定は端末ごとに記憶し、旅行を開くと保存された確認間隔と通知基準を適用します。デモは「接続状況とヘルプ」→「動作確認・デモ」から切り替えられます。設定画面を開くと自動確認は停止します。

Googleマップで本ルート・候補ルートを表示する

比較画面にGoogleマップを表示できます。Routes APIで取得した経路の線を重ねるため、下のカードと同じ検索結果を見比べられます。本ルート（比較の基準）は緑、その他の候補は青・茶で表示します。経路の色は渋滞の強さではありません。

1. Google Cloud上部のプロジェクトが route-companion であることを確認します。
2. Maps JavaScript APIの画面を開き、「有効にする」を押します。すでに「管理」が表示されていれば有効です。
3. 左メニュー「APIとサービス」→「認証情報」→「認証情報を作成」→「APIキー」を選びます。名前は ROUTECUE地図表示用 にします。
4. APIの制限は Maps JavaScript APIだけ を選びます。アプリケーションの制限は ウェブサイト を選択します。交通情報用・音声用の既存キーは使いません。
5. ウェブサイトの制限に、使用するサイトのドメインだけのURLと /* 付きURLを追加します。公開版では次の2つです。末尾のスラッシュを付けず、表示どおりに登録してください。

   https://routecue.edgeman.jp
   https://routecue.edgeman.jp/*

   PCだけで使う開発版も必要なら、次も追加します。

   http://127.0.0.1:8787/*
   http://localhost:8787/*

6. 作成したキーを、このPCの .env の GOOGLE_MAPS_BROWSER_KEY= の右側に保存します。チャットへの貼り付けは不要です。

   GOOGLE_MAPS_BROWSER_KEY=ここに地図表示用キー

7. サーバーを再起動し、比較画面を再読み込みします。「ルートを検索」→「Googleマップを表示」で表示できます。

線や候補をタップすると経路を強調します。「全ルートを表示」で全体へ戻ります。地図上で選んでも比較の基準は変わりません。基準を変える場合はカードの「この経路を基準にする」を押してください。○が出発、矢印が到着です。

「渋滞情報」は初期状態でオンです。Googleの道路上の交通状況を重ね、緑は順調、オレンジは混雑、赤は渋滞、濃い赤ほど低速を示します。拡大して確認してください。経路が重なって見づらい場合は「経路の線」をオフにすると渋滞情報を見やすくできます。候補や所要時間はそのまま残ります。交通状況はGoogle側で更新されますが、瞬時の反映や全道路の情報が保証されるものではありません。ルート検索の確認時刻と交通状況の更新時刻は別です。

地図は初めて表示ボタンを押したときに読み込み、ページを開いている間は同じ地図を使います。定期確認では経路の線を更新します。地図の読み込みはRoutes APIとは別の料金枠で、アプリの検索回数制限には含まれません。Google公式料金表で確認できます。

地図表示用キーはブラウザからGoogleへ送られるため、ウェブサイト制限とAPI制限が必要です。Routes API・音声APIのキーとAPP_TOKENはGoogleマップに渡しません。

有料道路料金の表示

候補ルートごとに、普通乗用車・ETC2.0を指定したGoogleの概算料金を表示します。日時を指定した検索でも同じ条件で取得します。実際の請求額と異なる場合があり、料金が取得できない経路を0円とは表示しません。

料金は経路検索と同時に取得します。料金計算を含む検索はGoogleのCompute Routes Enterprise区分になり、交通状況のみを調べる場合とは無料枠・単価が異なります。2026年9月19日確認の従量課金では月1,000回まで無料、超過分は最初の料金段階で1回0.015米ドルです。同じ請求先の他プロジェクトの利用も合算され、地図・音声は別料金枠です。最新の公式料金表

参照資料

• Google Maps Platform料金
• 有料道路料金の仕様
• 代替経路の仕様
• Apple：時刻オートメーション
• Apple：ショートカットからAPIを呼ぶ