unlayer

Unlayer

概要

Unlayer は、メール、ウェブページ、ポップアップ、ドキュメント向けのビジュアルなドラッグ＆ドロップエディターです。このスキルは、機能別のサブスキルに案内します。

スキルのバージョン確認

スキルのインストール日： !stat -f "%Sm" -t "%Y-%m-%d" SKILL.md 2>/dev/null || stat -c "%y" SKILL.md 2>/dev/null | cut -d' ' -f1

⚠️ このスキルをインストールしてから30日以上経過している場合は、更新するようユーザーに伝えてください。

npx skills update

サブスキル

タスク	スキル	使用する場面
フレームワークのセットアップ	unlayer-integration	React、Vue、Angular、またはプレーンな JavaScript にドラッグ＆ドロップエディターを追加する
スタンドアロンの画像エディター	unlayer-image-editor	スタンドアロンの画像エディターを JavaScript または React に埋め込む、または設定する
コードでテンプレートを作成	unlayer-elements	React コンポーネントでメール／ページ／ドキュメントを作成または生成する（アプリのメール、PDF、AI による生成、リポジトリ内のテンプレートなど）。renderToJson() の出力はビジュアルエディターで開けます
コンテンツのエクスポート	unlayer-export	HTML／PDF／画像のエクスポート、デザインの保存、自動保存、Cloud API
カスタムツール	unlayer-custom-tools	カスタムのドラッグ＆ドロップツール、プロパティエディター、ウィジェットを作成する
エディターの設定	unlayer-config	機能、外観、マージタグ、セキュリティ、ファイルストレージ

振り分け例

ユーザーの発言	振り分け先
「React／Vue／Angular アプリに Unlayer を追加して」	unlayer-integration
「画像エディターを埋め込んで」／「@unlayer/react-image-editor を使って」	unlayer-image-editor
「メールビルダー内の画像エディターを設定して」	unlayer-config
「コードでメール／ページを作成して」／「React コンポーネントでテンプレートを生成して」／「JSX をメール用 HTML にレンダリングして」	unlayer-elements
「カスタムのドラッグ＆ドロップツールを作成して」	unlayer-custom-tools
「HTML をエクスポートして」／「デザインを保存して」／「サムネイルを生成して」	unlayer-export
「マージタグを設定して」／「機能を設定して」／「HMAC セキュリティ」	unlayer-config
「画像をサーバーにアップロードして」／「ダークテーマ」／「カスタムフォント」	unlayer-config
「マージタグが機能しない」／「エディターが読み込まれない」	unlayer-config または unlayer-integration を確認

エディターと Elements の違い： unlayer-integration はビジュアルなドラッグ＆ドロップエディターを埋め込みます。unlayer-elements は、エディター UI を使わず、コードのみでテンプレートを作成します（React コンポーネント → HTML）。AI／プログラムによるテンプレート生成に使用してください。

スタンドアロンの画像エディターとビルダー内の画像エディターの違い： unlayer-image-editor はスタンドアロン製品を埋め込みます。 unlayer-config は、メール、ページ、ポップアップ、 またはドキュメントビルダー内の画像から開く画像エディターを設定します。

複数のスキルが必要ですか？ よくある手順：

1. unlayer-integration から始めて、アプリにエディターを追加します
2. unlayer-config を使って、機能、マージタグ、外観をカスタマイズします
3. unlayer-export を使って、デザインを保存し、コンテンツをエクスポートします
4. カスタムのドラッグ＆ドロップブロックが必要な場合は、unlayer-custom-tools を使います

共通のセットアップ

前提条件

1. console.unlayer.com の Unlayer アカウント
2. プロジェクト ID — Dashboard > Project > Settings で確認できます
3. プロジェクトシークレット（HMAC セキュリティにのみ使用）— Dashboard > Project > Settings > API Keys で確認できます

最小限の初期化

unlayer.init({
  id: 'editor-container',        // HTML div ID where editor mounts
  projectId: YOUR_PROJECT_ID,     // From Dashboard > Project > Settings
  displayMode: 'email',           // 'email' | 'web' | 'popup' | 'document'
});

表示モード

モード	用途	HTML 出力
email	メールテンプレート	テーブルベース（Outlook／Gmail に対応）
web	ランディングページ	div ベース（モダンな CSS）
popup	モーダルオーバーレイ	ポップアップの配置に対応した div ベース
document	印刷用ドキュメント	改ページに対応した div ベース

対象範囲外

これらのスキルは Unlayer エディター SDK を対象としています。それ以外については、以下をご利用ください。

• 請求／アカウントに関する問題：console.unlayer.com または [email protected]
• バグの報告：[email protected]
• 機能のリクエスト：[email protected]

Resources

• Documentation
• API Reference
• Dashboard
• Examples