Voiceflowをためしてみた！

この記事は「【マイスター・ギルド】本物の Advent Calendar 2020」　17日目の記事です。

#はじめに
初めまして！11月から株式会社マイスター・ギルド（以下、MG）の「ギルメン」の一員となりましたtknbです！
Qiita投稿も初ですので、優しい気持ちで読んでいただければうれしいです！

##なにをする？
MGがAdvent Calendarを行っているのは知っていました。なんか変わったことやってんなー程度に。

実際、入社してすぐに参加するとは思っていませんでした(;^ω^)
が！参加するからには新しいことに挑戦してみたい！せっかくのお祭りですしね(^^)/

では、どうするか？
技術者集団の一員になったことだし開発すべきでは？

でもでも、自信がないよ！

てことで、ノーコード/ローコードでなにかできないかと考えました。

ご存知でしょうか？ノーコード/ローコード。

つまり、ナウでヤングなエンジニアはこれで開発を始めているってことじゃあないでしょうか？？

じゃあ、やるしかないじゃん？？

でもでも、なにをどれでつくればいいの？？？

悩める私に天の声が聞こえます。

「グーグル止めて。ねえ？グーグル止めて。」

これだ！！！！！
※MGでは、「Google Home」君がお昼と業務終了時にアラームを鳴らしてくれるのです。
（「Google Home」君を止めようとしてなかなか止められない代表）
※のちに「Alexa」君も増えました。

いいじゃん！
ローコードで音声アシスタントの開発をして、
私も「Google Home」君とおしゃべりしてみたい！！！！

てことで、今回私は「voiceflow」を使って「ローコード」で「スキル」をつくります！
※スキル：機能のことスマートフォンでいうところの「アプリ」のことらしい

#今回の前提
・プログラミング初心者向け
・作業環境(OS:Windows10 ブラウザ:chrome)

#アカウント登録

[Get Started for Free]か[Sign up]をクリック
アカウント認証画面もしくは、登録画面へと遷移します。

アカウント登録をなにで行うかの確認画面に遷移します。

・メールアドレス
・Google
・Facebook
・SSO

上記から選べます。

welcomeページに遷移したのち初回はアンケートを求められます。
※あくまでアンケートですので、気軽に考えていいです。
（2020年12月時点のアンケート画面です）
Google翻訳にかけ私なりの解釈を含みます。

Choose your role:あなたの役割を選択してください

Conversation Designer : 会話デザイナー（スマートスピーカーの開発者ですかね？）
UI/UX Designer : デザイナーさんですね。オサレなデザイン考える人
Content Writer : ライターさん？ブログとか記事を書く人ですかね？
Project Manager : プロジェクトの責任者。監督みたいな人
Developer : 開発者
Marketing : マーケティングしている人
Sales : 営業さん
VP/Manager : VP(Vice President)日本では副社長クラスのことらしい。そのような人が選べばいいと思うよ。
Student : 学生さん
Educator : 教育関係者（教師とはちょっとちがうらしい）

近い職業を選択すればいいみたいですね

What channels are you creating for? :どのチャンネルに接続していますか？

Voice

Amazon Alexa

Google Assistant

IVR

Samsung Bixby

Siri

Chat

Website

Whatsapp

SMS

Slak

Apple Business Chat

RCS

Vicer

Wechat

Twitter

チャンネルというのが、調べてもテレビの話しか出てきませんでしたが、 選択肢から読み取るに、どういった媒体で使うことを想定しているかを聞いているのかと思います。

How big is Your team?:あなたのチームはどれくらいの大きさですか？

何人で開発をしているか選択すればいいみたいです。

workspaceでの名前を設定できます。
画像も設定できるので設定してみました。

チームで開発したいときなど、workspaceのURLをメールで送信できるみたいです。
枠自体は100件は追加できました。もしかして無制限なんですかね？
（実際にアドレスを入力していないので、なんともいえませんが）

はい！
ここまで完了すると開発のトップページが表示されます！

サンプルのプロジェクトが作成されていて、簡単な操作のデモが流れます。

これでオリジナルの「スキル」開発ができます！

##プロジェクトの準備

サンプルのプロジェクトの左上の「＜」をクリックすると自分のworkspaceにあるプロジェクトの一覧ページへ遷移できます。

サンプルのプロジェクトは不要な人は削除しても大丈夫です。
Listからプロジェクト名左横の「丸いアイコン」をクリック
[Remove Project]　で削除できます。
※削除すると元に戻せません！

新しく作りたい場合は、
[Create Project]をクリック

channel（使用する媒体（スマートスピーカーなど））を選択

新しく作るプロジェクト名と使用言語を決めて
[Create Project]をクリックで新しくまっさらなプロジェクトが作成されます。

##さわってみよう！
公式ドキュメント

ふむふむ。
基本の流れは、左のリスト「ステップとフローメニュー」から「ブロック」を右の「キャンバス」エリアへ持っていく、
右の「キャンバス」エリアで、それぞれ動作や処理「ステップ」を設定していくみたいです。

##なにをつくろう？

とりあえず、挨拶をするスキルをつくってみました。

クリック＆ドロップで作っていく感覚はとてもいいです！
楽しい！！
これだけでもワクワクします！

###設定の中身

