静的サイトにHTMLとJavaScriptだけでコメント投稿機能を作る

Applications
静的サイトにHTMLとJavaScriptだけでコメント投稿機能を作る
目次

Googleフォームとスプレッドシートを活用することで、HTMLとJavaScriptだけで動作するコメント投稿システムを作ることができます。

Hugoのような静的サイトジェネレーターで作ったブログにコメント欄を付けるには、Disqusのようなサービスを利用するのが一般的かと思います。ただサイトに設置すると重くなったり広告が出たりするのが嫌でした。そこで当サイトではコメント欄をなんとか自前で用意できないかと、Googleフォームを利用して作ってみました。

まずは今回作ったコメント欄のサンプルを見てみてください！

仕組み

  1. Googleフォームにコメントを投稿すると自動的にスプレッドシートに記録される

  2. コメントが記録されたスプレッドシートをCSV形式で出力する

  3. 出力したCSVをJavaScriptで読み込みウェブサイトに表示

    こんな感じで動きます。応用次第で静的サイトでも色々なことができそうです。

特徴

  • HTMLとJavaScriptだけでウェブサイトに設置できる

  • コメントはリアルタイムでサイトに反映される

  • 新しくコメントが投稿されるとメールで通知してくれる

  • 投稿されたコメントはスプレッドシートで管理

  • NGワードの設定ができる

  • コメントにHTMLタグを使うとサイト上で反映されるようにできる（私の作ったサンプルでは反映されません）

  • コメントに返信する機能がない

    今の所こんな感じです。なにか良いアイデアがありましたらコメント欄から教えてください！

作り方

1. Googleフォームを新規作成

Googleフォームにアクセスして空白のフォームを新規作成します。

右側の「+」ボタンをクリックし記述式の質問項目を作ります(重要)。ここでは「名前」「メールアドレス」「コメント」の３つの質問項目を作成。

Googleフォームを新規作成

ページ右上の送信ボタンをクリックし、表示されるリンクからフォームの回答ページを開きます。

Googleフォームを新規作成

その回答ページのソースを見てください。

ソース内を質問項目名で検索すると、下の画像のように「項目名+10桁程度の固有番号」が書かれている箇所が見つかるので、その番号をメモしておきます。項目名の右に書いてある数字です。左の数字は関係ないので注意。

Googleフォームを新規作成

Googleフォームを新規作成

そして、今開いている回答ページのURLの「フォームのID」は後で使います。

https://docs.google.com/forms/d/e/【フォームのID】/viewform

フォームの設定は以上です。

2. スプレッドシートの設定

フォーム作成ページの回答タブでスプレッドシートのマークをクリック。新しいスプレッドシートを作成してください。

スプレッドシートを新規作成

スプレッドシート1行目には、既にフォームで作った質問項目が書かれています。

ここでちょっと特殊なことをします（もっと上手いやり方があれば教えて下さい！）

シート2行目の左端で右クリックして「行での他の操作項目を表示」→「行２まで固定」をクリックします。

2行目を固定する

そして3行目に質問項目をアルファベットで書きます。ここでは「Timestamp」「Name」「Mail」「Comments」とします。後ほどJavaScriptを使うときにここを読むためです。全角かな文字だとエラーが出ます。

3行目に質問項目をアルファベットで書く

最後に右上の共有ボタンから「リンクを知っている全員に変更」をクリックしシートを公開します。こうしないと後でCSVを出力しても読み込めません。

シートを共有

シートのURLのID部分も後で使います。

https://docs.google.com/spreadsheets/d/【スプレッドシートのID】/edit

スプレッドシートの設定は以上です。

3. HTMLでコメント投稿フォームを作成

下準備ができたので、実際にコメントを投稿するフォームを作ります。

以下のコードはコピペで使えます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<form action="https://docs.google.com/forms/d/e/【GoogleフォームのID】/formResponse" target="hidden_iframe" method="post" onsubmit="return test(this.wcheck.value)">
<p><input name="entry.123456789" placeholder="名前" value="名無し" required></p>
<p><input name="entry.123456789" placeholder="メールアドレス" type="email"></p>
<p><textarea name="entry.123456789" placeholder="コメント" rows="10" cols="40" maxlength="400" id="wcheck" required></textarea></p>
<input type="submit" id="submitbutton" value="送信">
</form>
<iframe onload='if(submitted){window.location="";}' id=hidden_iframe name=hidden_iframe style=display:none></iframe>

