レイアウト

レイアウトは4種類です。情報に合ったものを選びます。

レイアウト	用途	例
`progress`	ステップ、または目標に向かって増える値。	注文、配達、募金活動。
`picture`	写真が主役のもの。	ペットのマッチング、物件情報、その瞬間の写真。
`versus`	スコア付きの2つの陣営。	試合、対戦、オークション。
`countdown`	ある1つの時点。時計はスマートフォン上で進みます。	打ち上げ、キックオフ、締め切り。

開始時にステートのlayoutを設定します。あとで変更するには、新しいlayoutとそのレイアウトのフィールドを更新で送ります。1つのアクティビティで、スコア、写真、またスコアと切り替えられます。

各レイアウトの表示内容

iPhoneの場合：

フィールド	プログレス	ピクチャー	バーサス	カウントダウン
`primaryText`	見出し	キャプション	表示なし	表示なし
`secondaryText`	見出しの下の行	キャプションの下のテキスト	表示なし	時計の横の名前
`headerIconUrl`	ロゴ	小さいロゴ	表示なし	ロゴ
`backgroundImageUrl`	背景	写真	背景	表示なし
`versus`	表示なし	表示なし	名前、スコア、ロゴ、ステータス、中央の列	表示なし
アクションボタン	表示なし	表示	表示	表示なし
コンパクトなDynamic Island	`stage`、次に「N分」、次にリング	写真のみ	スコアとロゴ	残り時間

どのレイアウトでも、通知のタイトルにはprimaryText、本文にはsecondaryTextが使われます。表示しないレイアウトでも、両方を設定してください。

Androidでは、どのレイアウトもタイトルと1行のテキストを持つ通知になります：

タイトル：primaryText。バーサスではスコア（「Lincoln 14-7 Central」）。カウントダウンでは残り時間。
テキスト：secondaryText。バーサスでは中央の列。中央の列がない場合はステータス。
ピクチャーでは、ユーザーが通知を展開すると写真が表示されます。

収まるテキスト

最も小さいiPhoneの表示面で安全な文字数です。長いテキストは、収まる最後の単語の区切りで「…」なしで切られます。Androidでは切らずに折り返します。送信する前にビルダーでデザインを確認してください。

レイアウト	フィールド	文字数
プログレス	`primaryText`	ロゴありは17、なしは21
プログレス	`secondaryText`	28
プログレス	ステップのラベル（`segments`）	3ステップなら12、2ステップなら21
プログレス	`stage`	7
ピクチャー	`primaryText`	27、2行まで
ピクチャー	`secondaryText`	48、2行まで
バーサス	`leftName` / `rightName`	中央の列ありは12、なしは16
バーサス	`leftStatus` / `rightStatus`	14
バーサス	`centerLabel` / `centerValue`	10
バーサス	`leftScore` / `rightScore`	ロゴと中央の列がある場合は2桁
カウントダウン	`secondaryText`	20
すべて	`actionLabel`	10
すべて	`brand.name`	18

収まる画像

WebPを使います。PNGとJPEGも使えます。SVGは使えません。ビルダーはすべての画像を、幅400ピクセルのWebPで、枠の形に切り抜いて保存します。同じサイズを使ってください：

フィールド	形	サイズ
`headerIconUrl`、`lockScreenImageUrl`、`androidIconUrl`、バーサスのロゴ	正方形	400 x 400
`backgroundImageUrl`	横長、2.34:1	400 x 171
`islandImageUrl`	ほぼ正方形、1.12:1（`immersive`が`true`の場合は2.12:1）	400 x 358
`androidImageUrl`	1.39:1	400 x 288

ロゴの背景は透明にします。

例

ステップ付きのプログレス

注文が進むにつれて、各ステップが完了になります。

curl -X POST https://api.webliveactivity.com/api/start \
  -H 'Content-Type: application/json' \
  -H 'x-api-key: wla_your_key' \
  -d '{
  "widgetContainerId": "pizza-tracker",
  "brand": {
    "title": "Order #1234"
  },
  "state": {
    "layout": "progress",
    "primaryText": "In the oven now",
    "secondaryText": "Your order is cooking",
    "accentColorHex": "#0A84FF",
    "backgroundColorHex": "#0080BA",
    "headerIconUrl": "https://acme.example/logo.png",
    "estimatedMinutes": 30,
    "progressStyle": "segmented",
    "segments": [
      {
        "label": "Cooking",
        "complete": false
      },
      {
        "label": "On the way",
        "complete": false
      },
      {
        "label": "Delivered",
        "complete": false
      }
    ]
  }
}'

ピクチャー

写真はbackgroundImageUrlに入れます。headerIconUrlは小さいロゴです。

curl -X POST https://api.webliveactivity.com/api/start \
  -H 'Content-Type: application/json' \
  -H 'x-api-key: wla_your_key' \
  -d '{
  "widgetContainerId": "pet-matches",
  "brand": {
    "title": "Meet Luna"
  },
  "state": {
    "layout": "picture",
    "primaryText": "Luna",
    "secondaryText": "2 year old Tabby, Spayed",
    "accentColorHex": "#FF6B35",
    "headerIconUrl": "https://petfinder.example/logo.png",
    "backgroundImageUrl": "https://petfinder.example/luna.jpg",
    "actionLabel": "View Live",
    "actionURL": "https://petfinder.example/luna"
  }
}'

バーサス

スコア、ロゴ、ステータス、中央の列を持つ2つの陣営。

curl -X POST https://api.webliveactivity.com/api/start \
  -H 'Content-Type: application/json' \
  -H 'x-api-key: wla_your_key' \
  -d '{
  "widgetContainerId": "csgo-scores",
  "brand": {
    "title": "CSGO Esports"
  },
  "state": {
    "layout": "versus",
    "primaryText": "Heroic leads 12-9",
    "secondaryText": "Map: Overpass",
    "accentColorHex": "#0A84FF",
    "backgroundColorHex": "#001226",
    "backgroundGradientHex": "#00428C",
    "actionLabel": "Watch Live",
    "actionURL": "https://hltv.org/matches",
    "versus": {
      "leftName": "Movistar",
      "rightName": "Heroic",
      "leftScore": "9",
      "rightScore": "12",
      "leftStatus": "T side",
      "rightStatus": "CT side",
      "activeSide": "right",
      "leftImageUrl": "https://hltv.org/movistar.png",
      "rightImageUrl": "https://hltv.org/heroic.png",
      "centerLabel": "Map",
      "centerValue": "Overpass",
      "sourceLogoUrl": "https://hltv.org/csgo.png"
    }
  }
}'

カウントダウン

時刻になったときにカードがまだスマートフォンにあれば、サービスが自動で1回通知します。時計の代わりに表示し、その通知にも使う言葉はcompletionTextで設定します。8時間より長いカウントダウンはkeepAlive: trueを付けて開始します。付けないと、時刻になる前にiOSがカードを終了します。

curl -X POST https://api.webliveactivity.com/api/start \
  -H 'Content-Type: application/json' \
  -H 'x-api-key: wla_your_key' \
  -d '{
  "widgetContainerId": "gta6-countdown",
  "keepAlive": true,
  "brand": {
    "title": "GTA VI"
  },
  "state": {
    "layout": "countdown",
    "primaryText": "Grand Theft Auto VI",
    "secondaryText": "GTA VI",
    "countdownTo": 1795046400,
    "countdownStyle": "days",
    "completionText": "Out now",
    "headerIconUrl": "https://rockstargames.com/gta6-logo.png"
  }
}'

レイアウト

各レイアウトの表示内容

収まるテキスト

収まる画像

例

ステップ付きのプログレス

ピクチャー

バーサス

カウントダウン

ライブアクティビティを「開発」せずに作り始めませんか？

今日から作り始めませんか？

レイアウト

各レイアウトの表示内容

収まるテキスト

収まる画像

例

ステップ付きのプログレス

ピクチャー

バーサス

カウントダウン

ライブアクティビティを​「開発」せずに​作り始めませんか？

今日から​作り始めませんか？

ライブアクティビティを「開発」せずに作り始めませんか？

今日から作り始めませんか？