Claris Connect で LINE WORKS ネコボット作ったにゃー (LINE WORKS API 2.0)

## Claris Connect で かんたんに LINE WORKS の Bot 作成

Qiita Engineer Festa 2022 参加記事です。

https://qiita.com/official-events/eeadea1de45a11be944e

Claris Connect で LINE WORKS の Bot を作ってみました。
LINE WORKS の API 2.0 のトーク Bot API を使ってます。

![l_147288799_43_d4b7d5297fd355ac82d93d2549b3e145.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/632988a7-7d78-5e4d-6c53-e67d0e313b32.png)

- 話しかけると、語尾にランダムに「にゃ」「にゃん」「にゃー」などをつけて返事するにゃー
- ついでにいろいろなネコの画像を送ってくる

Claris Connect は、編集画面がシンプルでわかりやすいです。初めてでも操作に戸惑うことがなかったです。
試用版にサインアップして、手探りで操作すること 1 時間未満で、この Bot はできました。

![l_147288799_44_c30bf41d6f1ddd2a654504cc151a1782.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/e6f78284-79b0-5a7c-3339-aceac92c0aff.png)

そこから、楽しくなって、さらに色々試してみていたら、API リクエストの上限のメッセージが表示されるようになりました。試用版は Developer プラン相当のようで、500 requests/月が上限のようです。

なお、作成途中でのテストが行いやすく、エラーの確認も容易です。

![l_147288799_41_d51347f6fc24d1950d09368e933cc330.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/cc0fe55c-9eee-312b-9522-f84ab47ac6bd.png)

今回は各種クラウド サービスのコネクタは使っておらず、組み込みの Utilities のコネクタだけを使っています。
以下のスクリーン ショットのような Utilities のコネクタが用意されています。

![l_147288799_24_7315874ce3db6d4bf330930d461363c9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/a5a60fcd-61f1-d851-dbdb-7a681b161ef6.png)

各種クラウド サービスのコネクタを用いたフローも容易に作ることができそうで、応用範囲が広そうに思います。

## LINE WORKS API 2.0

以下の LINE WORKS API を使っています。

メッセージ(Callback) 受信
https://developers.worksmobile.com/jp/reference/bot-callback?lang=ja

メッセージの送信 - ユーザー指定
https://developers.worksmobile.com/jp/reference/bot-user-message-send?lang=ja

Text
https://developers.worksmobile.com/jp/reference/bot-send-text?lang=ja

Image
https://developers.worksmobile.com/jp/reference/bot-send-image?lang=ja

LINE WORKS の Developer Console での API 2.0 の設定や、Bot の設定については LINE WORKS Developers サイトの記載や、Qiita 内の LINEWORKSタグの記事が参考になります。

https://qiita.com/tags/lineworks

## Claris Connect

Claris Connect のコンソールで Flow を作成します。



### LINE WORKS Bot のメッセージ受信のフロー

#### Webhook
トリガー用の Webhook を作成します。

![l_147288799_20_62a363a0c213e30a0d68e05a3ed5bb2c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/d59fbc9d-c0a8-1b47-5159-68e3f3eb1a57.png)

生成された URL を LINE WORKS の Bot の Callback URL に設定して、1 度メッセージを送信しておくと、Claris が Post の内容を解析してくれて、以降のアクション作成の際に便利です。

![l_147288799_22_59e1a336273a30fe18975bcbfd98d43b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/35ec0287-a914-d423-3d35-f8f52c64d685.png)

#### トリガー Incoming HTTP Request
Webhooks のコネクタの Incoming HTTP Request のトリガーを作成します。

![l_147288799_40_8c209c6017729be6e5a867989c032924.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/c937ad56-c351-a573-f0fb-4830e83a74b1.png)

作成した Webhook を用いるよう選択します。

![l_147288799_23_acb268e71a3b012cd8ee1cd80b17c8d9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/eed703ec-c407-5a27-ef68-761bea09586e.png)

