Slide 1

Slide 1 text

Voiceflowを あらためて紹介してみる 2020年7月1日 (水) ビジュアルプログラミングIoTLT vol3 @オンライン   豊田 陽介 ( @youtoy )

Slide 2

Slide 2 text

豊田陽介(@youtoy) 自己紹介 ● 職場: 某通信会社の研究所 ● プライベートでの活動: IT系イベント主催・登壇・運営、多数参加 子ども向けの活動いろいろ(IT系以外も) ● その他: ガジェット好き ビジュアルプログラミングIoTLT vol3 @オンライン ビジュアルプログラミン グIoTLT共同主催、など 話題のものが、たぶん だいたい自宅にある

Slide 3

Slide 3 text

今日は 「Voiceflow」の話

Slide 4

Slide 4 text

Voiceflowについて ビジュアルプログラミングIoTLT vol3 @オンライン ・フロー型のビジュアルプログラミングで  AIアシスタント対応アプリを開発可能 IoTLTでの初登壇の際に LTで紹介したことあり ここが実装部分

Slide 5

Slide 5 text

最近ためした実例(動画) ビジュアルプログラミングIoTLT vol3 @オンライン 2台の toio に関し、以下の3つの 処理を実装 1)一方が円状に動きだす 2)他方が先に動いている   ものをリアルタイム追跡 3)両方とも停止 これら3つの動作を スマートスピーカーから 制御 https://www.youtube.com/watch?v=K_EP0lDi8K0

Slide 6

Slide 6 text

「Voiceflow」での 実装部分を紹介 (基本のブロック)

Slide 7

Slide 7 text

AIアシスタントがしゃべる・効果音の再生 ・「Speak」ブロック: 効果音を鳴らす ビジュアルプログラミングIoTLT vol3 @オンライン 自分が用意した 音声ファイルを 再生させられる

Slide 8

Slide 8 text

AIアシスタントがしゃべる・効果音の再生 ・「Speak」ブロック: しゃべる(日本語) ビジュアルプログラミングIoTLT vol3 @オンライン しゃべらせたい内容を 文字で入力 声の種類を選択 (日本語は2種類)

Slide 9

Slide 9 text

AIアシスタントがしゃべる・効果音の再生 ・「Speak」ブロック: エフェクトの適用 ビジュアルプログラミングIoTLT vol3 @オンライン エフェクトの 種類を画面上 で選択 音声合成マーク アップ言語 (SSML)を 挿入してくれる

Slide 10

Slide 10 text

ユーザがしゃべった内容で条件分岐 ・「Choice」ブロック: 条件分岐 ビジュアルプログラミングIoTLT vol3 @オンライン この例では 4パターン それぞれの 分岐先指定

Slide 11

Slide 11 text

ユーザがしゃべる内容に関する記載 ・「Choice」ブロック: 条件分岐 ビジュアルプログラミングIoTLT vol3 @オンライン 言い方の違いを 吸収するための 指定

Slide 12

Slide 12 text

「Voiceflow」での 実装部分 〜画面表示の対応〜

Slide 13

Slide 13 text

ユーザがしゃべる内容に関する記載 ・「Card」ブロック: 画面付デバイスへの対応 ビジュアルプログラミングIoTLT vol3 @オンライン 今回はシンプルな 文字表示のみ

Slide 14

Slide 14 text

「Voiceflow」での 実装部分 〜「IoT」に役立つ!〜

Slide 15

Slide 15 text

外部のAPIを利用する ・「Integration」ブロック: Custom API ビジュアルプログラミングIoTLT vol3 @オンライン 自分でURLを指定した形での HTTPリクエストを利用可能 (GET、POST、・・・) ・各種パラメータも設定可能 ・Voiceflow内で保持している パラメータも利用可

Slide 16

Slide 16 text

外部のAPIを利用する ・「Integration」ブロック: Custom API のテスト ビジュアルプログラミングIoTLT vol3 @オンライン Voiceflow上で APIのテストも 実行可能

Slide 17

Slide 17 text

外部のAPIを利用する ・「Integration」ブロック: Googleスプレッドシート、Zapier ビジュアルプログラミングIoTLT vol3 @オンライン

Slide 18

Slide 18 text

外部のAPIを利用する ビジュアルプログラミングIoTLT vol3 @オンライン ●Voiceflow TIPS #7 Googleスプレッドシート連携で作る豆知識スキル - kun432's blog  https://kun432.hatenablog.com/entry/voiceflow_tips_7_fact_skill_integrated_with_google_sheets ・「Integration」ブロック: Googleスプレッドシート の活用事例 【ブログ記事での解説(※ 少し編集)】 実はGoogleスプレッドシートと連携させることなく、 Voiceflow単体でもできます。ただ、Googleスプレッド シートと連携することで、 ・ロジックとデータを分けることができ、スキルに手を  加えることなくデータを更新することが可能。 ・ExcelライクなGoogleスプレッドシートだとスキル開発を  知らない方にデータのメンテナンスをお願いでき、開発と  運用を分けられる。 ・Integrationブロックをもっと使いこなすと、DBのような  使い方も可能。

Slide 19

Slide 19 text

「Voiceflow」の 機能は他にもたくさん

Slide 20

Slide 20 text

他の様々なブロック ビジュアルプログラミングIoTLT vol3 @オンライン スライドに登場 していたのは ごく一部 デモで使った ものも一部

Slide 21

Slide 21 text

「Voiceflow」の コミュニティ

Slide 22

Slide 22 text

Voiceflowのユーザコミュニティ(日本語) ビジュアルプログラミングIoTLT vol3 @オンライン ●Voiceflow Japan User Group( #VFJUG )  https://www.facebook.com/groups/vfjug/ connpassの グループも あります!

Slide 23

Slide 23 text

終わり!