水面下でごちゃごちゃ言ってく雑記ブログ

【Blogger】いいねボタンを Google フォームを改造して作る

以前、このブログで【Blogger】リアクションウィジェットを Google フォームを改造して作るという記事を書いた。

上の記事のあとがきにも書いているけれど、そもそもリアクションは「いいね!」だけでもいいんじゃないかと思った。

そこで、いいねボタンを Google フォームを改造して作成したので、方法を以下に記す。

Google フォームを作成

まず Google フォームを新規作成し、項目を追加する。筆者の場合こんな感じにした。

  • 記事タイトル | URL(記述式テキスト・短文回答向け)※回答必須

どの記事にいいねをもらったのかわかるように、記事タイトルと URL 用の項目を用意。今回はリアクションの選択が必要ないので、これだけでオッケー。

念のため、フォームの設定画面の 回答 > メールアドレスを収集する のトグルスイッチはオフにしておくのを忘れないこと。

HTML でいいね送信フォームを作成

リアクションウィジェットと同様、HTML で送信フォームを作成していく。

以下の記事の「Google フォームのソースから、フォームと各質問の値を拾ってコピー」の項を参考にして、先程作成した Google フォームからフォームの値と質問項目の値を抜き出しておく。

それらが取得できたら、Blogger のテーマ編集上のブログの投稿ウィジェット内の個別記事表示部分(記事本文 <data:post.body/> が表示される要素の下あたりがおすすめ)に、以下のコードを貼り付ける。

<b:if cond='data:view.isPost'>
<div class='like'>

  <!-- いいね送信ボタン -->
  <button class='like-button' form='send-like' type='submit'>いいね!</button>

  <!-- フォームの送信先 URL を指定 -->
  <form action='https://docs.google.com/forms/u/0/d/e/●●●●/formResponse' class='like-form' id='send-like' method='POST' style='display:none' target='hidden_iframe'>

    <!-- 記事のタイトルと URL を指定 -->
    <input expr:value='data:post.title + " | " + data:post.url' name='entry.●●●●' readonly='readonly' type='text'/>

    <!-- 送信後の処理のための iframe -->
    <iframe class='like-iframe' name='hidden_iframe'/>

  </form>
</div>
</b:if>

上のコードの ●●●● の部分を、先程取得したフォームの値と各質問項目の値に書き換える。

button 要素の form 属性と form 要素の id 属性の値を同じにすると、ボタンをフォームの外に出しても機能するようになる。

input 要素の value 属性には Blogger 独自タグの記事タイトル data:post.title と記事 URL data:post.url.canonical.canonical を追加すると ?m=1 などのパラメータが付かない)を埋め込んでいる。

JavaScript でフォームに処理を追加

次に、以下のコードをテーマ編集の </body> の上辺りに追加する。リアクションウィジェットのコードを再利用したので、だいたいの流れも同じ。

<b:if cond='data:view.isPost'>
<script>//<![CDATA[
window.addEventListener('DOMContentLoaded', () => {

  // 送信フォーム、フォーム送信後の処理のための iframe を取得
  const form = document.querySelector('.like-form');
  const iframe = document.querySelector('.like-iframe');

  // フラグ初期化
  let submitted = false;

  // 送信が完了したらフラグを立てる
  form.addEventListener('submit', () => {
    submitted = true;
  })

  // iframe の読み込みが完了したら実行
  iframe.addEventListener('load', () => {

    // 送信完了後の処理
    if(submitted){

      // 送信ボタン取得
      const button = document.querySelector('.like-button');

      // いいねボタン無効化、内部テキスト変更
      button.disabled = true;
      button.textContent = 'いいね済み';

      // 送信メッセージ表示
      alert('いいねありがとうございました!!');

    }
  })
})
//]]></script>
</b:if>

いいねボタンを押したら disabled 属性を付けてボタンを無効化し、連続で何度も押せないようにしている。

ただページをリロードすれば何回でも押せてしまう。おそらく Cookie を使えば送信済みの判定ができるけれど、そこまでする必要もないだろうということで。

CSS でボタンを装飾

最後にいいねボタン用の以下の CSS をテーマ編集の </head> の上あたりに設置する。

<b:if cond='data:view.isPost'>
<style>
.like{
  margin: 2em 0;
  padding: 0;
  line-height: 1;
  font-size: 15px;
}
.like-button{
  display: block;
  margin: 0 auto;
  padding: .5em;
  width: 100px;
  background: #333;
  color: #fff;
  text-align: center;
  border-radius: 3px;
}
.like-button:not([disabled]):hover,
.like-button:not([disabled]):focus,
.like-button[disabled]{
  background: #666;
}
</style>
</b:if>

上のコードは当ブログ用に設定したものなので、適宜自分のブログに合うように変更すること。

ここまでできたらテスト送信をして、ちゃんと送信できているか、Google フォームの管理画面で記事タイトルや URL が反映されているかなどを確認する。

テスト送信をした記事や送信した時間帯を覚えておかないと、読者の方が送ってくれたものとの区別が付かなくなるので注意。

あとがき

Google フォームを改造してリアクションウィジェットを作った経験を生かして、今度はいいねボタンを作ってみた。ボタンに画像を使用したらもっと見栄えのいいものが作れると思う。

この記事も、そして載せたコードも、前回の使い回しだから書くのがめちゃくちゃ楽だった。いつもうんうん頭を悩ませながら文章を書いているので(これでも!)、たまにはこういう省エネ記事もいいんじゃないでしょうか。おわり。

編集する
ホーム