前回のブログでは、Google Apps Script (GAS) を Webhookサーバーとして利用し、Messaging API と連携する方法を紹介しました。
Messaging API を利用したメッセージ受信
https://kotovuki.co.jp/archives/18481
今回は、より柔軟な連携が可能な Claris Connect を使用して、Messaging API からの Webhook を受信し、その情報を Googleスプレッドシートに自動で記録するシステムの構築方法をご紹介します。
Claris Connect での Webhookトリガの設定
まず、Claris Connect で Webhook トリガを作成します。この設定により、Messaging API からのリクエストを受け取り、Claris Connect のフローを開始することができます。
![](https://kotovuki.co.jp/wp-content/uploads/2024/07/20240722_ito_02-1024x585.png)
Claris Connect でフローの作成
Claris Connect にログインし、任意のプロジェクトの中に新しいフローを作成します。
![](https://kotovuki.co.jp/wp-content/uploads/2024/07/20240722_ito_03-1024x564.png)
トリガの選択画面で「HTTP」コネクタを選択します。
![](https://kotovuki.co.jp/wp-content/uploads/2024/07/20240722_ito_04-1024x536.png)
「Incoming HTTP Request」が自動的に選択されていることを確認し、「Continue」をクリックします。
![](https://kotovuki.co.jp/wp-content/uploads/2024/07/20240722_ito_05-1024x416.png)
新しい Webhook を作成します。例えば、”LINEWebhook” と入力すると、プルダウンに「Create “LINEWebhook”」が表示されます。これをクリックすると、新しい Webhook が作成されます。
![](https://kotovuki.co.jp/wp-content/uploads/2024/07/20240722_ito_06-1024x559.png)
生成された Webhook URL をコピーします。この URL は後ほど、LINE Developers コンソールの設定で利用します。
![](https://kotovuki.co.jp/wp-content/uploads/2024/07/20240722_ito_07-1024x390.jpg)
この段階では「Save Trigger」ボタンがグレーアウトしており、クリックできない状態です。トリガを保存可能にするには、Webhook にテストリクエストを送信する必要があります。次のステップでは、このテストリクエストの送信方法を説明していきます。
![](https://kotovuki.co.jp/wp-content/uploads/2024/07/20240722_ito_08-1024x557.png)
LINE Developersコンソールで Webhook の設定
LINE Developers コンソールにログインし、対象のチャネルの「Messaging API設定」タブを選択します。
![](https://kotovuki.co.jp/wp-content/uploads/2024/07/20240722_ito_09-1024x509.png)
LINE Developers コンソールについて、より詳しく知りたい方は、以下のブログ記事をご覧ください。こちらでは、LINE Developoers コンソールの使い方や機能について詳しく解説しています。
LINE Developers コンソール
https://kotovuki.co.jp/archives/16761
「Webhook URL」欄に、先ほど Claris Connect で生成した URL を貼り付けます。
URL を入力したら、「更新」ボタンをクリックします。
![](https://kotovuki.co.jp/wp-content/uploads/2024/07/20240722_ito_10-1024x417.png)
「検証」ボタンをクリックして、接続を確認します。
![](https://kotovuki.co.jp/wp-content/uploads/2024/07/20240722_ito_11-1024x344.png)
接続が正常に確立されれば、「成功」と表示されます。
![](https://kotovuki.co.jp/wp-content/uploads/2024/07/20240722_ito_12.png)
「Webhookの利用」をオンにします。これにより、LINE からのイベント通知が Webhook URL に送信されるようになります。
イベント通知が送信されるタイミングは、新しいユーザーが LINE公式アカウントを友だちとして追加した時や、ユーザーが LINE公式アカウントにメッセージを送信した時などがあります。
![](https://kotovuki.co.jp/wp-content/uploads/2024/07/20240722_ito_13-1024x379.png)
Claris Connect で Webhookトリガを有効化
Claris Connect の画面に戻ります。
先ほどの検証により、「Save Trigger」ボタンがクリック可能になっているはずです。「Save Trigger」ボタンをクリックして、トリガを保存します。
![](https://kotovuki.co.jp/wp-content/uploads/2024/07/20240722_ito_14-1024x549.png)
これで、Claris Connect のフローに Webhookトリガが正常に作成されました。
![](https://kotovuki.co.jp/wp-content/uploads/2024/07/20240722_ito_15-1024x254.png)
Googleスプレッドシートとの連携設定
Webhook トリガ の設定が完了したら、次のステップとして Claris Connect のフローに新しいアクションを追加します。このアクションは、Google スプレッドシートにデータを書き込むためのものです。
![](https://kotovuki.co.jp/wp-content/uploads/2024/07/20240722_ito_16-1024x590.png)
Google スプレッドシートの準備
連携先の Googleスプレッドシートを開き、A1セルに「日付」、B1セルに「Webhook」と入力して列見出しを設定します。
![](https://kotovuki.co.jp/wp-content/uploads/2024/07/20240722_ito_17-1024x179.png)
Googleスプレッドシートアクションの設定
フロー内のトリガーステップの右端にある「+」ボタンにカーソルを合わせ、表示される「Action」をクリックします。
![](https://kotovuki.co.jp/wp-content/uploads/2024/07/20240722_ito_18-1024x390.png)
「Google Sheets」コネクタを選択します。
![](https://kotovuki.co.jp/wp-content/uploads/2024/07/20240722_ito_19.png)
「Create spreadsheet row」アクションを選択し、「Continue」をクリックします。このアクションでスプレッドシートに新しい行を追加できます。
![](https://kotovuki.co.jp/wp-content/uploads/2024/07/20240722_ito_20-1024x546.png)
Googleアカウントの認証を行います。スプレッドシートを作成したアカウントを選択してください。
![](https://kotovuki.co.jp/wp-content/uploads/2024/07/20240722_ito_21.png)
認証が成功すると、”Success” と表示されます。「Continue」をクリックして次に進みます。
![](https://kotovuki.co.jp/wp-content/uploads/2024/07/20240722_ito_22-1024x534.png)
連携する GoogleスプレッドシートのファイルID と シート名を指定します。
![](https://kotovuki.co.jp/wp-content/uploads/2024/07/20240722_ito_23-1024x488.png)
「日付」列に Webhook の受信日時を設定します。「日付」入力欄の右端にある「ステップデータの選択」をクリックします。
![](https://kotovuki.co.jp/wp-content/uploads/2024/07/20240722_ito_24-1024x377.png)
Webhookトリガで受け取った情報から、更新日時を示す「dt_update」を選択します。
![](https://kotovuki.co.jp/wp-content/uploads/2024/07/20240722_ito_25-1024x450.png)
「Webhook」列には、Messaging API から受信した生のデータ(イベントの詳細情報)を記録します。
ステップデータの選択画面では、イベントの詳細情報が入っている「body」を選択します。
![](https://kotovuki.co.jp/wp-content/uploads/2024/07/20240722_ito_26-1024x406.png)
設定が完了したら、「Save」ボタンをクリックしてフローを保存します。
![](https://kotovuki.co.jp/wp-content/uploads/2024/07/20240722_ito_27-1024x481.png)
動作確認
Claris Connect の画面右上にあるトグルスイッチをオンにして、フローを有効化します。これにより、トリガイベントが発生するたびにフローが実行されるようになります。
![](https://kotovuki.co.jp/wp-content/uploads/2024/07/20240722_ito_28-1024x245.png)
以下の QRコードを iPhone で読み取り、LINE公式アカウントを友だち追加します。友だち追加すると、自動的に Webhookトリガへのリクエストが送信されます。
![](https://kotovuki.co.jp/wp-content/uploads/2024/07/20240722_ito_29-1024x371.png)
友だち追加後、Googleスプレッドシートを開き、新しい行が追加されているか確認します。
![](https://kotovuki.co.jp/wp-content/uploads/2024/07/20240722_ito_30-1024x250.png)
「Webhook」列には、友だち追加時のイベント情報が JSON形式で記録されています。主な内容は以下の通りです。
- “type”: “follow” (友だち追加イベントを示す)
- “isUnblocked”: true (ブロック解除ではなく新規の友だち追加であることを示す)
- “userId”: ユーザーの固有ID
{
"destination" : "U011d69ae6157137961d7a18efdec8b08",
"events" :
[
{
"deliveryContext" :
{
"isRedelivery" : false
},
"follow" :
{
"isUnblocked" : true
},
"mode" : "active",
"replyToken" : "5c4cac4ded….",
"source" :
{
"type" : "user",
"userId" : "Ub685b39e4346790d0edf5362f59ec152"
},
"timestamp" : 1720585164342,
"type" : "follow",
"webhookEventId" : "01J2DDW5TSDAVC60QKBEKTD9G4"
}
]
}
次に、LINE公式アカウントに「こんにちは!」というテキストメッセージを送信します。
![](https://kotovuki.co.jp/wp-content/uploads/2024/07/20240722_ito_31.png)
メッセージ送信後、Googleスプレッドシートに新しい行が追加されていることを確認します。
![](https://kotovuki.co.jp/wp-content/uploads/2024/07/20240722_ito_32-1024x338.png)
メッセージ送信時の Webhook の主な内容は以下の通りです。
- “type”: “message” (メッセージイベントを示す)
- “text”: “こんにちは!” (送信されたメッセージ内容)
{
"destination" : "U011d69ae6157137961d7a18efdec8b08",
"events" :
[
{
"deliveryContext" :
{
"isRedelivery" : false
},
"message" :
{
"id" : "516325332631683201",
"quoteToken" : "ClRXvZ8RfJU6Pk6tBPyQXGyN1vb93d9SkzK2IUJpKL5QsCcrdKK……",
"text" : "こんにちは!",
"type" : "text"
},
"mode" : "active",
"replyToken" : "e907a6956ad….",
"source" :
{
"type" : "user",
"userId" : "Ub685b39e4346790d0edf5362f59ec152"
},
"timestamp" : 1720585184411,
"type" : "message",
"webhookEventId" : "01J2DDWSCV5JTJPR6BEB9F2XTB"
}
]
}
まとめ
本記事では、Claris Connect を活用して Messaging API の Webhook を受信し、その情報を処理するシステムの構築方法を詳しく解説しました。Claris Connect の特徴である「ノーコード」の環境を利用することで、プログラミングの知識がなくても、複雑な自動化システムを簡単に作成できることがお分かりいただけたかと思います。
次回の記事では、今回の Googleスプレッドシートの代わりに Claris FileMaker を使用してデータを記録・管理する方法をご紹介します。Claris製品同士の連携による、さらなる業務効率化の可能性にご期待ください。引き続き弊社のブログをお読みいただけますと幸いです。