自社サービス内に簡単にチャットボットを構築できるwebアプリ

![Screenshot 2022-10-12 at 19.03.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663837/d86248b7-f41b-ef97-48fe-8fa937775bd3.png)

「自分のサイトを自動化したいなあ」と思って簡単にチャットボットを
導入できないかと探していたところ、こちらのサービスでチャットボットが簡単に作れるようなので自習も兼ねてテスト的に作成してみた。

https://ifro.ai/

売りとしては、かなり簡単にチャットボットを自分のサービスに組み込めるらしい。。

# ■早速使ってみる

とりあえずHPの __新規作成__ からアカウントを作成してみる。
アカウント作成は非常に簡潔で一瞬だった。早速マイページを拝見。

![Screenshot 2022-10-12 at 19.10.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663837/8c5f1066-f27b-4c14-3d93-697de382419a.png)

シンプルだけど何やた聞き覚えのないワードが・・「__スキル__」 とは・・？
<font color="red">__こんな時はとりあえずドキュメントを読む。__</font>

`※ちなみにこの辺を読んでみた。`
__・公式マニュアル__
https://docs.ifro.ai/index.html
__・公式？ノート__
https://note.com/ifro/n/ne5d217978385


<font color="Blue">__どうやら一つのチャットボットの単位をスキルという風に表しているらしい。__
</font>
<table>
     <thead>
    <tr>
        <th>チャットボット名</th>
        <th>サイト上の表示</th>
    </tr>
    </thead>
  <tr>
    <td>
       自社サイト用のチャットボットAくん
    </td>
    <td>
        スキル1
    </td>
  </tr>
  <tr>
    <td>
       LINEアカウントのチャットボットBくん
    </td>
    <td>
        スキル2
    </td>
  </tr>
  <tr>
    <td>
       通販サイトのQ＆AのチャットボットCちゃん
    </td>
    <td>
        スキル3
    </td>
  </tr>
</table>

みたいなイメージと理解した。

よくあるフロー図みたいな感じで、
機能ごとのモジュールを繋ぎ合わせて一つのボットを作っていくような形らしい
__(下記画像参照)__

![Screenshot 2022-10-12 at 19.27.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663837/6dd66f7b-7080-2f1a-c5fa-f9dee777f6a8.png)

それをノーコードでGUIで作れるということなので確かにやりやすい。
音声を聞き取る専用のモジュールだったり、プログラムのIF文みたいなモジュールから、会話のログを記録できるようなモジュールがあるらしい。

__ただ、一からそれなりのものを作るのはドキュメントを少し読む必要がありそう・・__

解決策を調べてみたら、
### 既に完成したスキルを公式が配布してくれているらしい。
<font color="Orange">__テンプレート__</font>と呼ばれているらしく、会社問い合わせ用とかLINE用とか弁護士系サイト用みたいなマニアックなものまであるらしい
_それをそのまま使う_ __or__ ~~バラして参照したら直感的にやりやすそう~~
ということで今回はテンプレートを使う。

~~一番わかりやすそうだったので~~ __会社HP用のボットを使ってみることにした。__
メニューの __ストア__ から __テンプレート__ へ移動
![Screenshot 2022-10-12 at 19.33.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663837/e7fffef1-29db-6be7-aef0-1876a00ac295.png)

![Screenshot 2022-10-12 at 19.33.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663837/9b027819-af86-1a80-7da9-0f4c745c7d4c.png)

# ■いざ開発

ボットをHPに組み込むためにAPIの認証情報が必要らしいので早速取得してみる。

シンプル故に認証情報をとれそうなところがどこにもないぞ　と思いきや
<font color="Red">__スキルを作成後に公開する必要があるらしい。__</font>

スキル画面から早速公開をしてみる。
![Screenshot 2022-10-12 at 19.37.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663837/b80978a6-62ff-b43a-6134-d69ff335f2fc.png)

すると、スキル一覧にこのように公開済みスキルとして表示された
![Screenshot 2022-10-12 at 19.38.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663837/0b13a946-59a5-309a-6c82-e7bce09d3f90.png)

こちらからキーとシークレットを取得できた。
![Screenshot 2022-10-12 at 19.38.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663837/e23b0e1d-d310-8eab-bd40-bbbf02f9c351.png)


とはいえ、
「GUIからなんやら一から作るのは面倒だ」という私のようなものの為に
<font color="Blue">__公式でGitHubを公開してくれている__</font>ようなのでそちらをまずはクローンして作業開始。

