Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
9
Help us understand the problem. What is going on with this article?
@zono_0

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

More than 1 year has passed since last update.

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

by zono_0
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. 「保存」ボタンをクリックする。
  3. トリガーの追加から「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

9
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
zono_0
( ɵ̷̥̥᷄ .̠ ɵ̷̥̥᷅ ) バイク:Vストローム250 パソコン:Ryzen 2700x カメラ:PENTAX K-r 派 動画編集:DaVinci Resolve 15 Qiita:http://qiita.com/zono_0 川崎市近郊バイクツーリングマップ:http://bit.ly/2GGMc9J

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
9
Help us understand the problem. What is going on with this article?