画像
画像を表示するコンポーネントです。画像はURLを使って送信できます。
API の種類
サーバー API
Request URL
https://apis.worksmobile.com/r/{API ID}/message/v1/bot/{botNo}/message/push
HTTP Method
POST(Content-Type: application/json; charset=UTF-8)
Request Content
パラメータ | タイプ | 必須 | 説明 |
---|---|---|---|
type | string | Y | "image " |
url | string | N | 画像のURL(PNG形式、HTTPSのみ可能)。 最大文字数:1000文字 |
flex | number | N | 親要素内における、このコンポーネントの幅または高さの比率。詳しくは、『Flexible Template ドキュメント』の「レイアウト」の「コンポーネントの幅と高さ」を参照してください。 |
margin | string | N | 親要素内での、特定のコンポーネントとその前のコンポーネントとの間に挿入される余白の最小サイズ。詳しくは、『Flexible Template ドキュメント』の「レイアウト」の「コンポーネントの margin プロパティ」を参照してください。 |
position | string | N | offsetTop , offsetBottom , offsetStart , offsetEnd の基準。以下のいずれかの値を指定します。○ relative : 直前のボックスを基準とします。○ absolute : 親要素の左上を基準とします。デフォルト値は relative です。 詳しくは、『Flexible Template ドキュメント』の「レイアウト」の「オフセット」を参照してください。 |
offsetTop | string | N | 上側のオフセット。詳しくは、『Flexible Template ドキュメント』の「レイアウト」の「オフセット」を参照してください。 |
offsetBottom | string | N | 下側のオフセット。詳しくは、『Flexible Template ドキュメント』の「レイアウト」の「オフセット」を参照してください。 |
offsetStart | string | N | 左側のオフセット。詳しくは、『Flexible Template ドキュメント』の「レイアウト」の「オフセット」を参照してください。 |
offsetEnd | string | N | 右側のオフセット。詳しくは、『Flexible Template ドキュメント』の「レイアウト」の「オフセット」を参照してください。 |
align | string | N | 水平方向の配置方法。詳しくは、『Flexible Template ドキュメント』の「レイアウト」の「水平方向の配置」を参照してください。 |
gravity | string | N | 垂直方向の配置方法。詳しくは、『Flexible Template ドキュメント』の「レイアウト」の「垂直方向の配置」を参照してください。 |
size | string | N | 画像の最大幅。xxs 、xs 、sm 、md 、lg 、xl 、xxl 、3xl 、4xl 、5xl 、full のいずれかの値を指定できます。 列挙した順に画像のサイズが大きくなります。 デフォルト値は md です。 |
aspectRatio | string | N | 画像のアスペクト比。 {width}:{height} の形式で指定します。 1から100000の範囲で {width} と {height} の値を指定します。ただし、 {height} 値は {width} の3倍を超えることはできません。デフォルト値は 1:1 です。 |
aspectMode | string | N | 画像のアスペクト比とaspectRatio プロパティに指定されたアスペクト比が一致しない場合の、画像の表示方式。詳しくは、以下の「描画領域について」を参照してください。 |
action | object | N | 画像をタップするとアクションが実行されます。Action Objectを指定します。 |
描画領域について
size
プロパティで画像の最大幅を指定し、aspectRatio
プロパティで画像のアスペクト比(横:縦の比率)を指定すると、描画が表示される領域を定義できます。size
およびaspectRatio
プロパティにより指定された四角形のエリアを描画領域といいます。この描画領域に画像が表示されます。
flex
プロパティで指定された画像の幅がsize
プロパティにより算出されたコンポーネントの幅よりも大きい場合、描画領域の幅はコンポーネントの幅に縮小されます。- 画像のアスペクト比が
aspectRatio
プロパティにより指定されたアスペクト比と一致しない場合、aspectMode
プロパティに合わせて画像が表示されます。デフォルト値はfit
です。aspectMode
プロパティの値がcover
の場合:描画領域全体に画像が表示されます。ただし、描画領域に入りきらない部分は表示されません。aspectMode
プロパティの値がfit
の場合:描画領域全体に画像が表示されます。垂直画像の左右や水平画像の上下にある使用されないエリアには、背景が表示されます。
Request Example
{
"type": "bubble",
"body": {
"type": "box",
"layout": "horizontal",
"contents": [
{
"type": "image",
"url": "https://i.ibb.co/XxXMKxH/WORKSMOBILE.png",
"size": "full",
"aspectRatio": "2:1"
}
]
}
}