昨日の夜Invocableから、「Echo ShowやSpotなど画面付き端末のスキル開発ツールを発表する」とメールが来ました！
プレスリリースはこちら：Invocable Release Notes
なので、さっそく簡単なテストでも作ってみましょう！Invocableへログインします。
- LINK
画面付き端末のための「Visuals」項目
Invocableのサイトから、新規スキルを作成していきましょう。
開発画面に移動したところです。通常のWelcome、Help、とStopブロックが配置されています。
Welcomeブロックをクリックすると、左上に新しく「Visuals」という項目ができています！
Helpブロックも同じく「Visuals」の項目があることが確認できます。
そして、もちろんStopブロックにも(以下略)！
画面付き端末へ背景画像を入れてみよう
では、Welcomeブロックの「Visuals」をクリックしてShowやSpotスキルの背景に画像を入れていきましょう。
まずは一番目のCustom Layoutを選択し、Continueをクリックします。
次にEcho Showの1024 x 600スクリーンサイズを選択し、画像アップロードボタンをクリックします。
適当な画像をアップします！ちなみにこちらは平昌オリンピックのスノーボード金メダリスト、ショーンホワイトさんです！
画像をクリックすると、右側のツールボックスが出てきます。このツールボックスから細かい調整を行うことができます。調整できるものは、以下の通り。
- 画像のWidthとHeightの調整
- ボーダー枠の調整
- 画像透明度調整
- オーバーレイ調整
- タッチ機能（後でご説明します）
発話に応じて画像を切り替える
では、メイン画面に戻り、Welcomeブロックに、Alexa発話に「ショーンホワイト好きですか？」を追加。そして、User発話には 「好きです」と「普通」を追加します。
「好きです」ブロックと「普通」ブロックも作成できたら画像のようになります。それでは、好きですブロックをクリックして「Visuals」を追加してみましょう。
好きですブロックで切り替えるための画像をアップします。
メイン画面に戻り、普通ブロックの方も同様に「Visuals」から画像を追加しましょう。
普通ブロックには、この悲しそうな画像を使います。ここまででテストスキルは完成です！
スキルのアップロードとテスト
メイン画面から「Upload to Alexa」ボタンをクリックし、スキルのアップロードを行います。
では、早速デベロッパーコンソールのテスト項目からアップロードしたスキルを試してみましょう。
すごい！ショーンホワイトがちゃんと表示された！
ちゃんと「好きです」ブロックに指定したNiceの画像になっています！次は、普通ブロックのパターンをテストします。
「そっか。。。」と、ちゃんと悲しそうな顔をした画像が表示されました！Invocableで作成したスキルは完ぺきに動作しました！
Invocableのマルチモーダル対応、本当にすごかった！
タッチの処理も実装できる
そして今回のマルチモーダル対応で驚くのは、それだけではありません。なんと画面付き端末をタッチした時の処理を設定できるんです！
まずは画面の左上にある正方形アイコンをクリックし、画面にタッチできる部分を設定していきます。
ユーザーが「好き」をタッチできるよう、有効な領域をドラッグして設定します。右側のツールボックスで領域の調整ができます。
そして最後に、右側のツールボックスにあるTOUCH INTERACTIONのメニューから「好きです」ブロックを選択すれば完成です！
超簡単ですね！
先程はCustom Layoutを選択したのですが、レイアウトを自由にコーディングできる「Custom APL Code」という選択肢も用意されています！
Custom APL Codeでは、コーディング画面で自由にレイアウト編集を行うことが可能です！
画面サイズごとにレイアウトが調整できるAPLでのスキル開発ツールが公開されたことで、Invocableがさらに使いやすいツールになりましたね！
