Claris Connect を使って LINE のエコーボットを作ってみた

:::note info
この記事は Qiita Engineer Festa 2022 の
**「Claris Connect を使った SaaS 連携ユースケースを紹介しよう！」**
に参加しています。
:::

# はじめに

表題の通り、この記事では Claris Connect を使用して LINE bot を作成します。
Claris Connect は今回初めて知ったサービスですが、ノーコードですぐに LINE bot を作ることができ、多少の Web の知識は必要としますが非エンジニアの方でも簡単に何かを作ることができそうな雰囲気を感じました。

この記事がその導入としてお役に立てれば幸いです。


# 前提条件

本記事では Claris Connect の設定内容を主として取り扱うため、Claris Connect のアカウント作成及び LINE bot を作るための準備は事前に完了しているものとします。

Claris Connect をお持ちでない方は以下のリンクから15日間の無料評価版が利用できます。
https://www.claris.com/ja/trial/connect

また、初めて LINE Messaging API を触る方は [Messaging APIを始めよう](https://developers.line.biz/ja/docs/messaging-api/getting-started/) を参考にチャネルの作成をお願い致します。


# 本題

ここから Claris Connect を使用して LINE bot を作成していきます。
今回はユーザーから受け取ったメッセージをそのまま応答するエコーボットを作成します。

## 1. Webhook の登録

最初に、LINE Messaging API の Webhook を Claris Connect で受け取る部分を作成します。

まずは Claris Connect のプロジェクトを作成し、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314315/9d5dba05-22c3-0ee1-40fa-e8c8d8bde813.png)

「Webhook」タブを選択して webhook を作成ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314315/1544d5f0-98e9-d100-33ff-777021a863e1.png)

今回は「MessagingAPIWebhook」という名前の webhook を作成しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314315/930c3dde-1075-1734-5c5d-a93e9ec4f2f8.png)


次に、 LINE Developers コンソールを表示して、「Messaging API設定」タブの「WEbhook URL」に先ほど作成した Claris Connect の webhook の URL を貼り付けます。
※このとき、その下の「Webhookの利用」にもチェックが入っていることを確認します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314315/7f582f08-a0e7-c184-60a4-a976e36c2aa7.png)

更新したのち、「検証」ボタンを押下して成功と表示されればOKです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314315/c0b0fe84-20d5-8317-5340-85133d6c7239.png)


:::note info
**この時点で一度、この公式アカウントに対してメッセージを送信しておきましょう！後の工程で役に立ちます！！**
:::


## 2. Flows を作成する

ここからはひたすら Claris Connect の設定です。
「Flows」タブから Flow を作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314315/f547078e-e50e-bccf-3d0e-200a70d6efb2.png)

はじめに Trigger の設定を求められるので、Webhook を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314315/f2a5022f-44bc-a072-a03b-3808e533cc43.png)

設定を進めると webhook の選択画面が表示されるので、先ほど作成した webhook を選択して保存します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314315/6b105c45-dd1f-1700-86bb-f91f64f0f75d.png)


次に、webhook を受け取った後の処理を設定していきます。
まずは Trigger の右端にある + ボタンを押下して「Repeat」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314315/0c3be42c-afc9-605b-8951-a5b5d26bf958.png)

先ほど webhook を登録したタイミングでメッセージを送信している場合、ここには既に LINE Messaging API で実際に受け取った値が表示されていると思います。
Messaging API の Webhook を受け取った後はすべての events を処理したいので、赤線を引いた `events` を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314315/1a96af7d-644d-ee0d-d91e-e4bb844b5f31.png)

これで events に対する繰り返し処理が実現できたので、その内部で実行するアクションに返信処理を作成していきます。
まずは Webhooks を選択して、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314315/cd3ad229-78f5-db9e-e71a-3a29a27e5328.png)

HTTP POST request を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314315/8df72982-d9f8-ce31-4257-d6a68c9fcd81.png)

最後に、応答の内容を設定します。
ここは API の知識を必要とするのですが、以下の画像と [リファレンス](https://developers.line.biz/ja/reference/messaging-api/#send-reply-message) を参考にすれば十分エンジニアでなくても設定は可能だと思います！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314315/39e9e7b2-5fbd-cb1d-fa8a-8d541d997152.png)


## 3. Flows を有効にする

自分が一番苦戦した工程です。  
最後に、右上のトグルスイッチを切り替えて有効にすると LINE bot の完成です！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314315/8538c04e-8aef-043e-da26-5c0f824bf21a.png)

動いている状態だと「Run now」と表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/314315/d8a3310b-ae3d-f20a-4576-3f97c11fc629.png)


# まとめ

若干の API の知識は使いましたが、ほとんどキーボードを使うことなく LINE bot が簡単に作れました。
本来、Webhook を受け取るためにはサーバーを立てる必要があるのですが、そういった作業なしにこれだけのことができるのは素晴らしいです。

今回は Webhooks という機能しか使っていませんが、実際には様々なサービスともっと簡単に連携することができるので、アイデア次第で誰でもサービスを作ることができると思います。

興味を持たれたら是非、触ってみて下さい。