[Alexa] 非エンジニアの皆様に贈るAlexaスキル開発ができるようになるまでのリアルな道のり/jawsdays-2019-alexa-mrmo

by mochan-tk

Slide 1

Slide 1 text

〜非エンジニアの皆様に贈る〜 Alexaスキル開発ができるようになるまでのリアルな道のり 1 Feb 23th, 2019 -- JAWS Days 2019

Slide 2

Slide 2 text

自己紹介 2 名前：河本貴史（@mochan_tk / もっちゃん）所属：クラスメソッド株式会社 AIソリューション部 ● IT系の勉強会開催（機械学習系もくもく会、インフラ・プロコン） ● 子供向けのプログラミング勉強会開催 ● 個人で開発したLINE Clovaのスキルが公式ランキング２回連続 TOP10入り！ ● お喋りがすごく好きです！（ただし人見知りでシャイボーイです） Facebook

Slide 3

Slide 3 text

アジェンダ 3 ● ノンコーディング編 ● アウトプット編 ● コーディング編

Slide 4

Slide 4 text

半年間の道のり 4 ノンコーディングでAlexa スキル開発子供向けのAlexaスキル開発勉強会開催（アウトプット）コーディングでAlexaスキル開発 2018年6月〜 2018年8月 2018年11月〜

Slide 5

Slide 5 text

半年間の道のり 5 ノンコーディングでAlexaスキル開発子供向けのAlexaスキル開発勉強会開催（アウトプット）コーディングでAlexaスキル開発 2018年6月〜 2018年8月 2018年11月〜ノンコーディング編コーディング編

Slide 6

Slide 6 text

徐々にステップアップ！ 6

Slide 7

Slide 7 text

ノンコーディング編 7

Slide 8

Slide 8 text

ノンコーディング編 8 ● Alexaスキル開発のハードル ○ プログラミング ○ 開発環境の構築

Slide 9

Slide 9 text

ノンコーディング編ノンコーディング！でAlexaスキルを作れるサービスが存在する。 9

Slide 10

Slide 10 text

ノンコーディング編 ● Storyline(今はInvocableに名前変わった)というノンコーディングでAlexaスキル開発ができるWebサービス 10

Slide 11

Slide 11 text

ノンコーディング編 ● 世界的に人気が高いノンコーディングのサービス ● Alexa Blogsにも取り上げられた 11

Slide 12

Slide 12 text

ノンコーディング編 ● 子供向けのプログラミング勉強会でも利用 ● 直感的に使えて学習コストが低い ● スマホのAlexaアプリでAlexaスキルの動作確認ができるのも大きかった 12

Slide 13

Slide 13 text

ノンコーディング編 13 ● どんなAlexaスキルが開発できる？ ○ ユーザが話した言葉のオウム返し ○ 会話の状態遷移（心理テストスキル） ○ 効果音と発話判定（クイズスキル） ○ 外部APIで幅広い情報（郵便番号検索スキル） ○ 画面対応でより詳しく（レシピスキル） ○ Googleスプレッドシートのデータをランダムに読み込む（トリビアスキル）

Slide 14

Slide 14 text

ノンコーディング編 14 ● どういう流れでスキルを作るの？ ○ ブラウザを開いてStorylineのサイトにログインします ○ 会話のブロックを置きます ○ 会話のメッセージを書きます ○ 会話のブロックを繋げますだいたい上記な感じです！

Slide 15

Slide 15 text

けど設計が難しいんでしょ？ 15

Slide 16

Slide 16 text

ノンコーディング編 16 ● ちゃんとした設計してない状態でも ○ 何回も実装し動かしての繰り返しで洗練すれば良い ■ ノンコーディングなら簡単に実装ができて、動作させるまで時間がかからない、試行が容易 ■ 進めながらブラッシュアップすることが可能

Slide 17

Slide 17 text

ノンコーディング編 17 ● ノンコーディングのサービスの良い所 ○ 本当の意味でスキル開発に注力できるため経験値を爆速で積むことができる ○ 人為的なミスによるエラーでスキルが動かなくなり挫折することがない（想定外に時間をとられることがない）

Slide 18

Slide 18 text

ちょっと残念なお知らせが。。 18

Slide 19

Slide 19 text

ノンコーディング編 19 （Storyline無料プラン無くなりました） https://www.invocable.com/pricing

Slide 20

Slide 20 text

安心してください！良いサービスありました！ 20

Slide 21

Slide 21 text

ノンコーディング編 21

Slide 22

Slide 22 text

実はノンコーディングでAlexaスキルを作れるサービスはいくつかある【最新版】ノンプログラミングでAlexaスキルが作れるサービスを比較！ https://smartio.life/smartspeaker/development/blog/alexa-service-hikaku/ ノンコーディング編 22

