氷見は「ナショナルサイクルルート」認定の富山湾岸サイクリングコースが通る、自転車天国。でも既存のコース情報はPDFやパンフレットに散らばっていて、現地で「今どこを走ってるの？」がわかりにくい。
このアプリは、氷見市公式の10コースをGoogle Maps上にルート表示。初級・中級・上級のレベルフィルターで絞り込み、距離・所要時間・獲得標高・消費カロリーが一目でわかります。GPSトラッキング機能で走行中のリアルタイム記録も可能。レンタサイクル6拠点の場所・料金・自転車タイプや、コース沿いのトイレ・給水ポイントもマップ上に表示。日本語・英語のバイリンガル対応で、外国人サイクリストにも使えます。
👉 デモアプリを開く （※クリックで全画面表示されます）
📱 使い方
- アプリを開くと地図上に10コースのルートが色分けポリラインで表示される（「EN」ボタンで英語切替可）
- 上部のフィルタ（全て／初級／中級／上級）でコースを絞り込み、下部パネルからコースカードを選択
- コース詳細画面で距離・時間・獲得標高の3統計と立ち寄りスポット一覧を確認し、「Google Mapsで開く」でナビ起動
- 「GPSトラッキング開始」をタップすると走行中の距離・時間・速度・消費カロリーがリアルタイム表示
- 右上の自転車アイコンから「レンタサイクル情報」を確認し、6拠点の料金・システムを確認
💡 ポイント: 7.2km初心者〜70.2kmロングライドまで対応し、日英バイリンガルで訪日外国人にも使えます。
🎯 こんな人におすすめ
- 氷見を訪れる観光客・サイクリスト（国内外）
- レンタサイクルを活用したいファミリー層
- ナショナルサイクルルートを走りたいロングライダー
開発メモ
目的: サイクリングコース情報を「走りながら使えるアプリ」に統合する。
技術: HTML5, Vanilla JS, Google Maps JavaScript API (Directions API), Geolocation API
工夫: ルート描画はDirections APIで事前に取得したencoded polylineをJSONに埋め込む「事前ベイク方式」を採用。ランタイムのAPI呼び出しゼロで、表示速度とコスト効率を両立しています。レンタサイクルは2つの貸出システム（観光協会系・交流センター系）があるため、混乱しないよう注意書きも入れました。
コメント