Edited at

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


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