らくらく音声入力！VoiceflowとGoogleスプレッドシートで作る体調管理チェックの記録システム。

こんにちは、むらかにです。
私は食品検査会社で働く会社員で、IT初心者ですが、新しく知った技術を使って職場の細々した課題の改善活動に取り組んでいます。

今回、使用する技術はこちら！
**ノーコードでAmazon AlexaやGoogleアシスタント用の音声アプリを作成できるVoiceflowというサービスです**。

https://www.voiceflow.com/

これを使って弊社の課題を解決したいと思います！

## 課題：紙の体調管理チェックシートの管理が大変。

私の職場では、検査というモノを扱う仕事の都合上、コロナ禍でもほぼ全員が出勤しています。このため、毎日の出勤時に入口で体温および、のどの痛みなどの体調不良が無いかを**紙の体調管理チェックシートに手書きで記入しています**。この紙は**週ごとに印刷して交換が必要なうえ**、保管管理も大変で検索性もよくありません。さらに、記入用の**ボールペンは使うたびに使った人がアルコールで拭いて消毒する**ルールになっており、これがまた面倒くさい！そして、うっかり**記録の書き忘れも頻発**しています。また、全社的にペーパーレスを推進していることもあり、**紙の管理はできるだけ減らしたい**です！

![体調管理シート紙.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667068/384096e7-c0b7-4003-00e4-ae614874bf7b.png)

そこで、**出勤してきたら入口で体調管理チェックをするという、これまでの習慣の流れを大きく変えずにこの課題を解決したい**と思い、今回は**音声で体調管理チェックを記録するシステム**を作ることにしました。

