マルチモーダルなAlexaスキルの作り方

ここまでで、Textコンポーネントを作成し、GUIを使って一部のプロパティを変更しました。Textコンポーネントのすべてのプロパティについては、Textコンポーネントのドキュメントを参照してください。ただし、このページにはpaddingTopとpaddingBottomが記載されていません。これは、どのコンポーネントも親から継承したプロパティを持っているためです。すべてのコンポーネントで共通のスタイルのプロパティの一覧も参照してください。

オーサリングツールではContainerも作成されました。 Containerは、ほかのコンポーネントを「column」または「row」で配置して収めるコンポーネントです。Containerはコンポーネントでもあるので、基本的なコンポーネントのプロパティも持っています。これは、レスポンシブ対応のAPLドキュメントの作成には不可欠です。複雑なドキュメントでは、rowとcolumnのContainerを組み合わせて使用し、どのデバイスでもそれに合わせて拡大縮小してコンポーネントを適切にレイアウトします。

B. サイドバーのAPLタブをクリックして戻ると、STYLESセクションに追加したスタイルでドキュメントが更新されています。

C. APLタブを開いた状態で、Textコンポーネントを修正していきましょう。fontSizeプロパティを削除し、以下を追加します。

"style": "bigText"

paddingTopやpaddingButtomプロパティがまだ表示されていますが、これは定義したスタイルから取得されたものです。文字の大きさは、stylesブロックのfontSizeプロパティを変更することでテストできます。ここまでの変更でAPLコードは以下のようになっているはずです。

実際のTextコンポーネントは変更していませんが、bigTextスタイルを使用しているので、変更がTextコンポーネントに適用されます。

B. ここで、最初のTextコンポーネントのテキストデータも ${text.start}に変更しておきましょう。変更すると、画面のプレビューからテキストの表示が消えたことに気づきましたか？ これは、参照中のデータソースにデータがないことが原因です。DATAタブを使って修正しましょう。

C. DATAボタンをクリックすると、空のデータセット {}が表示されます。ここに「text」という名前をつけたパラメーターでセットした構造に従ってデータを追加する必要があります。つまり、「start」、「middle」、「end」のフィールドを持つ「text」オブジェクトを追加します。

D. オーサリングツールのDATAセクションに以下を追加します。

A. 上記のimportオブジェクトを、APLドキュメントのimportセクションのimportリストに追加します。そうすると次のようになります。

Alexa layoutsは、レスポンシブ対応レイアウトの重要なパッケージです。AlexaImageコンポーネントには多くのパラメーターがあり、そのほとんどはオプションです。

B. 最後のTextコンポーネントの後に新しいContainerを追加して、以下のimageブロックを含めます。この新しいブロックは、既存のContainerに入れ子にする必要があるので、必ずTextコンポーネントと同じ「items」配列に追加してください。

詳しく見ていきましょう。

• AlexaImageに使用しているフィールドで重要なのは、imageSourceです。ここで画像をホストしているURLを指定しているためです。
• 指定した画像の解像度を維持できるように、標準の横長のアスペクト比を設定します。
• 画像を拡大縮小するときは、best-fitスケールを使用します。
• サイズを制御するために、imageHeightプロパティを使用して、viewportの高さの40vh (40%)に設定します。vhとは縦方向の比率を表す単位です。

個々のパラメーターの詳細については、技術資料を参照してください。しかし、ImageコンポーネントのページにalignSelfの説明はありません。このプロパティは、コンポーネントがContainerの子コンポーネントであるためここに含まれて機能しています。AlignSelfはその子についてのみ、Containerの配置を上書きします。ほかにも、Containerの子であることから追加されているプロパティがあります。これは、データセクションに追加される新しい「assets.cake」オブジェクトに依存しています。新しいデータセクションは次のようになります。

C. Dataタブをクリックし、新しい「assets」オブジェクトでデータを更新します。

D. 最後のステップは、新しい mainTemplate パラメーターである「assets」を追加します。APLタブに戻り、mainTemplate.parametersリストにそれを追加します。以下のようになります。

B. 小型デバイス（円形）の画面では文字表示が切れてしまいます。whenプロパティを使用して修正しましょう。このプロパティではブール値評価ができます。trueの場合、コンポーネントとその子を表示しますが、falseの場合は表示しません。whenに加えて、alexa-layouts importのResourcesを使用します。Resourcesは、 @<Resource_name>で参照されるシンプルな名前付き定数です。ここでは、前述のデバイスタイプとviewportプロファイルを表すalexa-layoutsパッケージの定数を使用します。この場合は、定義済みのviewport固有の定数を使った文を次のように作成できます。

次のような指定はしません。

Echo Showデバイスで表示した場合、これらの文に違いはありません。しかし、1300dpのワイドスクリーンの新しいデバイスが登場したとしたらどうでしょうか？この条件に合わせた文を追加すべきでしょうか？ 同じクラスで第3のデバイスが登場した場合はどうでしょうか？ Amazonで定義されたresourcesを使うと、使用される画面サイズの組み合わせがわからなくても、APLドキュメントを適切に拡大縮小できます。 @hubLandscapeLarge が幅1280～1920の画面を表しているのはこのためです。こうしておけば、そのクラスの多くのデバイスを含めることができます。同じクラスのデバイスであっても、確認していた幅と画面が正確に一致しない場合は、何も表示されません。

C. 円形の小型デバイス以外のすべてのデバイスでドキュメントが正しく表示されたので、小型デバイス用のコンポーネントセットを新たに追加します。小型デバイス円形のアイコンをクリックします。

D. 評価がfalseの場合は子コンポーネントが表示されないので、最初のContainerの上に以下の文を追加します。

E. 黒い画面が表示されるはずです。 長方形の画面で試してみましょう。コンポーネントはレンダリングされます。このContainerとその子から@hubRoundSmallクラスを省いたため、 @hubRoundSmall デバイスが使用されるときにレンダリングする新しいContainerを作成する必要があります。.

F. 1つ目のContainerの下に、Containerと子Textコンポーネントを複製し、mainTemplateのitemsリストを追加します。このブロックの上に、先ほどとは逆の文を追加します。

G. 1つ目のTextコンポーネントが正しく表示されるように、上部にパディングを追加します。

H. 次に、テキストボックスのほかのパディング値をすべて削除します。

I. ケーキの画像を削除します。これで、どのデバイスタイプでも適切に表示されるようになりました。別の画面タイプのデバイスに切り替えても表示に問題がないことを確認します。

J. このJSONは次のセクションでも使用します。APLドキュメントをlaunchDocument.json.という名前で保存します。

余談ですが、このドキュメントを円形の小型デバイスのプロファイルに合わせて修正する方法は、ほかにもいろいろあります。たとえば、画像を残してテキストを削除したり、画像を円形の小型デバイスの背景に移動したりすることができます。構成的には、すべてを1つのContainerに入れておき、条件に応じてパディングを追加したり画像を隠したりして、同じエクスペリエンスを提供することも可能です。この技術的なアプローチの利点は、将来デフォルトで新たに追加されるコンポーネントを取得する必要がないことです。さらに、長方形デバイスの見直しや変更を行うときに、円形の小型デバイスの画面の構造を修正する必要もなくなります。円形のデバイスは、特にデザインにおいて長方形デバイスと異なるため、別のコンポーネントを用意しています。ほかのスキルでは、デザインに合わせて別のアプローチをとっても構いません。

最終的なAPLドキュメントのJSONは以下のようになりました。