Ride on QC — ブルベ キューシート生成ツール
GPXファイルと主催者配布のExcelキューシートから、iPhoneで見やすい単一HTML（簡易版＋詳細版・オフライン動作・ダークモード対応）を自動生成する静的Webアプリです。
すべての曲がり角に詳細地図が付き、通過予定時刻の天気と風向き（追い風／向かい風）を表示します。
- バックエンド不要。GitHub Pages / Cloudflare Pages にそのまま置けます
- ファイルはブラウザ内だけで処理します。外部と通信するのは地図タイル（地理院タイル／OpenStreetMap）と天気予報（Open-Meteo）の取得時だけで、送るのは地点の緯度経度のみです
- 元になった仕様は
docs/spec.md
使い方
- ツールを開く（手元で動かす場合は
app/index.html。サンプル読込を使うならローカルサーバ経由）
- STEP1 GPX（必須）とExcel（任意）をドラッグ＆ドロップ
- STEP2 シート種別（簡易／詳細）と列の対応を確認（自動推定済み。違っていればプルダウンで修正）
- STEP3 大会名・出走日時・想定速度などを設定して「キューシートを生成する」
- STEP4 プレビューを確認して「HTMLをダウンロード」
生成物は単一HTMLなので、iPhoneの「ファイル」アプリやDropbox等に置いておけば、圏外でも閲覧できます。
ローカルで動かす
cd ride-on-qc
python3 -m http.server 8000 # http://localhost:8000/ … 紹介ページ
# http://localhost:8000/app/ … ツール本体
file:// で直接開いても動作しますが、「サンプルデータで試す」だけは fetch が使えないため利用できません。
公開する（GitHub Pages）
ビルド不要の静的サイトなので、このリポジトリをそのまま公開できます。
Settings → Pages → Source を「Deploy from a branch」、Branch を main / / (root) に設定します。
生成されるHTMLの機能
| 簡易版 | 詳細版 |
|---|
| 表示対象 | PC・通過チェック・Start/Goal | 全ての曲がり角＋CP |
| 距離・Open/Close | ○ | ○ |
| ETA（速度連動・Close余裕で色分け） | ○ | −（天気パネル内でのみ使用） |
| 休憩・仮眠の加算（以降のETAを一括シフト） | ○（0〜24時間） | − |
| 距離補正ステッパー（±0.1／±1km） | ○ | ○ |
| 天気・地図パネル（タップで初めて通信） | − | ○ |
| ダークモード（OS設定に追従） | ○ | ○ |
| 日出・日没の自動計算 | ○ | − |
- 速度・距離補正・出走日時・休憩時間は
localStorage に保存され、次に開いたときも復元されます
- 天気は Open-Meteo（APIキー不要）、地図は OpenStreetMap の埋め込みを閲覧時に取得します
- 印刷用スタイルを同梱（設定バー・天気パネルは印刷されません）
iPhoneで見るとき（重要）
生成したHTMLを「ファイル」アプリからChrome／Edgeで開くと、ブラウザは edge://external-file（Chromeは chrome://external-file）という内部スキームで表示します。
iOSはこの状態からの外部通信（fetch・iframe）を一律で禁止しているため、天気と地図は表示できません。ネットワークやプロキシの問題ではありません。
| 開き方 | キューシート・ETA・距離補正 | 天気・地図 |
|---|
| 端末内のファイルとして開く（オフライン可） | ○ | 埋め込んでおけば○（していなければ×。地図アプリへのリンクは使えます） |
| https のURLから開く | ○ | ○ |
天気と地図を埋め込む（この制限への対処）
閲覧時に取りに行けないなら、生成時に取って埋め込んでおけば同じことができます。STEP3の設定で選べます。
- 天気予報を埋め込む（既定ON）：コース上をおよそ20kmごとにサンプリングし、開催日を含む期間の毎時予報を
1リクエストで取得してHTMLに格納します（十数地点×48時間で20KB程度）。閲覧時は速度・休憩から求めたETAに応じて
該当時刻の値を表示するので、オフラインのままでも速度を変えれば表示が追従します。取得時刻を併記します。
開催16日前から埋め込めます（Open-Meteoの予報範囲）。
- ルート略図（常に全地点・数十KB）：GPXの線形から、その地点の前後250mのコース形状をSVGで描いて埋め込みます。
灰＝手前、赤＝進む向き、矢印と縮尺バー付き。地図画像を入れない地点でも、これで曲がり方は判断できます。
地図タイルを埋め込んだ地点では、地図の上にこの線を重ねて描きます。
- 地図画像を埋め込む（既定：CPのみ）：地理院タイル（淡色地図）を
地点ごとに320×192pxぶん取得し、data URIとして格納します。1タイル約16KB・1地点あたり4〜6枚（重複は共有）。
CPのみなら1MB前後、全地点だと数MBになります。日本国内のみ（範囲外の地点は埋め込みをスキップします）。
詳しさ（z15/16/17）も選べます。z15にすると隣り合う地点でタイルを共有しやすく、全地点でも小さくなります。
出典は生成物に明記されます。
埋め込みがある場合の優先順位は「通信できるなら最新の予報 → 駄目なら埋め込み」です。
ただし端末内のファイルとして開いているときは、待たせずに埋め込み分を先に表示し、通信できた場合だけ裏で最新に差し替えます。
地図は、埋め込みタイルがあれば常にそれを表示し、無ければルート略図を出したうえで、通信できるようならOpenStreetMapの地図に差し替えます。
なお iOSのChrome／Edgeはアドレス欄に edge://external-file と表示しますが、ページ自体は file: として動きます。
そのため生成物は「file: なら通信できない可能性が高い」前提で、待たせずに埋め込み分を先に出すようにしています。
埋め込みが無い地点では、生成物は状況を検出して待たずに理由を表示し、
OpenStreetMap／Apple マップ／Googleマップへのリンクを出します（リンクは内部スキームからでも開けます）。
天気・地図も使いたい場合は、生成したHTMLを https で開ける場所に置いてください。
GitHub Pages を使っているなら、生成物をリポジトリの適当なディレクトリ（例: sheets/）に置けばそのままURLになります。
電波の無い区間に備えるなら、同じファイルを端末内にも保存しておく運用（オンラインではURL版、圏外ではファイル版）が確実です。
入力データの扱い
GPX
RideWithGPS等の書き出しを想定。trkpt から Haversine距離を積算して累積距離配列を作り、wpt はコース上の位置（km）とコースからの離れ具合を計算して保持します。
Excel（主催者ごとに書式差が大きい）
自動推定したうえで、STEP2で必ず確認できるようにしています。対応済みのゆらぎ：
- シート構成：1シートのみ／簡易＋詳細の2シート／説明資料シート混在
- 距離：積算距離のみ／区間距離のみ（積算を自動復元）／
40.6km のような文字列
- 時刻：Excelシリアル値（
0.75＝18:00）／24時間超の [h]:mm（1.35＝32:24）／日付込みシリアル（46208.005…）／12日 08:12／9/12 8:12／翌03:00／3日目 05:00
- Open/Close：両方あり／Closeのみ／時刻なし（ACP基準で補完可）
- 種別：種別列から判定／地点名のキーワード（PC・通過・写真・クイズ・Start・Goal）から判定／詳細シートの進路欄に
PC1 等が入る書式
Open列とClose列はそれぞれ独立に単調増加するものとして日跨ぎを解決します（「次のCPのOpen ＜ 前のCPのClose」で誤って1日進めないため）。
対応を確認した書式
各地の主催者が公開しているキューシートで、実際に読めることを確認したものです（2026年9月時点）。
| 主催者 | 例 | 特徴 | 結果 |
|---|
| AJ北海道 | BRM912函館300 | 2行見出し（「地点までの」＋「区間／積算」）、CP名が道標欄 | CP 8／時刻 8/8 |
| AJ静岡 | BRM328・425・530・627 | 「通過点／進路／ルート／区間／合計」、時刻が「7:16〜9:09」の範囲表記 | CP 7〜8／時刻ほぼ全件 |
| AJ神奈川 | BRM531興津200 | 英語見出し（CUE/PC/TRIP/ADD/POINT NAME/DIR/SIG/RT）、時刻はシリアル値 | CP 7／時刻 7/7 |
| AJたまがわ | BRM411大洗200 | Control1 表記、時刻は「OPEN 07:55 CLOSE 09:33」 | CP 8／時刻 8/8 |
| オダックス埼玉 | BRM118/208/606 | 「合計」列、時刻が「参考10:45」「参考11:45」と別列に分離 | CP 4〜10／時刻全件 |
| （青森） | BRM919岩木山200 | 進路が矢印記号、時刻が備考欄の文中、交差点形状の列 | CP 6／時刻 4/6 ※ |
※主催者が通過チェックの時刻を書いていないもの。その地点だけACP基準で補完し「（推定）」と表示します。
見出しから積算距離の列が判別できない場合（AJ神奈川の ADD など）は、
数値列を単調増加・値域・小数の有無で評価し、GPXの総距離と突き合わせて自動で選び直します。
読めなかった例：一部のアプリ（HCell等）が書き出した、要素名に名前空間が付いた xlsx
（<x:worksheet>）。SheetJSが対応していないため、Excel・Googleスプレッドシート・LibreOffice で
開いて保存し直すと読めます（その旨を画面に表示します）。
GPXだけでも生成できます
Excelが無い場合は、
- GPXのウェイポイント名（
PC1…, 通過C1… など）＋始終点からCPを構成
- Open/Close を ACP基準（上限34/32/30/28km/h・下限15km/h、認定距離ごとの制限時間）で補完
- 曲がり角をGPXの方位変化から自動抽出（進路とアイコンのみ。道路名・ランドマークはExcelの記述が必要）
これらを使った場合は生成時に警告が出ます。必ず主催者の公式キューシートで確認してください。
座標マッチング
単純な最近傍スナップではなく、線形補間で求めています（仕様書5章）。
trkpt 列から累積距離配列 cum[] を作成（Haversine距離の積算）scale = Excel総距離 / GPX総距離 でスケール補正- 目的距離
d に対し d / scale が入る区間を二分探索
- 区間内を線形補間して緯度経度を算出
- 進行方位はその地点から先およそ200mの区間から算出（天気パネルの向かい風／追い風判定に使用）
- CP名がGPXのウェイポイント名と一致した場合（バイグラム類似度0.5以上・距離差2km以内・コースから300m以内）は、そのウェイポイント座標を優先
STEP4の「座標マッチング結果」で、各地点の座標・方位・取得方法（距離補間かウェイポイントか）を確認できます。
ディレクトリ構成
ride-on-qc/
├── index.html 紹介ページ（GitHub Pages のトップ）
├── assets/ 紹介ページ用（site.css・アイコン）
├── make_icon.py アイコンの生成スクリプト
├── app/ ツール本体（ここが実体）
│ ├── index.html
│ ├── assets/app.css
│ ├── js/
│ │ ├── util.js 距離・方位・時刻・日出日没
│ │ ├── offline.js 天気予報・地図タイルの取得（オフライン埋め込み用）
│ │ ├── gpx.js GPX解析／累積距離／線形補間／方位
│ │ ├── turns.js 曲がり角の自動抽出
│ │ ├── xlsx-import.js Excel読取・見出し/列推定・時刻パーサ
│ │ ├── match.js Excel×GPXの突き合わせ・ACP時刻計算
│ │ ├── template.js 出力HTMLテンプレート（CSS＋ランタイム）
│ │ └── app.js 画面制御
│ ├── vendor/xlsx.full.min.js SheetJS 0.18.5（同梱：オフラインでも動くように）
│ └── samples/ デモ用の架空コース（GPX＋書式違いのExcel 6種）
│ 標準／区間距離のみ／2行見出し／矢印＋文中時刻／英語見出し／Audax標準型
├── tests/
│ ├── make-samples.mjs サンプル生成
│ └── e2e.mjs Playwrightによる通しテスト
└── docs/spec.md 仕様書
開発
node tests/make-samples.mjs # サンプルGPX/Excelを再生成
node tests/e2e.mjs # 通しテスト（要 playwright）
OUT_DIR=./out node tests/e2e.mjs # 生成物とスクリーンショットの出力先を指定
tests/e2e.mjs は、サンプル読込 → 列の自動推定 → 生成 → プレビュー操作（速度・距離補正・休憩・タブ・天気パネル）→ ダークモード → GPX単体生成までを検証します。
既知の制約
- 道路名・ランドマーク注記はExcelの自由記述に依存します。Excelに無い場合は自動生成できません
- 天気予報は開催の概ね16日前から（Open-Meteoの仕様）。範囲外のときは地図のみ表示します
- 地図・天気パネルの閲覧にはネット接続が必要です（キューシート本体はオフラインで閲覧可）。
api.open-meteo.com と www.openstreetmap.org に届かない環境（オフライン、社内・庁内プロキシやURLフィルタ）では
地図が白いままになり、天気は10秒でタイムアウトします。その場合はパネルに理由と再試行ボタンが出ます
- iOSのChrome／Edgeで端末内のファイルとして開いた場合、天気と地図は表示できません（上記「iPhoneで見るとき」参照）
- 主催者のExcel書式は今後も新しいパターンが出るため、STEP2での目視確認を前提にしています
- 生成HTMLは端末のタイムゾーンで時刻を扱い、天気は
Asia/Tokyo で取得します（国内開催を想定）
ライセンス
このリポジトリのコードは MIT License です（LICENSE）。
vendor/xlsx.full.min.js は SheetJS Community Edition 0.18.5 を
同梱したものです（Apache License 2.0）。オフラインでも Excel を読めるようにするためで、
再配布する場合はこの表示を残してください。
