Alexa Live 2020でGAが発表された「Alexa Web API for Games」。Webアプリはちょっと私の手に余るかなと思いつつも、少し動きとかを見てみたいなということで、以下にある公式のサンプルを日本語で動くようにしてみました。
日本語化したものはこれです。
動かすまでの手順はREADME.mdに書いてあるのですが、いくつか補足も含めて以下に記載します。
目次
必要なもの
- AWS IAMアカウント
- Alexa開発者アカウント
- aws-cli
- ask-cli V2
事前準備
AWS IAMアカウントおよびAlexa開発者アカウントはすでにお持ちで、aws-cli・ask-cliのインストール及び初期設定（aws configure/ask configure）もできているという前提です。手元の環境ではこうなってました。
$ aws --version aws-cli/2.0.34 Python/3.8.5 Darwin/19.6.0 botocore/2.0.0dev38 $ ask --version 2.15.0
次にIAMアカウントに権限を付与します。今回のサンプルの実行に以下のようなAWSリソースが必要となります。
- Cloudformation
- IAM
- AWS Lambda
- Cloudfront
- S3
これらのデプロイを行うために、aws-cliで使うIAMアカウントにいくつかの権限が必要となります。一例として、以下のような権限を付与しておけば、とりあえず動きます。 （サンプルスキルの動作が確認できたあとは、必要なければ消しといたほうが良いです）
- AWSLambdaFullAccess
- IAMFullAccess
- AmazonS3FullAccess
- CloudFrontFullAccess
- AWSCloudFormationFullAccess
これで準備は完了です。
スキル・AWS環境のセットアップ
ask cliでテンプレートから初期化します。
$ ask new --template-url https://github.com/kun432/skill-sample-nodejs-web-api-my-cactus --template-branch master
--template-branchオプションは、テンプレートレポジトリのブランチを指定できるというものです。ask-cli v2のコマンドリファレンスに載ってないし、本来は不要なはずなのですが、指定しないと以下のようなエラーが出ます。
[Error]: CliError: Error: Command failed: git clone --branch ask-cli-x https://github.com/...
元々のレポジトリ側の構成がask-cli-xを使っていた場合に出る、みたいなのをどっかで見かけましたが、どこかは忘れました。
対話形式で設定していきます。最初にスキルの実行環境のホスト先を聞いてくるので、"AWS with CloudFormation"を選択します。
Please follow the wizard to start your Alexa skill project ->
? Choose a method to host your skill's backend resources:
Alexa-hosted skills
Host your skill code by Alexa (free).
❯ AWS with CloudFormation
Host your skill code with AWS services and provision with AWS CloudFormation (requires AWS account)
AWS Lambda
Host your skill code on AWS Lambda (requires AWS account).
──────────────
self-hosted and manage your own hosting
公式のレポジトリでない場合は警告がでて確認を聞いてきますので"y"
[Warn]: CLI is about to download the skill template from unofficial template https://github.com/kun432/skill-sample-nodejs-web-api-my-cactus. Please make sure you understand the source code to best protect yourself from malicious usage. ? Would you like to continue download the skill template? (y/N) y
スキル名を聞いてきます。このままENTERで良いと思います。
? Please type in your skill name: (skill-sample-nodejs-web-api-my-cactus)
ローカルに作成されるディレクトリ名を聞いてきます。これもこのままENTER。
? Please type in your folder name for the skill project (alphanumeric): (skill-sample-nodejs-web-api-my-cactus)
以下のように表示されれば、スキルの初期化が完了してディレクトリが作成されます。
Project for skill "skill-sample-nodejs-web-api-my-cactus" is successfully created at ... Project initialized with deploy delegate "@ask-cli/cfn-deployer" successfully.
まず、スキルの実行に必要なライブラリをインストールします。作成されたディレクトリに移動します。
$ cd skill-sample-nodejs-web-api-my-cactus
lambdaディレクトリに移動して、npm installします。以下のような感じでエラーが出ていなければオッケーです。
$ cd lambda $ npm install npm WARN my-cactus@1.1.0 No repository field. added 73 packages from 100 contributors and audited 74 packages in 8.427s 3 packages are looking for funding run `npm fund` for details found 0 vulnerabilities
では、デプロイしましょう。ひとつ上のディレクトリに戻ってask deployします。
$ cd .. $ ask deploy ==================== Deploy Skill Metadata ==================== Skill package deployed successfully. Skill ID: amzn1.ask.skill.XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX ==================== Build Skill Code ==================== npm WARN my-cactus@1.1.0 No repository field. audited 74 packages in 0.971s 3 packages are looking for funding run `npm fund` for details found 0 vulnerabilities Skill code built successfully. Code for region default built to /...(snip).../skill-sample-nodejs-web-api-my-cactus/.ask/lambda/build.zip successfully with build flow nodejs-npm. ==================== Deploy Skill Infrastructure ==================== ✔ Deploy Alexa skill infrastructure for region "default" The api endpoints of skill.json have been updated from the skill infrastructure deploy results. Skill infrastructures deployed successfully through @ask-cli/cfn-deployer. ==================== Enable Skill ==================== Skill is enabled successfully.
最初にAlexa側にスキルが作成されて、スキルのコードがLambdaにアップロードできるようにパッケージ化されます。ここでもnpm installしているみたないので最初似実施したnpm installは不要かもですね。その後、AWS側に各種リソースが作成されて、エラーが出なければOKです。
Webアプリケーションのデプロイ
次にWebアプリケーションのデプロイを行います。まず、AWSマネジメントコンソールにログインして、S3の管理画面を開きます。
以下のようにバケットが3つ作成されているかと思いますので、"webappbucket"と書かれているパブリックなバケットをクリックします。
このバケット名をコピーしておきます。
ターミナルに戻って、先程のバケット名をMY_CACTUS_S3という環境変数にセットします。
$ export MY_CACTUS_S3="ask-skill-sample-nodejs-web-api-my-s3webappbucket-XXXXXXXXXXXX"
webappディレクトリに移動します。
$ cd webapp
Webアプリケーションのビルドに必要なパッケージをインストールします。
$ npm install > fsevents@1.2.13 install /...(snip).../skill-sample-nodejs-web-api-my-cactus/webapp/node_modules/fsevents > node install.js SOLINK_MODULE(target) Release/.node CXX(target) Release/obj.target/fse/fsevents.o SOLINK_MODULE(target) Release/fse.node added 397 packages from 231 contributors and audited 397 packages in 21.474s 3 packages are looking for funding run `npm fund` for details found 0 vulnerabilities
Webアプリケーションをビルドします。
$ npm run build
> cactuswebsite@1.0.0 build /...(snip).../skill-sample-nodejs-web-api-my-cactus/webapp
> webpack --config webpack.config.js
Hash: a34925b9d7e130ffda77
Version: webpack 4.43.0
Time: 1003ms
Built at: 2020-09-12 11:04:54 PM
Asset Size Chunks Chunk Names
main.js 2.37 MiB main [emitted] main
Entrypoint main = main.js
[./node_modules/moment/locale sync recursive ^\.\/.*$] ./node_modules/moment/locale sync ^\.\/.*$ 3.16 KiB {main} [optional] [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {main} [built]
[./src/blinds.js] 3.38 KiB {main} [built]
[./src/cactus.js] 4.61 KiB {main} [built]
[./src/guiManager.js] 5.27 KiB {main} [built]
[./src/index.js] 18.9 KiB {main} [built]
[./src/messageSender.js] 2.46 KiB {main} [built]
[./src/mockStartupData.json] 824 bytes {main} [built]
[./src/pail.js] 2.26 KiB {main} [built]
[./src/screenShake.js] 1.64 KiB {main} [built]
[./src/selector.js] 1.67 KiB {main} [built]
[./src/spider.js] 2.49 KiB {main} [built]
+ 140 hidden modules
そしてWebアプリをS3にデプロイします。
$ npm run uploadS3
これで完了です！
スキルの使い方
どんなスキルかは動かしてみてのお楽しみです。3Dとかになっていてなかなか面白いですよ。
なお、動作にはEcho Showが必要です。開発者コンソールはもちろん、FireタブレットやFire TV Stickでも動かないようなのでご注意ください。
以下のような発話があります。どんな発話があるかはskill-package/interactionModels/custom/ja-JP.jsonをご覧ください。
起動
サボテンシミュレーションを開いて
水やり
水やりをして
ブラインドの上げ下げ
ブラインドを上げて
ブラインドを下げて
実績（バッジ）
実績を見せて
スキル及びAWSリソースの削除
Alexa開発者コンソールからスキルを削除します。
AWSマネジメントコンソールからリソースを削除していきます。まず、3つあるS3バケットのうち、S3UserDataBucketとS3WebAppBucketの「中身」を削除します。
※S3UserDataBucketも同様に中身を削除してください。
最後にCloudformationからスタックを削除します。
IAMアカウントの権限なども必要なければもとに戻しておいたほうがいいでしょう。
まとめ
ということで、Alexa Web API for Gamesのサンプルを日本語化しつつ試してみました。Webアプリの中身とかは全然追えてないのでまた覗いてみたいと思いますが、ちょっと今回のは3Dとかになっていて難しそうですねー。Webとの連携を理解したいなと思うのでもう少しシンプルなサンプルがほしいなと思いました。
ご興味ある方はお試しいただければと思います。
