コンテンツにスキップ

全文検索とショートカットキー

大量の技術ドキュメントを調べるとき、目的の設定項目やパラメーターを素早く見つけられることが重要です。EpoCanvas Docs には2 モードの検索が組み込まれています。トップバーの検索ボックスは現在のページ内での素早い位置特定を担当し、Ctrl+K のダイアログはサイト全体のすべてのドキュメントを検索します。どちらの検索もブラウザー内で完結し、バックエンドサービスは一切不要なため、インターネットに接続されていないイントラネット環境でサイトをホストしている場合でも利用できます。


2 つの検索の使い分け

シーン使う検索操作方法
ある記述がこの記事の中にあると覚えているときページ内検索トップバーの検索ボックスをクリックしてキーワードを入力
内容がどの記事にあるか分からず、サイト全体から探したいときサイト全体検索Ctrl + K(Mac は Cmd + K)を押す

ページ内検索:トップバーの検索ボックス

ページ上部中央の検索ボックス(虫眼鏡アイコン)をクリックして、キーワードをそのまま入力します。

トップバーのページ内検索の注釈図:① 入力ボックス ② マッチ数 ③ 前後への移動 ④ クリア ⑤ ページ内ハイライト

図:トップバーの検索ボックスに「デプロイ」と入力したときの実際の注釈画面。① トップバーの入力ボックス、② マッチ数のカウント(現在 N 件目 / 全 M 件)、③ 前 / 次への移動ボタン、④ クリアボタン、⑤ 現在のページ内でマッチしたすべての文字が自動的にハイライト。

キーワードの入力

日本語の語句(例:「デプロイ」「コンポーネント」)、英語の単語、コードの断片(例:pnpm、astro.config.mjs)に対応しています。入力すると、現在のページ内でマッチしたすべての文字列に即座にハイライト色が付き、ページは最初のマッチ位置へ自動的にスクロールします。

マッチ結果間の移動

  • Enter を押すか下向き矢印をクリック:次のマッチへ移動。
  • Shift + Enter を押すか上向き矢印をクリック:前のマッチへ戻る。
  • 検索ボックス内には 現在 N 件目 / 全 M 件 の進捗カウントがリアルタイムで表示され、閲覧の進み具合を常に把握できます。

検索のクリアとページの復元

Esc を押すか × ボタンをクリックすると、すべてのハイライトが消えてページが元の状態に戻ります。


サイト全体検索:Ctrl+K ダイアログ

どのページにいても、ショートカットキーの Ctrl + K(Mac は Cmd + K)を押すか、検索ボックス右側の Ctrl K バッジをクリックすると、画面中央にサイト全体の検索ウィンドウが表示されます。

サイト全体検索ダイアログの注釈図:① 起動バッジ ② 検索入力ボックス ③ 結果リスト ④ ショートカットキー欄

図:ダイアログに「デプロイ」と入力したときの実際の注釈画面。① 検索ボックス右側の Ctrl K バッジ(クリックでもダイアログを呼び出せます)、② 検索入力ボックス、③ ドキュメントごとにグループ化された結果リスト(ヒットしたキーワードはハイライト表示)、④ 下部のキーボードショートカット案内バー。

キーワードの入力

日本語の語句(例:「デプロイ」「コンポーネント」)、英語の単語、コードの断片(例:pnpm、astro.config.mjs)に対応しています。タイトルにヒットした結果は先頭に並びます。

結果リストの閲覧

結果はドキュメントごとにグループ化され、各行にはドキュメントタイトル、該当する章、キーワードを含む前後の文脈のプレビューが表示され、ヒットした語はハイライトされます。グループの見出しをクリックすると、そのドキュメントのヒットした段落を展開・折りたたみできます。

キーボードだけで操作を完結

  • ↑ ↓:結果間で選択を移動。
  • Enter:選択した結果を開き、対応する段落へ移動。
  • Esc:ダイアログを閉じる。

一連の操作にマウスは一切不要です。


なぜ検索が速いのか

EpoCanvas Docs の 2 モード検索の仕組み比較図:左はトップバーのページ内検索(DOM 走査によるハイライト、リアルタイムカウントとスムーズスクロール)、右はサイト全体検索ダイアログ(Ctrl+K で起動、Pagefind WASM のメモリ上の転置インデックスによる即時マッチング)

図:2 モード検索の動作の比較。左はトップバーによるページ内のキーワードの素早い位置特定、右は Pagefind WASM に基づくサイト全体の静的インデックス検索で、どちらも完全にブラウザー内で動作します。

多くのサイトのドキュメント検索は、リクエストをリモートサーバーのデータベースへ送って照会するため、ネットワークが不安定なときはぐるぐる待たされるばかりです。

EpoCanvas Docs では Pagefind のローカル静的検索方式を採用しています。

  1. ビルド時にインデックスを抽出:pnpm run build を実行すると、システムが各ドキュメントの内容を自動的に取り込み、圧縮済みの静的インデックス分割ファイル一式を生成します。
  2. 必要な分だけ軽量にダウンロード:検索ボックスに文字を入力すると、ブラウザーは対応する文字のインデックス分割ファイルだけを取得します(サイズは数 KB から数十 KB 程度)。
  3. ローカルで即時マッチング:マッチングとソートはすべてブラウザー内で完結するため、ネットワークリクエストの遅延がなく、インターネットに接続されていないイントラネット環境でも完全に利用できます。

検索を便利に使うコツ

  • 語句の分割:より絞り込んだ結果を得たい場合は、複数の語をスペースで区切って入力します(例:Cloudflare ドメイン と入力)。
  • タイトルを優先:ドキュメントのタイトルと章見出しはソート時の重みが最も高く、タイトルにキーワードがヒットした結果は先頭に並びます。
  • 開発モードの制限:サイト全体のインデックスはビルド時にのみ生成され、pnpm run dev の開発サーバーでは Ctrl+K ダイアログがインデックスを読み込まないため、サイト全体検索は使用できません。検索を確認するには pnpm run build を実行し、pnpm run preview でビルド結果を開いてください。ページ内検索はこの制限を受けません。