hide
Skill Flow Builderを使うことで、簡単にゲームや物語を楽しむAlexaスキルを作ることができます。（Skill Flow Builderについては、こちらの記事をご覧ください。）
ここでは入門編として、簡単な会話ができるスキルを作ってみましょう。
英語スキルでは問題なく作成・リリースができます。
しかしいわゆるマルチバイト的な問題で日本語を含むスキルはうまくデプロイできない問題が発生していますので、ツールのアップデートを待つ必要があります。
目次
Skill Flow Builder Editor (SFB Editor)で新しくプロジェクトを作成する
Skill Flow Builder Editorは１プロジェクト１Alexaスキルで管理することができます。[New Project]をクリックして、新しくプロジェクトを作成しましょう。
作業内容などを保存するディレクトリと、プロジェクトの名前を入力します。ファイルの配置先は、{Project directory}/{Project name}で作成されますので、Project Nameに機種依存文字などを利用するのはあまりオススメしません。
ビルトインテンプレートも利用可能
Starter Template からは数種類のゲーム雛形を選ぶこともできます。「ゼロから作る」「ストーリー」「アドベンチャーゲーム」「クイズゲーム」とSFBが想定しているユースケースの雛形が揃っています。
今回は使い方を覚えるため、Blank Projectでゼロから作ることにします。
作成完了
エディタ画面が表示されたら作業完了です。
まだ、起動すると「Hello World」と返事するだけですので、ここから作り込んでいきましょう。
SFB Editorでシナリオを作る
それではここからシナリオを実際に作っていきましょう。なお記事執筆時点で日本語でのバグが未修正のため、スクリーンショットなどは全て英語です。ご了承ください。
シーンを追加する
SFB Editorでは「シーン」という単位で流れを定義していきます。画面中央下部の「+（プラス）アイコン」をクリックすると、新しくシーンを追加できます。
追加すると、右側のエディタにもテキストが追加されます。
シーンは、左側のフローマップで選択中のシーンの続きとして追加されます。ですので、追加ボタンを連打すると、このように１つの直線ができあがります。
一見これだけで３往復の会話ができあがったように見えます。しかしこのままでは、次のような会話しか成立しません。
=== Start ===
User：Alexa open battle of math.
Alexa: Hello World.
User: go to scene start_1.
Alexa: Put say text here.
User: go to scene start_2.
Alexa: Put say text here.
User: go to scene start_3.
Alexa: Put say text here.
=== END ===
そこで次はユーザーからの発話をカスタマイズしていきましょう。
「次へ」で会話を進めるようにする
まずは１直線の会話をシンプルに進めるため、「次へ（next）」と言うと次のステップに進むようにしましょう。
画面右上のコンパスアイコンをクリックすると、各シーンの設定を変更できる画面が開きます。
「Quick Actions」の中で次のシーンへの遷移アクションを追加することができます。
鉛筆アイコンをクリックすると設定済みのアクションの編集が、「add hear action」をクリックすると新しいユーザーからの発話を受けるアクションが作れます。
編集中のアクション
Utterancesにカンマ区切りでユーザーから受け取りたい言葉を入力します。
編集が終わった状態
next / go / continueのいずれかを言うことで、「start_1」シーンへ移動するという設定に変わりました。
最後に保存アイコンをクリックして保存しましょう。
保存後の表示
保存に成功すると、[next] -> [start_1]という表示に変わります。
Sourceタブで似た編集をコピペ適用する
先ほどの作業をstart / start_1 / start_2それぞれへ行うことで、「go / next / continue」いずれかを話しかけると会話が進むようになります。
しかし同じような操作を何度もするのは若干面倒です。
そんな時に便利なのが、Sourceタブからの直接編集です。
Sourceタブでは、SFB Editor独自の記法で作成した会話が記録されています。
@startから始まるブロックを見ると、先ほど編集した「next, go, continue」が記述されている箇所がありました。
hear next, go, continue {
-> start_1
}
この部分をコピーして、@start_1と@start_2で同じような記述がされている部分に貼り付けてみましょう。
@start
*say
Hello World
*then
hear next, go, continue {
-> start_1
}
@start_1
*say
Put say text here
*then
hear next, go, continue {
-> start_1
}
@start_2
*say
Put say text here
*then
hear next, go, continue {
-> start_1
}
@start_3
*say
Put say text here
この状態で[Command + S]で保存すると、左側のフローマップが大きく変化します。
一本道だったものがバラバラになってしまいました。
これは先ほどコピー＆ペースとした３行のうち、-> start_1とかかれた部分が原因です。
このコードは以下のような解釈ができます。
// "next", "go", "continue"とユーザーが言った時
hear next, go, continue {
// @start_1のシーンに移動する
-> start_1
// 閉じタグ
}
ですので、@start_1では-> start_2、@start_2では-> start_3を指定してやると、再び１本道に戻ります。
プログラミング言語ライクな書き方のため、あまり触りたくない場所ではあります。
ですがこのやり方を覚えておくと、シーンの数が増えてきた時の変更が簡単になりますのでぜひチャレンジしてみてください。
Alexaの発話を設定する
さきほどSourceを触った時に気づかれた方はいらっしゃると思いますが、*sayと書かれたブロックのHello WorldやPut say text hereを書き換えることでAlexaが喋る内容を変更できます。
GUIから操作したい場合は、再びGuideタブに移動して、[Say]の右にある鉛筆アイコンをクリックしましょう。
ここでテキストを編集して保存アイコンをクリックすると、変更が保存されます。
また、Add Sayをクリックすると、喋る内容をランダム化することもできます。
シミュレーションしてみよう
出来上がった状態がこちらです。右上にある再生アイコンをクリックすることで、作った会話をシミュレーションできます。
hearにいれたワードがボタンで表示されますので、選択肢を作った場合でも簡単にテストできそうです。
作成したスキルをビルドする
実際にAlexaで動作するコードへ変換するためには、File > Buildをクリックします。
プロジェクトのディレクトリにcodeという名前のフォルダが追加されていますので、そこにあるコードをデプロイすればOKです。
デプロイ方法については技術ブログ側に記事を書いていますので、そちらをご覧ください。
まとめ
１本道の、まだゲームとは言いにくい状態ですが、簡単なスキルを作ってみるところまでまとめました。
Skill Flow Builder Editorの使い方や記法を覚えると、かなり簡単にゲームスキルが作れますので、ぜひみなさん一度触ってみてください。
Appendix: Skill Flow Builder Editor系の公式ドキュメントURL
- Skill Flow Builderを使用したコンテンツの作成：https://developer.amazon.com/ja/docs/custom-skills/use-the-skill-flow-builder-editor.html
- Skill Flow Builderの基本構文：https://developer.amazon.com/ja/docs/custom-skills/basic-skill-flow-builder-syntax.html
