kun432's blog

Alexaなどスマートスピーカーの話題中心に、Voiceflowの日本語情報を発信してます。たまにAWSやkubernetesなど。

〜スマートスピーカーやVoiceflowの記事は右メニューのカテゴリからどうぞ。〜

すでに作成しているAlexa-hostedスキルをローカルにcloneする

f:id:kun432:20201227154951p:plain

ブラウザだけでコードが書けてとてもお手軽な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をコピーしておきます。

f:id:kun432:20201227163136p:plain

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開発者コンソールで対象となるスキルのコードエディタを開きます。

f:id:kun432:20201227174132p:plain

エディタのメニューが以前よりも増えていますね。ここの「Offline Tools」をクリックします。

f:id:kun432:20201227174503p:plain

「VS Codeにエクスポート」をクリックします。ちなみに、ask-cliの場合のコマンドもここには表示されていますね。

f:id:kun432:20201227174626p:plain

ブラウザからVS Codeを開いてよいか?の確認が表示されます。「Visual Studio Codeを開く」をクリックします。

f:id:kun432:20201227174759p:plain

VS Codeが起動して、再度確認が表示されますので「開く」をクリックします。

f:id:kun432:20201227175108p:plain

プロジェクトのフォルダを指定します。すでにあるフォルダを使うなり、新しいフォルダを作るなりして、そのフォルダを選択、「Select project folder」をクリックします。

f:id:kun432:20201227181101p:plain

フォルダを上書きしていいかどうか聞いていますので「Yes」をクリックします(変な質問ですね)

f:id:kun432:20201227181307p:plain

ダウンロードが行われます。

f:id:kun432:20201227181424p:plain

ダウンロードされました!

f:id:kun432:20201227181529p:plain

上の方で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

ぜひお試しください!