comilablog

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の管理画面で見れます。

Netlify 管理画面
Formsをクリックすると、

Netlify Forms
"clap"というフォームが出来ているので、それをクリックすると

Netlify Forms submissions
こんな感じで見れます!
設定すればメールで通知を受け取ることもできるし、データをcsvでダウンロードして手元に置いとくこともできます。

ちなみにスパム認定されてしまったデータは、"Verified submissions"と書かれた所を押すと、

Netlify Forms 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を変えると、別のフォームとして扱われます。

メッセージも入力して送れるようにしたい

textareadisplay: 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で一発で作れるし、アニメーションだって付けられるよ!
新しい技術覚えるのが面倒って場合は、別に昔の技術使ってもいいですしね。テーブルレイアウトとかフレームとか。ブラウザは優秀なんで今でもちゃんと表示してくれます。趣味なんだからどんなコードでも見れたらいいんだよ!

というわけで、みんな気軽に個人サイトを作って公開しよう! サイト作りは楽しいぞ〜〜沼だぞ〜〜〜〜!!