APLフィルター

APLフィルター

APLフィルターを使用すると、Imageコンポーネントで定義された画像にさまざまな効果を適用できます。一部のフィルターは単一の画像に対して動作します。2つの画像を組み合わせて、画面に表示できる新しい画像を生成するフィルターもあります。

フィルターについて

フィルターを使用するには、フィルターの配列と画像の初期配列を提供します。これらの2つの配列を、Imageコンポーネントの次のプロパティに追加します。

  • filtersプロパティに、フィルターの配列を指定します。各フィルターには、typeプロパティと、フィルターの結果を決めるフィルター固有のプロパティがあります。
  • sourceプロパティまたはsourcesプロパティに、単一画像のURLまたは複数画像のURLの配列を指定します。APL 1.5では、Imageコンポーネントのsourcesプロパティで、単一のURLの代わりに画像URLの配列を受け取ることができます。以前のバージョンのAPLでは、sourceプロパティに単一のURLしか指定できませんでした。

次の例は、単一の画像に2つのfiltersを適用するImageコンポーネントを示しています。

クリップボードにコピーされました。

{
  "type": "Image",
  "height": "200dp",
  "width": "300dp",
  "filters": [
    {
      "type": "Blur",
      "radius": "10dp"
    },
    {
      "type": "Noise",
      "sigma": 10
    }
  ],
  "source": "https://example.com/images/duck.jpg"
}

Imageコンポーネントのsourcesプロパティは、単一の画像URLか、複数の画像URLを含む配列のどちらかを受け取ります。フィルターは、sourcesに指定された値を「画像配列」に読み込んで、フィルターのソース画像を用意します。

filtersプロパティに複数のフィルターが含まれている場合、Alexaはフィルターを配列順に適用します。各フィルターがそれぞれの効果を適用し、結果の画像を画像配列の末尾に追加します。すべてのフィルターの処理が完了すると、Alexaは最終的な画像を表示します。各フィルターが結果の画像を配列の末尾に追加するため、画像配列はフィルターの処理中に変更されます。

上記の例では、Blurフィルターが元の「duck.png」（アヒルの画像）を画像配列に読み込み、ぼかし効果を適用して、結果の画像を配列に保存します。次に、Noiseフィルターが配列の最後の画像（変更されたアヒルの画像）をソースとして使用し、結果の画像を配列の末尾に保存します。最後に、Imageコンポーネントが最終的に変更された画像を表示します。この画像には、「ぼかし」効果に続いて「ノイズ」効果を適用した結果が反映されています。

単一の画像を操作するフィルターは、デフォルトで配列の最後の画像を画像ソースとして選択します。これは、フィルターのsourceに画像配列内の変更する画像のインデックスを設定することで制御できます。画像配列のインデックスは0から始まります。したがって、sourceを0に設定すると、配列の最初の画像にフィルターが適用されます。画像配列には各フィルターが結果を追加するため、フィルターが使用する配列は、元のImageコンポーネントのsources配列とは一致しない可能性があることに注意してください。配列の最後の画像をターゲットにするには、-1を使用します。

Imageコンポーネントのsources配列から画像を読み込むときにエラーが発生した場合、フィルターは、その画像をサイズが0で透明な黒色の仮想的な画像に置き換えます。

ColorフィルターとGradientフィルターはそれぞれ、指定された色またはグラデーションが適用された新しい項目を画像配列に追加します。これらのフィルターは、色やグラデーションを画像に合成するためにBlendと組み合わせることが一般的です。

使用可能なフィルター

以下の表は、使用できるフィルターをまとめたものです。

フィルター 説明 追加されたバージョン
Blend 定義済みの操作モードで2つの画像を合成します。 APL 1.5
Blur 画像にガウスぼかしを適用します。 APL 1.0
Color 単色の画像を作成し、画像の配列に追加します。このフィルターをBlendと組み合わせることで、画像に色を適用できます。 APL 1.5
Gradient グラデーションの画像を作成し、画像の配列に追加します。このフィルターをBlendと組み合わせることで、画像にグラデーションを適用できます。 APL 1.5
Grayscale 画像をグレースケールに変換します。 APL 1.5
Noise 生成されたノイズを画像に追加します。 APL 1.2
Saturate 画像の色の彩度を変更します。 APL 1.5

