Bloggerの「いいねボタン」に通知機能を付けました【GASでメール通知】

無事に「いいねボタン」を設置することができましたが、欲が止まらず、「いいね」されたら通知が来るようにしました。今回もGeminiとChatGPTに大活躍してもらいます。

「いいね」してもらったら通知がほしい

Ｘの「いいねされました」という通知楽しいですよね。ぜひこれをブログにも実装したいと思いました。Geminiに聞いたら３つの提案をされました。

最終的に完成させたいのは、「いいね」が押された瞬間に、「記事URL」と「押された時間」がメールで届く仕組みです。

Google Apps Script(GAS)でメール通知を自動化する

Firebaseアプリはそもそも通知じゃないし、Webhookは知らないし、悩まず②のスプレッドシートとGoogleフォームに決定です。

これが「無料で、安全に、履歴を残せる」ベストな方法だそうです。

ステップ１：通知用のGoogleフォームを作る

1. Google フォームで「新しいフォーム」を作成します
2.  フォーム名を「いいね通知用」にして、質問を1つ作成します
    質問内容：記事URL
    形式：記述式
3. 「公開」ボタンを押してリンクアイコンをクリック、フォームのURLをメモします
   コードに貼り付けるときは、末尾の viewform を formResponse に書き換えます

ステップ２：送信先ID（entry.xxx）を特定する

1. 作成したフォームの「プレビュー」を開きます
2.  F12キーもしくは右クリックで検証から開発者ツールを開きます。
3.  「要素」タブを開き、Ctrl + F で「entry.」を検索します。
4.  <input type="hidden" name="entry.123456789">を見つけて、「entry.数字」 をメモします

ステップ３：BloggerのJavaScriptに追記する

pushLike() 関数の中に、フォームへデータを飛ばすコードを書き足します。前作の「いいねボタンを自作しました」のコードには追加済ですので、そのままで大丈夫です。「entry.数字」だけ書き換えてください。

ステップ４：回答をスプレッドシートに紐付ける

1. フォーム編集画面の「回答」タブをクリックします。
2. 「スプレッドシートにリンク」をクリックして、新しいシートを作成します
   いいねが押されるとスプレッドシートに「記事のURL」と「時間」が記録されます

ステップ５：Google Apps Script(GAS)を設定する

1. スプレッドシートの [拡張機能] ＞ [Apps Script] を開きます
2. function myFunction() {...} を消して、以下のコードをコピーペします
3. 名前は「いいね通知」などにして「プロジェクトを保存（フロッピーアイコン）」を押します

function sendLikeNotification(e) {
  // 届いたデータ（記事URL）を取得  
  const responses = e.values; 
  const postUrl = responses[1]; 

  // 通知を送りたいメールアドレス
  const recipient = "あなたの受け取りたいメールアドレス"; 
  
  // メールの件名
  const subject = "新しい「いいね」が届きました";
  
  // メールの本文
  const body = "ブログ記事に「いいね」が押されました。\n\n" +
               "対象記事URL：\n" + postUrl + "\n\n" +
               "▼ 全ての履歴を確認する（スプレッドシート）\n" + 
               SpreadsheetApp.getActiveSpreadsheet().getUrl();

  // メール送信
  MailApp.sendEmail(recipient, subject, body);
}

ステップ６：トリガー（自動実行）の設定

1. 左メニューの 「時計マーク(トリガー)」 をクリック
2. 右下の「+ トリガーを追加」ボタンをクリック
3. 以下のように設定します
   実行する関数を選択：sendLikeNotification
   デプロイを選択：Head
   イベントのソースを選択：スプレッドシートから
   イベントの種類を選択：フォーム送信時
   ※プロジェクト名も変更しておくと分かりやすいです
4. 「保存」を押します
5. 「承認」のポップアップが出ます
   Googleアカウントを選択 ＞ 「詳細」 ＞ 「安全ではないページに移動」 ＞ 「許可」 をクリック

メールが来た

自分で「いいね」を押したら、カウントアップして、即メールが来ました。これは便利だ。でも、そんなに「いいね」してもらえるのか😰

この記事読んだ方、「いいね」押してください🙇

リセットが少し面倒くさい

一通りテストも終わったので「カウントを０にしてから公開」と思いましたが、いくつもの道を通ってるので、全てを０にするためには３つをリセットする必要がありました。

下流からリセットしていく

リセットする順番は「どこからやっても実害はない」ですが、綺麗に終わらせるなら「下流から上流へ」さかのぼるのがおすすめです。

1. 下流：スプレッドシート
   文字を消す(Delete)だけだと続きの行(10行目など)に書き込まれてしまうので、「行を削除」してください。
2. 中流：Googleフォーム
   フォームの回答数を「0」にします。これで「スプレッドシートの行数」と「フォームの回答数」が一致します。 
3. 上流：Firebase
   最後に大元のデータを消します。これを消すとブログ上の表示が「0」に変わります。

これで、F-lightへの引越しは完了です。ブログのカスタマイズって面白いですね。窓の手を使ったり、レジストリを弄ったりして、Windowsをカスタマイズしてワクワクしていた十数年前を思い出しました。