Alexa

JAWS-UG京都「Alexa Skill作成体験ワークショップ」資料

この記事はJAWS-UG京都「Alexa Skill作成体験ワークショップ」で使用した資料です。

口頭やデモで説明した部分がかなり省略されていますのでご注意ください。

準備リスト


ハンズオンの流れ

  • Flash Briefing Skillを作る
  • 作ったスキルをechosim.ioでテストする
  • カスタムスキルを作る
  • Node.jsでカスタムスキルのバックエンドを実装する

スキル作成の準備

developer.amazon.comでアカウントを作る

スクリーンショット 2018-01-20 14.51.38.png

アカウント作成に必要なもの

  • 名前
  • Eメールアドレス
  • パスワード
  • Alexaデバイスで使っているメアドと同じがよい

Goal: この画面を開く

スクリーンショット 2018-01-20 14.55.26.png


Flash Briefing Skillを作る

Flash Briefing Skillとは

  • ニュースやインタビューなどを読み上げてくれるスキル
  • 起動ワードは固定:「Alexa、ニュースを教えて」
  • 複数のスキルを組み合わせて独自フィードを作れる

必要なもの

  • Flash Briefingに対応したRSS FeedまたはJSON API
  • WordPressなどのCMSのフィードであればだいたい動く
  • 自分のサイトや好きなメディアのフィードを試してみよう

フィードの例

Flash Briefing Skillを作ろう

  • "Alexa Skills Kit"の"始める"をクリックする スクリーンショット 2018-01-20 14.55.26.png

スキルの初期設定

  • スキルの種類は"フラッシュブリーフィングスキルAPI"
  • 言語はフィードの言語
  • スキル名は任意の名前"サンプル"など

スクリーンショット 2018-01-20 15.14.33.png

対話モデルはスキップ

スクリーンショット 2018-01-20 15.10.08.png

設定

  • カスタムエラーメッセージを設定する
    例:<スキル名>は現在ご利用いただけません
  • "新しいフィードの追加"をクリックしてフィードを登録 スクリーンショット 2018-01-20 15.17.14.png

フィードに登録する内容について

項目名 内容
プリアンブル フィードのコンテンツの前に Alexa が読み上げる短い紹介文。
フィード名 このフィードの名前。
コンテンツの更新頻度 コンテンツの更新頻度
コンテンツタイプ テキスト/オーディオ
コンテンツジャンル コンテンツの内容に最も近いジャンルを選択します。
URL フィードの URL
フィードアイコン 512 x 512 ピクセルの PNG (透明可)または JPG ファイル

テストモードをオンにする

  • "はい"にすると、連携してるアカウントでテストできる
  • "Alexa、ニュースを教えて"と話しかけてみましょう

スクリーンショット 2018-01-20 15.24.06.png


作ったスキルをechosim.ioでテストする

echosim = ブラウザでテストできるサービス

https://echosim.io/welcome
スクリーンショット 2018-01-20 1.26.09.png

ログインする

  • https://echosim.io/welcome
  • developer.amazon.comと同じログイン情報でログイン
  • マイクへのアクセスを許可しましょう

話しかける

  • マイクアイコンを押してる間の発話を聞き取ります スクリーンショット 2018-01-20 1.28.01.png
  • Languageで言語を切り替えれます
  • ConsoleをOnにすると聞き取った内容を見ることができます

そのほかにも

Reverbというサービスでもテストできます。

  • echosim.ioはリクエスト内容などが見れるので開発向け。
  • ReverbはMacOS / iOS / Android版をDLして使えるので、Echo実機がないときに使う用。

というイメージでしょうか。
外出中にReverb使って家電操作するとか楽しそうですね。


カスタムスキルを作る

カスタムスキル = 任意のAPIを呼び出せるスキル

  • ゲームやクイズ・トリビアスキルなどが多い
  • アカウントリンクなどで自社サービスと連携できる
  • AWS Lambdaとの連携が一般的

作り方

Amazonのドキュメントがわかりやすいので、そこで進めます。
https://github.com/alexa/skill-sample-nodejs-fact/blob/ja-JP/instructions/1-voice-user-interface.md

上記ガイドの補足

Lambdaのソースコード

404になっている場合は、以下からアクセスしてください。
https://github.com/alexa/skill-sample-nodejs-fact/blob/ja-JP/lambda/custom/index.js

LambdaのIAM

https://github.com/alexa/skill-sample-nodejs-fact/blob/ja-JP/lambda-role.md
を見るとわかりやすいです。


Tips:作ったSkillを公開するために

作ったSkillを公開するために必要な情報

項目 概要
カテゴリー スキル検索時のカテゴリ
テストの手順 Amazonのチームがレビューする際のテスト手順
国と地域 スキルを利用できる地域
サンプルフレーズ ユーザーに提示するサンプルフレーズ
スキルの簡単な説明 最大 160 文字の概要文
スキルの詳細な説明 詳細な説明文
キーワード 検索用キーワード
小アイコン 108x108 ピクセルの PNG (透明可)または JPG の画像ファイル
大アイコン 512x512 ピクセルの PNG (透明可)または JPG の画像ファイル

スキルの"詳細な説明"が出る場所

https://www.amazon.com/Lyft/dp/B01FV34BGE/
スクリーンショット 2018-01-20 15.49.07.png

Tips:安定したスキルの運用のために

テスト駆動でやると便利です。

スクリーンショット 2018-01-20 15.56.11.png

https://speakerdeck.com/hideokamoto/testing-alexa-skill