Startブロックの次にResponseより[Speak]ブロックをクリック＆ドロップ
※[Speak]ブロックでは、「スマートスピーカー」がしゃべる内容を入力します。

User Inputより[Choice]ブロックをクリック＆ドロップ
※[Choice]ブロックでは、ユーザの行動（会話）の選択肢を入力します。

[path]
Name new intent or select exiting intent：の欄に選択肢の名前を入力
※日本語入力ができません。
[Utterances]
Add synonyms of the user response：選択肢を入力
※スマートスピーカーへ話しかけ方を入力しておくことで、その「言葉をトリガーとする」という設定のようです

作成した[path]に応じた反応を[Speak]ブロックをクリック＆ドロップして設定

か、簡単だ…。
簡単すぎてここで終わったら、みんなからこいつサボってんな？て思われてしまう…。
（MGではそんなことはありえませんけどね！）

では、もう少しそれっぽいものを作りましょう！

##Googleスプレッドシートと連携したスキル

voicecflowでは、「Googleスプレッドシートと連携したスキル」も簡単に作れちゃうみたいです！

###どういったものを作る？
弊社MGには、たくさんのボードゲームがあります。
お昼休みにはみんなで楽しく遊んでいます！（最近はもっぱら「ニンテンドースイッチ」で遊んでいますが）

ボードゲームがたくさんあるので、どれで遊ぶか悩む時間でプレイ時間が減っていくこともしばしば。
では、それを解決する「スキル」を作ろう！

まずは「Googleスプレッドシート」を用意します。

変更箇所
(1)スプレッドシートのタイトル（わかりやすいやつでいいです）
(2)A1に呼び出す情報のカラム名を入力
(3)Aの列に呼び出す情報を入力
※MGにあるボードゲームのほんの一部です。

用意ができたら、voicecflowの作業に移ります
画面左下のボタン「キャンバスコントロール」の「インタラクションモデルビュー」をクリック

変数ビューが表示されます
Add Variableの欄に変数名を入力します

変数？【variables（ヴァリアブル？バーリアブル？）】

プログラミングにおける変数（へんすう、英: variable）とは、高水準言語のプログラムのソースコードにおいて、扱うデータを読み書きする記憶域 (storage) のことであり、固有の名前（識別子）によって識別される。変数を用いることで、データを一定期間記憶し必要なときに利用することができる。

フリー百科事典『ウィキペディア（Wikipedia）』

つまり、中身を管理するための名前のコトですね。
焼肉定食には焼き肉が入っているんですよ。
焼き魚は入らないようにしようねってことですね（知らんけど）

わかりやすい名前（変数名）をつけます。
※17文字の文字制限がありました。

「ステップとフローメニュー」から、「Google Sheets」をクリック＆ドロップ
※▶ Integrationの中にあります。クリックすれば表示されます。

「キャンバス」エリアに置いた「Google Sheets」ブロックをクリック
画面右端に入力エリアが出てきますので順に入力していきます。

As user
[+ Add User]をクリックするとGoogleアカウントの認証画面が表示されます。

用意した「Googleスプレッドシート」のアカウントを選択してください。

Spreadsheet：「Googleスプレッドシート」のタイトル(1)
※スプレッドシートを複数保存している場合は、該当するスプレッドシートを選択してください。
Sheet：編集したシートを選択してください。
※シート名を編集してもしていなくても、読み取ってくれました。（わかりやすい名前にしておくと複数のシートを使いたいときに楽です）

With Settings
Column：A1につけたカラムを選択してください(2)
Value to Match：何も入力しない（＝ランダムに取得するという設定になります）

Mapping Output
Column：A1につけたカラム名を選択してください(2)
Value to Match：作った変数を選択してください

Test Integration
クリックすると上記で設定した情報をもとに返ってきた値を表示してくれます。((3)の内容です）

[Speak]ブロックに作った変数を入力
※「Google Sheets」ブロックの「Mapping Output」の結果を「スマートスピーカー」に話すようにする設定です。

完成したのがこちら！

テストの時点でも、
マイクをオンにすれば「スマートスピーカー」とお話できました！

とりあえず、今回はここまで！

#感想まとめ

・（どのアカウントで始めるかで少しの差はあるかと思いますが）アカウント登録から開発を始められるまで、めちゃくちゃ簡単です！
インストールの必要がなくブラウザ上ですべて完結するのでインストールやセットアップなどの準備がおっくうに感じる人でも始めやすいと思います！
・操作も簡単なのでアイデアさえあればいろんなスキルがつくれそう！
・apiや複雑なフローを作るには、プログラミングの知識があればより簡単に作成できるかな？と思いました（なくてもブロックとフローを組み合わせればできるので問題なし！）
・無料版では1つのworkspaceにプロジェクトが2つしか作れないので、ものたりなさは感じますが、無料でここまでできるのなら十分ではないでしょうか。
もっといろいろと作りたいひとは、有料版にアップグレードしたらまだまだ作れますよ！(2020/12時点　$40/month)

#こちらの記事を参考にさせていだたきました
https://qiita.com/kento_gm/items/34c46a9bc6b3017c9345
https://zenn.dev/kun432/books/e7360ee23138cfe74d64/viewer/4154fae0733f65025e89
https://kun432.hatenablog.com/entry/voiceflow_tips_7_fact_skill_integrated_with_google_sheets

ありがとうございます！