## 使用したツール
* Voiceflow
* Googleスプレッドシート
* [Make（旧integromat）](https://www.make.com/)

## 作りたかった流れ
Voiceflowで出勤者の名前、体温、体調不良の有無の情報を取得 → Googleスプレッドシートの体調管理チェックシートに記入 →　Makeでスプレッドシートの情報を集約する

## 完成品の動画

https://twitter.com/fefwo0778th/status/1538387283115929603

## Googleスプレッドシートの準備
※ 今回の画像で使用している名前と社員番号は架空のものです。
![体調管理ss.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667068/3de6aa0b-dfb9-2a7b-a79f-fb8ee5673dc1.png)
記入用のスプレッドシートを用意します。A列はセルに「=TODAY()」を入れて当日の日付が表示されるようにしています。B列は個人の入力行を特定するための社員番号の列です。
紙の体調管理チェックシートの事項を置き換えるため、D列は体温を入力、E～H列は下記の項目について〇を入力する欄です。
* 激しいのどの痛みがない
* 激しい咳をしていない
* 呼吸が苦しくない
* 腹痛や下痢の症状がない


## Voiceflowの設定
Voiceflowの基本的な使い方はこちらが詳しいです。

https://zenn.dev/kun432/books/f6e1b45fb930118d6524

### フローの全体図
![体調管理vs2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667068/6875b1bf-aee9-4c6f-6d03-4c46054f5529.png)

<details><summary><b>詳細設定を表示（折りたたみ）</b></summary><div>

### Captureブロックでユーザーの発話を変数に格納する
まず、ユーザーに社員番号を言ってもらい、それを変数「number」に入れます。
発話を変数に格納するためにはCaptureブロックを使います。
![vscapture1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667068/b31de65b-93fb-763f-3114-0a74d80396c0.png)
最初はユーザーに自分の名前を言ってもらうつもりでしたが、音声入力後の漢字の変換が制御できないため、数字を言ってもらうことにしました。

### Google Sheetsブロックでスプレッドシートと連携
スプレッドシートとの連携も簡単にできます。
**スプレッドシートを検索してデータを取得したい場合は、「Retrieve Data」を選びます**。
With Settingで、検索したい列（社員番号の列）と検索キーワード（ここではCaptureブロックの変数「number」）を設定し、Mapping Outputで欲しい結果が存在する列と、結果を出力する変数を指定します。
このとき注意なのは、**検索条件は単純なイコール（＝）しかない**ようです。
そして、**複数条件の検索にも対応していない**ようです（なので、「日付が〇日」AND「社員番号XXXXXX」の行みたいな設定はできない）。
![vsgs5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667068/6206c55f-2686-e792-1132-66d1897d4d30.png)

また、**スプレッドシートの特定の行に書き込みたい場合は、「Update Data」を選びます**。
（ここでは、社員番号の検索のときに取得したRow Numberの行に体温や体調不良無しを表す〇印を書き込んでいます。）
![vsgs7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667068/e011fba2-eb1f-71ea-f98f-175bfb2a942a.png)

### Choiceブロックで分岐を作る
分岐したい場合はChoiceブロックを使います。「Add Choice」のボタンを押すと分岐を増やせます。Edit Intentの画面では、Utterancesの欄に返事として想定される言葉を入れておきます。
また、No matchの場合は「もう一度言ってください。」と言って再度入力をお願いする形にしました。
体調不良はありますか？という質問に対して「ある」「ない」で答えてもらい、「ある」場合は上司への相談を促し、「ない」場合は体温等をスプレッドシートへ登録の流れへ進みます。
![vscc5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667068/66f21a49-38b4-c7f1-814f-397ed07cc2cd.png)

</div></details>

## 職場の人に使い勝手を試してもらう
一旦、ここまで作ったところで、職場の同僚3名に試してもらい、フィードバックを集めました。
**1人目：パートさん（50代女性）**
**【⭕良い点】**
* 今は使用したボールペンを毎回消毒しているので、紙に手書きより楽だと思う
* 入力方法も特に難しくは感じない

**【❌悪い点】**
* **一連のやりとりが長い**、出勤時は混むので、やりとり2往復くらいで済ませたい
（できれば、**「名前、体温、ない」と言ったら登録くらいのスピード感で済ませたい** ）
* 音声を認識しなかったときの戻し方がわからない

**2人目：入社3年目の社員さん（20代男性）**
**【⭕良い点】**
* 音声入力なのでわかりやすく、機器の入力操作に慣れない人には良いと思う

**【❌悪い点】**
* **時間がかかる**
* カメラに体温計の表示画面を見せたら自動で画像認識して体温を登録とかになるといいと思う
* うまく入力できなかったときに前に戻れるといい

**3人目：入社4年目の社員さん（20代女性）**
**【⭕良い点】**
* スムーズに使えた

**【❌悪い点】**
* **時間がかかって行列になりそう**
* 体温が37.5℃以上の時点で別の分岐に入ると良いのではないか

意見をまとめると、**一連のやり取りに時間がかかるのが一番のネック**でした。

## フィードバックを受けての改善：Intentブロックでやりとり時間の短縮
入力の簡便さは良かったものの、時間がかかることの評判が悪いこのシステム、やりとりの時間を短縮するためにどうすればよいのかを調べたところ、ワンショット発話なるものを発見。

https://kun432.hatenablog.com/entry/voiceflow_tips_6_one_shot_invocation

Intentブロックを使えば、会話の途中でも特定のキーワードでIntentブロックへ飛ぶことができます。ここでは **「短縮」というキーワードを設定して正規ルートとは別の短縮ルートを設けました**。短縮ルートではユーザー側が社員番号、体温、あるorないを区切って発話することで各ワードが変数に入ります。短縮ルートの最後は正規ルートにつながっているので、最終的にはスプレッドシートへの登録が完了します。
![vf短縮3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667068/685cc48c-217b-ebdc-a1bd-f84dfa53a563.png)
改善後のものはまだ職場の人に見せることができてないので、フィードバックはもらえていませんが、もともと**30秒ほどかかっていた一連のやりとりが13秒に短縮できました**。しかし、それでもまだ長いかもしれません。

## Makeの設定
そして、引き続きMakeを設定して、入力したスプレッドシートの内容を集約する部分＆入力忘れの防止機能を作っていきます。
* 1日1回集約シートへ結果を転記する
* 体調管理チェックを入力していない人の情報をLINE Botへ送信

<details><summary><b>詳細設定を表示（折りたたみ）</b></summary><div>

### 1日1回集約シートへ結果を転記する
今回の体調管理チェックシートの表は最終的には下記のように、社員の並び順が一定かつ日付ごとに連なる形にしたいです。
![vfスプシ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667068/29e027ab-8fca-319a-80f5-b648f3e05b36.png)
Voiceflowのスプレッドシート連携では複数条件による検索ができなかったため、先にこの形の表を用意して「日付が〇日」AND「社員番号XXXXXX」の行に入力するということができませんでした。そこで、Voiceflowが入力するスプレッドシートの行を**Makeを使って1日に1回指定の時間に別の集約シートに転記させる**ことにしました。
開始時刻のトリガーを設定した「Search Rows」で、Voiceflowが入力するシート（1日分のデータのみ入っているシート）について、フィルターをかけずに全ての行のデータを取得し、「Add a Row」で集約シート（複数日のデータを1つにまとめるシート）に転記しています。
![vfmake1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667068/63e7a4e7-1055-f044-8597-bd44acec9004.png)
また、転記後は「Clear a Cell」でVoiceflowが入力する部分のセルの中身を空にして、翌日分を入力できるようにします。

### 体調管理チェックを入力していない人の情報をLINE Botへ送信
これもまた開始時刻のトリガーを設定した「Search Rows」でVoiceflowが入力するシートを検索します。そして、社員番号が存在する行かつ体温が未入力の行を抽出してLINE Botへメッセージを送ります。これは、体調管理チェックの記入漏れ防止のための機能ですが、休みの人を考慮していないので、別途全員の休日データを用意して連携させればさらに良いかと思います。
![vfmakeline5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667068/df3da49f-9496-cbf0-26ff-51884594b3e9.png)

</div></details>

これで完成です！

## Voiceflowの追加設定
そして、以下はVoiceflowの設定が楽しくなって特に要望もないのに作っちゃったこだわり機能です。
* Voiceflowで作るおみくじ
* 曜日で変わるVoiceflowのコメント

<details><summary><b>詳細設定を表示（折りたたみ）</b></summary><div>

### 自己満足の作りこみ要素①：Voiceflowで作るおみくじ
VoiceflowのIntentブロックで「おみくじ」と言うとおみくじルートに入ります。「Retrieve Data」のときにスプレッドシートの検索キーを指定しない場合はランダムになるというのを教えてもらい作りました。気持ちよく仕事を始めたいのであえて凶は抜いています。
![vfomikuji5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667068/23062f71-7a92-cae5-700e-a26fe58c7fbd.png)
また、下記の記事を参考に鐘の音の効果音もなるようにしています。

[スキルを楽しくするためのテクニック](https://zenn.dev/kun432/books/f6e1b45fb930118d6524/viewer/4c7e39b81f8b463682a6)

しかし、**朝の忙しい出勤時間帯に誰も使わない機能だと思う**。

### 自己満足の作りこみ要素②：曜日で変わるVoiceflowのコメント
VoiceflowのCustom CodeブロックにはJavaScriptが書けます。そこで、getDay() メソッドで、その日の曜日（0～6の番号になる）を取得して曜日ごとに違うコメントを話すようにしました。

![vfcom4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667068/450ae28e-9bb9-a451-a5e4-e2181d6a212d.png)
```JavaScript:comment.js
now = new Date();
day = now.getDay();


if(day === 0){comment = '日曜日なのにお疲れ様です！'
  
} else if(day === 1){comment = '今週もよろしくお願いします！'
  
} else if(day === 2){comment = '火曜日は帰りにお買い物いかがですか？'
  
} else if(day === 3){comment = '週半ば気合をいれましょう！'
  
} else if(day === 4){comment = '今週も半分を切りました！'
  
} else if(day === 5){comment = '週末まであとひといきです！'
  
} else if(day === 6){comment = '土曜日は静かですね！'};
 
```
しかし、**朝の忙しい出勤時間帯に誰も聞いてないと思う**。

</div></details>

## 職場の課題解決のためのVoiceflowのその他の使い道
Voiceflowがさらにその他の課題解決に使えないかを考えたところ、私の職場には手書きのアンケート用紙から文字をエクセルに入力するという作業がありました。アンケートの文字を人が読み上げることでVoiceflowを簡易的な**文字起こしツール**として使えないか検討してみました。
![vfmoji.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667068/c2fed8e4-f3db-984c-f429-b1aebc1b428d.png)
その結果、できなくはないが**漢字の正しい変換が難しい**ことがわかりました。
「ごはんの甘味（あまみ）が強い」という言葉が「ごはんの奄美が強い」や「ごはんの天海が強い」になってしまう！
この点は甘味を「かんみ」と発音することで正しい入力ができることを発見しましたが、誤変換ごとに試行錯誤するくらいなら文字を手で打ち込んだほうがはやいです。
一応、30分くらいでぱぱっと作った文字起こしプロトタイプをアンケートの集計作業をしている2人に使ってもらい感想を聞いたところ、やはり漢字の誤変換が厳しいことと、句読点が入らないことが使いづらくだめでした。というわけでこの案はボツになってしまいました。

## まとめ
これまで、いくつかのツールを触ってきましたが、私の中では今回のVoiceflowが一番作っていて楽しかったです。
アイデアのVoiceflowで文字起こしはいまいちだったし、今回作った体調管理チェックの記録も時間がかかる問題が完全には解決していないので結局実用としては使えないかもしれません。しかし、**さくっと作って良いのか悪いのかをすぐに試せるというのは物事を先に進めるために重要だと思いました**。結果としてはダメでも、**ダメであることがわかれば、次の方法探しにすぐ取り掛かることができます**。自分で作れば、アイデアを試すための労力が少なくて済むので、**数多くのアイデアを試すことができ、その中からわずかに生まれる良いものを見つけられる確率が上がるような気がします**。また、修正自体も自分でできるので小回りがすごくきくなぁと思いました。
最初は使い方がちんぷんかんぷんだったノーコードツールのMakeもだんだん慣れてきて、いまではスプレッドシートとの連携はお手の物で自分の成長も嬉しく感じます。

以上、御覧いただきまして誠にありがとうございました。

## 参考にした資料

https://qiita.com/kun432/items/666ae13f097004ea7935