自然言語処理プラグインを使ってGatsbyのブログに関連記事を表示させる

はじめに

他のブログサイトのように、このブログにも関連記事を表示させる機能が欲しかった。

はじめはブログのタグを使って関連度を計算して表示させようかと思っていたが、めんどくさくなったのでプラグインを探すことにした。

すると、gatsby-remark-related-posts v2というプラグインを見つけた。

自然言語処理をすることで記事同士の関連性を計算して、関連記事を生成してくれるようだ。

[閑話]自然言語処理について

自分は自然言語処理については素人なので、少し調べてみることにした。

参考にしたのはこちらの記事。

自然言語処理の基礎である形態素解析からbowによるベクトル化、TF-IDFによる重み付けまで解説

形態素解析によって文字を分解し、TF-IDFというベクトル化の手法でそれぞれの文字の頻出度と重みづけの計算をする、というのが基本的な方法の1つのようだ。

今回使うプラグインのgatsby-remark-related-postsもTF-IDFと、コサイン類似度というものを使っているらしい。

閑話休題

Gatsbyでの使い方

では、gatsby-remark-related-posts v2の使い方を見ていこう。基本的には公式のドキュメントに沿っていけば問題ない。

まずはgatsby-config.jsにプラグインの設定をする。

// gatsby-config.js
plugins: [
  {
    resolve: 'gatsby-remark-related-posts',
    options: {
      doc_lang: 'ja', // 日本語記事なのでjaを設定
      target_node: 'MarkdownRemark',
      getMarkdown: (node) => node.rawMarkdownBody,
      each_bow_size: 30, // TF-IDFで重みづけの大きい上位30件の単語を使用する
    },
  },
]

次に、gatsby-node.jsの記事ページを作成する箇所でcontextにidを追加しておく。これが関連記事の親記事のidにあたる。

// gatsby-node.js
createPage({
  path: post.node.fields.slug,
  component: blogPost,
  context: {
    id: post.node.id, // これを追加
    slug: post.node.fields.slug,
    previous,
    next,
  },
})

これで設定が完了した。以下のクエリで関連記事を取得できるようになった。

// $idがgatsby-node.jsで設定したidになる
export const query = graphql`
  query BlogPostQuery($id: String!) {
    relatedMarkdownRemarks(parent: {id: {eq: $id}}) {
      posts {
        frontmatter {
          title
        }
        fields {
          slug
        }
      }
    }
  }
`

// 関連度の高い上位3件を表示
const relatedPost = data.relatedMarkdownRemarks.posts.slice(0, 3).map(post => (
  <li key={post.fields.slug}>
    <Link to={post.fields.slug}>{post.frontmatter.title}</Link>
  </li>
))

おわり

プラグインを使うことで自然言語処理による関連記事の表示が簡単に実現できた。

ちなみにこの記事の関連記事はこんな感じになった。本当に関連しているかどうかは自分にもわからない。