Skill Flow Builder Editorの使用

Skill Flow Builder Editorの使用

Skill Flow Builder Editorは、スキルコンテンツの作成、編集、プレビューを視覚的なインターフェースで行えるエディターです。マップビューには、コンテンツのシーンとシーン間のフローが表示されます。

最小システム要件

Skill Flow Builder Editorを実行する最小システム要件は、以下のとおりです。

  • オペレーティングシステム: Mac OS v10.14 Mojave、Windows 10(x64)
  • 1GBのハードディスク空き容量
  • Dual-core CPU 2 Ghz
  • 2GB RAM
  • 1024px x 768pxのディスプレイ解像度
  • Node.jsバージョン10以上をインストールします。

はじめに

Skill Flow Builder Editorを開く

Skill Flow Builder Editorを次のシステムで開きます: Windows

Skill Flow Builder Editorを次のシステムで開きます: Mac

エディターモードを設定する

Skill Flow Builder Editorの右上隅で、以下のエディターモードから選択します。

ソースモード 音声デザイナーおよび開発者向けのモードです。このモードでは、.abcファイルのテキストを直接編集して、ゲームやストーリーを作成します。Skill Flow Builderのコンテンツ形式について詳しくは、Skill Flow Builderを使用したコンテンツの作成を参照してください。

ガイドモード:音声デザイナー向けのモードです。グラフィカルユーザーインターフェースを介して、現在選択しているシーンのsayセクション、視覚要素、アクションを編集できます。Skill Flow Builder Editorの左側のマップビューを使って、シーンの作成や削除ができます。

ローカリゼーションモード:ローカライズ用のモードです。Skill Flow Builder Editorには、各シーンでスキルが読み上げるコンテンツとAlexaが聞き取るhear発話が表示されます。上のメニューから、ロケールを選択し、ロケールの文字列を編集したら、保存ボタンをクリックします。その後、シミュレーターを使って、ロケールごとに変更内容をプレビューします。デプロイすると、スキルはロケール独自の文字列を使うようになります。スキルの国際化を行わない場合、ローカリゼーションモードを使う必要はありません。

マップビューとは

マップビューには、スキルの音声フローダイアグラムが表示されます。スキルの各シーンは点、シーン間の遷移は線で表されます。緑の線はhearコマンドです。緑の線上にマウスを乗せると、コマンドをトリガーするためにAlexaが聞き取る発話が表示されます。グレーの実線は直接移動のリンクです。直接つながり合っているシーンや、論理演算を通してつながり合うシーンを表します。

マップビューでノードを展開したり折りたたんだりするには、ノードをクリックします。

ゲームやストーリーの作成、編集、ノードのリンクを行う

新しい子ノードを作成する手順は以下のとおりです。

  1. エディターがソースモードまたはガイド付きモードであることを確認します。
  2. 左側のメニューで、マップビューを開きます。
  3. マップビューでノードをクリックします。
  4. ノードを作成するには、アイコンを使用します。

エディターでhearコマンドを使用するノードが作成されます。これが、新しいノードをトリガーする発話を聞いたら移動する先のノードとなります。

ノードの名前を変更する手順は以下のとおりです。

  1. エディターがソースモードまたはガイド付きモードであることを確認します。
  2. マップビューで、ノードを選択します。
  3. ノード名の横にある鉛筆アイコンをクリックし、名前を編集します。

ノードの名前を変更すると、エディターは新しい名前でその子ノードを参照するよう、親ノードを自動で更新します。

ノードを削除する手順は以下のとおりです。

  1. エディターがソースモードまたはガイド付きモードであることを確認します。
  2. マップビューでノードをクリックします。
  3. ノードを削除するには、アイコンを使用します。

エディターはノードへのリンクを削除します。

シーンのコンテンツを編集する

シーンでの発話、表示内容、実行するアクションを編集する場合は、ガイド付きモードを使います。たとえば、次のように行います。

  • sayセクションを編集して、Alexaの発話を変更します。
  • テキストを選択すると表示されるポップアップメニューで音声の名前を選択して、sayセクションで別の音声を使います。
  • ユーザーが数秒経っても答えない場合にAlexaが言うプロンプトを、repromptセクションで編集します。
  • アクションタブを使って、シーンで実行するアクションを選択します。アクションには、別のシーンに直接遷移する、遷移先のシーンをトリガーするための追加フレーズを聞き取る(待機する)といったものがあります。

コンテンツでオーディオや画像を使う

オーディオや画像を使うには、左側にある目的のコンテンツパネルに移動して、編集ウィンドウの右側にコンテンツをドラッグします。

