makenowjust-labs/blog

Pagefindとは静的サイトで動作する (バックエンドのサーバーを必要としない) 全文検索エンジンです。

このブログにPagefindによる全文検索機能を導入しました。 右上の虫眼鏡ボタンをクリックすると、検索用のダイアログが開くはずです。

この記事では、どのようにしてNext.js製のサイトにPagefindを導入したのかを説明します。

このブログは現在 (2023年12月11日付) Next.jsで実装されています (移行の際の記事)。

これまでは実装にPages Routerを使っていました。 最近「カテゴリ機能」(現在は「タグ機能」) を追加したのですが、その際にカテゴリの一覧の取得をすべてのページのgetStaticPropsで行わなければならず、不便に感じていました。 そうした問題の解消のために、App Routerへと移行しました。

他にもOGP画像の生成にsatoriを使うようにしたり、GitHub PagesへのデプロイをGitHub Actionsで成果物をアップロードする形にしたり、色々と修正をしました。 それらの実装を通じて学んだことを、この記事では整理します。

commlogはこれまでNuxt 2を利用してきました。 しかし、Nuxtは2022年11月にNuxt 3がリリースされており、Nuxt 2はVue 2と共に2023年12月末をもってサポートが終了されることが発表されていました。 commlogの大部分のコードを書いたのは5年以上前になっているということもあり、コードをメンテナンスすることが困難になっていました。

そこで今回、commlogを完全に書き直すことでNuxt 3に移行しました。 その記録を、この記事では報告します。 また、Nuxt 3の他にTailwind CSSやMock Service Worker (msw)、Bun、Netlify Buildなどの、様々なライブラリ・開発ツールを利用して開発を進めました。 これらにより、モダンな構成にできたのではないかと考えています。

前々から課題として感じていた、このブログの OGP 画像の自動生成を実装しました。 OGP 画像は Twitter などの SNS にシェアするときに表示される画像です。

この記事では自動生成の実装や、skia-canvas や budoux といったライブラリを利用して、タイトルの自動改行や高速な生成を実現したので、それらについても解説します。

JavaScript のソースコードを小さくする方法として UglifyJS や Terser といった minification ツールを用いるものが良く知られています。 これらはソースコード中の空白やコメントを削除し、変数名などを短い形式にすることで、ソースコードを小さくしています。

こういった minification ツールを適用し、さらに GZip などで圧縮して配信するのが今日の Web での標準的な方法となっています。 ですが、JavaScript を圧縮できる可能性のある方法として、自己解凍的な圧縮技術を用いる、というアイディアがあります。

この記事では、そういった自己解凍的な圧縮技術として JS Crush や Roadroller について紹介します。