web拍手作るよ

October 30, 2020

この前お問い合わせフォーム作ってみて「これはもしかしたらweb拍手になるのでは？」と思っていたら先駆者様がいました。ttps://note.com/kasiwamochi/n/n86f477579fd2
元祖web拍手の方は更新というか保守管理がもうされていない？のかサポート掲示板がスパムで埋まっていたのでちょっとセキュリティ的に不安があるしできれば全部Googleのアカウントで済ませたいという希望の元やっていきます。~~本当はFirebase Realtime Databaseで作ろうとしたけど難しすぎて諦めました。~~

やること

クリックで拍手。コメント機能はつけない。
連打はしない。カウンターもつけない。
ページ遷移はせずお礼の文字を表示する。

<!-- HTML -->
<div id="iine">
<form action="https://docs.google.com/forms/XXXXXXXXXXXX/formResponse" method="post" name="iineForm" target="dummyIframe">

  <label><input type="checkbox" class="filled-in" value="チェックボックスに指定した名前" name="entry.XXXXXXX" checked /></label>
　<input type="button" class="iine-btn" value="Clap!" onclick="submitIine()"　/>
  <!-- CSSで.filled-in { display:none; }する -->

 </form></div>
 <iframe name="dummyIframe" style="display:none;"></iframe>

  <script>
      function submitIine(){
      document.iineForm.submit();
      document.getElementById("iine").onclick = function() {
      document.getElementById("iine").innerHTML = "Thanks!";
      };
    }
  </script>

Javascriptめちゃくちゃ便利ですね。実物はサイトのトップに置いてあるのでよかったら押してみてください。

Firefoxだけボタンを押したあとに更新ボタンを押すと二重送信しちゃうの直せませんでした。まあいいか。