Slide 23

Slide 23 text

ちなみに情報元 23 Smartio.life 様のWebサイトから情報を取得 ● スマートスピーカーを中心としたIoT専門メディア様 ● スマートスピーカー関連情報に特化しており発信力は国内トップクラス！

Slide 24

Slide 24 text

ノンコーディング編 24 ● VoiceFlowの説明 ○ ノンコーディングかつWebブラウザ上でAlexaスキルを作れるサービス ○ 非常に高機能 ○ 日本語のスキルにも対応 ○ 画面対応のスキル（Echo Spot, Echo Show）も作れる ○ AlexaスキルだけではなくGoogleアシスタント対応も進めている（まだBeta版）

Slide 25

Slide 25 text

VoiceFlowの作り方 25 使い方の解説動画は下記にまとまっています。 https://bit.ly/2EiZ6tY 機能の使い方が分からなくなっても横にあるヘルプボタンから解説動画を見られるので便利。

Slide 26

Slide 26 text

ノンコーディングのサービスとは思えないほど細かい機能が実装されている 26

Slide 27

Slide 27 text

VoiceFlowの機能 27 Interaction Blockを使うとカスタムのIntentとSlotも作れる！

Slide 28

Slide 28 text

あんなことや！（IF文のやつ） 28 VoiceFlowの機能そして、IF BlockでIF文（条件分岐）機能や変数も使えちゃう！

Slide 29

Slide 29 text

29 VoiceFlowの機能なんでしたら、Code Blockでプログラム（JavaScript）書けます！

Slide 30

Slide 30 text

30 VoiceFlowの機能プランをアップグレードするとAmazon Pay決済も組み込めます！ VoiceflowがAPL対応スキルも制作可能に！更にカード対応、スキル内決済も https://smartio.life/smartspeaker/development/blog/voiceflow-news-jan2019/

Slide 31

Slide 31 text

会社のブログにも紹介記事書きました 31 https://dev.classmethod.jp/etc/mrmo-voiceflow-20190212/

Slide 32

Slide 32 text

ノンコーディング編 32 ● VoiceFlowを選んだ理由 ○ Updateの頻度が多い、機能改善のスピード感が早い ■ 2018年11月：日本語対応 ■ 2018年12月：画面対応のスキルが作れるように ■ 2019年01月：Code BlockでJavascriptが書ける ■ 2019年02月：Googleアシスタント対応 ○ Storylineに負けず劣らず高機能 ■ ノンコーディング特有の制限を感じさせない ■ 色々なスキルが開発できそうな期待感

Slide 33

Slide 33 text

会社のブログにも紹介記事書きました 33 Googleアシスタントきじをいれるよてい https://dev.classmethod.jp/voice-assistant/mrmo-voiceflow-20190222/

Slide 34

Slide 34 text

アウトプット編 34

Slide 35

Slide 35 text

半年間の道のり 35 ノンコーディングでAlexaスキル開発子供向けのAlexaスキル開発勉強会開催（アウトプット）コーディングでAlexaスキル開発 2018年6月〜 2018年8月 2018年11月〜済

Slide 36

Slide 36 text

アウトプット編夫婦で開催している子供向けプログラミング勉強会の内容に Alexaスキルを扱った ● 資料を作る必要がある（調査・検証など） ● 期限がある、程よいプレッシャーにより集中力UP 36

Slide 37

Slide 37 text

前半まとめ 37 ● ノンコーディングのサービスで ○ スキルを作っては試すを繰り返してスキル作りの経験値を効率良くためることができた ○ アウトプットをすると、習得の進捗・定着に良い効果 ○ ここまででAlexaスキルを作ることに相当慣れた状態に

Slide 38

Slide 38 text

コーディング編 38

Slide 39

Slide 39 text

半年間の道のり 39 ノンコーディングでAlexaスキル開発子供向けのAlexaスキル開発勉強会開催（アウトプット）コーディングでAlexaスキル開発 2018年6月〜 2018年8月 2018年11月〜済済

Slide 40

Slide 40 text

Amazonさんによる怒涛のご褒美キャンペーンが始まる！ 40

Slide 41

Slide 41 text

コーディング編 41 ● スキル（アプリケーション）開発のハードル ○ サーバーの設定 ○ 継続的なアプリケーションのデプロイ ○ 開発環境の構築 ○ 動作確認（テスト）

Slide 42

Slide 42 text

コーディング編 42 ● スキル（アプリケーション）開発のハードル ○ サーバーの設定 -> AWS Lambda ○ 継続的なアプリケーションのデプロイ(CI/CD) -> AWS Code Pipeline(AWS Code Star) ○ 開発環境の構築 -> AWS Cloud9 ○ 動作確認（テスト）-> Amazonの方による審査 AWSのサービスを使えば全て解決！

