スパン

    1行に、互いに異なるデザインの文字列を複数表示するコンポーネントです。

    文字の色、サイズ、太さ、装飾を指定できます。スパンは、テキストのcontentsプロパティに設定します。

    スパンはテキストコンポーネントと同様に複数の言語で作成することができ、クライアントのデバイスの設定言語と一致する言語で表示されます。

    詳しくは、メッセージ送信(text)の多言語パラメータを参照してください。

    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 "span"
    text string Y 表示されるテキスト。
    親テキストのwrapプロパティを true に設定した場合は、改行文字 (\n) を使って改行できます。
    color string N 文字の色。16進数カラーコードで設定します。
    size string N 文字サイズ。xxs、xs、sm、md、lg、xl、xxl、3xl、4xl、5xl のいずれかの値を指定できます。
    列挙した順に文字のサイズが大きくなります。

    デフォルト値は md です。
    weight string N 文字の太さ。regular 、 bold のいずれかの値を指定できます。
    bold を指定すると太字になります。

    デフォルト値は regular です。
    style string N テキストのスタイル。以下のいずれかの値を指定します。

    ￮ normal : 標準
    ￮ italic : 斜体

    デフォルト値は normal です。
    decoration string N テキストの装飾。以下のいずれかの値を指定します。

    ￮ none : 装飾なし
    ￮ underline : 下線
    ￮ line-through : 取り消し線

    デフォルト値は none です。

    ※ テキストのdecorationプロパティで設定した装飾は、スパンのdecorationプロパティで上書きできません。

    Request Example

    
{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "horizontal",
    "contents": [
      {
        "type": "text",
        "contents": [
          {
            "type": "span",
            "text": "Hello, world!",
            "decoration": "line-through",
            "size": "xl"
          },
          {
            "type": "span",
            "text": "\nThe work site ",
            "color": "#ff0000",
            "size": "sm",
            "weight": "bold"
          },
          {
            "type": "span",
            "text": "begins to",
            "size": "md",
            "color": "#00ff00",
            "decoration": "underline",
            "weight": "bold"
          },
          {
            "type": "span",
            "text": " move",
            "color": "#0000ff",
            "weight": "bold",
            "size": "lg"
          }
        ],
        "align": "center",
        "wrap": true
      }
    ]
  }
}