LINE WORKSのWebhook機能を使ってGravioとノーコードで連携!AI・IoTの活用が更に簡単に(活用例もご紹介)

こんにちは、Gravio担当のヤマグチです。
LINE WORKS社より、様々なWebサービスやシステムからの情報をLINE WORKSに簡単にメッセージ送信できる「Incoming Webhook」機能が発表されました。
以前からチャットボット機能(※)は提供されていましたが、Webhookの実装により、手軽に連携が可能になりました。これにより、GravioからLINE WORKS宛に簡単にメッセージを送信する仕組みを構築できるようになりました。
例えば、工場の機器に設置された温湿度センサーのデータをGravioが収集し監視、基準を超えた値を検出すると「LINE WORKS」へ自動的にメッセージ表示させ知らせることで、迅速な対応ができるようになります。
Incoming Webhook機能とGravioを利用することで、カメラやセンサーで得られた「人・モノ・空間」に関するAI/IoTデータなどの様々な外部情報を、LINE WORKS上で受け取れるようになります。
本記事では、LINE WORKSの「Incoming Webhook」の設定からGravioとの連携、そしてメッセージ送信までの一連の流れをご紹介します。ぜひご参考にしていただければ幸いです。
※過去にGravioがチャットボット機能を使った設定方法は、以下記事をご覧ください。

用意するもの
- Gravioアカウント(有償版のご契約が必要となります)
- LINE WORKSのアカウント(設定時は管理者権限が必要)
使用環境
- Gravio Studio 5.3.4
- Gravio HubKit 5.3.1
目次
- LINE WORKSでの設定
1-1. トークルームを作成
1-2. Incoming Webhook アプリを追加
1-3. トークルームにIncoming Webhook Bot を招待
1-4. Webhook URL を発行 - GravioとLINE WORKSの連携設定、メッセージ送信
- データ活用例
3-1. 温度異常時のアラート通知
3-2. URLボタン付き温度異常時のアラート通知 - まとめ
まずは、Gravioからの通知先となるトークルームを作成します。
LINE WORKSの管理者画面にてサービス一覧の「トーク」をクリックします。

LINE WORKSのトーク画面にて、「新規作成」をクリックします。

トーク画面が作成されていることを確認します。

その画面の右上「・・・」をクリックし、「チャンネルID」を開き、
チャンネルIDをコピーします。以上で、トークルームの作成は完了です。

LINE WORKSの管理者画面で左側のメニューから「アプリ」を選び、
「Incoming Webhook」をクリックします。

「保存」をクリックすると、
「アプリを追加しますか?」という画面が表示されますので、「OK」をクリックします。

Incoming Webhookが追加されていることを確認します。
以上で、Incoming Webhook アプリの追加は完了です。

作成したトークルームに追加したIncoming Webhookを招待します。
トーク画面の右上「・・・」をクリックし、「招待」をクリックします。

メニューの「Bot」をクリックし、
「Incoming Webhook」のチェックボックスを入れ、「OK」をクリックします。

自動送信されてきた文章の「Webhookリスト」をクリックします。

Webhookの追加画面にて、以下の項目を設定後、「追加」をクリックします。
- Webhook名:任意の名前を入力
- チャンネルID:コピーした チャンネルIDをペースト

作成されたWebhookのURLをコピーします。
以上で、LINE WORKS側の設定は完了です。

LINE WORKSとの連携のため、Gravio Studioを起動し、
以下の手順に沿って新規アクションを作成します。
コンポーネントは、「HTTP Request」を選択します。

HTTP Requestの画面にて以下の項目を設定します。
- HTTPメソッド:プルダウンメニューから「POST」を選択
- URL:コピーしたWebhookのURLをペースト
- Content-Type:プルダウンメニューから「application/json」を選択
- cv.Payload =
{"body":{"text": "テスト(任意のメッセージ)"}}

設定が終わりましたら、右上の「再生ボタン」をクリックして正常に動くか確認します。
画面下のログに「Action Ended」が表示されたら、正常に動作しています。

LINE WORKSトークルームにメッセージ通知されているか確認します。
以上で、GravioとLINE WORKSの連携は完了です。

LINE WORKSへメッセージを送る方法として、いくつかの例を紹介します。
Gravioでは、メッセージ以外にもIoTセンサーやAIと連携することができ、そのデータを送出することができます。例えば、工場内に温度センサーを設置し、特定の値を超えた場合にその値と注意喚起を促すメッセージ通知を自動で送出することが可能です。
HTTP Requestの画面にて以下の項目を設定します。
- cv.Payload =
{"body":{"text":ToString(tv.Data)+"度です。現場を確認し対応してください。"}}

トリガーの画面にて以下の項目を設定します。
- トリガー名:任意の名前を入力
- エリア:プルダウンメニューから温度センサーが登録されているエリアを選択
- キーレイヤー:プルダウンメニューから温度センサーを選択
- Temperature:プルダウンメニューから条件(しきい値)を選択
(例:30度以上の場合、>=30としきい値を設定) - アクション名:作成したアクション名を選択

温度センサーのしきい値を超えた時に
LINE WORKSトークルームにメッセージ通知されているか、確認します。

前述と組み合わせることで注意喚起を促すメッセージ通知にWebページ(URL)を添付することが可能です。例えば、作業員を手助けするために対応マニュアルを付けて作業のサポートをすることが可能です。
HTTP Requestの画面にて以下の項目を変更します。
- cv.Payload =
{"title":"温度アラート",
"body":{"text": ToString(tv.Data)+"度です。現場を確認し対応してください。"},
"button":{"label": "対応マニュアル",
"url":"https://www.gravio.com/jp (対応マニュアルが掲載しているURL)"} }

温度センサーのしきい値を超えた時に
LINE WORKSトークルームにメッセージと対応マニュアル(URL)にリンクしているボタンが通知されているか、確認します。

いかがだったでしょうか。
本ブログでは、GravioからLINE WORKSの「Incoming Webhook」機能の連携方法を解説しました。設定する項目は少なく、すぐに実装できるかと思います。是非、皆さんも試してみてください。