Features Page

Welcome to the features page

本ページについて

本ページでは，本ブログに搭載した機能について紹介します．

本ブログを読んでくださる方というよりは，開発者の参考になればと考えています．

Next.js でブログを作ることを考えている方はご参考にしてみてください．

気が向くごとに更新します．

利用技術

本ブログは，以下の技術を利用して作っている(左項目は適当)．

また，ここに書ききれていないライブラリ等はこちらに記載した．

機能一覧

記事レンダリング

特徴

• TOC (Table of Content)を右に配置
• 記事に紐付けられたタグを一覧表示（各タグへのリンク付き）

mdx のコンポーネント設定

next-mdx-remote のコンポーネントの設定で，大まかに以下の設定を行った．

• anchor の設定(TOC からジャンプできる)
• code block のシンタックスハイライト
• 内部リンクと外部リンクの区別(new tab で開く)

記事生成スクリプト

これは，Node ではなく ShellScript で解決しています．

ページネーション

ページ分割には，[slug].tsxとは別に[id].tsxという動的ルーティングを準備し，自作しました．

ページ移動ボタン表示には Tailwind のサンプルを改造して作成しました．

タグ機能

MDX の articlemetaにtagsという名前を追加し，また，各記事にtagsというメタデータを追加した上で，記事レンダリング部にタグ一覧を表示．

次に，/tag/[id]というエンドポイントを準備し，該当するタグを持つ記事を一覧できるようにした．

タグのチップに/tag/[id]へのリンクを挿入して，移動を便利にした．

今回は開発速度を考慮して暫定的にこのような構成にしたが，今後タグの絞り込み機能を導入する必要があれば，/tags=[tagname]のように複数タグを選択できるようにしていく必要があるかもしれない．

また，ブログのルートに，LatestPost だけでなく FrequentTags を表示した．

この FrequentTags について，getTagsByThreshold(threshold:number):string[]として，タグリスト取得関数を用意し，コンテンツの増加に耐えられる(コンテンツ増加に対し，使われるタグも増えるので，それに合わせてスレッショルドを変動させられる)ように設計してある．

検索機能

これに関しては，作れそうだったので自作した．

Github Pages で公開する Web サイトは静的サイトなので，デプロイする時点ですべての掲載内容は既知である． つまり，インデクシングをデプロイ前にしてしまえばよいということである．

インデクシングする際には，まず，日/英を分類し，日本語であれば形態素解析から名詞を抽出した．その後，日/英に対してあらかじめ定めたストップワードをフィルタとしてかけ，登場回数を記録した．

ここまでで，各文書にどの単語が何回出現するかが得られた．それは同時に，各単語がどの文書に何回出現するか得られたということを意味する．

検索クエリは訪問者が入力するので，コントロールドなテキストエリアを準備し，それを基に予めインデクシングされたデータから検索する．当初はエンターやアイコンクリックで検索を実行していたが，便利にするためにリアルタイム検索を提供している．

私の方法では，C++などの記号を含むことで意味のある単語が抜け落ちるという弱点があるので，n-gramを使うのもよい手段だと思う．しかし，開発期間の都合上，今回はシンプルな検索エンジンを作った．(今後 n-gram のバージョンも考え，性能に応じてハイブリッドで考えていきたい)

また，タイポに対応するためにも，ファジーな検索を提供するのも本来ならすべきと考えている．（が，個人ブログで曖昧な検索するか一考の余地がある）

Tags Sphere

タグ機能を追加する時に作成した関数等を用いて，すべてのタグを取得後，react-three-fiberを使ってthree.jsの Canvas 上にタグリストを描いた．

タグを球状に散らばらせ，それを一定速度で回転させた．

また，マウスを用いた回転・移動・拡大縮小もできるようにした．

About や Features などの特殊ページ

最初はpages/about.tsxおよびpages/features.tsxを準備し，そこに JSX ベタ書きしていたが，

保守性を考慮して mdx で書けるようにした．

具体的には，documents/about.mdxおよびdocuments/features.mdxを配置し，それらを上記２ファイルから読み込んで表示した．