APLのデータ型



APLのデータ型

このセクションでは、よく使用するデータ型の定義を説明します。

ディメンション

APLのディメンションは、 絶対、相対、特殊ディメンションという3種類で表現できます。

絶対ディメンション

絶対ディメンションは数値のみであり、画面非依存のピクセル数として解釈されます。絶対ディメンションは単位サフィックスが付いた文字列として表現することもできます。単位サフィックスはディメンションの直後に配置される必要があります。下記のようなサフィックスが有効です。

サフィックス 説明
dp 画面非依存のピクセル数 20dp
px 画面のピクセル数 10px
vh viewportの高さ(最大値は100)。1vhはviewportの高さの1%です。 50vh
vw viewportの幅(最大値は100)。1vwはviewportの幅の1%です。 33vw

相対ディメンション

相対ディメンションは「X%」形式の文字列として指定します。Xは、有効なJSON数値です。このパーセント値は、データが含まれるコンポーネントのバウンディングボックスに対する割合と解釈されます。バウンディングボックスには2つのディメンション(幅と高さ)があるため、本質的に水平方向または垂直方向を意味するプロパティ(heightなど)の場合は、適切なディメンションが選択されます。明確な方向が設定されていないプロパティ(borderRadiusTopRightなど)の場合は、バウンディングボックスの幅に対する割合が使用されます。

相対ディメンションは、すべてのコンポーネントのパディングプロパティでサポートされているわけではありません。

相対ディメンションを使用すると依存関係ループが発生し、結果が不確定になる可能性があることに注意してください。たとえば、親Containerのサイズにautoを設定し、子の高さを「50%」に設定した場合、結果は不確定になります。

特殊ディメンション

特殊ディメンションは、特別な処理が設定された名前付きの値です。現在定義されている特殊ディメンションは「auto」のみです。このディメンションでは、コンポーネントのサイズは自然なサイズと等しくなります。たとえば、幅と高さを「auto」に設定したTextコンポーネントは、このテキストが含まれるバウンディングボックスに1行で配置されます。

特殊ディメンションは、Imageコンポーネントのパディングプロパティではサポートされていません。

色の値は文字列で指定し、有効なR、G、B、Aタプルへ内部的に変換されます。文法規則は次のとおりです。

color         ::= _ <<基調色>> _
<<基調色>> ::= <<16進数>> | <<関数>> "(" _ <<引数>> _ ")" | <<シンボル>>
<<16進数>>       ::= "#" [0-9a-fA-F]{3,4,6,8}
<<シンボル>>    ::= [a-zA-Z]+
<<関数>>  ::= "rgb" "a"? | "hsl" "a"?
<<引数>>      ::= <<引数>> ( "," _ ARG )*
<<引数>>       ::= <<基調色>> | <<パーセント値>> | <<数値>>
<<パーセント値>>   ::= <<数値>> "%"
<<数値>>    ::= [0-9]+ "." [0-9]* | "." [0-9]+ | [0-9]+
_             ::= [ \t\n\r]*

標準色

標準色では、HTML標準の色を名前指定で参照します。たとえば、「azure」、「burlywood」、「red」などです。

16進数色

色は、#から始まる16進数の文字列として定義することもできます。この文字列は、以下の形式で指定できます。

  • #RGB
  • #RGBA
  • #RRGGBB
  • #RRGGBBAA

rgb/rgba関数

色は、rgb()関数またはrgba()関数として定義することもできます(後者の関数は、前者の別名です)。これらの関数の解釈は、引数の個数に応じて異なります。

  • 引数が2つの場合: 1番目の引数は色、2番目の引数はその色に適用するアルファ値であると判断されます。たとえば、rgba(red,0.2)は、不透明度20%のred色になります。

  • 引数が3つの場合: 引数はそれぞれR、G、Bと解釈されます(それぞれ0以上255以下の整数で指定します)。アルファ値は1.0に設定されます。たとえば、rgba(0,255,0)では、「#00FF00FF」と同じ色が得られます。

  • 引数が4つの場合: 引数はそれぞれR、G、B、Aと解釈されます。R/G/Bの各値は、0以上255以下の整数で指定します。Aの値は、0以上1以下の数値で指定します。

hsl/hsla関数

色は、hsl()関数またはhsla()関数として定義することもできます(後者の関数は、前者の別名です)。これらの関数の解釈は、引数の個数に応じて異なります。

  • 引数が3つの場合: H引数(色合)は、0以上360以下の整数で指定します。S引数(彩度)およびL引数(明度)は、0以上1以下の数値で指定します。A(アルファ)の値は1に設定されます。たとえば、hsl(0, 100%, 50%)は「red」になります。

  • 引数が4つの場合: H引数(色合)は、0以上360以下の整数で指定します。S引数(彩度)、L引数(明度)、A引数(アルファ値)は、0以上1以下の数値で指定します。たとえば、hsla(120, 1, .25, 25%)では、rgb(darkgreen, 0.25)と同じ色が得られます。

透明

色は、「transparent」キーワードとして定義することもできます。このキーワードは、rgba(0,0,0,0)に相当します。

データバインディングの参照

色の式をデータバインディング式の中で定義しないでください。たとえば、次の式は無効になります。

   "color": "${ rgba(0, 0, 255, 20%) }" //間違い

代わりに、計算またはリソース参照を行う文字列のみを評価するデータバインディングロジックを記述してください。

"color": "rgba(0,0,255,20%)" //正しい

グラデーション

グラデーションは、背景やオーバーレイに使用する陰影の付いた色のことです。たとえば、グラデーションレイヤーを画像に適用するには、ImageoverlayGradientを設定します。

グラデーションは、次のプロパティを持つオブジェクトとして表されます。

プロパティ 必須 説明
angle 数値 線形グラデーションの角度です。度で表されます。0が上方向で、90が右方向です。デフォルトは0です。
colorRange の配列 各グラデーションの終了点に指定される色です。
description 文字列 このグラデーションの任意の説明です。
inputRange 数の配列 入力のグラデーションの終了点です。0~1の値で、昇順である必要があります。
type linear | radial グラデーションの種類です。デフォルトはlinearです。

たとえば、画像レイヤーのサンプル線形グラデーションは以下のようになります。

{
  "type": "linear",
  "colorRange": [
    "white",
    "transparent"
  ],
  "inputRange": [
    0,
    0.5
  ]
}

上の例では、グラデーションの一番下は白色になります。グラデーションは50%のところまで、透明まで線形に遷移し、残りの描画領域では透明のままになります。

angle

線形グラデーションの角度です。垂直から時計回りに度数で測定します。0が上、90が右、180が下、270が左になります。角度は任意の値を取りますが、実際の描画はmodulo 360です。

colorRange

各グラデーションの終了点に指定されるです。色は終了点の間で線形補間されます。

inputRange

inputRangeはグラデーションの終了点の位置を指定しますinputRangeが指定されていない場合、最初の色値はグラデーション終了点0、最後の色値はグラデーション終了点1、その他は0~1の間で均等に分散しています。

type

グラデーションには2種類あります。線形と放射です。線形グラデーションは、四角のうちの一角または一辺(角度によって異なる)から開始され、反対側の角または辺まで伸びます。放射グラデーションは常に中心に位置し、もっとも遠い一角が色の最終点になります。放射グラデーションは円形ではなく、周囲のコンテナの形状に応じて楕円形になります。