静的サイトに特化した検索ライブラリ Pagefind を試す | grip on minds
Pagefind は静的サイトであれば（HTML ファイルさえあれば）、基本的にどのようなサイトであっても以下の 2 ステップで導入できます。 Pagefind をインストールし、検索用ファイルを生成する Pagefind の UI を読み込み、インスタンスを作成する まず、検索用のインデックスファイルを生成します。本サイトのフレームワークは Astro を使用しているので、Astro のビルドと連携させるために npm パッケージをインストールします。 Pagefind の npm パッケージをインストールするコマンド npm install pagefind 次に、Astro のビルド後に Pagefind CLI を実行するように、npm-scripts を記述します。 package.json に記述する npm-scripts の例 { "scripts": { "build":
Hugo に全文検索（インクリメンタルサーチ）の機能を付ける
ここでは、Hugo サイトに全文検索の機能を付ける方法を説明します。 全文検索を実現する方法としては、Google カスタム検索を導入する方法もありますが、Google カスタム検索は、インターネット上に公開する Web サイトにしか適用できません。 ここで紹介する JavaScript を利用した全文検索は、ローカルで運用する Web サイトでも利用できますし、インクリメンタルサーチも実現することができます（実際のサイトの例）。 図: 全文検索＋インクリメンタルサーチの完成イメージ大まかに、下記のようなコードを含む HTML ファイルを出力できれば、サイト内の全文検索を実現することができます。 検索用 JavaScript データ (const data = [...])検索用 HTML フォーム (<input>)検索用 JavaScript 関数 (function search()
コピペでOK！Vue.jsでリアルタイム検索をつくる方法
さてさて、この頃Laravel情報ばかりを記事にしているということで前回記事ではVue.jsの話題をお届けしました。ということで今回もその流れに乗ってVue.jsで知っておくととても便利なテクニックをご紹介したいと思います。 内容としては、「リアルタイム（オフライン）検索」です。 例えば以下のようなウェブページを想像してみてください。 ある施設をリスト表示する リスト上部にある検索ボックスで検索ができる その検索ボックスに入力した時点で該当するデータだけ表示する つまり、検索はJavaScript側でするので毎回Ajax通信する必要がありません（オフラインで完結）。だから、とても高速に検索ができるというわけですね。 ※ただし、ページが読み込まれる時点で全てのデータを用意する必要があるのであまりにもデータが多い場合はリアルタイム検索は向いてるとは言えません。その場合は通常通り１ページずつデー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
