Gatsbyウェブサイトのブログ記事にコメント欄をつける[CommentBox.io]

前回の記事では、ブログ記事を作成することができました。

ブログ記事にはコメント欄をつけたい人も多いでしょう。でも、Gatsbyで制作したウェブサイトのような静的ウェブサイトでは、コメント欄を直接実装することはできません。

そのため、こうしたウェブサイトにコメントをつけることができるサービスがたくさんあります。ちょっと調べただけでも、以下のようなサービスがありました。

Disqus

タイトル未設定

welcomments.io

Welcomments

ReplyBox

Privacy-Focused Comment System

Commento

Commento: Home

CommentBox

CommentBox.io - No ads. No Tracking. Just Comments.

Hyvor Talk

Hyvor Talk - The Best Commenting Platform For Your Website

CommentBox.ioを使ってみる理由

今回は、CommentBox.ioを使ってみることにしました。

公式ホームページがあんまり更新されていないのが気になりますが、特にデータ収集とかされないようですし、広告も掲載されないようです。

それに、月にコメント100件までなら無料となっています。(重要)

ただし、ウェブサイトを読んでいると、100件を超えると$15請求されそうなのでちょっと注意が必要かもしれないですね。単純にコメントできなくなって、止まってくれる方が安心なのですが。

ひとまず100件を超えることはないので、こちらを使ってみます。

CommentBox.ioの注意点

気になる点としては、何かしらのサービスにログインしないとコメントを投稿できないところですね。Facebook、Twitter、Google、Appleのアカウント、もしくはCommentBox.ioへの登録が必要になります。

ウェブサイトに訪れてくれたユーザーとの信頼関係ができていないと、最初のコメントはなかなか来づらくなるかもしれませんね。

逆に、スパムコメントは抑制されそうではあります。

CommentBox.ioのアカウント作成

さて、それではCommentBox.ioを使ってみましょう。

右上の[Dashboard]ボタンから登録することができます。登録後、メールアドレス宛にVerification Emailが届きますので、そのメール内にあるリンクをクリックして認証しておきます。

CommentBox.ioの設定

あとはDashboardにログインして、設定を行っていきます。

ウェブサイトの名前とそのドメインを追加します。Gatsby Cloudの場合は、上記画像のように、ドメインを記載します。[Email Settings]はコメントがきたときに、Eメールで知らせてもらえるように設定しておきます。

Pricing Plan(料金)はPersonalの無料プランに設定します。

[Moderation Rules]は[Automatic]にしておきます。

Moderationは新しいコメントが来たときに、手動で承認して表示されるようにするか、自動に承認するかが選べます。有料プランにすれば、もう少し細かく設定できるようですね。

残りの設定はOptional(任意)の設定ばかりなので、特に変える必要はありません。最後に、[Create Project]ボタンを押して、プロジェクトを作成します。

プロジェクトが作成され、Project IDが発行されました。あとでソースコードで、このIDを使いますので控えておきましょう。

あとはこれを使ってコメント欄を作成するだけです。

CommentBox.ioの実装

まずはCommentBox.ioをnpmでインストールしておきます。

npm install commentbox.io

次にコメント用のコンポーネントクラスを作成します。CommentBox.ioにあるReact用のサンプルコードをほぼそのまま活用できます。プロジェクトIDは自分のIDに入れ替えておきます。

# src/components/comment.js

import React from 'react';
import commentBox from 'commentbox.io';

class AddCommentBox extends React.Component {
   componentDidMount() {
       this.removeCommentBox = commentBox('プロジェクトID');
   }
   componentWillUnmount() {
       this.removeCommentBox();
   }
   render() {
       return (
           <div className="commentbox" />
       );
   }
}
export default AddCommentBox

最後にGatsbyウェブサイトのブログ記事の一番下に、このコンポーネントを表示してみましょう。AddCommentBoxコンポーネントをインポートして、ページの一番下に追加しただけです。