### 受信したメッセージを基にメッセージ返信のフロー

#### アクション Return random number
Calcurations コネクタの Return random number アクションを使います。
![l_147288799_25_06b36525e76297f04768a9f83f0c5061.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/ec290375-5faa-0642-a94e-7bd148d3c780.png)

語尾にランダムに「にゃ」「にゃん」「にゃー」などをつけるために、ランダムな数値を生成します。

![l_147288799_26_63cc5cee509b1f554787783781fefda3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/dfcb7f30-9d24-3673-0873-e33b493dec93.png)

用意する選択肢にあわせて、数値の範囲を指定します。

![l_147288799_27_b1003c214941bdd9a3dca1e457ed6bda.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/7c2b60db-b271-e127-73cb-5f6ec35eb7b1.png)

#### アクション Get element by index
Lists のコネクタの Get element by index アクションを使います。

![l_147288799_28_6db8d37fae497344699cf149fe9fdebc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/62557297-2f6b-1055-3867-c2d62397f11c.png)

変数から、前のアクションで生成された数値を基に選択します。

![l_147288799_29_9fbb282c56543d11cbbf93fffbcd250e.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/8f3beb53-9df1-5d6a-9f89-c132c8b3b373.png)

語尾の候補を用意します。

![l_147288799_30_aef31d4d449cda91e39d871e55f7c1b1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/977e70e6-50ee-5656-8f8b-21fe8f8136b7.png)

前のアクションの数値をキーとします。

![l_147288799_31_448e6cc4e6a93921a2d350bfde299e1a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/539789c4-d595-9776-42bb-80b68105d9b2.png)

### アクション HTTP Post request
Webhooks コネクタの HTTP Post request アクションで、LINE WORKS Bot API のリクエストを送信します。

![l_147288799_32_95a7cb5da75fb59b5381c42ab05b837f.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/5a5d3b6d-857f-25c8-0af3-264779a20b98.png)

Request URL の botId と userId は、Webhook で受信したリクエストから取り出しています。

![l_147288799_33_30ae1aa76794339b611457aa9d270307.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/58a32cee-8824-5beb-73a2-646002e16b88.png)

Body の JSON data で、送信されたメッセージに、語尾を付加したテキスト メッセージを指定しています。

![l_147288799_34_a0cd0f7fd70cb880f1b4df76e6ae1642.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/a7a510df-67f1-de52-582c-d10f39ca2a0e.png)

Header で認証用のトークンの情報を指定しています。
今回、アクションにトークンを直接指定していますが、継続的な運用の場面ではトークンの生成や管理方法は適切に行ってください。

![l_147288799_35_eba381fc6d8916e65555b1e9308a9bfb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/eb74f438-9182-57f2-9916-442dbfa3006a.png)

### ランダムなネコ画像を取得して、メッセージで送信

#### アクション HTTP Get request
Webhooks コネクタの HTTP Get request アクションで、ネコの画像の情報を取得

![l_147288799_36_04fd50004007df2ac8b9eab30a8bda1f.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/8a390248-41c3-6f1f-4be1-35eb0ae7b645.png)

#### アクション HTTP Post request
Webhooks コネクタの HTTP Post request アクションで、LINE WORKS Bot API のリクエストを送信します。

![l_147288799_37_d33fb333da05a54f24147468c7505ee5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/ddc277eb-0bb4-4619-cb9e-5c2e80d0a80e.png)

返信メッセージと同様の POST リクエストです。Body の JSON data は、メッセージ形式を image で指定して、前の手順で取得したネコ画像の URL を指定しています。

![l_147288799_38_c6186fece88f6f51523b888758fa101c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396107/bcc9bcc8-c558-c09b-3fc9-f798b6a0e424.png)

フローは以上です。

## 動作確認
LINE WORKS からメッセージを送ると、Bot からメッセージとネコ画像が送り返されます。