alexa-sdkとServerless FrameworkでAlexa Skillを作って公開してみた話

これからやること増えそうなので、振り返りも兼ねて。

作ったもの

“Alexa, ask shifter man give me some shifter information.”などと話しかけると、Shifterに関することを話してくれます。

簡単なAlexa Skillの作り方

たぶんこのやり方が一番簡単にAlexa Skillを作れます。たぶん、きっと、おそらく。

サンプルを探す

まずhttps://github.com/alexa/にいきます。
するとskill-sample-XXXというリポジトリがいっぱいあります。

alexa-sdkを出しているチームが、実際にどういうスキルが作れるかのサンプルを用意してくれているので、作りたいものに近いサンプルがないか探しましょう。

動かしてみる

「これが近いかな」というものが見つかったら、実際に動かしてみましょう。

README.mdにちゃんとスクリーンショット付きでセットアップ方法が載っていますので、英語に自信がなくても大丈夫です。
実際に動かしながらソースを読むと、サンプルがどういうことをしているか把握しやすいです。

データを書き換える

「これだな」というものが見つかったら、ソースの中のデータを書き換えてみましょう。
おおよそsrc/index.jsがAWS Lambdaで実行されているスクリプトファイルです。

で、ソースをみると割とテキストベタ打ちになっている＆「@TODO」でここ書き換えてねというメッセージつきだったりします。

書き換えてエラーが出たとしたら、だいたいSyntax errorだと思いますので落ち着いて見直しましょう。
Gitでバージョン管理しておくことをオススメします。

再デプロイする

README.mdのデプロイ方法をみながらソースを更新します。
あとはechosim.ioなどを使ってデバッグしていきましょう。

よほどサンプルのデータそのままとかでなければ、このままamazon.comへの申請もできるかなとは思います。

ちゃんと作る

このやり方だとソースの更新や動作確認がめんどくさいので、もうちょっとちゃんと作ります。

使ったもの

• alexa-sdk
• Serverless Framework
• alexa-conversation
• mocha

プロジェクト作成

Serverless Frameworkでデプロイするので、プロジェクトもslsコマンドでやってしまいます。

$ npm install serverless -g
$ sls create --template aws-nodejs --path sample-alexa
$ cd sample-alexa

バージョン・パッケージ管理など

npmとgitをスタンバイします。

$ npm init -y
$ git init

パッケージの追加

$ npm install --save alexa-sdk
$ npm install --save-dev mocha alexa-conversation eslint

eslintのセットアップ

タイポとかをいちいち探すのもしんどいので、eslintを使います。
eslint --initすると対話形式でセットアップできるので、宗教的なものがなければとりあえず
– Use a popular style guide
– Standard
– YAML
を選んでおくといいかなと思います。

$ node_modules/eslint/bin/eslint.js --init
? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? Standard
? What format do you want your config file to be in? YAML

これでソースにミスがあってもeslintを実行することでチェックができます。

$ node node_modules/eslint/bin/eslint.js index.js 

/develop/node/alexa-shifter/index.js
  4:1  error  Expected an assignment or function call and instead saw an expression  no-unused-expressions
  4:1  error  'i' is not defined                                                     no-undef

✖ 2 problems (2 errors, 0 warnings)

--fixオプションをつけるとある程度自動修正してくれて便利です。

テストコードの準備

AlexaからのリクエストにちゃんとLambdaがレスポンスを返せるかをローカルでテストします。

test/index.test.js

const conversation = require('alexa-conversation');
const app = require('../index.js');

const opts = {
  name: 'Alexa Shifter man',
  appId: 'your-app-id',
  app: app,
  handler: app.hello
};

conversation(opts)
  .userSays('HelloWorldIntent')
  .plainResponse
  .shouldContain("Hello World")
  .end();

userSays()に想定しているIntent名を入れます。
shouldContain()で話してほしい内容が含まれているかをテストできます。

これで構文エラーと変なレスポンスを返しているケースのテストが事前にできるようになりました。
あとはソースの更新とデプロイだけです。

ソースの更新

先ほどのサンプルで参考にしたコードsrc/index.jsのコードをhandler.jsに移します。
一箇所だけ以下のように書き換えておきましょう。

変更前

exports.handler = function (event, context, callback) {
    const alexa = Alexa.handler(event, context, callback);

変更後

module.exports.hello = (event, context, callback) => {
  alexa = Alexa.handler(event, context, callback)

serverless.ymlの更新

ほとんどsls createコマンドで生成されたものそのままですが、以下を追加しておきます。

• eventsでAWS LambdaがalexaSkillから起動できるようにする
• node_modulesを同梱する

service: sample-alexa
provider:
  name: aws
  runtime: nodejs6.10
  region: us-east-1
package:
  include:
    - node_modules/
functions:
  hello:
    handler: index.hello
    events:
      - alexaSkill

デプロイ

いよいよデプロイです。
以下のようにコマンドを実行しましょう。

$ npm prune --production
$ sls deploy --region us-east-1

あとはソースを更新するたびに上記コマンドを実行するだけでOKです。

実際のソースコード

https://github.com/getshifter/alexa-shifterman
他にもWP APIを叩いてみたり、インテントを追加したりと実験的にいろいろトライしています。

ある程度まとまったらまた記事にしようと思います。