Visual Studio CodeでAPLドキュメントの管理やプレビューを行う



Visual Studio CodeでAPLドキュメントの管理やプレビューを行う

Alexa Skills Toolkit for Visual Studio Code(ASK Toolkit for VS Code)を使って、スキルでAlexa Presentation Language(APL)ドキュメントの作成や編集、プレビューができます。ASK Toolkit for VS Codeは、Alexaスキルの作成からテスト、導入までを簡単に行える拡張機能です。前提条件とインストール手順については、ASK Toolkit for VS Codeで開発を始めるを参照してください。

概要

APLを使用して、スキルに追加する視覚エクスペリエンスを作成できます。Echo Show、Fire TV、一部のFireタブレットなどのサポートされているデバイスで視覚要素を表示し、ユーザーはその視覚要素を使って操作や対話ができます。視覚エクスペリエンスには、アニメーション、グラフィック、画像、スライドショー、ビデオを含めることができます。詳しくは、Alexa Presentation Language(APL)の概要を参照してください。

以下は、Visual Studio Code IDEのAPL Previewページのスクリーンショットです。

Visual Studio Code IDEのAPL Previewページ

APLドキュメントの新規作成

APLドキュメントを作成する

  1. アクティビティバーで、Alexaアイコンをクリックします。Alexa Skills Toolkitサイドバーが表示されます。
  2. Skills、スキル、Alexa Presentation Language (APL)の順に展開し、Createを選択します。Choose a templateダイアログが表示されます。
  3. 使用するAPLテンプレートをクリックし、ドキュメントの名前を入力してEnterを押します。

新しいAPLドキュメントがskill-package\response\displayフォルダのスキルに追加されます。

既存のAPLドキュメントのダウンロード

既存のAPLドキュメントがAlexa開発者コンソールにある場合、ダウンロードしてローカルのVS Codeプロジェクトに追加できます。

既存のAPLドキュメントをダウンロードする

  1. アクティビティバーで、Alexaアイコンをクリックします。Alexa Skills Toolkitサイドバーが表示されます。
  2. Skills、スキル、Alexa Presentation Language (APL)の順に展開し、Downloadを選択します。Download APL documentダイアログが表示されます。
  3. ローカルプロジェクトにダウンロードするAPLドキュメントを選択し、Downloadをクリックします。

APLドキュメントのプレビューと編集

APLドキュメントをプレビューしてユーザーにどう表示されるかを確認できます。

APLドキュメントのプレビューと編集を行う

  1. アクティビティバーで、Alexaアイコンをクリックします。Alexa Skills Toolkitサイドバーが表示されます。
  2. Skills、スキル、Alexa Presentation Language (APL)の順に展開し、Previewを選択します。ダイアログが開き、スキルで利用可能なAPLドキュメントが表示されます。
  3. プレビューするAPLドキュメントを選択します。ドキュメントのエディターが開き、APL Previewペインが表示されます。
  4. (任意)APLドキュメントのJSONを直接編集するか、データソースを編集して、ファイルを保存します。

APLドキュメントへの変更を保存すると、APL Previewペインが自動更新され、変更内容が表示されます。

APLドキュメントプレビューのViewportの変更

APLドキュメントプレビュー時にViewportを変更して、別の画面でどのように表示されるかを確認できます。

Viewportを変更する

  1. アクティビティバーで、Alexaアイコンをクリックします。Alexa Skills Toolkitサイドバーが表示されます。
  2. Skills、スキル、Alexa Presentation Language (APL)の順に展開し、Change viewportを選択します。ダイアログが開き、利用可能なViewportが表示されます。
  3. 新しいViewportを選択してEnterを押します。APL Previewペインが更新され、新しいViewportにドキュメントが表示されます。