Netlify Formsを使ってweb拍手を実装する
今こそ個人サイト文化を復活させるべきだし、個人サイトにはweb拍手が必要だ。
そういう記事です。
いきなり結論
以下をコピペで動きます。
<form name="clap" method="post" data-netlify="true" data-netlify-honeypot="bot-field">
<div style="display: none;">
<input name="bot-field" />
<textarea name="message">ぱちぱち</textarea>
</div>
<button type="submit">拍手する</button>
</form>解説
web拍手って何？
まずはweb拍手を知らない人向けに解説を…と思って調べてたらwikipediaに記事があってびっくりしました。
要するに匿名で応援ができるアプリです。今風に言うと、いいねとマシュマロを足して2で割ったようなやつ。
そもそもNetlifyって何？ どうやってサイト作るの？
素晴らしい記事があるのでこちらをご覧ください。
要するに、めっちゃお手軽にHTMLページをネットに公開できるサービスです。無料です。
昔の無料サーバのように広告が入ったりすることはありません。いい時代ですね。
Netlify Formsって何？
上述のNetlifyに標準で付いてるフォーム機能です。なんとHTMLを書くだけで使えて、CGIやらPHPやらは不要！ 神か！？
通常はメッセージや連絡先を入力してもらう、いわゆるお問い合わせフォーム的な用途で使うものなんですが、今回はメッセージを固定にし、送信ボタンを押すだけのweb拍手として使います。
これも無料なんですが、無料だと送れるメッセージ数は月100件までです。
ですが余程のことがない限り、現代の個人サイトで月100件も拍手が来ることはないのでご安心ください。
実装のポイント
Netlify Formsは標準でスパムフィルターが付いているんですが、入力要素なし・ボタンのみで動作するweb拍手とは相性が悪いです（スパムと認識されやすい）。
そのため非表示にしたtextarea要素で本文めいた値を仕込み、スパムフィルターを通り抜けます。
色々試したんですが、input要素だとダメでした。textareaであることが重要っぽい。本文は何でもいいです。一応、長文の方がフィルター回避率は上がるかも。
ただこのままだと本物のスパムbotにも優しい作りになるので、Honeypotという別のスパムフィルターを使ってbot対策をします。form要素のdata-netlify-honeypot="bot-field"と、<input name="bot-field">ですね。
要するにbot-fieldという名前のフィールドに値を入力したやつはbotと見做してね、と指示を与えているわけです。
送信結果はどこで見れるの？
Netlifyの管理画面で見れます。
Formsをクリックすると、
"clap"というフォームが出来ているので、それをクリックすると
こんな感じで見れます！
設定すればメールで通知を受け取ることもできるし、データをcsvでダウンロードして手元に置いとくこともできます。
ちなみにスパム認定されてしまったデータは、"Verified submissions"と書かれた所を押すと、
こんな感じのメニューが出てくるので、"Spam submissions"を選んで見ることができます。
カスタマイズする
お礼ページを作りたい
拍手といえばお礼ページですね！ 分かります！
別途お礼ページを作成し、form要素のaction要素にそのページへのパスを書けばOKです。
<form name="clap" method="post" action="/thanks.html" data-netlify="true" data-netlify-honeypot="bot-field">
<div style="display: none;">
<input name="bot-field" />
<textarea name="message">ぱちぱち</textarea>
</div>
<button type="submit">拍手する</button>
</form>お礼ページには好きなだけイラストやら小説やらを載せてください。
拍手ボタンを複数設置して、どのボタンを押されたかが分かるようにしたい
作品ごとに拍手を置きたい場合などですね。input要素を増やしましょう。
<form name="clap" method="post" data-netlify="true" data-netlify-honeypot="bot-field">
<input type="hidden" name="id" value="ここにボタンを識別する名前を書く" />
<div style="display: none;">
<input name="bot-field" />
<textarea name="message">ぱちぱち</textarea>
</div>
<button type="submit">拍手する</button>
</form>name要素もvalue要素も好きに設定してください。あとはNetlify Formsがよしなにしてくれます。
ちなみに管理画面での一覧表示自体を別にしたい、という場合はform要素のnameを変えると、別のフォームとして扱われます。
メッセージも入力して送れるようにしたい
textareaをdisplay: none;の外に出しましょう。
<form name="clap" method="post" data-netlify="true" data-netlify-honeypot="bot-field">
<div style="display: none;">
<input name="bot-field" />
</div>
<textarea name="message">メッセージをどうぞ</textarea>
<button type="submit">拍手する</button>
</form>メッセージが空のままだと十中八九スパム扱いされると思うので、デフォルトメッセージは用意しておいた方がいいと思います。
required属性を付けてメッセージを必須にするのも手ですね。拍手ではなくなる気がしますが、まあそれはそれで。
個人サイトはいいぞ
いや本当、自分の作品を「ぼくのかんがえたさいきょうのデザイン」で自由に飾っておける自分だけのお城ってさ…最高じゃない…？
同人誌だって装丁どうするかとか考えるじゃないですか。あんな感じでサイトのデザイン考えるの楽しいですよ。
いいねやらRTやら評価やらクソリプやらに悩まされることもありません。自分でそういう仕組みを入れなきゃいいだけの話だし、いいねは欲しいけど数字は見せたくない…なんてのも自由。
SNSに疲れたアナタにこそオススメです。
技術的にも個人サイトレベルであれば、全盛期より今の方がお手軽に作れる時代だと思います。
Netlify使えばサイトのデータをドラッグ&ドロップするだけで公開できるんで、FTPいらないし、Gitも覚える必要なし。
HTMLもCSSも超進化してます。角丸ボックスもグラデーションもCSSで一発で作れるし、アニメーションだって付けられるよ！
新しい技術覚えるのが面倒って場合は、別に昔の技術使ってもいいですしね。テーブルレイアウトとかフレームとか。ブラウザは優秀なんで今でもちゃんと表示してくれます。趣味なんだからどんなコードでも見れたらいいんだよ！
というわけで、みんな気軽に個人サイトを作って公開しよう！ サイト作りは楽しいぞ〜〜沼だぞ〜〜〜〜！！