ブラウザだけでコードが書けてとてもお手軽なAlexa-hostedですが、慣れてくるとローカルでより効率よく開発したいという気持ちが湧いてくると思います。そこで、すでに作成済みのAlexa-hostedスキルをローカルにcloneするやり方をご紹介します。
Alexa-hostedはnode.js前提です。pythonよくわかりません・・・
目次
はじめに
今年はAlexa-hostedの機能が色々と増えました。その1つがローカル開発に対する機能追加です。ローカルで開発を行うには以下の2つの方法があります。
- ask-cli v2 + git + お好みのエディタ
- VS Code + Alexa Skills Kit Toolkit + git
それぞれ見ていきましょう。
ask-cli v2 + git + お好みのエディタの場合
以下はすでにある前提です。
- node.js
- ask-cli v2
- git
- エディタはお好みで
まず、Alexa開発者コンソールのスキル一覧画面より、スキルIDをコピーしておきます。
ask init --hosted-skill-id
コマンドを実行します。ask init
に--hosted-skill-id
をつけるとhostedスキルのcloneになるのですね。ask new
ばかり使ってたので知りませんでした。
$ ask init --hosted-skill-id スキルID
試しにやってみました。
$ pwd /Users/kun432/Desktop $ ask init --hosted-skill-id amzn1.ask.skill.xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx ### スキル用のディレクトリ名を入力する ? Please type in your folder name for the skill project (alphanumeric): sample-skill Project directory for undefined created at /Users/kun432/Desktop/sample-skill ### カレントディレクトリにスキル用ディレクトリが作成される Lambda code for undefined created at ./lambda Skill schema and interactionModels for undefined created at ./skill-package undefined successfully initialized.
中身を見てみるとask new
したのと同じ構成になっていますね。
$ cd sample-skill/ $ tree . ├── ask-resources.json ├── lambda │ ├── index.js │ ├── package.json │ └── util.js └── skill-package ├── interactionModels │ └── custom │ └── ja-JP.json └── skill.json 4 directories, 6 files
ただしalexa-hostedで作成している場合、対話モデルの方はgit管理されていないようなので、git status
するとこんな感じになります。
$ git status On branch master Your branch is up to date with 'origin/master'. Changes to be committed: (use "git restore --staged <file>..." to unstage) new file: .gitignore Untracked files: (use "git add <file>..." to include in what will be committed) skill-package/
git add/commit/push
してあげるとローカルから対話モデルもコードも更新されるようになります。
$ git add . $ git commit -m "ask-cliを使うようにした" [master 877777c] ask-cliを使うようにした 3 files changed, 87 insertions(+) create mode 100644 .gitignore create mode 100644 skill-package/interactionModels/custom/ja-JP.json create mode 100644 skill-package/skill.json $ git push After the code pushed, please check the deployment status via Alexa Developer console: https://developer.amazon.com/alexa/console/ask/build/custom/amzn1.ask.skill.xxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/development/ja_JP Enumerating objects: 9, done. Counting objects: 100% (9/9), done. Delta compression using up to 8 threads Compressing objects: 100% (5/5), done. Writing objects: 100% (8/8), 1.34 KiB | 1.34 MiB/s, done. Total 8 (delta 0), reused 0 (delta 0), pack-reused 0 To https://git-codecommit.us-east-1.amazonaws.com/v1/repos/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx c7a4701..877777c master -> master
ちなみに、Alexa開発者コンソール側のコードエディタで変更した内容はきちんとgit管理されていますので、エディタ側とローカルの両方で更新すると以下のようにコンフリクトします。事前にpullして最新の状態にしておきましょう。
$ git commit -m "挨拶を日本語に変更" [master 8c31f83] 挨拶を日本語に変更 1 file changed, 2 insertions(+), 2 deletions(-) $ git push After the code pushed, please check the deployment status via Alexa Developer console: https://developer.amazon.com/alexa/console/ask/build/custom/amzn1.ask.skill.xxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/development/ja_JP To https://git-codecommit.us-east-1.amazonaws.com/v1/repos/xxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx ! [rejected] master -> master (fetch first) error: failed to push some refs to 'https://git-codecommit.us-east-1.amazonaws.com/v1/repos/xxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' hint: Updates were rejected because the remote contains work that you do hint: not have locally. This is usually caused by another repository pushing hint: to the same ref. You may want to first integrate the remote changes hint: (e.g., 'git pull ...') before pushing again. hint: See the 'Note about fast-forwards' in 'git push --help' for details.
また、skill-packages以下にある対話モデルについては、Alexa開発者コンソール側で変更をかけてもgitには反映されないので、git pullしても落ちてきません。ご注意ください。(ざっとしか見てないけど、pushするときはhookでsmapiに更新かけてるだけだからですね。)
VS Code + Alexa Skills Kit Toolkit + gitの場合
以下はすでにある前提です。
- VS Code
- Alexa Skills Kit Toolkit(VS Codeプラグイン)
- git
まず、Alexa開発者コンソールで対象となるスキルのコードエディタを開きます。
エディタのメニューが以前よりも増えていますね。ここの「Offline Tools」をクリックします。
「VS Codeにエクスポート」をクリックします。ちなみに、ask-cliの場合のコマンドもここには表示されていますね。
ブラウザからVS Codeを開いてよいか?の確認が表示されます。「Visual Studio Codeを開く」をクリックします。
VS Codeが起動して、再度確認が表示されますので「開く」をクリックします。
プロジェクトのフォルダを指定します。すでにあるフォルダを使うなり、新しいフォルダを作るなりして、そのフォルダを選択、「Select project folder」をクリックします。
フォルダを上書きしていいかどうか聞いていますので「Yes」をクリックします(変な質問ですね)
ダウンロードが行われます。
ダウンロードされました!
上の方でask-cliを使ってローカル開発を行う場合の注意点を記載しましたが、こちらも同じじゃないかなと思います。
VS Codeだとローカルでバッグもやりやすいですね。詳しくは以下をご覧ください。
ASK Toolkit for VS Codeを使ってローカルデバッグの環境をセットアップする
まとめ
スマートスピーカーAdvent Calendar2020にまだ空きがあったので書いてたのですが、Championに枠をかっさわれたので腹いせに書きましたw
お手軽に使えるのがAlexa-hostedの魅力ですが、スキルの人気が上がったりして、よりきちんと管理したいという場合にはローカルでの開発がオススメです。
また、Alexa-hostedを使う場合、ドキュメントが結構充実していますのでご一読をおすすめします(このドキュメントをすっかり忘れていて、ask-cliのリファレンスをさまよっていたのは内緒です)
ASK CLIを使用したAlexa-hostedスキルの作成と管理 | Alexa Skills Kit
ぜひお試しください!