やりたいこと

• ブログに『いいね』ボタンを設置
• 『いいね』ボタンが押されたら LINE から通知が来る

目的

• 承認欲求
• 技術系の記事を書くモチベーションの維持
• LINE に通知があるとなんか嬉しい

概要

メッセージの送信には

• アクセストークン
• 送信先の LINE アカウントの ID(今回は自分のアカウントに送りたいので自分の ID)

を含めたリクエストを送信する必要があります。

要するにブラウザから直接リクエストを送るわけにはいかないので、ブログのサーバーにいいねボタン用のエンドポイントを作成し、その中で LINE メッセージを送るためのリクエストを送ります。

この時、

• アクセストークン
• 送信先の LINE アカウントの ID(今回は自分のアカウントに送りたいので自分の ID)

は環境変数で保存しています。

LINE bot の作成

記事を書いたので参考にしてください。

https://www.yukendev.com/blogs/tips-line-api

この記事内での説明は省略します。

いいねボタンの作成

これも詳しい説明は省略します。

自分のブログにあった方法でボタンを作りましょう。

なんならボタンでなくても全然大丈夫です。

好きな方法でリクエストを送りましょう。

ブラウザでこの記事を見ている方は記事の左にいいねボタンが表示されているはずです。

ぜひ押してね！

エンドポイントを設置

ここからが本番。自分のブログのサーバーにエンドポイントを設置します。 設置方法はなんでも大丈夫ですが、自分はNext.jsを使っているので、pages/apiディレクトリにファイルを追加するだけで自動的に api のエンドポイントをNext.jsが作ってくれます。

import * as https from 'https';

const url = 'https://api.line.me/v2/bot/message/push';
const myId = process.env.LINE_API_MY_ID;
const accessToken = process.env.LINE_API_ACCESS_TOKEN;

const handler = (req, res) => {
  const title = req.body.title;
  const data = JSON.stringify({
    to: myId,
    messages: [
      {
        type: 'text',
        text: `『${title}』がいいね👍されました`,
      },
    ],
  });
  const options = {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${accessToken}`,
    },
  };
  const request = https.request(url, options);
  request.write(data);
  request.end();
};

export default handler;

これで完成。

いいねが押されると LINE から通知が来ます。

最後に

LINE に通知が来ると嬉しいよね。

では

Bye