<script type="text/javascript">
var NGComments = ["死ね","バカ",".exe"]; // 簡易的なNGワードの設定
var regex = new RegExp(NGComments.join("|"));
function test(wcheck) {
	if (wcheck.match(regex) != null) {
		alert("ERROR: コメントにNGワードが含まれています");
		return false;
	}
	document.getElementById("submitbutton").disabled = true;
	textareas = document.getElementsByTagName('textarea');
	for(var i=0 ;i < textareas.length ;i ++ ){
		textareas[i].value = textareas[i].value.replace( /</g ,'&lt;' );
	}
	inputs = document.getElementsByTagName('input');
	for(var i=0 ;i < inputs.length ;i ++ ){
		inputs[i].value = inputs[i].value.replace( /</g ,'&lt;' );
	}
	return submitted=!0;
}
</script>

長いコードですが、変える必要があるのは上記の1～4行目の４箇所だけです。しかも全部コピペで済みます。

上記を適切に設定すると、ここからGoogleフォームにコメントを送信できます。適当に記入して送信ボタンをクリック！

サンプル

送信したらスプレッドシートを見てください。シートの4行目にタイムスタンプと送信内容が記録されていれば成功です！

コメントを送信

これでコメント投稿フォームができました。次はコメント欄を作ります。

4. スプレッドシートの内容をウェブサイトに表示する

下記のコードを手順３で紹介したコードの前でも後ろでもいいのでコピペします。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<div id="comments"></div>
<script>
d3.csv("https://docs.google.com/spreadsheets/d/【スプレッドシートのID】/export?format=csv&range=A3:D", function(error, data){
	var text = "";
	for(var i=0; i<data.length; i++){
		text += i+1 + " 名前: <a href=\"mailto:" + data[i].Mail + "\">" + data[i].Name + "</a> " + data[i].Timestamp + "<pre>" + data[i].Comments + "</pre>";
	}
	d3.select("#comments").html(text);
});
</script>

上のコードにスプレッドシートのIDを貼り付け、これをブラウザで見てみると…

コメントを表示

スプレッドシートの内容が読み込まれ、コメント欄のように表示されました！

※注意点
PCに保存したHTMLファイル(file:///)からこのHTMLをブラウザで見るとコメントは送信できますが、恐らくCSVが読み込まれないと思います(CORSポリシーエラー）localhostサーバーを立てるか、ご自分のウェブサイト上で試してみてください。

これで基本的なことは終わりです。

あとはお好みでデザインを変えたり、スタイルシートで整えれば完成です。

テンプレができちゃえば、後はコメント欄ごとにGoogleフォームを作って、IDと固有番号をコピペしてくるだけでいいので楽チンです。慣れれば３分かかりません。

補足

以下はおまけです。

メール通知を有効化

Googleフォームで「新しい回答についてのメール通知を受け取る」にチェックすると、新しいコメントがあるたびにメールで知らせてくれます。

メール通知を有効化

コメントの削除

スプレッドシートから行ごと削除すればＯＫ。または「このコメントは削除されました」みたいに自分で書き換えちゃってもよし。

入力必須にする

<input>または<textarea>タグの中にrequiredと書くと入力必須になります。サンプルでは名前欄とコメント記入欄にこれが設定されています。

入力できる字数を制限する

<input>または<textarea>タグの中にmaxlength="400"みたいに書くと最大400字に制限できます。

正規表現で特定の文字の使用を禁止する

<input>または<textarea>タグの中にpattern="[^★☆]+"みたいに正規表現を使うと「★」と「☆」の使用が禁止になります。

コメントでHTMLタグが反映されるようにする

手順３のコードの18～25行目を削除すると、「<」を特殊文字に置き換える工程がなくなり、HTMLコードがそのまま反映されます。

コメント欄のデザインを変える

手順４のコードの7行目がコメント欄のベースのHTMLになっているので、そこを変更してください。

サンプル

今回作ったシンプルコメント欄です。

このコメント欄のスプレッドシートはこちら

※コメントを表示するにはJavaScriptを有効にしてください。

コメントを書き込む

お名前:

メールアドレス(任意):

コメント:

　　

※広告・スパム・アダルトコンテンツ等の書き込みはご遠慮ください。

関連記事: