Help us understand the problem. What is going on with this article?

Alexaスキル 開発チュートリアル

More than 1 year has passed since last update.

Alexaスキル 開発チュートリアル

by zono_0
1 / 111

1. はじめに


参考文献

今回のAlexaスキル開発チュートリアルは、以下のサイトを参考に、2018年3月時点の開発環境(Alexa Skills Kit SDK for Node.js(V6.10) Version 1)にまとめ直したものとなります。


Note


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

  • Amazon開発者コンソールが理解できる。
  • AWS Lambdaが理解できる。
  • Alexaスキルのテストができるようになる。
  • Alexaスキルが作成できるようになる。

今回作成するAlexaスキル

  • スキル名:とっさの豆知識
トークシナリオ
ユーザー:「アレクサ、<とっさの豆知識>を開いて。」
アレクサ:「知ってましたか?
           水星の一年はたった88日です。 」


2. 事前準備・開発環境


事前準備


必要なソフトウェア

  • ブラウザ:Firefox(推奨)
  • エディタ:Visual Studio Code(推奨)

必要な開発環境

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

3. アカウントの用意


Amazon Developerアカウントの用意


AWSアカウントの用意


4. Alexaスキルの作成


Amazon開発者コンソール

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

Amazon開発者コンソール

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

Amazon開発者コンソール

  • 「ALEXA」をクリックする。 スクリーンショット (30).png

Amazon開発者コンソール

  • 「Alexa Skills Kit」の「始める」ボタンをクリックする。 スクリーンショット (31).png

Amazon開発者コンソール

  • 「スキルの作成(Create Skill)」ボタンをクリックする。 スクリーンショット (32).png

Amazon開発者コンソール

  1. 「スキル名(SkillName)」を入力する。
  2. 言語を「日本語(Japanese)」に変更する。
  3. 「次へ(Next)」ボタンをクリックする。 スクリーンショット (35).png

Amazon開発者コンソール

  1. 「カスタム(Custom)」スキルを選択する。
  2. 「スキル作成(Create Skill)」ボタンをクリックする。 スクリーンショット (37).png

Amazon開発者コンソール

  • 「1. 呼び出し名(Invocation Name)」をクリックする。 スクリーンショット (38).png

Amazon開発者コンソール

  1. 「スキル呼び出し名(Skill Invocation Name)」を入力する。
  2. 「モデルを保存(Save Model)」ボタンをクリックする。
  3. 「ビルド(Build)」をクリックして戻る。 スクリーンショット (39).png

Amazon開発者コンソール

  • 「2. インテント、サンプル、スロット(Intents, Samples, and Slot)」をクリックする。 スクリーンショット (40).png

Amazon開発者コンソール

  1. 「インテント名(GetNewFactIntent)」を入力する。
  2. 「カスタムインテントを作成(Creatte Custom Intent)」ボタンをクリックする。 スクリーンショット (41).png

Amazon開発者コンソール

  1. 「サンプル発話『豆知識を教えて』」を入力する。
  2. 「モデルを保存(Save Model)」ボタンをクリックする。
  3. 「ビルド(Build)」をクリックして戻る。 スクリーンショット (42).png

Amazon開発者コンソール

  • 「3. モデルをビルド(Build Model)」をクリックする。 スクリーンショット (43).png

Amazon開発者コンソール

  • 「ビルドの成功」を確認する。 スクリーンショット (44).png

5. Lambda関数の作成


AWS Lambda

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

AWS Lambda

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

AWS Lambda

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

AWS Lambda

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

AWS Lambda

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

AWS Lambda

  1. 「設計図」を選択する。
  2. 検索キーワードに「alexa」を入力し、Enterキーを押下する。 スクリーンショット (50).png

AWS Lambda

  1. 「alexa-skill-sdk-facttskill」を選択する。
  2. 「設定」ボタンをクリックする。 スクリーンショット (51).png

AWS Lambda

  1. 「関数の名前(FactSkill)」を入力する。
  2. 「ロール」を設定する。 スクリーンショット (52).png

IAMロールが未設定の場合


AWS Lambda

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

AWS Lambda

  • トリガーの追加から「Alexa skills Kit」をクリックする。 スクリーンショット (54).png

AWS Lambda

  • トリガーに「Alexa skills Kit」が設定されたことを確認する。 スクリーンショット (55).png

Amazon開発者コンソール

  • 「あなたのAlexaコンソール」から、「スキル(新しいコンソール)」を選択する。 スクリーンショット (57).png

Amazon開発者コンソール

  • 「View Skill ID」をクリックし、「Skill ID」をコピーする。 スクリーンショット (58).png

AWS Lambda

  1. スキルのID検証に、Amazon開発者コンソールでコピーした「Skill ID(アプリケーションID)」をペーストする。
  2. 「追加」ボタンをクリックする。 スクリーンショット (56).png

AWS Lambda

  • 「保存」ボタンをクリックする。 スクリーンショット (59).png

日本語版 ZIPファイル


日本語版 ZIPファイル

  • ZIPファイルを解凍する。(所要時間:1分) zip1.png

Visual Studio Code

  • 解凍したファイルから index.js ファイルを開く。
  • 推奨ソフト:Visual Studio Code スクリーンショット (62).png

Visual Studio Code

  • ソースの10行目の APP_ID を、作成したAlexaスキルの「アプリケーションID(Skill ID)」に書き替える。
index.js
var APP_ID = "amzn1.ask.skill.XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX";
  • 保存してから、全選択コピーをする。 スクリーンショット (61).png

AWS Lambda

  • 「プログラム(FactSkill)」を選択する。 スクリーンショット (63).png

AWS Lambda

  • 画面中央のインラインエディアの「index.js」ファイルを全選択し、先ほどコピーしたローカルのindex.jsファイルの内容を、ペーストする。(日本語版に上書きする。) スクリーンショット (64).png

AWS Lambda

  • Lambdaプログラムが日本語版に上書きされたことを確認し、「保存」ボタンをクリックする。 スクリーンショット (65).png

AWS Lambda

  • 画面最上部までスクロールし、ARN を選択し、コピーする。 スクリーンショット (66).png

6. Alexaスキルの仕上げ


Amazon開発者コンソール

  • 作成したAlexaスキルの「編集(Edit)」ボタンをクリックする。 スクリーンショット (67).png

Amazon開発者コンソール

  • 「4. エンドポイント(Endpoint)」をクリックする。 スクリーンショット (68).png

Amazon開発者コンソール

  1. 「AWS LambdaのARN」を選択する。
  2. 「デフォルトの地域(Default Region)」にARNをペーストする。
  3. 「エンドポイントの保存(Save Endpoints)」をクリックする。 スクリーンショット (69).png

Amazon開発者コンソール

  • 「ビルド(Build)」をクリックし、最初の画面に戻り、4つ全て「オールグリーン」であることを確認する。 スクリーンショット (70).png

7. テスト


テストシミュレータ

  • 「テスト(Test)」をクリックする。 スクリーンショット (71).png

テストシミュレータ

  • マイク利用を「許可する」。 スクリーンショット (72).png

テストシミュレータ

  • テストを「有効(enabled)」にする。 スクリーンショット (73).png

テストシミュレータ

  • マイクアイコンを押下したまま、「とっさの豆知識を開いて」と話す。 スクリーンショット (73) - コピー.png

テストシミュレータ

  • Alexaスキルが正常に動作したことを確認する。 スクリーンショット (74).png

8. おわりに


おわりに

いかがでしたでしょうか?
うまくAlexaスキルは、動きましたか?

今回作成した FactSkill は、
Alexaスキルの基礎となります。
これを元に、いろいろ作り変えて、
新しい Alexaスキル 作ってみましょう!!


付録1. ソース解説


ソース解説:メイン処理部

index.js
// プログラムの開始位置
exports.handler = function(event, context, callback) {
    // alexa-sdkの利用宣言
    var alexa = Alexa.handler(event, context);

    // アプリケーションIDの設定
    alexa.APP_ID = APP_ID;

    // ハンドラ部へジャンプ(状態遷移分岐)
    alexa.registerHandlers(handlers);

    // Alexa応答(プログラムの終了位置)
    alexa.execute();
};


ソース解説:ハンドラ部

index.js
// ハンドラ部
var handlers = {
    // ユーザ発話「アレクサ、スキル呼び出し名 を開いて。」
    'LaunchRequest': function () {
        // 'GetNewFactIntent'へジャンプ
        this.emit('GetNewFactIntent');
    },

    // ユーザ発話「何か教えて。」
    'GetNewFactIntent': function () {
        // 変数宣言(ランダムに豆知識を1つ決定)
        var factArr = data;
        var factIndex = Math.floor(Math.random() * factArr.length);
        var randomFact = factArr[factIndex];

        // スピーチアウトプットの設定(Alexa応答設定)
        var speechOutput = GET_FACT_MESSAGE + randomFact;

        // tellWithCard(カード付きAlexa応答&終了)
        this.emit(':tellWithCard', speechOutput, SKILL_NAME, randomFact);
    },

    // ユーザ発話「ヘルプ。」
    'AMAZON.HelpIntent': function () {
        // スピーチアウトプットの設定(Alexa応答設定)
        var speechOutput = HELP_MESSAGE;

        // リプロンプトの設定(聞き直し設定)
        var reprompt = HELP_REPROMPT;

        // ask(Alexa応答+たずねる)
        this.emit(':ask', speechOutput, reprompt);
    },

    // ユーザ発話「キャンセル。」
    'AMAZON.CancelIntent': function () {
        // tell(Alexa応答&終了)
        this.emit(':tell', STOP_MESSAGE);
    },

    // ユーザ発話「止めて。」
    'AMAZON.StopIntent': function () {
        // tell(Alexa応答&終了)
        this.emit(':tell', STOP_MESSAGE);
    }
};



ソース解説:メッセージ定義部

index.js
// メッセージ定義
var GET_FACT_MESSAGE = "知ってましたか?";
var HELP_MESSAGE = "豆知識を聞きたい時は「豆知識」と、終わりたい時は「おしまい」と言ってください。どうしますか?";
var HELP_REPROMPT = "どうしますか?";
var STOP_MESSAGE = "さようなら";


ソース解説:豆知識の定義部

index.js
// 豆知識の定義
var data = [
    "水星の一年はたった88日です。",
    "金星は水星と比べて太陽より遠くにありますが、気温は水星よりも高いです。",
    "金星は反時計回りに自転しています。過去に起こった隕石の衝突が原因と言われています。",
    "火星上から見ると、太陽の大きさは地球から見た場合の約半分に見えます。",
    "木星の<sub alias='いちにち'>1日</sub>は全惑星の中で一番短いです。",
    "天の川銀河は約50億年後にアンドロメダ星雲と衝突します。",
    "太陽の質量は全太陽系の質量の99.86%を占めます。",
    "太陽はほぼ完璧な円形です。",
    "皆既日食は一年から二年に一度しか発生しない珍しい出来事です。",
    "土星は自身が太陽から受けるエネルギーの2.5倍のエネルギーを宇宙に放出しています。",
    "太陽の内部温度は摂氏1500万度にも達します。",
    "月は毎年3.8cm地球から離れていっています。"
];


ソース解説:プログラム定義部

index.js
// 厳格モードの設定
'use strict';

// alexa-sdkモジュールを利用
var Alexa = require('alexa-sdk');

// アプリケーションIDの設定
var APP_ID = "amzn1.ask.skill.XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX";

// スキル名の設定
var SKILL_NAME = "豆知識";


付録2. 会話を続ける ask化


トークシナリオ:会話を続ける

  • 会話が続くようにする。
トークシナリオ
ユーザー:「アレクサ、<とっさの豆知識>を開いて。」
アレクサ:「知ってましたか?水星の一年はたった88日です。
           どうしますか?」

ユーザー:「何か教えて。」
アレクサ:「知ってましたか?太陽はほぼ完璧な円形です。
           どうしますか?」

ユーザー:「止めて。」
アレクサ:「さようなら。」


ソース改良:会話を続ける ask化

  • 'GetNewFactIntent'の中の tellWithCard を、 ask に書き替える。
