ASK Toolkit for VS Code を使ってローカルデバッグ環境をセットアップする

Tsuneki Umeda Nov 19, 2020

ASK Toolkit for VS Codeのローカルデバッグ機能が日本語環境でも使用できるようになりました。

ローカルデバッグ環境をセットアップすると、手元にあるコードを使ってデバッグすることができます。コードをホスティングサーバーにデプロイする必要がなくなるため、スキルの修正/テストの繰り返し作業を効率よく行うことができるようになります。またASK Toolkit を使用することで、外部のサービスを使うことなく、簡単にローカルデバッグ環境をセットアップできます。今回はローカルデバッグ環境のセットアップ方法と、ローカルシミュレーターを使用したスキルのデバッグ方法ををご紹介します。

目次：

ASK Toolkitとは
各機能のサポート状況
ローカルデバッグ環境のセットアップ

1. 前提条件

2. ASK Toolkitのインストールする

3. デバッグに必要なNPMモジュールを追加する

4. 設定ファイルを作成する

5. デバッグセッションを開始する

ローカルシミュレーターの使い方
Debug consoleの使い方

ASK Toolkit for VS Codeとは

ASK Toolkitは、Visual Studio Code（VS Code）の拡張機能です。Alexaスキルの作成や、更新、シミュレーターを使用してスキルのテストなどをVS Code上で行うことができます。一連の開発プロセスをVS Code内で完結させることができるため、効率よくスキルを開発することができます。

ASK Toolkit の各機能のサポート状況

新しいスキルの作成と既存スキルのダウンロード、スキルのデプロイは、現状Alexa-hostedスキルにのみに対応しています。シミュレーターを使ったテストとローカルデバッグはAWS lambda などでホストされているスキルでも行うことができます。

	Alexa-hostedスキル	AWS Lambdaホストのスキル
新しいスキルの作成	○	×
スキルのダウンロード	○	×
スキルのデプロイ	○	×
シミュレーターでのテスト	○	○
ローカルデバッグ	○	○

ローカルデバッグ環境のセットアップ

1. 前提条件

後述するローカルデバッグ用の設定ファイル内でSkill Id を使用します。そのためデバッグするスキルは、開発者コンソールにデプロイされている必要があります。このブログでは、AWS Lambdaの ap-northeast-1にホストされたHello World スキルを例にローカルデバッグ環境のセットアップを行います。

ローカル環境にスキルがない場合は、ASK toolkit のダウンロード機能やASK CLIなどを利用してローカル環境にスキルをダウンロードしてください。

ASK CLIの利用方法はこちら。

2. ASK Toolkit for VS Code をインストールする

1-1. VS Code の拡張機能一覧からAlexa Skills Kit (ASK) Toolkitをインストールします。

1-2. アクティビティバーのAlexaアイコンをクリックしてAlexa Skills Toolkit ビューを表示します。

Sign inをクリックしてサインインします。

詳しいインストール方法とサインイン方法はこちらをご参照ください。

1-3. VS Code でデバッグしたいスキルを開きます

File → Open → skill-sample-nodejs-hello-world

3. ローカルデバッグに必要なNPM モジュールを追加する

ask-sdk-model@^1.29.0
ask-sdk-local-debug

VS CodeのTerminalメニューから New Terminal を選択します。

package.jsonがあるディレクトリで npm install を実行します。

ask-sdk-local-debugは dev 環境にインストールしてください。

cd lambda
npm install --save ask-sdk-model@^1.29.0
npm install --save-dev ask-sdk-local-debug

4. 設定ファイルを作成する

3-1. VS Code のRun メニューからOpen configurationを選択し、launch.jsonを作成します。Environment にはNode.jsを選択します。

3-2. Run メニューからAdd configuration を選択してAlexa Skill Debugger(Node.js)を追加します。

3-3. Debug Alexa Skill (Node.js)のargsの値に"—region"と "FE"を追加します。

launch.jsonは最終的に以下のようになります。

"version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Alexa Skill (Node.js)",
            "type": "node",
            "request": "launch",
            "program": "${command:ask.debugAdapterPath}",
            "args": [
                "--accessToken",
                "${command:ask.accessToken}",
                "--skillId",
                "${command:ask.skillIdFromWorkspace}",
                "--handlerName",
                "handler",
                "--skillEntryFile",
                "${workspaceFolder}/lambda/index.js",
                "--region",
                "FE"
            ]
        }
    ]
}

5. デバッグセッションを開始する

デバッグビューを表示して、実行環境に「Debug Alexa skill (Node.js)」を選択してデバッグを実行します。

Debug consoleに以下のメッセージが表示されればデバッグ環境のセットアップは完了です。 Debug console が表示されていない場合は、ViewメニューからDebug consoleを選択してください。

*****Starting Skill Debug Session*****
*****Session will last for 1 hour*****

ローカルシミュレータの使い方

1. ASK Toolkit ビューでTest skill → Open simulator を選択して、ローカルシミュレーターを起動します。

2. テキスト入力ボックスに起動フレーズを入力して、Send ボタンを押します。

Debug consoleの使い方

コード内のconsole.log()は、Debug consoleに出力されます。
ErrorHandler内でerror.stackを出力することで、unhandled エラー発生時に、エラー内容をDebug consoleに表示させることができます。

const ErrorHandler = {
  canHandle() {
    return true
  },
  handle(handlerInput, error) {
    console.log(`~~~~ Error handled: ${error.stack}`)
    const speakOutput = `問題が発生しました。`

    return handlerInput.responseBuilder
      .speak(speakOutput)
      .reprompt(speakOutput)
      .getResponse()
  },
}

exports.handler = Alexa.SkillBuilders.custom()
  .addRequestHandlers(
    LaunchRequestHandler,
    . . .
  )
  .addErrorHandlers(ErrorHandler)
  .lambda()

以下はDebug consoleに表示されるエラーメッセージの例です。