import * as React from 'react'
import Layout from '../components/layout'
import { MDXRenderer } from 'gatsby-plugin-mdx'
import { graphql } from 'gatsby'
import AddCommentBox from '../../components/comment'

const BlogPost = ( { data } ) => {

 return (
     <Layout pageTitle={data.mdx.frontmatter.title}>
       <MDXRenderer>
         {data.mdx.body}
       </MDXRenderer>

       <AddCommentBox></AddCommentBox>
     </Layout>
 )
}

export const query = graphql`
 query ($id: String) {
   mdx(id: {eq: $id}) {
     frontmatter {
       title
     }
     body
   }
 }
`

export default BlogPost

このコードを追加すれば、実装は完了です。ためしに、ローカル環境で実行してみましょう。

http://localhost:8000/blogs/blog1

The supplied URL is not a part of this project's domain.と表示されてしまいましたね。CommentBox.ioのプロジェクトでGatsby Cloudのドメインを設定したので、そのドメインでなければ実行できません。つまり、ローカル環境では動きません。

GitHubを更新して、GatsbyCloudにアップロードしてみましょう。

git add .
git commit -m "added CommentBox.io"
git push -u origin main

あとは自動的にビルドとデプロイが行われます。デプロイ完了後に、再度アクセスしてみると…

コメント欄が追加されましたね。

実装結果

これは最初の記事です | 好かれるマーケティング研究室

CommentBox.ioでのコメントの追加

実際にコメントを投稿する場合、[Sign in]でログインしなければなりません。Facebook、Twitter、Google、Apple、もしくは新しいアカウントを作成する選択肢があります。

今回はTwitterでログインしてみます。僕の場合は、既にTwitterにログインしていたので、Twitterとの連携画面が表示されます。

これでAuthorize Appを押すと、自分のTwitterのアイコンが表示されるようになりました。

実際にコメントを書き込んで投稿することができます。

[Post Comment]の右側に[anonymous]と[email replies]というチェックボックスが表示されました。[anonymous]を選択すると、他のユーザーからはあなたの名前やアイコンが表示されなくなります。ただし、管理者からは確認できます。

[email replies]はこの投稿に返信があったときに、Eメールで通知するようにしてくれるということですね。

さっそく、コメントを追加すると、新しいコメントが表示されるようになっていますね。

さて、試しに別のブログ記事(blog2)を見てみます。

特にコードを変えていませんが、コメントが0件になっていますね。こちらにもコメントを足してみます。

ちゃんと別ページのコメントとして扱ってくれていますね。ちなみに、コメントを投稿するたびに、CommentBox.ioに登録したEメール宛に通知が届いています。

せっかくなので、CommentBox.ioのコメント管理画面も見てみましょう。

左側のメニューの一番下に[Comments]ボタンがあるのでそこをクリックします。

「あれ？コメントがない？」と思うかもしれませんが、初期画面は[Pending]のタブになっています。Pendingは要するに承認前のコメントの一覧です。今回は、自動で承認する設定になっているので、ここにコメントが表示されることはありません。

左側のメニューの[Approved]を選択しましょう。先ほど追加した２つのコメントが表示されていますね。

コメントの右下の[go to comment]をクリックすれば、実際のページに飛ぶこともできます。

まとめ

外部サービスを使ってコメント欄を簡単に実装することができました。ユーザーと連絡を取り合えるのがブログの良いところでもありますから、コメント機能はできるだけ実装しておきたい機能ですよね。

使ってみて思ったのは、今月使ったコメント数の表示がないので、利用可能数をいつ突破してしまうかわかりにくいということですね。

とはいえ、最初はそんなにコメントが来ることはないので、最初は無料のCommentBox.ioを使ってみるのも良いのではないでしょうか。

ここまで読んでいただけたなら、”スキ”ボタンを押していただけると励みになります！(*´ー｀*)ﾜｸﾜｸ