店舗で仕事中に火災発生！その時あなたはどうする？初期対応を教えてくれる音声アプリ

こんにちは。
小売の会社に勤めている、くまです。
今はシステム部に在籍していますが、少し前までは営業で店舗勤務をしていました。
その際の経験としてですが、**店舗では驚くほど多くの事件や事故が起こります**。

- 地震や停電
- お客さまや従業員さんの転倒や体調悪化
- 電子レンジなどから発火
- お客さま関連

などほんの一例ですが、思わぬ時に思わぬ事故が発生します。いつもある事ではないので「対応ってこれで大丈夫かな？」と不安になる事もしばしば。
また、**社員が店舗にいない場合も多く、パートさんが初動対応をするケース**もあります。

初動対応は正確に実施しないと被害が拡大したり、責任を問われる可能性もありますよね。
その為の対応マニュアルはあるのですが、例えば**発火した際に、マニュアル探して対応を確認して…って火災が起きているのにそんな余裕ない**ですよね。
かといってマニュアルを丸暗記するのも大変だし・・・

# 音声マニュアルがあれば困らない！？

そこで考えたのが「**事故発生時に、声で質問したら音声で必要な初動を答えてくれるアプリがあれば**」というシンプルなアイデア。

調べると**ノーコードで音声アプリを作成できる`Voiceflow`というツール**がありました。

ノーコードでスマートスピーカーへの呼びかけプログラムを作成できます。
Amazon AlexaとGoogleアシスタント上で動作し、自前で使いやすいスキル（=機能）を作りたい方には、とても便利なツール。パーツを組み合わせるイメージで独自のスキルを構築できます。

**「事故発生時の初動確認」という小さな課題**ですが、いざというときにあったらいいなアプリかも。
半日で完成させることを目指して`Voiceflow`で作成開始！


# 半日で音声スキルが完成！

https://twitter.com/ishihar70064361/status/1538443790733627393

上記音声スキルのフローは以下。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/3cb5f1e1-5887-112f-9969-b804c239bda7.png)
質問したらその単語をGoogle SpreadSheetで検索して、該当行の内容を音声で回答するという簡単な内容です。

# ❶使用したツール
- [Voiceflow](https://www.voiceflow.com/)
- Google SpreadSheet（以下スプシ）

これだけです。
では作成の流れを簡単に説明していきます。


# ❷スプシの作成
Googleアカウントを作成しスプシで新規ブックを作成。以下画像のように４つの列を作成しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/2b79ebdc-fab5-8775-35a6-cfe079574db6.png)


:::note info
◆各列の説明
A列(acdcode)：主キーとして設定。後述しますがIFでの分岐に活用しています。
B列(acd)：ユーザーが事故発生時に話しかけると想定される単語を複数記載。
C列(sptcode)：D列(spt)へ連動させるためのcode。※後述しますがD列は関数で記載しておりそのためのcodeとなります。
D列(spt)：ユーザーへ初動対応を音声で説明する内容。
:::

※「火がでた」場合にユーザーからの質問は「火事」「火災」「煙」など複数の単語が想定されます。別シートに事案ごとに対応を記載し、C列の数字からVlookupでD列に反映させる方法を取っています。

▼事案ごとの対応を記載した別シート
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/5efd0b39-a63e-0341-ed65-b013a9d1fe6a.png)




# ❸Voiceflow作成の流れ
 Blockをフローの場所に配置するには、以下の通りドラック＆ドロップします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/fe007b23-7cee-98d1-e13b-5395c90bbc4f.png)

今回使用したBlockは以下の5つになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/7bf2351b-54a2-cd64-bd13-cb98300241d0.png)

# ❹Blockの配置
各Blockの設定方法を簡単に説明します。

**◆`Choice`Block**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/9809a8db-f55f-3572-56c3-e14403d7b182.png)

:::note info
ここでは1つの条件のみですが、複数条件や条件に合致しない場合(No Match)も指定できます。
:::

<br>


**◆`Capture`Block**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/f29907a8-b981-663e-e526-e637934c494a.png)
ユーザーが話した内容を変数に格納して、スプシへ送ります。
※上記画像の場合は{accident}が変数になります。
<br>

**◆`Google Sheets`Block**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/05ab7ce7-43a2-6e3a-190a-ae13b2cdf8a3.png)

変数を新たに作る際はテキストを{}で囲い、入力欄の直下に出てくるCreate …をクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/91d76266-ceff-9bfb-3fc1-5b9474632761.png)

<br>

**◆`IF Condition`Block**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/58ea6227-ffc9-9a60-21ca-9c15f0ded9a2.png)
ここに一番苦労しました。
このBlockを入れないと、スプシにない単語をユーザーが話すと「undefined」とこたえてしまいます。それを回避するためのBlockです。
この**IF Blockがあることによりスプシにない単語をユーザーが話しても「その項目はありません。もう一度お願いします。」と返す**ように分岐ができました。

方法は、スプシのA列に連番をふり、
・ユーザーが話した内容に該当あればその行の番号を取得=**0より大きいため該当あり**
・その逆であれば番号が取得できない＝**該当なし**
となります。
もっとスマートな方法もあると思いますが、これが出来たのは嬉しかった。

::: note info
他のサイトでは、IF Block内で
Expressionを指定してその中に`equal({変数名},undefined)`を入れる
Expressionを指定してその中に`{変数名} == undefined`を入れる
などありましたがいずれも上手くいかず…。ご存知の方教えて貰えると嬉しいです。
:::


以上のBlockをつなぐことで、本記事冒頭に掲載した動画の通りの音声スキルが完成しました。
<br>

上記のBlockを以下画像の様につなぐと完成です。※この記事冒頭にある画像と同様です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/3cb5f1e1-5887-112f-9969-b804c239bda7.png)

# 試してもらった結果
プロダクト段階なので音声入力でのテストは出来ませんが、ここまでのものを試して頂きました。

**❶店舗で働くパートさん**
不幸にもこの1年で社員不在時に「コンセントからの発火」「お客さまの嘔吐」を経験された方です。
> **〇良い点**
　事故がおきたとき頭がまっしろになって、最初に何をすれば良いか分かりませんでした。これがある事が頭にあれば、活用出来そうです。初動を教えてくれるし、このステップがある事で少し冷静になれそうな気もします。マニュアルもありますが、それを開く余裕もなかったし、開いたとしても余計に焦ったと思うので音声で分かるのは助かります。
> **△改善点**
　使うとしたらパソコン？レジ？売場で使いたいですね。あと、iPhoneのSiriみたいに柔軟？になってたらいいけどそれって出来るんですか？あと答えが来るのに少し時間がかかる(遅い)のは、事故が起きた時に焦るかも知れません。

**❷営業部　エリアマネージャー**
先日[Glideでアプリを作った際にも試してもらった](https://qiita.com/kuma_ssss/items/fafbc77ead55d53efdec)方です。忌憚のない意見を言い合える関係。
> **〇良い点**
　初動がわかるのはいいですね。従業員さんもそうですが店長になったばかりの人にも役立ちそう。くらいかな。
> **△改善点**
　文字でなく音声だから、メモして対応してっていうのは現実的ではないかもしれません。前のタスク管理に比べると使えそう！という感じはしないですね。イメージが湧かないというか。
　音声で聞いてもヒットしない場合が多そうですね。よくある検索ワードを反映させられないんですか？

# 振り返り

事故の対応は、「いつものこと」ではないものの「いつあるか分からないこと」で焦ったり方法わからなかったりで、手助けは必要だという認識は皆さまお持ちでした。
音声で教えてくれる発想は比較的好評でしたが、「内容の完成度」「どうやって実装するのか」などでイメージが出来ないという意見は共通しており、相変わらず実用化には壁が高いプロダクトとなりました。

ただ、また新しい技術に触れてひとつの企画物を作ったのは良い経験となりました。

エリアマネージャーから頂いた「よくある検索ワードを反映させられないんですか？」は、ひとまずユーザーからの質問をスプシで履歴を残せるようにしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/06f6fa6a-86cb-c692-0cca-81b18fc843b2.png)

最後までお読みいただきありがとうございます。

◆参考記事です。とても勉強になりました、ありがとうございました！

https://qiita.com/hexenschuss1112/items/7ebe6ae1a6af7874d030

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