index.js
        // スピーチアウトプットの設定(Alexa応答設定)
        var speechOutput = GET_FACT_MESSAGE + randomFact + HELP_REPROMPT;

        // リプロンプトの設定(聞き直し設定)
        var reprompt = HELP_REPROMPT;

        // ask(Alexa応答+たずねる)
        this.emit(':ask', speechOutput, reprompt);

付録3. スキル名の変更


スキル名の変更

  • スキル名の名称を変える。
index.js
// スキル名の設定
var SKILL_NAME = "とっさの豆知識";


付録4. スキル申請時の指摘にそなえる


予期せぬ終了に対するそなえ

  • 'SessionEndedRequest'の処理を追記する。
index.js
    // ユーザ発話「止めて。」
    'AMAZON.StopIntent': function () {
        this.emit(':tell', STOP_MESSAGE);
    },

    // 予期せぬ終了
    'SessionEndedRequest': function () {
        // 処理は書かなくてもOKらしいが、書いておく。
        this.emit(':tell', STOP_MESSAGE);
    }

予期せぬ発話に対するそなえ

  • 'Unhandled'の処理を追記する。
  • 今回は状態遷移(state)をしていないので、効力は発揮されないが、状態遷移(state)する時は必須処理となる。
index.js
    // 予期せぬ終了
    'SessionEndedRequest': function () {
        // 処理は書かなくてもOKらしいが、書いておく。
        this.emit(':tell', STOP_MESSAGE);
    }, 

    // 予期せぬ発話
    'Unhandled': function () {
        // スピーチアウトプットの設定(Alexa応答設定)
        var speechOutput = HELP_MESSAGE;

        // リプロンプトの設定(聞き直し設定)
        var reprompt = HELP_REPROMPT;

        // ask(Alexa応答+たずねる)
        this.emit(':ask', speechOutput, reprompt);
    }

付録5. Alexa居酒屋っぽくする


カスタムスロットの追加

  • 「スロット値」の「追加」をクリックする。 スクリーンショット (208).png

カスタムタイプ名前の設定

  • スロットタイプの名前に「LIST_OF_DRINK」と入力し、「カスタムスロットタイプを作成」クリックする。 スクリーンショット (209).png

スロット値の登録

  • スロット値に「アイスコーヒー(お好きな飲み物)」と入力し、「+」印をクリックする。(たくさん登録しましょう。) スクリーンショット (210).png

カスタムスロットの保存

  • 「モデルを保存」ボタンをクリックする。 スクリーンショット (214).png

カスタムインテントの追加

  • 「インテント」の「追加」をクリックする。 スクリーンショット (215).png

カスタムインテントの名前設定

  • カスタムインテントの名前に「OrderIntent」と入力し、「カスタムインテントを作成」クリックする。 スクリーンショット (216).png

サンプル発話の登録

  • サンプル発話に「{drink} を {number} ください」と入力し、「+」印をクリックする。(フレーズ例をたくさん登録しましょう。) スクリーンショット (217).png

スロットタイプの設定

  • 「drink」スロットのスロットタイプに「LIST_OF_DRINK」を選択する。
  • 「number」スロットのスロットタイプに「AMAZON.NUMBER」を選択する。 スクリーンショット (218).png

モデルの保存とビルド

  • 「モデルを保存」ボタンをクリック後、「モデルをビルド」ボタンをクリックする。 スクリーンショット (219).png

参照ライブラリを増やす

  • 'const util = require('util');'の処理を追記する。
index.js
// 厳格モードの設定
'use strict';

// ライブラリの参照
var Alexa = require('alexa-sdk');
const util = require('util');

メッセージ定義を修正&増やす

  • 'HELP_REPROMPT 'の文言を修正する。
  • 'ORDER_DRINK 'の文言を追記する。
index.js
let HELP_REPROMPT = "お飲み物でもいかがですか?";
var STOP_MESSAGE = "さようなら";
let ORDER_DRINK = "%sを、%s杯ですね?ご注文をお受けいたしました。またのご利用、お待ちしております。";