__○使用させて頂いたGithub__
https://github.com/Palsbots/ipron-web-client


#### READMEに大体必要そうなことは書いてあるのでその通りに作業してみる。

.env.localをpackage.jsonやらと同階層に作成し、下記情報を入力。
<table>
     <thead>
    <tr>
        <th>キー</th>
        <th>値</th>
    </tr>       
    </thead>
  <tr>
    <td>
       REACT_APP_API_URL
    </td>
    <td>
        https://api.ifro.ai/v1
    </td>
  </tr>
  <tr>
    <td>
       REACT_APP_PROJECT_KEY
    </td>
    <td>
        公開したスキルから取得したkey
    </td>
  </tr>
  <tr>
    <td>
        REACT_APP_PROJECT_SECRET
    </td>
    <td>
        公開したスキルから取得したsecret
    </td>
  </tr>
  <tr>
    <td>
       REACT_APP_GTM_ID
    </td>
    <td>
        これに関しては無視でいいらしい。
    </td>
  </tr>
</table>

```.env.local
REACT_APP_API_URL=https://api.ifro.ai/v1
REACT_APP_PROJECT_KEY=プロジェクト・キー
REACT_APP_PROJECT_SECRET=プロジェクト・シークレット
REACT_APP_GTM_ID=GTMID
```

node_modulesをダウンロード
```
npm install
```
早速で実行してみる
```
yarn start
```

すると何やら可愛らしいロボットがウィンドウ全体に現れた。
![Screenshot 2022-10-12 at 19.55.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663837/c83fffa7-e329-7ff1-47f6-af626a0472b2.png)
今回は音声かどうか聞かれたのでイエスにしてみた

__ん、あれ？__
__設定したメッセージは返ってきてるもののどうやってこっちから入力するんだ？__

てっきり、チャット形式の入力欄が表示されるものと思っていたが
どうやらこのまま即使えるものではないらしい

## ■ソースコードを除いてみる。

一応送信用のスクリプトっぽいのを見つけたので
簡易的に入力欄を用意して送信してみようと思う。
IpronThread.tsxファイル内の __閉じdivタグの真上__ に下記を追加。
```IpronThread.tsx
<input type="text" value={inputMes} onChange={(e) => setInputMes(e?.currentTarget.value)}/>
<input type="button" value="送信" onClick={() => submitMessage(inputMes)}/>
```
__IfroThread.ts__ というファイル内にsendMessageという外部関数があるので使ってみた。
fetchで送信を行なっているようなのでPromiseで受け取った値をJSで処理しやすいように整形し、通常だとログは出ないのでログを出力してみる。
<font color="Red">__※IpronThreadコンポーネント内に下記を記述__</font>
```IpronThread.tsx
const submitMessage = async (mes:string) => {
    const response = sendMessage(uid,mes)
    const result = await response.then();
    console.log(result);
}
```
レスポンスの中を覗いてみるとこんな感じ。無事にやり取りできている様子。
![Screenshot 2022-10-12 at 20.05.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663837/56f503d9-437c-3def-8823-8716fd93fdf9.png)

公式のドキュメントを見る限り、
__client_rendering_content__ がこちらが送信した内容の返答になっている

__IpronThread.tsx__ 内にある内部関数の __onSendMessage__ という関数がその他処理のトリガーになっているようなのでこちらを利用して再度実行。
```IpronThread.tsx
const submitMessage = async (mes:string) => {
    const response = sendMessage(uid,mes)
    const result = await response.then();
    console.log(result);
}
```
__↓こちらに変更__
```IpronThread.tsx
const submitMessage = async (mes:string) => {
    const response = onSendMessage(mes)
}
```

すると、チャット形式でのやり取りに成功。音声も流れるみたい。
![Screenshot 2022-10-12 at 20.15.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663837/a0adbfb7-af79-1e48-46fb-3bfcb1b9960a.png)
__↓↓↓__
![Screenshot 2022-10-12 at 20.15.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663837/5bb82c88-3837-e375-a4f3-a145a19e57c8.png)



これはあくまでデモ的なものなので、
実際の運用ではもう少し見た目部分や操作性は考慮する必要がありそう。
とはいえ、データのやり取りの部分の関数などはgithubでも公開されているので自社サイト内等で簡単なボット構築なら直ぐにできそう。

<font color="Red">__「非エンジニアが気軽に」__</font>とまでは行かないけどエンジニアが
自社のサービスに組み込むならかなり使い道はありそうです。

__更新も行っている__ みたいなので、
今後さらに簡単になるのかも？