【ITニュース解説】You didn't see it coming

ウェブサイト、特にブログにおいて、読者からのコメント機能は非常に重要だ。それは読者と書き手が直接交流できる場であり、ウェブサイトに活気をもたらす「魂」のような存在とも言える。しかし、このコメント機能をウェブサイトに実装することは、技術的に見ると決して簡単ではない。特に、データベースを持たない「静的サイト」と呼ばれる種類のウェブサイトでは、コメントをどこに保存し、どう表示するかという課題がつきまとう。

既存のコメントサービスには様々なものがあるが、それぞれに一長一短がある。例えば、「Disqus（ディスカス）」は非常に広く使われているコメントサービスの一つだが、高機能である反面、サイトの読み込み速度を遅くしたり、ユーザーの個人情報を収集したり、広告を表示したりといった問題点が指摘されることがある。特に、ヨーロッパの厳しい個人情報保護規制であるGDPR（一般データ保護規則）への対応が懸念される場合もある。GDPRは、個人情報の取り扱いに関する非常に厳しいルールを定めたものだ。

その他にも、「Commento（コメンと）」や「Hyvor Talk（ハイボー・トーク）」のような、プライバシー保護に重点を置き、広告を表示しない有料のコメントサービスも存在する。これらは品質が高いが、月額費用がかかるため、個人のブログなどでは導入のハードルになることがある。また、「Staticman（スタティックマン）」のように、静的サイトでコメントを管理するためのオープンソースのツールもあるが、これはGitHub（ギットハブ）というコード管理サービスを利用するため、ある程度の技術的な知識が必要になる。オープンソースとは、プログラムの設計図が公開されており、誰でも自由に利用・改良できるソフトウェアのことである。

本記事の著者は、自身のウェブサイトがJekyll（ジキル）という静的サイトジェネレータで構築されているため、これらの選択肢を検討した結果、最終的に「utterances（アッタランシーズ）」というツールを選んだ。utterancesは、非常にユニークな方法でコメント機能を実現するオープンソースのウィジェットだ。ウィジェットとは、ウェブサイトに埋め込んで特定の機能を追加する小さなプログラム部品を指す。

utterancesがどのように機能するかというと、それはGitHubの「Issues（イシュー）」機能をコメントシステムとして利用するというものだ。GitHubは、ソフトウェア開発の現場でよく使われる、プログラムのソースコードを管理したり、開発中の問題点（Issue）を共有したりするためのサービスである。utterancesを使うと、ウェブサイトの訪問者がコメントを投稿すると、そのコメントがまるでGitHubリポジトリ内のIssueの一つであるかのように作成される。リポジトリとは、ソースコードやファイルがまとめて管理されている場所のことだ。

具体的には、各ブログ記事のURLがGitHubの特定のIssueと紐付けられる。これにより、ユーザーが記事にコメントを書き込むと、その内容がGitHubのIssueとして保存され、ウェブサイト上にはGitHubから読み込まれたIssueの内容が表示されるという仕組みだ。つまり、コメントを保存するための専用データベースを別途用意する必要がなく、GitHubという既存の強力なプラットフォームを「コメントデータベース」として活用するのである。

このutterancesには多くの利点がある。まず、オープンソースであり、誰でも無料で利用できる点だ。さらに、ユーザーの行動を追跡するトラッキング機能や広告表示が一切なく、プライバシーが重視されている。これは、Disqusなどのサービスで懸念される点を解消していると言える。トラッキング機能とは、ウェブサイトの訪問者の行動を追跡してデータを収集する機能のことだ。また、非常に軽量に作られているため、ウェブサイトの読み込み速度にほとんど影響を与えないというメリットもある。

コメントを投稿するユーザー側から見ると、GitHubアカウントを持っていれば、特別な登録なしに簡単にコメントできる。GitHubのコメント欄で使われる「Markdown（マークダウン）」という記法に対応しているため、太字や斜体、コードブロックなどを使ったリッチなコメントを書くことも可能だ。Markdownは、テキストを構造化したり装飾したりするためのシンプルな記法である。ウェブサイトの管理者側にとっては、コメントがGitHubのIssueとして一元管理されるため、コメントへの返信や修正、スパムコメントの削除などもGitHub上で通常のIssue管理と同じように行えるのが便利だ。

しかし、utterancesにもいくつかの欠点がある。最も大きいのは、コメントを投稿するためにGitHubアカウントが必須となる点だ。GitHubアカウントを持っていないユーザーはコメントできないため、利用者の範囲が限定される可能性がある。また、コメントが保存されるGitHubリポジトリは公開されている必要があるため、コメントの内容は誰でも見ることができる状態となる。これは通常問題ないが、機密性の高いコメントを受け付けるようなサイトには向かない。さらに、Issueの数が非常に多くなると、GitHub上での管理が複雑になる可能性もある。utterances自体の見た目や機能のカスタマイズ性も、既存のテンプレートに依存するため、あまり自由度が高くない。

実際にutterancesを実装する手順は比較的シンプルだ。まず、コメントを保存するためのGitHubリポジトリを新しく作成し、そのリポジトリにutterancesアプリをインストールする。次に、自身のウェブサイトのHTMLファイルに、utterancesが提供する短いスクリプトタグを埋め込む。スクリプトタグは、ウェブページに動的な機能を追加するためのプログラムコードを記述する部分を指す。このスクリプトタグの中で、どのGitHubリポジトリをコメントの保存先とするか、そしてウェブサイトの各記事とGitHubのIssueをどのように関連付けるか（例えば、記事のタイトルやURLをIssueのタイトルとするなど）を設定するだけだ。これにより、ウェブサイトにコメント機能が追加される。

このように、ウェブサイトにコメント機能を追加する方法は多岐にわたるが、それぞれのサービスやツールの特性を理解し、自身のウェブサイトの要件や目指すユーザー体験に合わせて適切なものを選ぶことが重要だ。utterancesは、特に静的サイトのブログで、プライバシーを重視し、軽量で、GitHubアカウントを持つユーザーが多い場合に非常に有効な選択肢となる。読者との活発な交流はウェブサイトの価値を高めるため、システムエンジニアを目指す上でも、こうした外部サービスをいかに効果的に活用するかという視点は非常に役立つだろう。