Go to Qiita Advent Calendar 2024 Top
LoginSignup
12
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@zono_0(Takahiro Nishizono)

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

Last updated at Posted at 2018-05-28
1 / 63

1. はじめに

参考文献

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

このスライドを見てできること

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

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

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

注意事項

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

2. 事前準備・開発環境

事前準備

必要なソフトウェア

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

必要な開発環境

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

3. アカウントの用意

Amazon Developerアカウントの用意

AWSアカウントの用意

4. AWSログイン

AWSログイン

  1. 「AWS」（https://console.aws.amazon.com/ ）サインイン画面を開く。
  2. 「12桁のアカウントID」または「Eメールアドレス」を入力する。
  3. 「次へ」ボタンをクリックする。
    スクリーンショット (46).png

AWSログイン

  1. 必須項目を入力する。
  2. 「サインイン」ボタンをクリックする。
    スクリーンショット (45).png

5. Lambda関数の作成

AWS Lambda

  • 「Lambda」を検索し、クリックする。
    スクリーンショット (47).png

AWS Lambda

  • リージョンが「東京」であることを確認する。
    スクリーンショット (48).png

AWS Lambda

  • 「関数の作成」ボタンをクリックする。
    スクリーンショット (49).png

AWS Lambda

  • 「一から作成」を選択する。
    c7.png

AWS Lambda

  1. 「関数の名前（NewsCaster）」を入力する。
  2. 「ラインタイム（Node.js 6.10）」を選択する。
  3. 「ロール」を設定する。
    c8.png

IAMロールが未設定の場合

AWS Lambda

  • 「関数の作成」ボタンをクリックする。
    c9.png

AWS Lambda

  1. 「関数（NewsCaster）」が選択されていることを確認する。
  2. 画面中央まで、下にスクロールする。
    c10.png

AWS Lambda

  • サンプルプログラムを、全て選択して削除する。
    c11.png

AWS Lambda

  1. 次のページのサンプルプログラムを、貼り付ける。
  2. 「保存」ボタンをクリックする。
  • トリガーの追加から「Alexa skills Kit」をクリックする。
    c12.png

サンプルプログラム

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

API Gateway

  • 「APIの作成」をクリック。
    c2.png

API Gateway

  1. 「新しいAPI」を選択する。
  2. API名に「NewsCasterAPI」を入力し 、「APIの作成」ボタンをクリックする。
    c3.png

API Gateway

  • 「アクション」ボタンをクリックし、「メソッドの作成」を選択する。
    c4.png

API Gateway

  • メソッド種類のリストから「GET」を選択し、「レ印チェック」をクリックする。
    c5.png

API Gateway

  1. 総合タイプ「Lambda関数」を選択する。
  2. リージョン「ap-northeast-1（東京）」を選択する。
  3. Lambda関数に「NewsCaster」を設定する。
  4. 「保存」ボタンをクリックする。
    c13.png

API Gateway

  • 「OK」ボタンをクリックする。
    c14.png

API Gateway

  • 「アクション」ボタンをクリックし、「APIのデプロイ」を選択する。
    c15.png

API Gateway

  1. デプロイされるステージに、「新しいステージ」を選択する。
  2. ステージ名に、「dev」を入力する。
  3. 「デプロイ」ボタンをクリックする。
    c16.png

API Gateway

  • 「URLの呼び出し」に表示された「URL」をメモしておく。
    c17.png

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

Amazon開発者コンソール

  1. 「Amazon開発者コンソール」を開く。
  2. 「Developer Console」をクリックする。
    スクリーンショット (28).png

Amazon開発者コンソール

  • 「ログイン」する。
    スクリーンショット (29).png

Amazon開発者コンソール

  • 「ALEXA SKILLS KIT」をクリックする。
    c18.png

Amazon開発者コンソール

  • 「スキルの作成」ボタンをクリックする。
    c19.png

Amazon開発者コンソール

  1. スキル名「とっさのニュース」を入力する。
  2. 言語を「日本語（Japanese）」に変更する。
  3. 「次へ（Next）」ボタンをクリックする。
    c20.png

Amazon開発者コンソール

  1. 「フラッシュブリーフィングスキル」スキルを選択する。
  2. 「スキル作成（Create Skill）」ボタンをクリックする。
    c21.png

Amazon開発者コンソール

  • カスタムエラーメッセージに、「このフラッシュニュースは、現在ご利用頂けません。」と入力し、「保存」ボタンをクリックする。
    c22.png

Amazon開発者コンソール

  • 「＋新しいフィードを追加」ボタンをクリックする。
    c23.png

Amazon開発者コンソール

  1. プリアンブル「とっさのニュースが提供しています」
  2. フィード名「とっさのニュース」
  3. コンテンツタイプ「テキスト」
  4. コンテンツジャンル「ユーモア」
  5. フィード「先ほどコピーしておいたURL」
  6. フィードアイコンに、512ピクセル画像を設定する。
  7. 「追加」ボタンをクリックする。
    c24.png

Amazon開発者コンソール

  • 「保存」ボタンをクリックする。
    c25.png

8. DEVスキルの有効化

Amazon.co.jp alexa サインイン

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

Amazon.co.jp alexa サインイン

  1. Amazon.co.jp alexa サインインを開く。
  2. Amazon.co.jpアカウントで、ログインする。
    c26.png

Amazon.co.jp alexa サインイン

  • 「スキル」をクリックする。
    c27.png

Amazon.co.jp alexa サインイン

  • 「有効なスキル」をクリックする。
    c28.png

Amazon.co.jp alexa サインイン

  1. 「DEVスキル」をクリックする。
  2. 「とっさのニュース」をクリックする。
    c29.png

Amazon.co.jp alexa サインイン

  • 「有効にする」ボタンをクリックする。
    c30.png

9. テスト

Amazon Echo実機

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

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

実機以外のテスト方法

10. おわりに

おわりに

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

end

12
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
12
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?