Alexa Skills Toolkit for VS Codeでスキルを開発する（前編）

はじめに

Visual Studio Code (VS Code)のExtentionである、Alexa Skills Toolkit for VS Code (以下Alexa Skills Toolkit) を使って、Alexa-Hostedスキルを開発する方法について紹介します。

Alexa Skills Toolkitは、AlexaスキルをVS Codeを使ってローカル環境で開発できる、便利なツールです。しかし変更時の手順によっては、サーバー環境とローカル環境の間に不整合が発生し、変更内容が失われるリスクも潜んでいます。

前編では、クイックツアーとして、Alexa Skills Toolkitを使ったスキルの開発手順を、一通り見ていきます。

後編では、どういう場合に不整合が発生するのか、またどうしたら防げるのか、という点を見ていきます。

準備作業

下記のリンク先を参照して、VS CodeとAlexa Skills Toolkitのインストールを行ってください。

Alexa Skills Toolkit for Visual Studio Codeで開発を始める

クイックツアー

スキルの作成

VS Codeのアクティビティ（左端のメニュー）で、①Alexa Skills Toolkitを選びます。②Toolkitの初期メニューが表示されます。

SKILLS MANAGEMENTの下に、Alexa Skills Toolkitでスキルの開発を開始するメニューが表示されています。

• Create a skill
• Download and edit skill
• Open local skill

ここでは一番目の”Create a skill”で、新しいスキルを作成することにします。メニューから①Create a skillをクリックすると、新しく作るスキルの諸元を入力する画面が表示されます。

開発者コンソールからスキルを作成したことのある人には、見覚えのある項目だと思います。本記事では、下記のように入力選択するものとします。

右下の②Createボタンをクリックして作成を開始します。

“Skill creation in progress.”の表示が出たあと、しばらくすると下記のような画面が表示され、スキルの初期データ一式が作成されたことが確認できます。

ここで開発者コンソールを開くと、下図のように新しいスキルが作成されていることが確認できます。

スキルの変更

スキルの作成直後は、スキルの呼び出し名がデフォルトのchange meのままなので、これを変更しマイスキルとします。この修正は、開発者コンソールからも、VS Codeからも行えますが、ここではVS Codeから行うことにします。

ファイル①alexa-skill-toolkit/skill-package/interactionModels/custom/ja-JP.jsonを開いて、invocationNameを②マイスキルに変更します。

スキルのデプロイ

まず変更されたファイル（ja-JP.json）をGitで更新します。VS Codeのターミナルを開き、下記のコマンドを実行します。

git add .
git commit -m "初期更新"

VS Codeのソース管理アクティビティから実施することもできます。

次にAlexaサーバーにデプロイしてビルドします。VS Codeのアクティビティで①Alexa Skills Toolkitを選びます。メニューから②Deploy skillをクリックすると、下図のような画面が表示されます。

右下の③Deploy & buildボタンをクリックします。”Skill deployment in progress.”と表示されたあと、しばらくすると画面が切り替わり、下記のように”Skill build succeeded”のメッセージが表示され、スキルのデプロイとビルドが完了したことが判ります。

開発者コンソールでビルドタブを開き、呼び出し名が変更されていることを確認します。

開発者コンソールでテストタブを開き、スキルの動作を確認します。まず「スキルテストが有効になっているステージ」を①開発中に変更します。次に②マイスキルを開いてと入力し、Welcome, you can ... と応答が返ってくることを確認します。

スキルのローカル環境でのテスト

スキルをローカル環境で実行しテストします。このあとに説明する手順で、ローカル環境でスキルを起動すると、Alexaサーバーとの通信を確立し、スキルの呼出がローカル環境に対して行われます。

モジュールの初期化

VS Codeのターミナルを開き、下記のコマンドを実行します。

cd lambda
npm install
npm install --save-dev ask-sdk-local-debug

設定ファイルの作成

VS Codeのデバッグ環境を設定するために、.vscode/launch.jsonファイルを作成し下記の内容を書き込みます。日本のAmazonサイトで作成したアカウントであれば、--regionにはFEを指定します。ASK技術ドキュメントには、デフォルトはNAとなっているので注意してください。（筆者は良く考えず「デフォルトで良いんでしょ」とNAを指定してしまい、少し手間取りました …）

{
    "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"
            ],
            "cwd": "${workspaceFolder}/lambda"
        }
    ]
}

スキルの起動

VS Codeのアクティビティから①実行とデバッグを選びます。デバッグの開始リストから、②Debug Alexa Skillを選び、スキルを起動します。

③デバッグターミナルに下記のようなメッセージが表示されればスキルが起動しています。

Region chosen: FE
*****Starting Skill Debug Session***** 
*****Session will last for 1 hour***** 

メッセージにあるように、ここで起動されたスキルのセッションは1時間のみ有効です。1時間を過ぎると再起動が必要になります。

スキルシミュレータによるテスト

VS Code上でシミュレータを使って動作確認を行います。

VS Codeのアクティビティからで①Alexa Skills Toolkitを選びます。メニューから②Test skill>Open simulatorをクリックします。下図のシミュレータの画面が表示されます。

③マイスキルを開いてと入力して、Welcome, you can say ... と応答が返ってくることを確認します。

デバック

スキルはデバッグモードで起動されます。このためVS Codeのデバック機能を使って、ブレークポイントを設定したり、変数の内容を確認したり出来ます。

変更のコミット

追加のモジュールをインストールしたため、package.jsonとpackage-lock.jsonの２つのファイルが更新されています。後続の作業のために、一旦これらをコミットしておきます。

VS Codeでターミナルを開いて、下記のコマンドを実行します。

git add .
git commit -m "ローカルデバッグのためにモジュールを追加"

おわりに

前編はここまでになります。

VS CodeとAlexa Skills Toolkitの組み合わせは強力だと思います。NGROKのような外部のツールに依存することなく、ローカル環境でテストできるところは非常に便利です。

Alexa Skills Toolkit for VS Codeでスキルを開発する（後編）に続く

参考情報

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

更新履歴