APLリソース

APLリソース

リソースとは、データバインディングと値の解決を通じてアクセスできる名前付きエンティティです。リソースは、Alexa Presentation Language（APL）ドキュメントやAPLパッケージ内のリソースブロックで定義します。Viewportのパラメーターに基づいて条件付きで定義することも可能です。

リソースの評価は、APLドキュメントとパッケージの読み込み時に行われます。コンポーネントのインフレート時には、リソースは静的であり、変更されることはありません。APL 2023.2以降では、遅延評価を使用してリソース定義に動的なデータを含めることができます。詳細と例については、遅延評価を参照してください。

リソース定義のサンプル

以下は、リソース定義の例を示しています。

{
  "type": "APL",
  "resources": [
    {
      "colors": {
        "accent": "#00CAFF",
        "myBlue": "#66DFFF"
      },
      "dimension": {
        "leftRight": "72dp"
      },
      "string": {
        "logo": "images/logo200x200.png"
      }
    },
    {
      "when": "${viewport.shape == 'round'}",
      "dimension": {
        "leftRight": "${viewport.width * 0.25}"
      }
    },
    {
      "when": "${viewport.theme == 'light'}",
      "colors": {
        "accent": "#0070BA",
        "myBlue": "#005A95"
      }
    },
    {
      "description": "大画面では大きいロゴを使用します",
      "when": "${viewport.width > 1200}",
      "string": {
        "logo": "images/logo300x300.png"
      }
    }
  ]
}

この例では、themeがlightかdarkかに基づいて、accentとmyBlueの色の値を選択します。また、leftRightディメンションのデフォルト値は72ですが、画面が円形の場合はこのリソースを画面幅（dp）の25%に変更します。

リソースはブロックで定義します。各ブロックは、オプションのwhen句と、型のセットを含むオブジェクトです。

プロパティ

リソースの各ブロックのプロパティは以下のとおりです。

プロパティ 型 必須 説明
boolean、booleans ブール値のマップ × ブール値の名前をブール値にマッピングします。
color、colors 色のマップ × 色の名前を色の値にマッピングします。
description 文字列 × リソースブロックの説明です。
dimension、dimensions ディメンションのマップ × ディメンション名をディメンション値にマッピングします。
easing、easings イージング関数のマップ × 名前をイージング関数の定義にマッピングします。
gradient、gradients グラデーションのマップ × グラデーション名をグラデーション定義にマッピングします。
number、numbers 数値のマップ × 名前を数値にマッピングします。
string、strings 文字列のマップ × 名前を文字列にマッピングします。
when ブール値 × trueの場合、このリソースブロックが追加されます。デフォルトはtrueです。

リソースブロックは配列順に処理され、前の定義は後の定義で上書きされます。

リソース定義では、@name構文を使用することで、前のブロックで定義されているリソースを参照できます。

リソースブロックは、ほかのリソースブロックの中に入れ子にすることができます。次に例を示します。

{
  "resources": [
    {
      "dimensions": {
        "myFontSize": "28dp",
        "myLeftRightPadding": "60dp"
      }
    },
    {
      "when": "${viewport.shape == 'round'}",
      "resources": [
        {
          "dimensions": {
            "myFontSize": "30dp",
            "myLeftRightPadding": "80dp"
          }
        },
        {
          "when": "${viewport.width < 400}",
          "dimensions": {
            "myFontSize": "20dp",
            "myLeftRightPadding": "45dp"
          }
        }
      ]
    }
  ]
}

boolean、booleans

ブール型リソースは、trueまたはfalseの値として格納されます。ブール型以外をブール型リソースに割り当てると、「truthy」ルールに従って変換されます。詳細については、Truthyと強制を参照してください。

"boolean": {
  "bool1": true,       // true
  "bool2": 23.4,       // true
  "bool3": "hello!",   // true
  "bool4": false,      // false
  "bool5": 0,          // false
  "bool6": ""          // false
}

color、colors

色の値は、32ビットのRGBA値の色として格納されます。色に変換される文字列式の記述方法については、色を参照してください。一般的な強制ルールについては、色の強制を参照してください。

"colors": {
  "myRed1": "#ff0000ff",    // 通常の赤
  "myRed2": "#ff0000",      // 短縮バージョン（透明度を省略）
  "myRed3": "#f00",         // 超短縮バージョン（R、G、Bの2桁分を1桁で表現）
  "myRed4": "red",          // ビルトインの色の名前を使用
  "myRed5": "rgb(255,0,0)", // RGB関数
  "myRed6": 4278190335      // 非推奨：16進数で0xff0000ffの値
}

dimension、dimensions

ディメンションリソースには、絶対ディメンション、相対ディメンション、特殊ディメンションが格納されます。ディメンションの種類の詳細についてはディメンションを参照してください。ほかの型からディメンションへの変換方法の詳細については、絶対ディメンションの強制を参照してください。

"dimensions": {
  "myDim1": "150dp",  // 150dp
  "myDim2": "300px",  // 320dpiの画面では150dp
  "myDim3": "100vw",  // 160dpiで幅1024pxの画面では1024dp
  "myDim4": "50vh",   // 160dpiで高さ800pxの画面では400dp
  "myDim5": "50",     // 50dp
  "myDim6": "50%",    // 50%（相対ディメンション）
  "myDim7": "auto"    // auto（特殊ディメンション）
}

easing、easings

イージング関数は、アニメーション化されたプロパティの時間経過による変化を定義するために従来から使用されてきた一価関数です。イージング関数の詳細については、イージング関数を参照してください。

gradient、gradients

グラデーションは、グラデーションのルールに従って定義されます。

number、numbers

数値リソースは、内部的に倍精度浮動小数点数値として格納されます。数値以外の値から数値への変換方法の詳細については、数値の強制を参照してください。

"numbers": {
  "myNum1": null,       // 0
  "myNum2": false,      // 0
  "myNum3": true,       // 1
  "myNum4": "@myDim1",  // 150（上記のディメンション定義による）
  "myNum5": "@myDim6"   // 0.5（上記のディメンション定義による）
}

string、strings

文字列値は文字列として格納されます。ほかの型を文字列に変換できます。文字列の変換規則については、文字列の強制を参照してください。

"strings": {
   "string1": null,          // ""
   "string2": "",            // ""
   "string3": false,         // "false"
   "string4": 23,            // "23"
   "string5": "${@myRed1}",  // "#ff0000ff"（上記の色の定義による）
   "string6": "${@myDim1}",  // "150dp"（上記のディメンション定義による）
   "string7": "${@myDim6}",  // "50%"（上記のディメンション定義による）
}

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

最終更新日: 2025 年 11 月 19 日