OrderIntentの処理を追加する

  • 'AMAZON.HelpIntent'の処理の前あたりに、'OrderIntent'の処理を追記する。
  • コピー&ペーストしてもらえればOKです。
  • かならず、保存をクリックしましょう。
index.js
    // ユーザ発話「{drink} を {number} ください。」
    'OrderIntent': function () {
        // スロット格納用変数
        let drink = undefined;
        let number = undefined;

        // スロット値の取得
        if ('drink' in this.event.request.intent.slots) {
            drink = this.event.request.intent.slots.drink.value;
        }

        if ('number' in this.event.request.intent.slots) {
            number = this.event.request.intent.slots.number.value;
        }

        // // セッション情報の保存
        this.attributes['drink'] = drink;
        this.attributes['number'] = number;

        // スピーチアウトプットの設定(Alexa応答設定)
        let speechOutput = util.format(ORDER_DRINK, drink, number);

        // tell(Alexa応答&終了)
        this.emit(':tell', speechOutput);
    },


Alexa居酒屋のプレオープンテスト

  • お好きな飲み物を注文してみる。 スクリーンショット (220).png

付録6. スキル申請時の必須項目の登録


スキル申請時の必須項目の登録

Japanese Store Preview の設定。

  1. Amazon開発者コンソールの「Launch」をクリックする。
  2. 「Public Name」に、スキル名を設定する。
  3. 「One Sentence Description」に、短いスキル説明文を設定する。
  4. 「Detailed Description」に、長いスキル説明文を設定する。
  5. 「Example Phrases」に、スキル起動フレーズを設定する。(例:「アレクサ、とっさの豆知識を開いて」)
  6. 「Small Skill Icon」に、小さいアイコン(108x108 .jpg or .png)を設定する。
  7. 「Large Skill Icon」に、大きいアイコン(512x512 .jpg or .png)を設定する。
  8. 「Category」を設定する。
  9. 「Keywords」に、検索キーワードを設定する。
  10. 「Save and continue」ボタンをクリックする。

スキル申請時の必須項目の登録

Privacy & Compliance の設定。

  1. Amazon開発者コンソールの「Launch」をクリックする。
  2. 「Privacy & Compliance」をクリックする。
  3. 英語質問を和訳し、「Yes / No」に回答する。
  4. 「Export Compliance」を和訳し、必要に応じてチェックする。
  5. 「Testing Instructions」に、スキル申請をしてくださるアマゾンテスター向けコメントを明記する。
  6. 「Save and continue」ボタンをクリックする。

スキル申請時の必須項目の登録

Privacy & Compliance の設定。

  1. Amazon開発者コンソールの「Launch」をクリックする。
  2. 「Availability」をクリックする。
  3. 「Public」をチェックする。
  4. 「Selected countries and regions」をチェックし、「Japan」のみチェックする。
  5. 「Save and continue」ボタンをクリックする。

付録7. Alexa公式ドキュメント


Alexa公式ドキュメントの情報源

※画面下の「Language」を「English(英語)」に切り替えることで、日本未公開の絶対領域を参照できます。


付録8. alexa-sdkを極める


alexa-sdkの情報源

slotの値取得、stateによる状態遷移やcard表示の方法などが、学べます。


付録9. サンプルソースたち


サンプルソースの情報源

個人的には、alexa-cookbook が最強だと思ってます。


付録10. ダイアログモデルを極める


ダイアログモデルの情報源

slotの値取得制御の一部分を、Alexaスキル側(Amazon Developer Portal)で済ませる新技。


付録11. VUIのしんずいを極める


VUIの情報源


付録12. 奥義、Amazonに聞く


Amazonフォーラム

Amazonお問い合わせ


おわりに

2018/03/10 TAKAHIRO NISHIZONO


end

zono_0
( ɵ̷̥̥᷄ .̠ ɵ̷̥̥᷅ ) バイク:Vストローム250 パソコン:Ryzen 2700x カメラ:PENTAX K-r 派 動画編集:DaVinci Resolve 15 Qiita:http://qiita.com/zono_0 川崎市近郊バイクツーリングマップ:http://bit.ly/2GGMc9J
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