ブログを更新したら、自動でLINEに画像付きで通知する仕組みをMake.comで構築してみた

はじめに

こんにちは☀️
ブログを書いていると、

記事を公開したのに気づいてもらえない
SNS に毎回手動で投稿するのが面倒
自動でお知らせしたいけど専門知識が必要そう…

こんな悩みが出てきますよね。
今回私は、「ブログを更新したら、自動でLINEにカード形式の通知を送る仕組み」 を
ノーコードツールの Make.comを使って構築してみました！

仕組みさえ作ってしまえば、
ブログを公開後、LINEへ自動通知。
アイキャッチ画像つきのカードが送られるので視認性も高く、クリック率も上がります。

この記事では、実際に私が作った手順を紹介します☺️

全体の仕組み

今回作ったワークフローは以下のとおりです。

WordPress（RSSフィード）
↓
定期チェックで、新着記事を検知（Make.com：Watch RSS feed itemsモジュール）
↓
記事のアイキャッチ画像URLを抽出（Make.com：Text parserモジュール）
↓
Flex Message形式で整形（Make.com：HTTPモジュール）
↓
LINE Messaging API へ送信（Make.com：HTTPモジュール）

ブログを公開後、Make.comで新着記事を検知し、
LINE公式アカウントから自動的にカード形式の通知が届く仕組みが完成します

こちらが、Make.comのシナリオ完成図です。

Step1：WordPressのRSSフィードURLを用意

WordPressブログには、カテゴリーごとにRSSフィードがあります。
私の場合は「ブログ」カテゴリーなので、以下のような形式でした。

https://ドメイン/blog/category/〇〇/feed

Make.com の RSS モジュールには、上記のようなURLを入れて使います。

Step2：Make.comでRSSを監視する

Make.comでシナリオを作成していきます。
実行スケジュールを設定し、新着記事があればLINEへ通知します。
今回は、1日1回シナリオを実行し、新規記事がないかを定期的にチェックする設定にしました。

Make.com のシナリオを新規作成
最初のモジュールに 「RSS： Watch RSS feed items」モジュールを追加
URLに Step1で用意した、WordPress の RSS URL を入力
Choose where to startで「From now on」（新規記事のみを取得）のラジオボタンにチェックを入れる

「Maximum number of returned items」に1を入力すると、シナリオを実行したときに、最新1件のみLINEへ通知するという動きになります。
新しい記事を1つ公開したら1つ通知する仕組みになります。

Step3：アイキャッチ画像URLを抽出する

RSSの Description フィールドには、次のようなHTMLが含まれています。

このままでは LINEで画像として使えないため、画像URLだけを抜き出す必要があります。
そこで使ったのが…

Text parser（HTML解析）モジュール

「RSS：Watch RSS feed items」モジュールの後ろに、「Text parser： Get elements from HTML」モジュールを追加
Element type：Image(img)
HTML：RSSの ”4.Description” をマッピング

これで <img src="..."> のsrcだけを自動で抽出できます。
Make.com は内部的に HTML を解析して、画像タグの属性 src を取り出してくれるため、
WordPressテーマによらず安定して画像URLを取得できました。

Step4：LINEのカード（Flex Message）を生成

次は、LINEに送るメッセージを整形します。
今回は、こんなカードをLINEに表示させました。

上部にアイキャッチ画像
タイトル
「新しくブログ記事が投稿されました📝」の文言
「記事を読む」ボタン

JSONは以下のような形です。

{
  "messages": [
    {
      "type": "flex",
      "altText": "ブログを更新しました",
      "contents": {
        "type": "bubble",
        "hero": {
          "type": "image",
          "url": "{{TextParser.src}}",→TextParserで取得したsrcをマッピング
          "size": "full",
          "aspectRatio": "20:13",
          "aspectMode": "cover"
        },
        "body": {
          "type": "box",
          "layout": "vertical",
          "spacing": "sm",
          "contents": [
            {
              "type": "text",
              "text": "新しくブログ記事が投稿されました📝",
              "size": "sm",
              "color": "#666666"
            },
            {
              "type": "text",
              "text": "{{RSS.Title}}",→RSSで取得したTitleをマッピング
              "wrap": true,
              "weight": "bold",
              "size": "lg"
            }
          ]
        },
        "footer": {
          "type": "box",
          "layout": "vertical",
          "spacing": "sm",
          "contents": [
            {
              "type": "button",
              "style": "primary",
              "height": "sm",
              "action": {
                "type": "uri",
                "label": "記事を読む",
                "uri": "{{RSS.URL}}"→RSSで取得したURLをマッピング
              }
            }
          ]
        }
      }
    }
  ]
}

見栄えが良いため、通知のクリック率も高くなります。

Step5：LINEへ送信（Messaging API）

Make.comの「HTTP」モジュールを使ってLINE APIに送ります。
設定は以下のとおりです。

Authentication type
「No authentication」を選択
URL
・本番（全員へ通知）
https://api.line.me/v2/bot/message/broadcast
・テスト時（特定のユーザーIDへのみ通知）
https://api.line.me/v2/bot/message/push
　※特定のユーザーへテスト通知する場合は、上記のJSONの”messages”の前に“to”: “LINEのユーザーID”,を追記する必要があります。
Headers①
Name：Authorization
Value： Bearer {LINEのチャネルアクセストークン}
Headers②
Name：Content-Type
Value： application/json
Body content type
application/jsonを選択
Body input method
「JSON string」を選択
Body content
上記のJSONを入力