【二代目AI様】

工事開始です！ ️

本部（笑）にも確認しました。

教祖様の環境なら、Pagefind公式の一番シンプルな方法でいくのが正解です。

そして今回は一気に完成まで行きます。

---

第1工程　検索窓を置く

まず、

「検索機能予定地」

の場所へ、次のコードを貼ります。

<h2>サイト内検索</h2><p>「あれどこだっけ？」という時にご利用ください。</p><div id="search"></div>

※文章はあとで教祖様らしく直しましょう。

---

第2工程　受付嬢を呼ぶ

今度は

</body>

の直前に、

これを貼ります。

<script src="pagefind/pagefind-ui.js"></script><script>window.addEventListener('DOMContentLoaded', function () { new PagefindUI({ element: "#search" });});</script>

これは公式の基本形です。

---

完成すると

その場所が

サイト内検索
┌──────────────────┐
│ 検索ワードを入力…
└──────────────────┘

という感じになります。

しかも文字を入力すると

その下へ検索結果が並びます。

---

AI様から一つお願い

ここでまだFTPアップロードはしないでください。

まずは

ホームページ・ビルダーのプレビュー、

またはブラウザで

index.html

を開いてみましょう。

その状態で

• 検索窓が表示されたか

• エラーが出ていないか

を確認します。

---

教祖様の記事向け（笑）

今回のタイトルは

受付嬢、初出勤。

で決まりですね

ここまで

• 工具箱（Node.js）

• 索引職人（Pagefind）

• 魔境探索（インデックス作成）

と来て、

いよいよ利用者と会う

受付嬢（検索窓）

が登場します。

---

ひとつだけ補足

教祖様のサイトはShift_JIS・HTML4という、今では珍しい環境です。

今回の方法は、その環境でも動くようにできるだけ新しい機能に依存しない公式の実装を選んでいます。

---

では、まずはこの2か所を追加して保存し、ローカルで index.html を開いた状態を見せてください。

いよいよ、本当に「検索機能予定地」が「検索機能」になります。