Pages Visual Check: Drawer（TOC）で現在位置が可視領域外になる問題の検出/改善

[ootakazuhiko]

公開画面（GitHub Pages）のモバイル表示で Drawer（TOC）を開いた際、現在位置（.toc-link.active）が表示領域外にあり、ユーザーが手動スクロールしないと「現在どこを読んでいるか」を確認できないケースがある。

直近で Pages Visual Check に captureSidebar を導入したため（Issue #120 / PR #121）、この E2E を活用して以下を自動検出・改善する。

目的

• Drawer を開いた直後の状態で、.toc-link.active が Drawer の可視領域内にあることを保証する（UX改善）。
• 併せて E2E で「可視領域外」を自動検出し、warning として report に残す。

TODO

• E2E（tools/pages-visual-check）に DOM 検査を追加（PR Pages Visual Check: Drawer（TOC）の現在位置が可視領域外になる問題を検出 #123）
  • Drawer を開いた直後（※強制 scrollIntoView 前）に .toc-link.active の可視性を計測
  • 可視領域外の場合は warn（例: toc active not visible in sidebar viewport）
  • report.json に計測値（scrollTop/clientHeight/activeRect など）を保存
• index.html に warn の根拠が分かる情報を表示（report の値を表示するだけで可）（PR Pages Visual Check: Drawer（TOC）の現在位置が可視領域外になる問題を検出 #123）
• docs: tools/pages-visual-check/README.md に検査内容を追記（PR Pages Visual Check: Drawer（TOC）の現在位置が可視領域外になる問題を検出 #123）
• book-formatter 側で Drawer open 時に .toc-link.active を自動的に scrollIntoView する仕組みを追加（PR pentest-learning-book を書籍ラインナップに追加（公開方針/Pages/学習パス） #85）
• 各書籍へロールアウト（各書籍の docs/_layouts/book.html に同等の処理を追加）
  • PR一覧: コメントで管理（全28冊マージ済み / 2026-02-17）
• ロールアウト後に main で Pages Visual Check を実行し、warn が解消していることを確認
  • local run (2026-02-17): books=28 pages=224 ok=224 warn=0 fail=0 globalWarn=0

Refs:

• Issue Pages Visual Check: ナビゲーション（TOC/前へ次へ）確認のE2E強化 #120: Pages Visual Check: ナビゲーション（TOC/前へ次へ）確認のE2E強化 #120
• PR Pages Visual Check: TOC/ナビゲーション確認を強化（sidebarスクショ/active検証） #121: Pages Visual Check: TOC/ナビゲーション確認を強化（sidebarスクショ/active検証） #121
• PR Pages Visual Check: Drawer（TOC）の現在位置が可視領域外になる問題を検出 #123: Pages Visual Check: Drawer（TOC）の現在位置が可視領域外になる問題を検出 #123
• book-formatter PR pentest-learning-book を書籍ラインナップに追加（公開方針/Pages/学習パス） #85: Drawer（TOC）: open時に現在位置を自動スクロール book-formatter#85

[ootakazuhiko]

PR #123 ブランチで全書籍（mobile / captureSidebar=true）を実行しました。

• run: https://github.com/itdojp/it-engineer-knowledge-architecture/actions/runs/22085860399
• summary: books=28 pages=112 ok=83 warn=29 fail=0
• warn は全て "toc active not visible in sidebar viewport"（Drawer を開いた直後に現在位置が表示領域外）でした。

サンプルURL:

• https://itdojp.github.io/podman-book/chapters/chapter15/
• https://itdojp.github.io/github-workflow-book/chapters/chapter17/
• https://itdojp.github.io/linux-infra-textbook2/chapters/chapter-15-infrastructure-as-code/
• https://itdojp.github.io/it-infra-security-guide-book/appendices/afterword/
• https://itdojp.github.io/theoretical-computer-science-textbook/afterword/

次の打ち手として、book-formatter 側で Drawer open 時に active TOC（a.toc-link.active）を scrollIntoView(block=center, behavior=auto) する実装を検討し、適用計画を起票します。

[ootakazuhiko]

PR #123 ブランチで全書籍（mobile / captureSidebar=true）を実行しました。

• run: https://github.com/itdojp/it-engineer-knowledge-architecture/actions/runs/22085860399
• summary: books=28 pages=112 ok=83 warn=29 fail=0
• warn は全て "toc active not visible in sidebar viewport"（Drawer を開いた直後に現在位置が表示領域外）でした。

サンプルURL:

• https://itdojp.github.io/podman-book/chapters/chapter15/
• https://itdojp.github.io/github-workflow-book/chapters/chapter17/
• https://itdojp.github.io/linux-infra-textbook2/chapters/chapter-15-infrastructure-as-code/
• https://itdojp.github.io/it-infra-security-guide-book/appendices/afterword/
• https://itdojp.github.io/theoretical-computer-science-textbook/afterword/

次の打ち手:

• book-formatter 側で Drawer open 時に active TOC（a.toc-link.active）を scrollIntoView(block=center, behavior=auto) する実装を検討し、適用計画を起票します。

[ootakazuhiko]

book-formatter 側の対処PRを作成しました（Drawer open 時の active TOC 自動スクロール）。

• Drawer（TOC）: open時に現在位置を自動スクロール book-formatter#85

次:

• PR pentest-learning-book を書籍ラインナップに追加（公開方針/Pages/学習パス） #85 をマージ後、各書籍へ book-formatter を適用（PR作成）
• Pages Visual Check（captureSidebar=true）で warn が解消するか確認