unlayer-export

コンテンツのエクスポート

概要

Unlayer は複数のエクスポート形式に対応しています。クライアント側で実行されるもの（無料）と、Cloud API を使用するもの（有料）があります。

どのエクスポート方法を選ぶべきですか？

方法	出力	有料？	使用するケース
exportHtml	HTML + デザイン JSON	いいえ	メールの送信、Web での公開、デザインの保存
exportPlainText	プレーンテキスト + デザイン	いいえ	SMS、アクセシビリティの代替手段
exportImage	PNG URL + デザイン	はい	サムネイル、プレビュー、ソーシャル共有
exportPdf	PDF URL + デザイン	はい	印刷用ドキュメント
exportZip	ZIP URL + デザイン	はい	オフラインダウンロード用パッケージ

重要： エクスポートとあわせて、必ずデザイン JSONも保存してください。すべてのエクスポート方法は data.design を返します。後でユーザーが編集できるように保存してください。

---

デザインの保存と読み込み

// SAVE — use exportHtml to get both design JSON and HTML
unlayer.exportHtml(async (data) => {
  await fetch('/api/templates', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      design: data.design,  // Save this — needed to edit later
      html: data.html,      // The rendered HTML output
    }),
  });
});

// LOAD — restore a saved design (must wait for editor:ready)
unlayer.addEventListener('editor:ready', async () => {
  const response = await fetch('/api/templates/123');
  const saved = await response.json();
  unlayer.loadDesign(saved.design);   // Pass the saved JSON object
});

// LOAD BLANK
unlayer.loadBlank({ backgroundColor: '#ffffff', contentWidth: '600px' });

// LOAD AN UNLAYER TEMPLATE
unlayer.loadTemplate(templateId);     // ID from Unlayer dashboard

---

HTML のエクスポート

unlayer.exportHtml((data) => {
  const { html, design, chunks } = data;

  // html     — Full HTML document (string)
  // design   — Design JSON (always save this!)
  // chunks   — { css, js, body, fonts, tags }
  //   body   — Just the content inside <body> (no wrapper)
  //   css    — Extracted CSS styles
  //   fonts  — Web fonts used in the design

  // Save both to your backend
  await fetch('/api/templates', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ design, html }),
  });
}, {
  // All options are optional
  cleanup: true,          // Remove editor markup (default: true)
  minify: false,          // Minify HTML output
  inlineStyles: false,    // Move CSS inline (for email clients)
  mergeTags: {},          // Replace merge tags with real values
  title: 'My Email',     // Set HTML <title>
});

チャンクの使用 — 本文のコンテンツのみが必要な場合（<!DOCTYPE> のラッパーなし）：

unlayer.exportHtml((data) => {
  const { body, css, fonts } = data.chunks;
  const myHtml = `<style>${css}</style>${fonts}${body}`;
});

---

プレーンテキストのエクスポート

unlayer.exportPlainText((data) => {
  const { text, design } = data;
  // Use as email plain-text fallback
}, {
  ignorePreheader: false,
  ignoreLinks: false,
  ignoreImages: false,
  mergeTags: {},
});

---

画像のエクスポート（有料 — Cloud API）

デザインの PNG スクリーンショットを生成します。画像は接続済みの File Storage にアップロードされます。

クライアント側：

unlayer.exportImage((data) => {
  // data.url    — PNG URL
  // data.design — Design JSON (always save this!)
  console.log('Image URL:', data.url);
}, {
  fullPage: false,           // true = entire page, false = viewport
  mergeTags: {},
});

Cloud API 経由のサーバー側（Dashboard > Project > Settings > API Keys から API キーを取得します）：

const response = await fetch('https://api.unlayer.com/v2/export/image', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    Authorization: 'Basic ' + Buffer.from('YOUR_API_KEY:').toString('base64'),
  },
  body: JSON.stringify({
    displayMode: 'email',
    design: designJSON,       // The saved design JSON object
    mergeTags: {},
  }),
});

const data = await response.json();
// data.url — image URL

---

PDF / ZIP のエクスポート（有料 — Cloud API）

// PDF
unlayer.exportPdf((data) => {
  // data.url    — PDF URL
  // data.design — Design JSON
}, { mergeTags: {} });

// ZIP
unlayer.exportZip((data) => {
  // data.url    — ZIP URL
  // data.design — Design JSON
}, { mergeTags: {} });

---

自動保存のパターン

デザイン + HTML（推奨）：

let saveTimeout;

unlayer.addEventListener('design:updated', () => {
  clearTimeout(saveTimeout);
  saveTimeout = setTimeout(() => {
    unlayer.exportHtml(async (data) => {
      await fetch('/api/templates/123', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ design: data.design, html: data.html }),
      });
    });
  }, 1000);
});

デザイン + HTML + サムネイル（すべて保存）：

let saveTimeout;

unlayer.addEventListener('design:updated', () => {
  clearTimeout(saveTimeout);
  saveTimeout = setTimeout(() => {
    // Save design + HTML immediately
    unlayer.exportHtml(async (data) => {
      await fetch('/api/templates/123', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ design: data.design, html: data.html }),
      });
    });

    // Generate thumbnail (slower, paid — debounce longer or do on manual save)
    unlayer.exportImage(async (data) => {
      if (!data.url) return;
      await fetch('/api/templates/123/thumbnail', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ thumbnailUrl: data.url }),
      });
    }, { fullPage: false });
  }, 3000); // Longer debounce for image generation
});

---

デザイン JSON クイックリファレンス

デザイン JSON の構造は次のとおりです（TypeScript の型定義全体については references/design-json.md を参照してください）：

JSONTemplate
├── counters          — Internal counters
├── schemaVersion     — Schema version number
└── body
    ├── rows[]        — Each row contains columns
    │   ├── cells[]   — Column ratios: [1,1] = 50/50
    │   └── columns[]
    │       └── contents[]  — Content items (text, image, button...)
    ├── headers[]     — Same as rows (with headersAndFooters feature)
    ├── footers[]     — Same as rows
    └── values        — Body-level styles (backgroundColor, contentWidth, fontFamily)

コンテンツの種類：text、heading、button、image、divider、social、html、video、menu、timer。

---

よくある間違い

間違い	修正方法
デザイン JSON を保存せず、HTML だけを保存する	必ず両方を保存してください — すべてのエクスポート方法は data.design を返します
editor:ready の前にエクスポートを呼び出す	先にイベントを待ちます
画像/PDF のエクスポート用に File Storage を設定していない	画像と PDF は接続済みの File Storage にアップロードされます
自動保存をデバウンスしていない	design:updated はキー入力のたびに発生します — 1〜3 秒デバウンスします
exportHtml の chunks を無視する	<!DOCTYPE> のラッパーなしでコンテンツのみが必要な場合は chunks.body を使用します
画像/PDF/ZIP 用の API キーがない	Cloud API キーが必要です — Dashboard > Project > Settings > API Keys から取得します

トラブルシューティング

問題	修正方法
exportImage がエラーを返す	API キーを確認し、Cloud API プランを確認して、デザインが空でないことを確かめます
エクスポートした HTML がエディターと異なって見える	cleanup: true（デフォルト）を使用し、カスタム CSS を確認します
design:updated が頻繁に発生しすぎる	必ずデバウンスしてください — プロパティが変更されるたびに発生します
読み込んだデザインが空白で表示される	schemaVersion との互換性を確認し、JSON の構造を検証します

リソース

• HTML のエクスポート
• 画像のエクスポート
• PDF のエクスポート
• プレーンテキストのエクスポート
• デザインの保存と読み込み
• Cloud API