フロントエンド技術が変える静的Webサイトの世界（3）―検索機能を持った静的Webサイトの実装― 今あなたが見ているWebサイトは動的に見えて実は静的？ 前回は、既存のコンテンツ配信型Webサイトにインタラクティブな機能を組み込むための準備としてプロジェクトテンプレートと環境構築方法について説明しました。 今回は、いよいよ、簡易検索機能の組み込みについて説明します。 前提 本記事を執筆するにあたっては、以下の環境で動作確認を行っています。前回と同様です。 OS: Windows 10 (21H1) Node.js 14.17.6 Webブラウザー: Google Chrome 93.0.4577.82または、Microsoft Edge 94.0.992.31 ベースとするWebページ ある会社のWebサイトのコラム一覧を表示する既存のページに簡易検索機能を追加します。Webサイトのサンプ
個人で運用している静的サイト（Next.js、SSGで利用）としてホスティングしているサービスにサイト内検索を特に難しいことを考えることなく実装できないかと考えていた時、Pagefindという全文検索ライブラリを見つけました。今回は本番環境にこのPagefindを入れてみた感想やHowTo的な話をしていきたいと思います。 Pagefindとは？ Pageindは、大規模なサイトでもパフォーマンスをいい感じに、帯域幅をできる限り使用しないで実現する静的検索ライブラリで、HugoやNext.js、Astro・SvelteKitなどで使用することができます。（詳しくはHPをみてください） 投資できるお金の少ない個人開発者や中小企業がオンラインにWebサービスを公開する場合にはどうしても帯域幅の懸念をしなくてはなりません。 例えばVercelであれば、Proプランで帯域幅1TBまでをサポートしてく
Windowsの場合は2つ目の「Publii.exe」ですが、64bit版しかないのでご注意ください。 使用OSの確認方法 ダウンロードしたファイル（Publii-x.xx.x.exe）をダブルクリックすると、インストールが始まります。 ファイル名に含まれる「x.xx.x」はバージョンを意味します。当記事作成時のバージョンは「0.35.1」です。 画面表示に従ってインストールを済ませます。 Publiiの起動 インストールの時に作成したショートカットアイコン、もしくはスタートメニューのPのところから起動します。 起動するとサイトを作る画面が表示されます。 といっても、サイトの名前と管理者名を入力して「Create website」をクリックするだけです。 Publiiではサイト作成に必要な画面を左側のメニューで切り替えるようになっています。 尚、作成したサイトのデータは、以下の場所に保存さ
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 でのコンテンツと一緒にインデックスファイルも同時に書き出し、クライアント側の JavaScript で日本語のキーワードを検索をします。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
