画像

    画像を表示するコンポーネントです。画像は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"
      }
    ]
  }
}