ゲームやストーリーをプレビューする

simulator modeタブを選択して、start simulatorボタンをクリックしてゲームをプレビューします。エディターでは、音声プレビューのオン/オフの切り替えが可能です。

オーディオに対する変更が更新されなかった場合は、troubleshootingメニューから、Clear Voice Preview Cacheをクリックします。

ページの一番下で変数を編集できます。エディターでは、保存やシミュレーション状態に戻ることができます。

Skill Flow Builder Editor以外の他のタスクを終了する

AWSリソース、デプロイの詳細、またはプロジェクト設定を編集するには、選択したエディターを使用して、abcConfig.jsonファイルを変更します。

スニペットを使用する

スニペットを使用すると、スキルの*.abcファイルの一般的な操作を短い構文で実行できるようになります。これにより、ファイルが短くシンプルになり、変更がしやすくなります。また、オーディオファイルや画像ファイルへのリンクなど、スキルに使用されているリソースURLを短縮することもできます。

スニペットを使用するには、スキル内の任意のsay、recap、reprompt、セクションで、スニペット名を囲む「[<snippetName>]」などの括弧を使用します。

たとえば、<audio src=".." />タグと改行タグを作成するスニペットがあるとします。

    *say
        [sfx trumpet_1.mp3] Good morning, [pause] it's time to get up.

シミュレーションまたは実行中に、上記は次のように変換されます。

<audio src='https://s3.amazonaws.com/alexa-ml/testadventureskill/en-US/audio/trumpet_1.mp3' /> おはようございます、 <break time='1s'/>起きる時間です。

スニペットを追加する

Skill Flow Builder Editorでは、「Snippets」パネルを使用して一番上にある「New snippet」をクリックし、スニペットを追加できます。スニペットに「名前」を付けます。これは、「[]」の中に入れるもので、評価する対象である、さらに長い値をスニペットに与えます。

プロジェクトの「content/<locale>/ 」ディレクトリにあるSnippets.jsonファイルを変更することで、スニペットを作成することもできます。

Snippets.jsonファイルは以下のようになります。

{
    "sfx": "<audio src='$SNIPPET_S3_RESOURCES_URI/audio/$1'/>",

    "pic": "$SNIPPET_S3_RESOURCES_URI/images/$1",

    "trumpet": "<audio src='https://s3.amazonaws.com/alexa-ml/sounds/sound-library-loud/Instruments/Trumpet_1.mp3' />",

    "pause for": "<break time='$1'/>",

    "pause": "<break time='1s'/>",

    "kid": "<voice name='Justin'>",

    "/kid": "</voice>"
}

スニペットの「names」と「values」を使用して行を追加することで、このファイルにスニペットを追加できます。

スニペットを削除する

エディターのsunipetsパネルで、ごみ箱アイコンをクリックしてスニペットを削除できます。

Snippets.jsonファイルを直接編集して、プロジェクトのスニペットを削除することもできます。

スニペットを編集する

既存のスニペットをエディターで編集するには、最初にスニペットを削除してから、同じ名前の新しいスニペットを作成する必要があります。または、Snippets.jsonファイルを直接編集することもできます。

カスタムパラメーターでスニペットを使用する

[sfx]スニペットなどいくつかのスニペットでは、追加パラメーターを使用することができます。追加パラメーターを使用するスニペットを作成するには、$1、$2、$3などの変数を使用して、1番目、2番目、3番目などのパラメーターを処理します。

{
    "greeting": "こんにちは $1、こちらは $2です。"
}

このスニペットは、次のように呼び出して使用できます。

    *say
        [greeting 太郎 花子]

このフレーズは、シミュレーションまたは実行時に以下のように変換されます。

    こんにちは太郎、こちらは花子です。

デフォルトコンテンツURLを使用したスニペット

スニペットを使用して、スキルのデフォルトコンテンツURLをスキルで使用しているユーザー定義のオーディオタグまたは画像タグに置き換えることもできます。特殊変数である「$SNIPPET_S3_RESOURCES_URI」は、スキルの「abcConfig.json」ファイルで設定されたS3のバケットとパスに置き換えられます。

つまり、次のスニペットは

{
    "sfx": "<audio src='$SNIPPET_S3_RESOURCES_URI/audio/$1'/>"
}

シミュレーションまたは実行時に以下のスニペットに変換されます。

{
    "sfx": "<audio src='https://s3.amazonaws.com/alexa-ml/testadventureskill/en-US/audio/$1'/>"
}