Blend

画像配列から2つの画像を合成し、新しい画像を配列の末尾に追加します。

プロパティ 型 デフォルト 説明
type Blend 必須 Blendに設定します。
destination 整数 -2 画像配列内のターゲット画像のインデックスです。デフォルトは、配列の最後から2番目の画像です。
mode ブレンドモード normal 適用するブレンドモードです。
source 整数 -1 画像配列内のソース画像のインデックスです。デフォルトは、配列の最後の画像です。

modeプロパティには、次のいずれかのモードを指定します。

  • normal
  • multiply
  • screen
  • overlay
  • darken
  • lighten
  • color-dodge
  • color-burn
  • hard-light
  • soft-light
  • difference
  • exclusion
  • hue
  • saturation
  • color
  • luminosity

Blendフィルターは、次のPorter-Duff操作もサポートしています。

  • source-atop
  • source-in
  • source-out

Blendフィルターは2つの画像を合成します。このフィルターを使用して、ColorフィルターやGradientフィルターで生成された単色またはグラデーションを画像に合成することもできます。これらのフィルターはそれぞれ、画像配列に色またはグラデーションを追加します。

ソース画像またはターゲット画像の少なくとも一方は、色やグラデーションでも存在しない画像でもなく、ビットマップ画像でなければなりません。

  • ソースとターゲットの両方がビットマップ画像の場合、結果の画像はターゲット画像と同じサイズになります。ソース画像は、ターゲット画像の左上隅に揃えられます。
  • ソース画像またはターゲット画像の一方がビットマップで、もう一方が色、グラデーション、存在しない画像の場合、結果の画像はビットマップと同じサイズになります。
  • ソース画像とターゲット画像の両方が色またはグラデーションであるか存在しない場合、このフィルターは合成を行わず、ターゲット画像を返します。

以下は、デフォルトのsourceとdestinationの値を使用して2つの画像を合成するBlendフィルターの例です。sourceは配列の最後の画像（アヒル）で、destinationは最後から2番目の画像（湖）になります。この例のアヒルの画像は背景が透明であることに注意してください。白い背景だったとすると、合成されたバージョンでは背後の湖の写真が見えなくなります。

クリップボードにコピーされました。

{
  "type": "Image",
  "height": "200dp",
  "width": "300dp",
  "sources": [
    "https://example.com/images/lake.jpg",
    "https://example.com/images/duck.jpg"
  ],
  "filters": [
    {
      "type": "Blend",
      "mode": "normal"
    }
  ]
}
通常のブレンドモードによる2つの画像の合成

以下の例は、sourceとdestinationの画像を直接指定する方法を示しています。この例では、Imageコンポーネントのsources配列の順序を入れ替え、sourceプロパティとdestinationプロパティを使用して、アヒルの画像が引き続きソースになるようにデフォルトをオーバーライドします。このバージョンでは、画像をmultiplyモードで合成します。

クリップボードにコピーされました。

{
  "type": "Image",
  "sources": [
    "https://example.com/images/duck.jpg",
    "https://example.com/images/lake.jpg"
  ],
  "filters": {
    "type": "Blend",
    "mode": "multiply",
    "source": 0,
    "destination": 1
  }
}
乗算ブレンドモードによる2つの画像の合成

Blendを使用して単色またはグラデーションと組み合わせる例については、ColorフィルターとGradientフィルターを参照してください。

Blur

指定された半径のガウスぼかしを画像に適用し、新しい画像を画像配列の末尾に追加します。

プロパティ 型 デフォルト 説明
type Blur 必須 Blurに設定します。
radius 絶対ディメンション 必須 ぼかし効果の半径です。
source 整数 -1 画像配列内のソース画像のインデックスです。デフォルトは、配列の最後の画像です。

Blurフィルターの例を以下に示します。

クリップボードにコピーされました。

{
  "type": "Image",
  "height": "200dp",
  "width": "300dp",
  "source": "https://example.com/images/duck.jpg",
  "filters": {
    "type": "Blur",
    "radius": "5dp"
  }
}
Blurフィルター

