Alexaスキルを自作してみたときのメモ

Alexaスキルとは

開発者コンソール画面

チュートリアル

Yuma Ito 2022/02/12

簡単なスキルは開発者コンソールだけで開発が可能。（Lambdaへのデプロイもできるので本当に楽！）

本格的に開発する際はSDKなどを利用したほうが良さそう。

Alexa Skills Kit SDKs | Alexa Skills Kit
- Node.js, Python, Javaが用意されている。
- Node.jsのSDKにはTypeScript用の型定義ファイルも含まれている。（ありがたや）
Alexa Skills Kit (ASK) Toolkit - Visual Studio Marketplace
- VSCodeの拡張機能
- Alexaスキルの開発、テスト、デプロイが簡単になる
- ただし、Alexa hosted skillのみ対応。他のAWS環境と連携する場合は対応していない。
- WSL2上のVSCodeではサインインができないエラーが発生。PRが作られている (https://github.com/alexa/ask-toolkit-for-vscode/pull/164)

Yuma Ito 2022/02/12

TypeScriptでAlexaスキルを開発する準備を整える。

ちょっと久々だったのでメモ。自分の記事を参考にするけど1年半前だからだいぶ古い。

TypeScriptのインストール

まずは、package.jsonの作成

npm init

TypeScriptのインストール

npm install --save-dev typescript

tsconfig.json（TypeScriptの設定ファイル）の作成

npx tsc --init

Yuma Ito 2022/02/12

ESLintのインストール

npm install --save-dev eslint

ESLintの初期設定

npm init @eslint/config

色々と質問がされるので、プロジェクトの状況に応じて順次回答する。
必要に応じて追加のnpmパッケージをインストールすることができる。

今回は以下のように回答した。

npx: installed 40 in 3.039s
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · node
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · airbnb
✔ What format do you want your config file to be in? · JavaScript
Checking peerDependencies of eslint-config-airbnb-base@latest
The config that you've selected requires the following dependencies:

@typescript-eslint/eslint-plugin@latest eslint-config-airbnb-base@latest eslint@^7.32.0 || ^8.2.0 eslint-plugin-import@^2.25.2 @typescript-eslint/parser@latest
✔ Would you like to install them now with npm? · No / Yes

Installing @typescript-eslint/eslint-plugin@latest, eslint-config-airbnb-base@latest, eslint@^7.32.0 || ^8.2.0, eslint-plugin-import@^2.25.2, @typescript-eslint/parser@latest

TypeScriptを用いて、AirbnbのConfig (eslint-config-airbnb-typescript)を採用する場合、追加でパッケージをインストールする。

npm install eslint-config-airbnb-typescript --save-dev

その後、記載されている通りに.eslintrc.jsを編集する。

.eslintrc.js

module.exports = {
  env: {
    es2021: true,
    node: true,
  },
  extends: [
    'airbnb-base',
+    'airbnb-typescript/base'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
+    project: './tsconfig.json'
  },
  plugins: [
    '@typescript-eslint',
  ],
  rules: {
  },
};

Yuma Ito 2022/02/12に更新

Prettierのインストール

https://prettier.io/

npm install --save-dev prettier

Integrating with Linters · Prettier に記載の通り、ESLintとPrettierの設定が競合するので eslint-config-prettierを追加インストール。

npm install --save-dev eslint-config-prettier

.eslintrc.jsに追記。

.eslintrc.js

module.exports = {
...
  extends: [
    'airbnb-base',
    'airbnb-typescript/base',
+    'prettier'
  ],
...
};

Prettierの設定ファイルを作成し、設定。

touch .prettierrc.js

.prettierrc.js

module.exports = {
  trailingComma: "es5",
  tabWidth: 4,
  semi: true,
  singleQuote: true,
};

Yuma Ito 2022/02/12に更新

あとはVSCodeの拡張機能をインストールして、設定ファイルを書けばOK！

settings.json

{
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode" // フォーマッタをprettierに指定
    },
    "editor.formatOnSave": true, // ファイル保存時にPrettierでフォーマット
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true // ファイル保存時にESLintでフォーマット
    }
}

Yuma Ito 2022/02/25に更新

Allexa hosted skillでコードのデプロイに失敗する

自分で作成したコードをAllexa hosted skillに作成されるLambdaへのデプロイがエラーになってしまった。

エラーメッセージはないので原因が不明。。。

ただ、チュートリアル（コーヒーショップ）で作成した際のpackage.jsonを利用すると正常にデプロイが成功した。

npmモジュールのインストールとかでエラーになっているのか？

package.json

  "dependencies": {
    "ask-sdk": "^2.12.0",
    "ask-sdk-core": "^2.12.0",
    "ask-sdk-model": "^1.37.2",
    "googleapis": "^95.0.0",
    "open": "^8.4.0",
    "server-destroy": "^1.0.1"
  }