Alexaフラッシュブリーフィングスキル 開発チュートリアル

# 1. はじめに

---

## 参考文献
今回のAlexaフラッシュブリーフィングスキル開発チュートリアルは、以下のサイトを参考に、2018年5月時点の開発環境にアレンジし、まとめたものとなります。

- [フラッシュブリーフィングスキルAPIについて](https://developer.amazon.com/ja/docs/flashbriefing/understand-the-flash-briefing-skill-api.html)
 
---

## このスライドを見てできること
- Amazon API Gateway の作り方が理解できるようになる。
- AWS Lambd でのNode.js関数作成が理解できるようになる。
- Alexaフラッシュブリーフィングスキルが作成できるようになる。

---

## 今回作成するAlexaフラッシュブリーフィングスキル

- スキル名：とっさのキャスター

```text:トークシナリオ
ユーザー：「アレクサ、今日のニュースは？」
アレクサ：「フラッシュニュースです。
           とっさのキャスターが提供しています。
           今日も一日、がんばってください。」

```

---

## 注意事項
- 今回作成するAlexaフラッシュブリーフィングスキルは、通常のニュース読み上げ、ブログサイト読み上げとはかなり異なります。
- 仮に、スキル申請をおこなった場合に、スキルがリジェクト（審査不可）となる可能性が高いものとなります。
- 開発者プライベート用のユーモアスキルであることを、あらかじめご理解のうえ、お試しください。

---

# 2. 事前準備・開発環境

---
## 事前準備

- Amazon Developerアカウントの用意
- AWSアカウントの用意
- IAMロールの用意 [初めてLambda用ロールを作成する場合の手順](https://github.com/alexa/skill-sample-nodejs-fact/blob/ja-JP/lambda-role.md) を参照

---

## 必要なソフトウェア

- ブラウザ：Google Chrome（推奨）
- エディタ：Visual Studio Code（推奨）

---

## 必要な開発環境

- マイク＆スピーカが利用できるパソコン
- インターネット（Wi-Fi）

---

# 3. アカウントの用意

---


## Amazon Developerアカウントの用意

- https://developer.amazon.com/ja/ にて、アカウントを作成する必要があります。
- アカウントをお持ちでない方は、こちらのページ（[Alexaスキル開発トレーニングシリーズ 第1回 初めてのスキル開発](https://developer.amazon.com/ja/blogs/alexa/post/6e716e5c-55b0-445b-b936-9cfac4712e7b/training-1)）の手順を参考に、作成してください。
- [Amazon.co.jpアカウント](https://www.amazon.co.jp/)の使用をおすすめします。

---

## AWSアカウントの用意

- https://aws.amazon.com/jp/register-flow/ にて、アカウントを作成する必要があります。
- アカウントをお持ちでない方は、こちらのページ（[AWS アカウント作成の流れ](https://aws.amazon.com/jp/register-flow/)）の手順を参考に、作成してください。

---

# 4. AWSログイン

---

## AWSログイン

1. 「AWS」（https://console.aws.amazon.com/ ）サインイン画面を開く。
2. 「12桁のアカウントID」または「Eメールアドレス」を入力する。
3. 「次へ」ボタンをクリックする。
![スクリーンショット (46).png](https://qiita-image-store.s3.amazonaws.com/0/240522/30e37442-4e5e-122b-500a-01f3fb3815e3.png)

---

## AWSログイン

1. 必須項目を入力する。
2. 「サインイン」ボタンをクリックする。
![スクリーンショット (45).png](https://qiita-image-store.s3.amazonaws.com/0/240522/250b176c-86b5-b58a-6604-0f09d161daba.png)

---

# 5. Lambda関数の作成

---

## AWS Lambda

- 「Lambda」を検索し、クリックする。
![スクリーンショット (47).png](https://qiita-image-store.s3.amazonaws.com/0/240522/ed33e60d-6a49-f858-6696-20afd7665f66.png)

---

## AWS Lambda

- リージョンが「東京」であることを確認する。
![スクリーンショット (48).png](https://qiita-image-store.s3.amazonaws.com/0/240522/1efed3c3-2c9d-3f9f-ec60-3688717580c0.png)

---

## AWS Lambda

- 「関数の作成」ボタンをクリックする。
![スクリーンショット (49).png](https://qiita-image-store.s3.amazonaws.com/0/240522/23f836fe-fcc2-76f1-7e63-8c7256580eff.png)

---

## AWS Lambda

- 「一から作成」を選択する。
![c7.png](https://qiita-image-store.s3.amazonaws.com/0/240522/48276e91-1470-c07f-cc8a-18e4a1e58f32.png)

---

## AWS Lambda

1. 「関数の名前（NewsCaster）」を入力する。
2. 「ラインタイム（Node.js 6.10）」を選択する。
3. 「ロール」を設定する。
![c8.png](https://qiita-image-store.s3.amazonaws.com/0/240522/4fc1bef1-0388-0996-a907-6bd2e8f1ef64.png)


---

## IAMロールが未設定の場合

- Lambda関数用のIAMロールが未設定の場合は、[初めてLambda用ロールを作成する場合の手順](https://github.com/alexa/skill-sample-nodejs-fact/blob/ja-JP/lambda-role.md)を参考に作成してください。
- IAMロールには、Lambda と CloudWatch の権限を付与してください。

---

## AWS Lambda

- 「関数の作成」ボタンをクリックする。
![c9.png](https://qiita-image-store.s3.amazonaws.com/0/240522/d97a1b04-7968-fd36-f60a-0c31b237f94e.png)

---

## AWS Lambda

1. 「関数（NewsCaster）」が選択されていることを確認する。
2. 画面中央まで、下にスクロールする。
![c10.png](https://qiita-image-store.s3.amazonaws.com/0/240522/9fdd40b6-3265-ce2d-7d59-eac96fe92b14.png)

---

## AWS Lambda

- サンプルプログラムを、全て選択して削除する。
![c11.png](https://qiita-image-store.s3.amazonaws.com/0/240522/ed0dc815-e674-95f1-3d57-8bb5942fdf4d.png)

---

## AWS Lambda

1. 次のページのサンプルプログラムを、貼り付ける。
2. 「保存」ボタンをクリックする。
- トリガーの追加から「Alexa skills Kit」をクリックする。
![c12.png](https://qiita-image-store.s3.amazonaws.com/0/240522/6c657a6e-d035-216c-9600-396899004167.png)


---

## サンプルプログラム

```javascript:index.js
 // 厳密モード有効
 'use strict';

var data = [
    "今日も一日、がんばってください。",
    "働きすきは良くないですよ、たまには休憩してください。",
    "今日も一日、お疲れさまです。"
];

exports.handler = function(event, context, callback) {
    // 更新日時取得
    var dt = (new Date(new Date().getTime() - new Date().getTimezoneOffset() * 60000).toISOString());

    var factArr = data;
    var factIndex = Math.floor(Math.random() * factArr.length);
    var randomFact = factArr[factIndex];

    var bodyJson = {
      "uid": factIndex,
      "updateDate": dt,
      "titleText": "とっさのニュース",
      "mainText": randomFact,
    };

    callback(null, bodyJson);
};
```

---

# 6. API Gatewayの作成

---

## API Gateway

- 「API Gateway」を検索し、クリックする。
![キャプチャ1.PNG](https://qiita-image-store.s3.amazonaws.com/0/240522/84d1a2ed-71de-fdc4-e757-b66f91706acb.png)

---

## API Gateway

- 「APIの作成」をクリック。
![c2.png](https://qiita-image-store.s3.amazonaws.com/0/240522/c4d19214-fae6-bb29-0728-6f3492ef161a.png)

---

## API Gateway

1. 「新しいAPI」を選択する。
2. API名に「NewsCasterAPI」を入力し 、「APIの作成」ボタンをクリックする。
![c3.png](https://qiita-image-store.s3.amazonaws.com/0/240522/ffb28afd-a0d1-e2b7-f481-c1340a87073d.png)

---

## API Gateway

- 「アクション」ボタンをクリックし、「メソッドの作成」を選択する。
![c4.png](https://qiita-image-store.s3.amazonaws.com/0/240522/3cf8bd1f-5113-1424-f6a6-0a048e6e4583.png)

---

## API Gateway

- メソッド種類のリストから「GET」を選択し、「レ印チェック」をクリックする。
![c5.png](https://qiita-image-store.s3.amazonaws.com/0/240522/14a78cdb-099a-e1f5-2c8c-e3fde5754cdb.png)


---

## API Gateway

1. 総合タイプ「Lambda関数」を選択する。
2. リージョン「ap-northeast-1（東京）」を選択する。
3. Lambda関数に「NewsCaster」を設定する。
4. 「保存」ボタンをクリックする。
![c13.png](https://qiita-image-store.s3.amazonaws.com/0/240522/a38dc751-5e87-f6b6-8e73-8e7175b98656.png)


---

## API Gateway

- 「OK」ボタンをクリックする。
![c14.png](https://qiita-image-store.s3.amazonaws.com/0/240522/feecd0de-c1b2-6fdf-8271-544a47f9a069.png)

---

## API Gateway

- 「アクション」ボタンをクリックし、「APIのデプロイ」を選択する。
![c15.png](https://qiita-image-store.s3.amazonaws.com/0/240522/4ce61091-8730-60c8-4a73-c29d3e31bacd.png)


---

## API Gateway

1. デプロイされるステージに、「新しいステージ」を選択する。
2. ステージ名に、「dev」を入力する。
3. 「デプロイ」ボタンをクリックする。
![c16.png](https://qiita-image-store.s3.amazonaws.com/0/240522/ddabea49-86ad-8042-26cd-99d999aa51dd.png)

---

## API Gateway

- 「URLの呼び出し」に表示された「URL」をメモしておく。
![c17.png](https://qiita-image-store.s3.amazonaws.com/0/240522/1b0f5a2e-6615-c8aa-bbe6-c938df0fab2e.png)

---

# 7. Alexaフラッシュブリーフィングスキルの作成

---

## Amazon開発者コンソール

1. 「[Amazon開発者コンソール](https://developer.amazon.com/ja/)」を開く。
2. 「Developer Console」をクリックする。
![スクリーンショット (28).png](https://qiita-image-store.s3.amazonaws.com/0/240522/7c4c8aaf-b5ef-d3c3-59a6-d99ffeb63ef1.png)

---

## Amazon開発者コンソール

- 「ログイン」する。
![スクリーンショット (29).png](https://qiita-image-store.s3.amazonaws.com/0/240522/673f1825-db5a-8443-b506-064f49bc11ae.png)

---

## Amazon開発者コンソール

- 「ALEXA SKILLS KIT」をクリックする。
![c18.png](https://qiita-image-store.s3.amazonaws.com/0/240522/1fe9cd15-f563-b13e-8f87-ba306de885c0.png)


---

## Amazon開発者コンソール

- 「スキルの作成」ボタンをクリックする。
![c19.png](https://qiita-image-store.s3.amazonaws.com/0/240522/92961782-1090-bc82-8206-b63ec7ca60ce.png)

---

## Amazon開発者コンソール

1. スキル名「とっさのニュース」を入力する。
2.  言語を「日本語（Japanese）」に変更する。
3.  「次へ（Next）」ボタンをクリックする。
![c20.png](https://qiita-image-store.s3.amazonaws.com/0/240522/77cf4527-185b-eec6-7a6c-09d5bdfdb110.png)

---

## Amazon開発者コンソール

1. 「フラッシュブリーフィングスキル」スキルを選択する。
2.  「スキル作成（Create Skill）」ボタンをクリックする。
![c21.png](https://qiita-image-store.s3.amazonaws.com/0/240522/6c988c88-f840-93eb-9b41-a2f721d44b07.png)

---

## Amazon開発者コンソール

- カスタムエラーメッセージに、「このフラッシュニュースは、現在ご利用頂けません。」と入力し、「保存」ボタンをクリックする。
![c22.png](https://qiita-image-store.s3.amazonaws.com/0/240522/4450c093-8aa2-fe02-f767-7b946a4cc67a.png)

---

## Amazon開発者コンソール

- 「＋新しいフィードを追加」ボタンをクリックする。
![c23.png](https://qiita-image-store.s3.amazonaws.com/0/240522/483409ce-bd4d-304f-60fa-01c180efe3e4.png)

---

## Amazon開発者コンソール

1. プリアンブル「とっさのニュースが提供しています」
2. フィード名「とっさのニュース」
3. コンテンツタイプ「テキスト」
4. コンテンツジャンル「ユーモア」
5. フィード「先ほどコピーしておいたURL」
6. フィードアイコンに、512ピクセル画像を設定する。
7. 「追加」ボタンをクリックする。
![c24.png](https://qiita-image-store.s3.amazonaws.com/0/240522/bf92bdb3-42ca-c129-e724-689cc9c9dc84.png)

---

## Amazon開発者コンソール

- 「保存」ボタンをクリックする。
![c25.png](https://qiita-image-store.s3.amazonaws.com/0/240522/9ac4b34a-0a2f-9c0e-20c1-efbc3303c36f.png)

---

# 8. DEVスキルの有効化

---

## Amazon.co.jp alexa サインイン

テストシミュレータでは、ニュースを実行することができないため、Amazon Echo実機にて動作テストをする必要があります。実機でテストするため、DEVスキル（開発中のスキル）を有効にししてゆきます。

---

## Amazon.co.jp alexa サインイン

1. [Amazon.co.jp alexa サインイン](https://alexa.amazon.co.jp/spa/index.html)を開く。
2. Amazon.co.jpアカウントで、ログインする。
![c26.png](https://qiita-image-store.s3.amazonaws.com/0/240522/9ddcf2b2-05b4-2147-6aa0-7d0c2f0529e7.png)

---

## Amazon.co.jp alexa サインイン

- 「スキル」をクリックする。
![c27.png](https://qiita-image-store.s3.amazonaws.com/0/240522/decc53d7-2a5a-78b1-bdfa-fb5f89dfbc19.png)

---

## Amazon.co.jp alexa サインイン

- 「有効なスキル」をクリックする。
![c28.png](https://qiita-image-store.s3.amazonaws.com/0/240522/0b84b594-e097-9314-2ea5-e11940c415b7.png)

---

## Amazon.co.jp alexa サインイン

1. 「DEVスキル」をクリックする。
2. 「とっさのニュース」をクリックする。
![c29.png](https://qiita-image-store.s3.amazonaws.com/0/240522/098e1bbd-dcd0-89f4-a1cd-0ea2aece7de8.png)

---

## Amazon.co.jp alexa サインイン

- 「有効にする」ボタンをクリックする。
![c30.png](https://qiita-image-store.s3.amazonaws.com/0/240522/2d658635-f576-7245-077f-61d0f66ef4ce.png)

---

# 9. テスト

---

## Amazon Echo実機
Amazon Echo実機で、ニュースを起動してください。

```text:実機テスト
ユーザー：「アレクサ、今日のニュースは？」
アレクサ：「フラッシュニュースです。
           とっさのキャスターが提供しています。
           今日も一日、がんばってください。」

```

---

## 実機以外のテスト方法
- iPhoneをお持ちの方は、[Reverb for Amazon Alexa](https://itunes.apple.com/jp/app/reverb-for-amazon-alexa/id1144695621?mt=8)を用いてのテストが可能。
- Androidをお持ちの方は、[ホームボタン長押しの標準アシスタントを変更](https://japanese.engadget.com/2018/05/08/android-alexa/)してのテストが可能。

---

# 10. おわりに

---

## おわりに
今回作成した とっさのニュース（NewsCaster）は、変則的な「Alexaフラッシュブリーフィング」スキルとなります。
これまでなかった「Alexaフラッシュブリーフィング」を作って楽しんでください！

---

# end