MostlyRender

テンプレートをパラメータとして

MostlyRender テンプレートは、キャンバス (幅 × 高さ、背景) に名前付きレイヤーのスタックを追加したものです。重要な考え方は次の通りです:

レイヤー名が API パラメータになります。 レンダリング時にレイヤーが表示する内容を変更するには、レイヤー名をキーとした modifications を送信してください。

# Modifications

title という名前のテキストレイヤー、photo という名前のイメージレイヤー、link という名前の QR レイヤーを持つテンプレートが与えられた場合:

json
{
  "template": "tpl_abc",
  "modifications": {
    "title": "Renders that never go dark",
    "photo": "https://example.com/hero.jpg",
    "link": "https://mostlyrender.com"
  }
}
  • テキストレイヤー上の文字列は、そのテキストを設定します。
  • イメージレイヤー上の文字列は、その src を設定します。
  • QR レイヤー上の文字列は、エンコードされた値を設定します。
  • オブジェクトはレイヤーにマージされるため、スタイルもオーバーライドできます:
json
{ "modifications": { "title": { "text": "On sale", "color": "#e11d48" } } }

言及していないレイヤーは、デザインされたデフォルトを保持します。未知のレイヤー名は無視されます。

# キャンバスの背景もパラメータです

キャンバスの背景はレイヤーではないため、予約されたパラメータ名 background (小文字) を持っています。 modifications で送信してレンダリング時に背景を変更してください — エディターが生成するのと同じ単色 / グラデーション / イメージ形式です:

json
{
  "template": "tpl_abc",
  "modifications": {
    "title": "Q3 results",
    "background": "#0b1020"
  }
}
jsonc
// グラデーション
{ "modifications": { "background": { "type": "gradient", "value": "linear-gradient(135deg,#23204a,#5b5bd6)" } } }

// イメージ (URL は公開 http(s) URL である必要があります — SSRF ガードにより data-URI は拒否されます)
{ "modifications": { "background": { "type": "image", "src": "https://cdn.example.com/hero.png", "fit": "cover" } } }

# 背景内の {{placeholders}}

背景全体を置き換えるのではなく、テンプレートにプレースホルダーを組み込んで、レンダリングごとに埋めることができます。エディターの背景パネルで、{{param}} を含む値を設定してから、modifications でそのパラメータを渡します:

jsonc
// テンプレートの背景 (エディターで設定): {{brandColor}}
// またはイメージ: url("{{heroUrl}}") center/cover
{ "modifications": { "brandColor": "#ff5a00", "heroUrl": "https://cdn.example.com/u/42.png" } }

プレースホルダーのデフォルトはテンプレートの vars に存在する場合があります。同じ名前の変更がデフォルトをオーバーライドします。背景プレースホルダーはraw に置換されます (CSS に配置され、HTML ではなく)。そのため、URL のクエリ文字列 (?w=1&h=2) は逐語的に保持されます。

# テンプレートのリスト表示

bash
curl https://api.mostlyrender.com/v1/templates \
  -H "Authorization: Bearer mr_live_…"
json
{
  "templates": [
    { "id": "tpl_abc", "name": "Launch card", "width": 1200, "height": 630, "engine": "layers" }
  ]
}

id をレンダリング呼び出しの template として使用します。テンプレートの管理 (作成、編集、削除) はアプリエディターで行います。