GitHub Pages 上で使えるコメントフォームの UI や使い心地を確認するため、5つのホスティングサービスを実際に試してみました。全て フリーミアム もしくは無料で設置できます。

フォームのサンプル画像をクリックすると実際に試すことができますが、良識あるテストをお願いします。サンプル画像をクリックしてから表示されるまでの時間や、ブラウザの開発ツール で検知されるエラーの確認もまた設置の重要な要件になると思います。

ただし、いつまでも無料に甘えているわけにはいかないので、突然閉じるカモです。

Cusdis

Cusdis

Cusdis(カスディス)は、Disqus の代替として開発されたオープンソースのコメントプラットフォームです。軽量かつプライバシーを最優先し、ユーザーをトラッキングしないことがウリです。

有料プランもあり、年 $12 と格安です。個人運営のようで、Open Collective でスポンサーを募っていたので、僕も僅かながら寄付 をさせてもらいました。

新しくサイト名を入力

GitHub のアカウントを持っていれば始め方はとっても簡単です。Start for free から GitHub、GitLab、Google の何れかのアカウントでログインし、新しくサイト名を入力、GitHub と OAuth での連携を許可するだけです。設定できる機能もほとんどなく、ダッシュボードも極めてシンプルです。

投稿の際、メールアドレスの入力など個人情報を入力する必要はありませんが、コメントスパムを弾く機能が無いため、必ず管理者の承認を待って表示されるシステムとなっています。

サンプル

Metype

Metype

Metype は、AI による荒らし行為の排除やスタイルと機能の拡張性の高さを特徴に謳うコメントシステムです。

クレジットカードの登録なしで始められますが、無料枠では、コメントが1000件まで、かつ広告の提供(現在は 3rd パーティ Cookie のようです)という制限があります。

metype.com もしくは quintype.com の製品ページ にある GET STARTED ボタンから、名前、メールアドレス、パスワードを入力しアカウントを作成するか、Facebook、Google アカウントでログインし、設置するサイトの URL を登録すればアカウント ID が発行されるので、管理画面の埋め込み用のコードをサイトの設置したい場所にコピペすれば準備 OK です。

管理画面からは、ゲスト投稿や事前承認の可否、画像やリンクの投稿可否、禁止用語の設定などができます。それ以外は有料のようです。

サンプル

CommentBox.io

CommentBox.io

CommentBox.io は、「広告なし、トラッキングなし」を謳い文句にしています。実際 プライバシーポリシー には、運営な必要な情報として収集される情報とその使用目的が具体的に規定されています。

投稿には Google や Apple のソーシャルアカウントによるログイン(または電子メール)が必要ですが(Facebook と X からのログインは機能していません)、匿名での投稿も可能です。

また1ヶ月100コメントまで無料のパーソナルプランがあり、クレジットカードの登録なしに始められます。100件を超えたら $15 と記載されてますが、まぁ、炎上でもしない限り個人のサイトでは超えることはないでしょう!?(無責任 :sweat_smile:

サンプル

utterances

utterances

utterances(意味や発音は 辞書 を引いてください)は、GitHub issues への投稿を仲立ちするユニークなコメントシステムです。投稿には GitHub アカウントが必要ですが、マークダウンや emoji が使えて GitHub ユーザーからのフィードバックも期待でき、技術ブログであれば良い選択肢でしょう。

また通常、投稿内容の修正や削除は管理者に依頼するよりほかありませんが、リポジトリのアリカさえわかれば自身で修正や削除やができるのも何気にありがたかったりすると思います。

立ち上げも以下のようにとても簡単です。

  1. GitHub ページか、または新規に作成したパブリックなリポジトリを準備
  2. GitHub App のインストールページ からリポジトリを指定、OAuth による連携を許可
  3. configuration のページ で、指定したリポジトリ、投稿と issue の紐付け方、テーマカラーなどを選択し、出来上がったコードをコメントフォームの設置箇所に貼り付ける

Tomoki Miyauci さんの「技術ブログのコメントシステムはutterancesがいい感じ」 の詳しい解説がとても参考になります。

なお類似の GitHub App に JavaScript フレームワークがそれぞれ異なる gitalkgitmentvssue がありますが、issues を詳しく調べるとどれも セキュリティ上の 問題が 指摘されている ので、使用は控えるべきと思います。

サンプル

giscus

giscus

giscusutterances にインスパイアされて開発されました。utterances の開発が 2022年2月 を最後に停滞しているのに対し、giscus は現在も活発に開発が続けられていて、多言語対応や lazy loading などの進化を続けています。

何より1番の違いは、utterances が issues を使うのに対し giscus は discussions を使用します。これにより投稿を新着順に表示することが可能となっています。

設置方法は utterances とほぼ同じで、https://giscus.app/ja のページ に従って必要事項を入力し、リポジトリの discussions を有効化 すれば、埋め込むべきタグを生成してくれます。

サンプル

Disqus

Disqus

Disqus は、コメントシステムのホスティングサービスでは最大手でしょう。10数年前、幾つか運営していたサイトで採用していたので、馴染みがあります。が、当時からサイトを重たくする凶悪なヤツでした。「Disqus 設置しました!」という類のタイトル記事を見つけてサイトを訪問してみても、半数近くが採用を取りやめている感じです。

また一見するとシンプルな UI に見えますが、ゲスト投稿の際、うっかりユーザー登録しそうになったり、reCAPTCHA の挙動にイラッときたり、意図せず投稿してしまったりなど、何気に手間取ります。

良い点はコメントスパムの防御がしっかりしているところだと思います。また設置するなら設定をデフォルトのままにせず、ユーザーのトラッキング機能や広告表示の設定などを最小限にすることをお勧めします。それだけで 3rd パーティ Cookie が 1/3 ほど減ります。それでも 100 以上は食らいますが… Google 囲い込み策の 3rd パーティ Cookie 廃止 にどう対応するのでしょうか。

当サイトでは現在、コメントフォームは単なる画像で Disqus の凶悪な読み込み量からサイト訪問者を守りつつ、コメント数だけ動的に拾うようにしています。

コメントは何のため?

コメント機能のホスティングサービスプロバイダーはどこも「コミュニティの形成」を謳っています。でも、そもそも「ブログ」の語源が「ウェッブ ログ」で、本サイトのように単なる「技術的記録」の周りにコミュニティはできづらいと思います。QiitaZenn のコメント欄でも 「Let’s build from here」を謳う GitHub issues や pull requests ほどの活況はありません。

それでも僕が(年に1回あるかないかの)コメントを欲するのは(多くの技術系ブログがそうではないかと思うのですが)、記事中の誤解や間違いを指摘してもらい、また判りにくいところを質問してもらうことで、より正確で役に立つ情報を発信するサイトにすることが目的です。

Disqusが広告サービスを展開するも反発を受けている様子」に述べられているように、SNS で単にイイねをもらうだけじゃないんですよね。

…ということで、同じ思いでコメントフォームを設置したい方のお役に立てれば幸いです :relieved: