VoiceFlowを使ってSlackで出退勤botを作ってみた。

ゆっきです。

早いもんでもう9月ですね・・
あと4ヶ月で今年が終わろうとしてるなんて(ハエェ

また前回投稿から間が空いてしまったんですが、
今回は最近個人的に愛用しているサービス、
VoiceFlowでAlexaスキルを作ってSlackに連携して出退勤Botを作ってみたって話です。


VoiceFlowとは

VoiceFlow

フローチャート形式でブロックを並べて繋げるだけで
ノンコードで誰でも簡単にAlexaスキルやGoogleAssistantアクション
(以下、便宜上両者を合わせてアプリとします)が作成できるプラットフォームです。

しかも驚くことに使用料金については一部有料コンテンツはあるものの
アプリ開発にかかる部分は無料。
そしてドキュメントは公式で公開されているので、
学習面に関してもお金を一切とらない男前っぷり・・。
(ただし、内容は全て英語なのである程度読み解く力は必要です。)

☝️作成画面はこんな感じ。
ちなみに日本語版のチュートリアル動画をYouTube上で公開しています。
(VoiceFlow公認です!)

まだコンテンツが少ないので、翻訳を手伝ってくれる人募集中。。
(一人で翻訳して動画作って編集するまでがなかなかしんどい・・)

とりあえずVoiceFlowについてはこれくらいにして、
早速どうやって作成したかをやってみましょうー。

最初にVoiceFlowで流れを作る

ある程度使い方は知っているので、5分くらいでサクッとフローを作成しました。

こんな感じ。

めちゃくちゃシンプルですね。
次に各ブロックの中身をのぞいてみます。

最初のSpeakブロック  

最初のブロックはまずAlexaに喋らせないといけないので
適当に会話を作ります。

スキルを起動した時に出勤したのか退勤するのかを聞かせるだけですね。
たったこれだけです。

出勤したのか退勤するのかを判別させる

次にユーザー(自分)が出退勤どちらをしたのかを判別させるブロックを作ります。

Choiceブロックを引っ張ってきて最初に作成したSpeakブロックと繋げて
あとは選択肢を作成。

出勤の選択肢と退勤の選択肢を作成し、
synonymsでバリエーションを増やしていきます。

出勤のパターンだけやたら多いけど
退勤する時はこんなくらいしか言わないよなぁと思いながら
思いついた時点で追加していってます。

仮に聞き取れなかったことも想定する

Choiceブロックで色々とバリエーションを追加しているものの、
Alexaの方で認識できなかった場合を想定して
もう一度聞いてくるようにします。

Choiceブロックのelseから別のSpeakブロックを繋げて
聞き返す文章を当てておきます。

そして、Intentブロックを別で生成して、
正常に例外処理(else)が走るようにFallbackIntentを選択しておきます。

これについては、諸々深い事情が絡んでるので、
興味がある人はAlexaとVoiceFlowの公式ドキュメントを読んでみてください。
今回はそんなもんなんだ程度でいいと思います。

選択した条件でSlackに流す投稿を変更

事前にSlackでBotアプリを作成してトークンなどを生成する準備をしていきます。

まず、使用するワークスペースのURLの後ろに「/apps」をつけてウェブ検索すると
アプリの追加ができる画面が開きます。

次に検索窓で[Bots]と入力

今回はこれを使います。

設定を追加をクリック

ユーザー名は任意の英数文字を指定してください(記載している記号もOK)
指定したら「ボットインテグレーションを追加する」をクリック

無事にBotsが生成されたらインテグレーションの設定にある
APIトークンをコピーします。(xoxbから始まる文字列)

後のカスタマイズについては好きなようにいじってください。


SlackのAPIの設定(トークンとか投げたいチャンネルを指定)を
Integrationブロックで値設定していきます。

ブロックのタイトルを出勤用にしてるのは
退勤用とほぼ同一なので自分でわかりやすくするためにしてます。

ここではURLをSlackAPIのpostMessageを設定しておくだけ。
Paramsの部分でトークンとかを指定していきます。

Paramsボタンをクリックして必要になるtoken、text、channelの値をそれぞれ入力。
channelの値についてはブラウザ版のSlackを開いて投げたいチャンネルを開いた時に表示されるURLの最後にあります。

エンコードされた文字列が並んでいるので、最後のスラッシュ部分が
チャンネルの値になります。
なのでこれをコピペ。

念の為、テストしてみます。

👆Test Integrationのドロップダウンから[Test Integration]をクリック。

ResponceがOKになって、実際にSlackにもPostされてます

(Botの名称が変更されてないのは調査しています。)
おそらくusernameのkeyを当てれば変更できそう

退勤用の方も同じように値を設定して、テキストだけ変更すればOKです。

Alexa側でPostできたことを喋らせてスキルを終了させる

今のままでもPostはできているので恐らく正常に機能はするはずですが
スキル側でもちゃんとできたよということを喋って欲しいので
Speakブロックを追加します。

退勤用も同じようにして、最後にExitブロックを繋げて完了。

あとはAlexaコンソールにアップロードします。

アップロードできれば、一応シミュレータの方でもテストします

こんな感じでちゃんと機能してますね。


最後に

今回、勤怠管理をSlack上で行う形になったので
いちいち手打ちするのもめんどくさいなと感じたので
声で完結させたいと思い、Alexaで実装してみました。

ただ、現状ではチャンネルを確認してもらう必要があるので、
今度はスプレッドシートと連携して表にするような形に持っていきたいと思います。


ちなみにこのスキルについては一般公開することはありません。
ワークスペースやチャンネルの設定をスキルに直書きしてるようなものなので・・。
やってみたい方はご自身で作成して、ご自身のAlexaアプリもしくはデバイスで動作するようにしてください。
(開発中にしておけば自分だけで使用できます)

この記事が気に入ったらサポートをしてみませんか?