Color

サイズが0の新しい単色を画像配列に追加します。

プロパティ 型 デフォルト 説明
type Color 必須 Colorに設定します。
color Color transparent 画像配列に追加する単色です。

colorに値が含まれていない場合、フィルターは透明な黒色を使用します。

Colorフィルター単独では、画像配列のどの画像に対しても変更バージョンは作成されません。色を画像に合成するには、まずColorフィルターを使用して配列に色を追加してから、Blendフィルターを使用します。

以下の例は、ColorフィルターとBlendフィルターを組み合わせた結果を示しています。Blendフィルターはluminosityモードを使用します。Blendフィルターのソースはアヒルの画像で、ターゲットは単色です。

クリップボードにコピーされました。

{
  "type": "Image",
  "height": "200dp",
  "width": "300dp",
  "source": "https://example.com/images/duck.jpg",
  "filters": [
    {
      "type": "Color",
      "color": "#B620E0"
    },
    {
      "type": "Blend",
      "mode": "luminosity",
      "source": -2,
      "destination": -1
    }
  ]
}
輝度ブレンドモードによる画像と単色の合成

ImageコンポーネントのoverlayColorプロパティは、ColorフィルターとBlendフィルターを組み合わせた結果と同等になります。

クリップボードにコピーされました。

{
  "type": "Image",
  "height": "200dp",
  "width": "300dp",
  "description": "overlayColorを使用して画像にスクリム（オーバーレイ）を適用する例です。 必ず透明度のある色を使用してください。そうでない場合、画像が色で覆われることになります。",
  "source": "https://example.com/images/duck.jpg",
  "overlayColor": "rgb(red,20%)"
}

クリップボードにコピーされました。

{
  "type": "Image",
  "height": "200dp",
  "width": "300dp",
  "description": "ColorフィルターとBlendフィルターを使用して画像にスクリム（オーバーレイ）を適用する例です。必ず透明度のある色を使用してください。そうでない場合、画像が色で覆われることになります。",
  "source": "https://example.com/images/duck.jpg",
  "filters": [
    {
      "type": "Color",
      "color": "rgb(red,20%)"
    },
    {
      "type": "Blend",
      "mode": "normal"
    }
  ]
}

Gradient

サイズが0の新しいグラデーションを画像配列に追加します。

プロパティ 型 デフォルト 説明
type Gradient 必須 Gradientに設定します。
gradient Gradient transparent Gradient

gradientに値が含まれていない場合、フィルターは透明な黒色を使用します。

Gradientフィルター単独では、画像配列のどの画像に対しても変更バージョンは作成されません。グラデーションを画像に合成するには、まずGradientフィルターを使用して配列にグラデーションを追加してから、Blendフィルターを使用します。

以下の例は、GradientフィルターとBlendフィルターを組み合わせた結果を示しています。Blendフィルターはcolor-burnモードを使用します。Blendフィルターのソースはアヒルの画像で、ターゲットはグラデーションです。

クリップボードにコピーされました。

{
  "type": "Image",
  "height": "200dp",
  "width": "300dp",
  "source": "https://example.com/images/duck.png",
  "filters": [
    {
      "type": "Gradient",
      "gradient": {
        "type": "linear",
        "colorRange": ["#FF000066","#F7C10066","#6DD40066","#0091FF66","#6236FF66"],
        "inputRange": [0,0.25,0.55,0.8,1],
        "angle": 270
      }
    },
    {
      "type": "Blend",
      "mode": "color-burn",
      "source": -2,
      "destination": -1
    }
  ]
}
焼き込みカラーブレンドモードによる画像とグラデーションの合成

ImageコンポーネントのoverlayGradientプロパティは、GradientフィルターとBlendフィルターを組み合わせた結果と同等になります。

クリップボードにコピーされました。

{
  "type": "Image",
  "height": "200dp",
  "width": "300dp",
  "description": "画像にoverlayGradientを使用する例です。",
  "source": "https://example.com/images/duck.png",
  "overlayGradient": "@myGradient"
}

クリップボードにコピーされました。

