現在JavaScriptの設定が無効になっています。このページを利用するにはJavaScriptの設定を有効にしてください。2018の12日目の記事です。一覧はこちらこんにちは。Googleのアクションを開発している大島翼です。Showが日本でも発売され、画面付きのスマートスピーカーがより一層注目を集めております。Language(APL)を用いて画面付きデバイスに対応した話をご紹介したいと思います。Language(APL)とは?簡単に言うと、Alexaの動作を制御するjsonの中にCSSやHTMLのような要素を埋め込み、Alexaの画面のレイアウトを自由にカスタマイズできるようにAmazonが開発した新しい言語です。これにより音声だけではなく画像や映像を用いて視覚にも訴えるマルチモーダルなスキルの開発が可能となりました。指定された地域・日付の気象情報を伝えた後に、スライドショーで週間天気も表示しています。警報がある場合は警報の画面も間に表示されます。Spotでは二枚に分割して表示しています。APLでは画面タイプがroundかrectangleかを判定して、画面の形・大きさに最適化したレイアウトを表示することができます。Yahoo!天気・災害スキルはこちらから利用可能です。「中央区の天気」のように複数地域の候補が存在する場合は、声だけではなく場面をタップして地域を絞り込めるようになっています。指定された路線の運行情報を状況に応じて背景色を切り替えて表示しています。声だけでなく視覚にも訴えることで一目で遅延があるかわかるようになっています。Yahoo!路線スキルはこちらから利用可能です。「Yahoo!路線を開いて」と発話された時はWebやアプリのYahoo!路線で登録している路線の運行情報を答えるようになっており、複数の路線に運行情報がある場合は、各画面で一路線の運行情報を読み上げて自動で次のページに遷移し、また次の運行情報を読み上げます。APLの実装方法まず、Alexaの動作を制御するjsonの構造は以下のようになっています。}}APLはAlexaの応答を制御するjsonの中のdirectivesプロパティの中でレイアウトを定義するdocumentプロパティとデータソースを定義するdatasourcesで分けて定義します。レイアウトとデータソースを部分を分けて定義することができるので、document部分を実装するエンジニアとパラメーターを動的に生成してdatasourcesのjsonを生成するエンジニアで分担して開発をすることができます。「Yahoo!路線」の運行情報の画面を構成しているdocumentおよびdatasourcesは以下のようになっています(レイアウトの細かい数値は省略してあります。}}APLで発話と同期したスライドショーを実現するここでは、「Yahoo!天気・災害」と「Yahoo!路線」のAPLの開発で最も重要かつ実装に苦戦した、各画面で発話をした後に自動で次のページに遷移する実装をご紹介したいと思います。Pagerコンポーネントを用いることで、スライドショーのような動作を実現させることができますが、その場合outputSpeechに入れたテキストを全て読み終えた後に、画面のスクロールが始まります。Yahoo!路線で複数運行情報があったときに、全ての運行情報の読み上げが完了してから画面が動きはじめるという動作になってしまいます。各ページで一つの路線の運行情報を読み上げて次の画面へ遷移することを実現するために以下のような実装をしました。datasourcesにセットするデータの中で、各画面で話す内容のデータをSSMLで用意する。transformerを利用してSSMLを実際のスピーチデータに変換する。APLドキュメントの中で、2で変換したスピーチデータをTextコンポーネントのspeechプロパティにセットする。SpeakItemコマンドでspeechをセットしたTextコンポーネントのIDを指定してしゃべらせる。SpeakItemと画面を遷移させるコマンドであるSetPageを交互にcommandsプロパティに入れることで、発話と画面の遷移を交互に行うようにする。「Yahoo!路線」の山手線と半蔵門線の二つの路線の運行情報を伝える時のjsonは以下のようになっています。「Yahoo!天気・災害」と「Yahoo!路線」の画面なしのスキルがリリース済みの状態から、画面対応した手順をご紹介します。1.画面対応のフローチャートを作成すでにある音声のみのフローチャートの中でどのタイミングで、どんな情報を盛り込んだ画面を表示するのが適切か考えて、画面対応のフローチャートを作成します。音声のみのフローではなかった画面対応ならではのことも考える必要があります。Yahoo!路線では運行情報がある場合は一画面に一路線の情報を表示していますが、全て平常運行の場合には画面はわけずに一画面に全ての路線を表示するようにするなどの分岐が加わりました。2.画面デザイン画面を表示させるタイミングと表示する情報が決まったらデザイナーによる画面デザインに入ります。Showそれぞれのデザインを考える必要があります。Spotの画面解像度は480x480ピクセルで、画面が円形にトリミングされます。Showの画面解像度は1024x600です。3.画面のレイアウトの実装デザインに沿って画面レイアウトを実装します。document.jsonを実装することになります。マルチモーダルディスプレイの画面表示確認コンソールを用いることで、ホームページビルダーのように、画面のレイアウトを確認しながらdocument.jsonを実装することができます。このコンソールで正常に表示されても、実機ではレイアウトが崩れるケースが多々あります。ある程度レイアウトをコンソールの表示をベースを作った後は実機で表示を確認しながら開発を進めて行くことをおすすめします。4.動的な値の埋め込みを実装APIから取得したデータを元に動的にdatasources.jsonを生成するメソッドを新規に実装します。Alexaからのリクエスト中のcontext.Viewport.shapeから画面タイプがroundかrectangleかを判定して、それぞれの画面のレイアウトを生成するメソッドを呼び出し、directivesにjsonをセットします。Showの3つで動作確認を行う必要があるため、時間は音声のみの場合よりもかかります。Upしてしまうので、Alexaの設定からWakeUpワードを変更して動作テストを行いました。最後にこれまでは画面をデザインするためにはAmazonが用意したテンプレートを使うしかありませんでしたが、APLが使えるようになったことで大幅に画面デザインの自由度が高まりました。それに伴いVUIの対話デザインだけではなく、画面のビジュアルデザインも必要となり、さらには画面付きデバイスと、画面なしのデバイスで別々に動作テストをする必要があったりと現場のリソースはより必要になりますが、その分ユーザーに届けられる体験は格段によくなります。開発されてからまだ間もない言語であり、ナレッジも少ないため技術者同士が積極的に情報共有する必要があると感じております。本稿がこれからAPLで画面付きデバイスに対応する開発者の手助けになると幸いです。JAPANでは情報技術を駆使して人々や社会の課題を一緒に解決していける方を募集しています。詳しくは採用情報をご覧ください。JAPANのサービス開発を支える技術やデザイン、文化を発信しています。Reserved.このページの先頭へ。