Slide 43

Slide 43 text

コーディング編 43 ● AWS Lambda ○ サーバーレスのサービス ○ AlexaスキルのプログラムはLambda上で動かします

Slide 44

Slide 44 text

コーディング編-; 44 ● AWS Code Pipeline ○ 継続的なアプリケーションのデプロイ(CI/CD)を支援 ○ AWS Code StarのAlexaテンプレートを使用すると Alexa開発に特化したCode Pipelineの設定が自動的に構築される

Slide 45

Slide 45 text

コーディング編 45 ● AWS Cloud9 ○ Git, Node.jsなど開発に必要なソフトウェアがあらかじめインストールされている統合開発環境 (IDE) ○ Webブラウザがあれば使うことができる

Slide 46

Slide 46 text

コーディング編 46 ● Amazonの方による審査（テスト） ○ Alexaスキルは公開申請してAmazonさんのテストに合格すると公開される ○ つまりAmazonさんに自分のスキルをテストしてもらえるということ

Slide 47

Slide 47 text

やっぱり勉強は必要です 47

Slide 48

Slide 48 text

でも勉強できる環境は整っています！ 48

Slide 49

Slide 49 text

自学習一覧 49 ● Alexa道場（公式のAlexaスキル開発が学べる動画コンテンツ） ● 弊社の技術ブログ（Developers.IO） ● プログラミングの勉強（javascript）も色々なコンテンツあります

Slide 50

Slide 50 text

コーディング編 50 ● Alexa道場 ○ 動画でAlexaスキル開発が学べる https://developer.amazon.com/ja/alexa-skills-kit/webinars

Slide 51

Slide 51 text

コーディング編 51 ● 弊社の技術ブログ（Developers.IO） ○ Alexaスキル開発のノウハウ記事がたくさん https://dev.classmethod.jp/referencecat/voice-assistant-amazon-alexa/

Slide 52

Slide 52 text

コーディング編 52 ● プログラミングを学べるサイトもある ○ ドットインストール / JavaScript入門 (全24回) ○ Progate / JavaScript 基礎編 ○ CODEPREP / はじめてのJavaScript

Slide 53

Slide 53 text

なんといってもAmazonさんのご褒美（キャンペーン）がすごい！ 53

Slide 54

Slide 54 text

Alexaスキルを作って公開すると（条件あり） 54 ● Alexaスキル公開キャンペーン月100ドルAWSクレジット ● Tシャツもらえるキャンペーン ● Amazon Echo Dotもらえるキャンペーン ● Alexaフィギュア ● Amazon Echo Showもらえるキャンペーン（約３万円！） ● リワードプログラム（結構もらえるみたいですよ！）

Slide 55

Slide 55 text

● Alexaスキル公開キャンペーン月100ドルAWSクレジット ○ スキルの開発でAWS使用料が発生した場合は、さらに毎月100ドル分のプロモーションクレジットを受け取ることができます https://developer.amazon.com/ja/alexa-skills-kit/alexa-aws-credits コーディング編 55

Slide 56

Slide 56 text

● Tシャツもらえるキャンペーン ○ AlexaスキルTシャツがもらえますコーディング編 56

Slide 57

Slide 57 text

● Amazon Echo Showもらえるキャンペーン ○ 条件あり（４つのスキル、かつ１つは画面つきのデバイスに対応）コーディング編 57

Slide 58

Slide 58 text

● リワードプログラム ○ ご褒美チャリーン♪ コーディング編 58

Slide 59

Slide 59 text

59 「某クイズスキル」で先輩社員のスキルがリワードプログラムに選ばれました！

Slide 60

Slide 60 text

「いろいろ車クイズ」妻がリワードプログラムを狙った本気スキル。。 60

Slide 61

Slide 61 text

まとめ 61 ● ノンコーディングのサービスでスキルを作る経験値をとにかく効率的に上げることに成功した ● アウトプットにより、スキルの作り方を熟知する必要があった、期限が決まっていたので集中して取り組めた

Slide 62

Slide 62 text

まとめ 62 ● Amazon さんによる怒涛のご褒美キャンペーン開催 ● キャンペーンの条件のため、コーディングでのスキル開発をする必要があった ● コーディングでのスキル開発にあったっての勉強コンテンツと開発環境周辺の状態が現状非常に整っていた

Slide 63

Slide 63 text

公式からどんどん便利な機能もでてきてます 63

Slide 64

Slide 64 text

Alexa-hostedスキル 64 ● つい最近リリースされた便利機能 ● スキルの作成、編集、公開がすべてAlexa開発者コンソールで完結する機能 https://amzn.to/2Iszhvk

Slide 65

Slide 65 text

待ってるだけでAlexaスキル開発がどんどん楽になるそうAWSならね。。 65