{
  "type": "Image",
  "height": "200dp",
  "width": "300dp",
  "description": "GradientフィルターとBlendフィルターを使用してグラデーションオーバーレイを適用する例です。",
  "source": "https://example.com/images/duck.png",
  "filters": [
    {
      "type": "Gradient",
      "gradient": "@myGradient"
    },
    {
      "type": "Blend",
      "mode": "normal"
    }
  ]
}

上の例はどちらも、resourcesに定義されたmyGradientというグラデーションを使用しています。このリソースは、放射状の虹色のグラデーションを作成します。

クリップボードにコピーされました。

{
  "resources": [
    {
      "gradients": {
        "myGradient": {
          "type": "radial",
          "colorRange": ["#FF000066","#F7C10066","#6DD40066","#0091FF66","#6236FF66"],
          "inputRange": [0,0.25,0.55,0.8,1],
          "angle": 270
        }
      }
    }
  ]
}

Grayscale

入力画像をグレースケールに変換し、画像配列の末尾に追加します。

プロパティ 型 デフォルト 説明
type Grayscale 必須 Grayscaleに設定します。
amount 負でない数値 0.0 変換の割合を指定します。
source 整数 -1 画像配列内のソース画像のインデックスです。デフォルトは、配列の最後の画像です。

amountが0の場合、入力は変更されません。amountが1（100%）の場合、完全なグレースケールの画像に変換されます。100%を超える値は100%と同等になります。ソース画像はビットマップでなければなりません。

以下は、画像を完全にグレースケールにするGrayscaleフィルターの例です。

クリップボードにコピーされました。

{
  "type": "Image",
  "height": "200dp",
  "width": "300dp",
  "sources": [
    "https://example.com/images/duck.png"
  ],
  "filters": [
    {
      "type": "Grayscale",
      "amount": 1
    }
  ]
}
Grayscaleフィルター

Noise

ノイズを生成して画像に追加し、新しい画像を画像配列の末尾に追加します。

プロパティ 型 デフォルト 説明
type Noise 必須 Noiseに設定します。
kind uniform、gaussian gaussian ノイズの生成に使用される確率分布です。
useColor ブール値 false trueの場合、色付きのノイズを使用します。falseの場合、モノクロのノイズを生成します。
sigma 数値 10 ノイズの標準偏差です。
source 整数 -1 画像配列内のソース画像のインデックスです。デフォルトは、配列の最後の画像です。

Noiseフィルターは、ノイズを生成して画像の各ピクセルに追加します。kindプロパティにより、使用する確率分布を設定します。useColorをtrueに設定すると、画像の赤、緑、青の各チャネルが別々に扱われます。

sigmaプロパティは、カラーピクセルに適用されるノイズの標準偏差を設定します。各カラーピクセルの範囲は[0,255]です。sigmaが10の場合、ピクセルの元の値との差は平均で10になります。実際には、sigmaプロパティの値は5～50の間に設定されるのが一般的です。

ソース画像はビットマップでなければなりません。

Noiseフィルターの例を以下に示します。

クリップボードにコピーされました。

{
  "type": "Image",
  "height": "200dp",
  "width": "300dp",
  "source": "https://example.com/images/duck.png",
  "filters": [
    {
      "type": "Noise",
      "useColor": true
    }
  ]
}
Noiseフィルター

Saturate

画像の彩度を変更し、新しい画像を配列の末尾に追加します。

プロパティ 型 デフォルト 説明
type Saturate 必須 Saturateに設定します。
amount 負でない数値 1.0 適用する彩度の量を指定します。
source 整数 -1 画像配列内のソース画像のインデックスです。デフォルトは、配列の最後の画像です。

amountを0にすると、画像の彩度が完全に失われます。amountが1（100%）の場合、画像は変わりません。1より大きい値にすると、彩度が過飽和になります。

Saturateフィルターの例を以下に示します。

クリップボードにコピーされました。

{
  "type": "Image",
  "height": "200dp",
  "width": "300dp",
  "sources": [
    "https://example.com/images/duck.png"
  ],
  "filters": [
    {
      "type": "Saturate",
      "amount": 2.0
    }
  ]
}
Saturateフィルター

例で使用されている画像：

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

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