Skip to content

manuals.md

Latest commit

 

History

History
57 lines (42 loc) · 3.79 KB

manuals.md

File metadata and controls

57 lines (42 loc) · 3.79 KB
Raw

HTML手順書

更新日：2026-09-23。実装の確認基準は、PR #2を取り込んだdevelopの f00a3f2 です。

読み方

アプリを起動して /manual/index.html を開きます。サーバーなしで読む場合は chros/public/manual をフォルダーごと保存し、index.html をブラウザーで開いてください。 GitHubのファイル画面ではHTMLソースが表示されます。GitHub Pages等の公開設定は含めていません。

  • 第1部：大会運営：準備、参加者、2戦記録、勝因、訂正・再試合、本戦、掲示、記録保存。
  • 第2部：開発：初回起動、構成、変更、検証、会場起動、保存・復旧、調査、資料更新。

画像の拡大、目次、印刷ボタンを用意しています。スマートフォンでは目次を本文の前へ移し、 横長の表は表の内側でスクロールできます。JavaScriptなしでも本文と画像は読めます。

作成時の判断

判断 理由
2部と共通の入口を作る 当日の運営と、開発・復旧の読者を分ける
操作場所・手順・完了の目印を一組にする ボタンを押した後に何を確認するか分かるようにする
11枚の実画面をHTML内へBase64で埋め込む PNG/JPEG等のバイナリをGitへ追加しないという依頼者の指定
図はテキスト形式のSVGにする Gitで差分を確認でき、拡大しても文字が読める
外部配信のフォント・ライブラリーを使わない 会場LANやオフラインでも資料を読めるようにする
本番データと別の保存先で撮影する 実大会の参加者情報や進行状態を変更・掲載しない
計算方式を「現在の試作」として説明する 採用した判断と、全大会の公式規則を混同しない
設計の細部は既存Markdownへ残す 手順書を当日の操作と開発の入口に集中させる

スクリーンショットの更新

元のPNG・JPEG・WebPはリポジトリの外に撮影し、画像の識別名を指定して埋め込みます。

node scripts/embed-manual-image.mjs chros/public/manual/operations.html score-entry /tmp/new-score-entry.png
pnpm format
pnpm format:check

識別名はHTMLの data-screenshot にあります。更新されるのは該当する画像の src だけです。 構図や内容が変わった場合は、代替テキスト・寸法・キャプションも更新します。 元画像の追加は不要です。SVG図は assets/*.svg を直接編集します。

HTML・CSS・JavaScriptは通常の整形検査に含めています。画面の文言、リンク、画像の拡大、 狭い画面、印刷プレビュー、オフライン表示を確認してから変更を提出してください。

文章・体裁をGeminiで確認した際の指摘と対応判断は、 レビュー記録に残しています。

作成時の確認

  • 本番ビルドと、本番サーバーからの3ページの配信を確認。
  • PC幅1440px・スマートフォン幅390pxで、ページ全体の横はみ出しがないことを確認。
  • 11枚の埋め込み画像、目次・資料間リンク、画像の拡大・原寸表示・Escでの終了を確認。
  • 外部通信を止め、JavaScriptを無効にしてHTMLを直接開いても本文・図・画像を閲覧可能。
  • A4印刷の全ページを画像化し、図表・ページ番号・改ページを確認。確認用PDFやPNGはGit対象外。
  • 埋め込みツールの正常更新、他のHTMLを維持すること、不明な識別名・不正な画像で更新しないことを確認。