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

この記事は[JAWS-UG京都「Alexa Skill作成体験ワークショップ」](https://jawsugosaka.doorkeeper.jp/events/68657)で使用した資料です。

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

# 準備リスト
- [ ] Amazon developerアカウントを持っている  
  まだの場合 -> https://developer.amazon.com/ja/alexa 
- [ ] http://bit.ly/2DrKBoK を開いている
- [ ] AWSアカウントを持っている

---

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

---

# スキル作成の準備

## developer.amazon.comでアカウントを作る
- https://developer.amazon.com/ja/alexa
- 右上の「サインイン」をクリック

<img width="1394" alt="スクリーンショット 2018-01-20 14.51.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/2b5bc7d2-6a22-b500-ae7a-ad0c669e2fdf.png">

## アカウント作成に必要なもの
- 名前
- Eメールアドレス
- パスワード
- Alexaデバイスで使っているメアドと同じがよい

## Goal: この画面を開く
<img width="1143" alt="スクリーンショット 2018-01-20 14.55.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/5cb7e588-a937-9543-d0ca-d9acbfc02b0d.png">

---

# Flash Briefing Skillを作る

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

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

### フィードの例
- [日本語]https://dev.classmethod.jp/category/cloud/aws/feed/
- [日本語]http://feeds.feedburner.com/AmazonWebServicesBlog
- [英語]https://www.wired.com/feed

## Flash Briefing Skillを作ろう
- "Alexa Skills Kit"の"始める"をクリックする
<img width="1143" alt="スクリーンショット 2018-01-20 14.55.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/5cb7e588-a937-9543-d0ca-d9acbfc02b0d.png">


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

<img width="1054" alt="スクリーンショット 2018-01-20 15.14.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/64ea9f48-7539-039e-4a58-d9c08ff89bbc.png">

### 対話モデルはスキップ
<img width="1149" alt="スクリーンショット 2018-01-20 15.10.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/d44205e8-3ddb-d7a8-1b67-3620457f643c.png">


### 設定
- カスタムエラーメッセージを設定する  
 例：<スキル名>は現在ご利用いただけません
- "新しいフィードの追加"をクリックしてフィードを登録
<img width="1036" alt="スクリーンショット 2018-01-20 15.17.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/c7785289-bafd-f3d2-a0ec-3e1cdf4c9b78.png">

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

---

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

<img width="1105" alt="スクリーンショット 2018-01-20 15.24.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/ca50fa15-a50f-ae99-4865-5541230e05c9.png">

---

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

## echosim = ブラウザでテストできるサービス
https://echosim.io/welcome
<img width="1018" alt="スクリーンショット 2018-01-20 1.26.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/10b9b524-8b57-312a-192b-fffc40e54e56.png">

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

## 話しかける
- マイクアイコンを押してる間の発話を聞き取ります
<img width="687" alt="スクリーンショット 2018-01-20 1.28.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/0d0224b6-4c42-a5d3-2478-4a80c32d3e31.png">
- Languageで言語を切り替えれます
- ConsoleをOnにすると聞き取った内容を見ることができます

## そのほかにも
[Reverb](https://reverb.ai/)というサービスでもテストできます。

- 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/
<img width="1039" alt="スクリーンショット 2018-01-20 15.49.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/38cb1a95-dc72-e2cf-c45f-7a48c334da5e.png">


# Tips:安定したスキルの運用のために
## テスト駆動でやると便利です。
<img width="1064" alt="スクリーンショット 2018-01-20 15.56.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/23936/5c509c88-cc45-853f-591f-e6cdd96ebce1.png">

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