Alexaスキル開発メモ ローカルデバッグしてみよう

Alexaスキル開発

こんにちは、ハルアキです。

Alexaのスキル開発をしていて大変なのがデバッグのための動作確認。
プログラムのちょっとした修正だったとしても、修正のたびにデプロイしていると結構時間がかかってしまいます。

そこでおすすめなのがローカルでのデバッグ環境を作ること。
具体的には ngrok と nodemon を使ってコード修正をすぐテストできる環境を作ります。

これでスキル開発の効率が劇的に改善すると思いますよ。

なお、AWS lamdaを使って開発する場合の手順になります。
Alexa-hosted skillを使っている人は↓の記事も参考にしてみてください。

ローカルでAlexaスキルをデバッグする環境をセットアップする

事前準備

スキルプロジェクトの準備

Alexaスキルのプロジェクトを準備しましょう。
僕はask cliを使っているので ask new で準備したHello world スキルを使って説明していきます。

関連パッケージのインストール

今回使用する ngrok, nodemon, ask-sdk-express-adapter, express をインストールします。

npm install -D nodemon ngrok
npm install ask-sdk-express-adapter express

起動用のスクリプトも作成しておきます。

@echo off
start npx ngrok http 3000
start npx nodemon -w index.js

ソースコードの修正

ローカルデバッグする際にリクエストが受け付けられるようにソースコードを修正します。

必要なパッケージを読み込む部分を追記します。

const ExpressAdapter = require('ask-sdk-express-adapter');
const express = require('express');

SkillBuilder を ExpressAdapter に渡せるように修正します。

// The SkillBuilder acts as the entry point for your skill, routing all request and response
// payloads to the handlers above. Make sure any new handlers or interceptors you've
// defined are included below. The order matters - they're processed top to bottom.
const skill = Alexa.SkillBuilders.custom()
    .addRequestHandlers(
        LaunchRequestHandler,
        HelloWorldIntentHandler,
        HelpIntentHandler,
        CancelAndStopIntentHandler,
        SessionEndedRequestHandler,
        IntentReflectorHandler, // make sure IntentReflectorHandler is last so it doesn't override your custom intent handlers
        ) 
    .addErrorHandlers(
        ErrorHandler,
        )
    .create();

exports.handler = skill;

// サーバー情報
const PORT = 3000;
const ENDPOINT = '/';

const adapter = new ExpressAdapter.ExpressAdapter(skill, false, false);
express().post(ENDPOINT, adapter.getRequestHandlers()).listen(PORT);

ソースコードを修正したら、develop.cmdを起動してみましょう。2つウィンドウが立ち上がります。

設定ファイルの修正

skill.json, ask-resources.json を修正します。
設定ファイルは最終的にAWS lamdbaにデプロイする時は戻す必要があります。
バックアップは残しておきましょう。

skill.json の uriは先程起動した ngrok で取得したuriを設定します。

・・・
    "apis": {
      "custom": {
        "endpoint": {
          "uri": "https://7a1f6f4b2fbf.ngrok.io",
          "sslCertificateType": "Wildcard"
        }
      }
    },
・・・

ask-resources.json は↓を削除します。

      ,
      "skillInfrastructure": {
        "userConfig": {
          "runtime": "nodejs10.x",
          "handler": "index.handler",
          "awsRegion": "ap-northeast-1"
        },
        "type": "@ask-cli/lambda-deployer"
      }

保存したら ask deploy でデプロイしましょう。

コンソールでの確認・テスト

デプロイが無事完了したら、コンソールで確認・テストしてみましょう。

エンドポイントの確認

先程 skill.json で設定したエンドポイントが反映されているかを確認します。

ngrok には無料版/有料版があり、無料版の場合は取得したuri は8時間で無効になってしまいます。
8時間以上経過した場合は再度取得して設定が必要になるのですが、毎回 skill.jsonを変更してデプロイするのは大変なのでコンソールで変更してエンドポイントを保存すればOKです。

ただし、対話モデル等を修正してデプロイする際にはskill.jsonの値が反映されるので注意しましょう。

ではシミュレータでテストしてみましょう。
今回はask newで作ったものをそのまま使ったので英語になってます。

hello world でちゃんと返答が帰ってきました。

では、LaunchRequestHandler を少し修正して、反映されるか試してみましょう。

        const speakOutput = 'Welcome local debug, you can say Hello or Help. Which would you like to try?';

修正を保存すると nodemon がリスタートしているのがわかります。

再度シミュレータでテストすると修正されていることが確認できます。

ソースコードを修正して保存するだけですぐに反映されるのは嬉しいですね!

まとめ

ngrok, nodemon を使用してAlexaのローカルデバッグ環境を構築する手順をご紹介しました。

一度作ってしまえばスキル開発の効率はかなり上がると思います。是非試してみてください。

それでは今日も素敵なアレクサライフを!

コメント

タイトルとURLをコピーしました