RemoveItemコマンド

RemoveItemコマンド

RemoveItemを使用するには、APL 2023.3以降が必要です。これよりも古いバージョンのAPLを実行しているデバイスには、別のエクスペリエンスを提供してください。

インフレートされたドキュメントからコンポーネントを削除し、構造の変更を反映するようにレイアウトを調整します。

プロパティ

RemoveItemコマンドには、共通のコマンドプロパティに加えて、以下の表に示すプロパティがあります。typeプロパティはRemoveItemに設定します。

コマンドを実行するために値が必要なプロパティの場合、以下の表の「デフォルト」列に「必須」と表示されています。それ以外の場合はデフォルト値が表示されますが、デフォルト値がないこともあります。

プロパティ 型 デフォルト 説明

componentId

セレクター

:source

削除するコンポーネントです。

componentId

削除するコンポーネントやレイアウトを識別するセレクターです。セレクターが既存のコンポーネントに解決されない場合、RemoveItemコマンドは何も実行しません。

RemoveItemが効果を持たない状況

以下のシナリオでは、インフレートされたドキュメントに対してRemoveItemコマンドは効果を持ちません。

  1. ターゲットコンポーネントが存在しない。
  2. ターゲットコンポーネントがデータ配列のインフレートによってインフレートされた。

RemoveItemとレイアウト調整

次のドキュメントでは、mainというIDを持つ、2つのTextコンポーネントを含むContainerを定義しています。コンポーネントは1列に順番に表示されます。

{
  "type": "APL",
  "version": "2023.3",
  "mainTemplate": {
    "items": [
      {
        "type": "Container",
        "id": "main",
        "items": [
          {
            "type": "Text",
            "id": "hello",
            "text": "Hello, world!",
            "textAlign": "center",
            "textAlignVertical": "center",
            "grow": 1
          },
          {
            "type": "Text",
            "id": "bye"
            "text": "Goodbye!",
            "textAlign": "center",
            "textAlignVertical": "center",
            "grow": 1
          }
        ]
      }
    ]
  }
}
2つのTextコンポーネントを持つドキュメントを表すワイヤーフレーム

次のRemoveItemコマンドでは、idがbyeのコンポーネントが削除されます。

{
  "commands" : [
    {
      "type": "RemoveItem",
      "componentId": "bye"
    }
  ]
}

レイアウトは、削除されたコンポーネントに合わせて調整されます。growプロパティを使用すると、1つ目の元のTextコンポーネントの高さが2倍になります。

Textコンポーネントが削除された後のドキュメントを表すワイヤーフレーム

RemoveItemの例

以下の例では、Frameコンポーネントを含むレイアウトを使用して、2つのコンポーネントの周囲に境界線を表示します。この例は、ドキュメントがインフレートされてから5秒後にRemoveItemコマンドを実行して、TextFrameレイアウトの2つ目のインスタンスを削除します。ページを更新してドキュメントを再インフレートし、RemoveItemによる更新を確認してください。

この例は、ContainerのonChildrenChangedハンドラーでSendEventを使用することで、RemoveItemコマンドの後に以下のUserEventリクエストをスキルに送信します。

{
  "type": "Alexa.Presentation.APL.UserEvent",
  "requestId": "amzn1.echo-api.request.1",
  "timestamp": "2023-10-20T20:25:59Z",
  "locale": "ja-JP",
  "arguments": [
    {
      "uid": ":1003",
      "action": "remove"
    }
  ],
  "components": {},
  "source": {
    "type": "Container",
    "handler": "ChildrenChanged",
    "id": "main"
  },
  "token": "removeItemBasicFrameToken"
}

SendEventをテストするには、この例をスキルでテストしてください。

RemoveItemをInsertItemと組み合わせて使用し、1つの子コンポーネントから項目を削除して新しい項目を挿入する例については、単一子コンポーネントに挿入するを参照してください。

このページは役に立ちましたか？

最終更新日: 2025 年 12 月 04 日