コミック事業部の丸山(@alitaso)です。先日 Amazon 製スマートスピーカーの新シリーズ、 Amazon Echo Show が日本でも発売されました。 Echo Show はディスプレイサイズが10.1インチのタッチスクリーンを備えており、 Echo Spot の2.5インチスクリーンと比べるとかなり大型になっています。
本記事では初めて画面対応の Alexa スキルを作る人向けに Alexa Presentation Language(APL) の紹介と RenderDocument ディレクティブ、 ExecuteCommands ディレクティブの使用例を解説します。
Alexa Presentation Language(APL) とは
APL は画像やスライドショーを利用した視覚要素を持つスキルを開発するために Amazon が提供しているデザイン言語です。2018年12月25日現在、APL 関連の機能はパブリックベータとして提供されています。 APL を使うことにより自由度の高いレイアウトを構築でき、様々な画面サイズに合わせて最適な体験を提供できます。APL の公式ドキュメントはこちらです。
APL RenderDocument ディレクティブ
Alexa からのリクエストに RenderDocument ディレクティブでレスポンスを返すことで、デザインした画面を Alexa 対応デバイスに表示させることができます。画面レイアウトを定義しているのが APL ドキュメントと呼ばれる JSON オブジェクトです。
レイアウトは APL コンポーネントを組み合わせて作成します。以下は Pager コンポーネントを利用して画像を連続して表示させるサンプルコードの一部です。JSON ファイルを用意して、そこにレイアウト情報を記述しています。
APL データソースの生成
レイアウトは静的な JSON ファイルに記述しましたが、表示させたいコンテンツは作成するスキル毎に様々です。APL ドキュメントと同様に JSON ファイルにデータソースを記述することもできますが、動的に生成したい場面が大半だと思います。その場合は動的に APL データソースを生成し JSON オブジェクトとして扱うとよいでしょう。
テキストや画像、 Alexa に発話させたい文章など APL ドキュメントから参照したいデータは、 APL データソースとしてもたせます。 発話させたい文章がある場合はプレーンテキストあるいはSSML 形式のテキストを用意しておき、トランスフォーマーを使って APL ドキュメントへのバインディングに適した形式へ変換します。
以下のコードはデータソースの値を APL ドキュメントから参照する例です。
今回は画像URLを適当に指定していますが、スキルを作成する際は外部 API や DB などから取得してきたデータを datasources に入れることになります。
APL ExecuteCommands ディレクティブ
RenderDocument ディレクティブを使うことで画像をスライドショーで表示させ、 APL データソースを生成してレンダリングする内容を変えることができました。次は ExecuteCommands ディレクティブを使って、画面上の画像コンテンツおよび音声を変更します。
RenderDocument ディレクティブと同じく addDirecitive を使用して type に ExecuteCommands ディレクティブ を指定します。ExecuteCommands ディレクティブを使用する際は、 先に利用した RenderDocument ディレクティブの token と同じ値を設定する必要があります。
標準コマンドのつち、ページを遷移させる SetPage コマンドと音声を出力する SpeakItem コマンドを試します。どちらのコマンドでも、コマンドを実行する対象のコンポーネントを componentId で指定します。 SpeakItem と SetPage を繰り返すことで、各画面のコンテンツ内容を発話させることができます。
まとめ
画面対応の Alexa スキル開発に必要な APL と主なディレクティブについてサンプルコードを交えながら紹介しました。まだまだスマートスピーカー、 Alexa スキルに関する知見が少ないので開発の一助になれば幸いです。
