Alexa Presentation Language: テキストのリスト表示

レシピやハウツー系を紹介するスキルでは、下の画像のように番号付きで手順を紹介したい場合があります。

APLを活用することで、HTMLのolタグのように１〜４の数字を自動で設定することができます。これはAPLのデータ配列とよばれる機能です。

データ配列を使わない場合書き方

{
  "type": "Text",
  "text": "1.まず服を脱ぎます。\n2.脱いだ服をたたみます。\n3.コーヒーを淹れます。\n4.砂糖と塩を間違えます。"
}

Textコンポーネントをそのまま使います。改行とナンバリングはAPLに渡す引数の時点で追加する必要があります。

データ配列を使う書き方

{
  "type": "Container",
  "item": {
      "type": "Text",
      "text": "${index+1}. ${data}",
      "spacing": "20dp"
  },
  "data": [
      "まず服を脱ぎます。",
      "脱いだ服をたたみます。",
      "コーヒーを淹れます。",
      "砂糖と塩を間違えます。"
  ]
}

Containerにデータ配列を設定し、子要素でTextを設定します。こうすることで、リストをそのままAPLに渡すだけで数字つきのリスト表示が可能になります。

データ配列を使うメリット

上が未使用、下が使用した例です。データ配列を使うと、「spacing」などのスタイル属性が利用できますので、実装が楽になるだけでなく、見た目もより良くなります。