Gatsby製ブログで自然言語処理して関連記事を表示する

2020/06/12

Gatsby で作ったブログに関連記事機能がほしいと思い，記事間の関連度を算出する「gatsby-remark-related-posts」というGatsbyプラグインを作りました．

プラグインの使い方等は README に書いてあります．

ここでは，このプラグインを作るに至った背景や，内部のアルゴリズムについて書こうと思います．

背景

これは，当ブログを閲覧している人の行動フローです．

ご覧の通り， 記事へ直接アクセス → 離脱 という人が大半です．

それもそのはずで，これまでの私のブログには，各記事から他の記事へのリンクがありませんでした．

各記事には トップページへ戻る ためのリンクしかなかったため，離脱者が多いのは当然です．

そこで，各記事の最後に 関連記事へのリンク を設置することで，離脱率を軽減したいと考えました．

既存の手法

記事のカテゴリやタグを使う

上記の手法では，いずれも記事のカテゴリやタグによって関連記事を表示しています．しかし，各記事のカテゴリやタグをうまく設定するためには，それなりのセンスと労力が必要です．

タグの種類は適切な量か？
- 種類が少なすぎると記事をうまく分類できない
- 種類が多すぎるとタグ付けが難しくなる
カテゴリはすべての記事をうまく分類できているか？
- 複数のカテゴリに属する記事は無いか
単語が表記ゆれしていないか？
- 開発，プログラミング，コーディング
- Node.js，Nodejs，nodejs，Node，js…

上記のようなことを気にしながらカテゴリやタグを保守していくのはしんどそうなので，今回は別のアプローチをとることにしました．

Hugoの関連記事機能を使う

GatsbyでRelated Content(関連記事)を表示する / Hugoの関連記事機能をGatsbyに移植した

Go言語製の静的サイトジェネレーターであるHugoには，デフォルトで関連記事を表示する機能があるらしいです．上記の手法では，その機能をGatsbyに移植しています．記事間の関連度を計算するアルゴリズムについて次のように述べています．

記事の全文を解析するようなガッツリした機能ではなく、マークダウンのFront Matter（日付、タイトル、タグ、キーワード、カテゴリなど）をもとに関連度を測るシンプルな機能です。

GatsbyでRelated Content(関連記事)を表示する / Hugoの関連記事機能をGatsbyに移植した

先程の記事に比べると少し凝っていますが，やはり記事のカテゴリやタグ情報に依存しているようです．そのため，先程と同じ理由でパス．

tf-idfによるキーワード抽出

gatsby-remark-extract-keywords

tf-idfを用いて，記事の全文からキーワードを抽出するというものです．キーワードが自動的に抽出できれば，あとは同じキーワードを持つ記事同士を関連記事とすれば良さそうです．

しかし，以下のような問題があったため，このプラグインは使えませんでした．

日本語に対応していない
複数記事に対応していない（？）
- READMEに「私達のコンテキストでは，if-idfにおける文書数は1だけです」的なことが書いてある
  - 実装もそうなっている
- （そもそも文書が1つしかないなら，idfを計算する意味とは…？）

アルゴリズムと実装

既存の手法では目的が達成できなさそうだったので，Gatsbyプラグインを自前で実装することにしました．

記事間関連度の算出アルゴリズム

保守や管理でラクをするためには，やはり記事全体を自然言語処理して記事間の関連度を算出するのが良さそうです．

言語処理に関してはまったくの素人なのですが（予防線），ざっくりと勉強してみました．その結果，基本に忠実に tf-idf と コサイン類似度 を用いることにしました．

日本語記事を分析するときの，具体的なアルゴリズムは次の通りです．

各記事を形態素解析して，単語をリストする
- ここで，単語のタイプが「一般」と「固有名詞」であるものだけをリストする
- 助詞や記号などが除かれるので，関連度の精度向上が見込める
各記事のすべての単語について，tf-idfを計算する
各記事で，tf-idfの高い上位n件の単語を取り出す
- nはデフォルトで30，プラグインのオプションで指定することもできる
取り出した単語をBoW（bag of words）して，記事の特徴ベクトルとする
記事間の関連度は，各記事の特徴ベクトルのコサイン類似度とする