HTMLメールとMJMLメールのインポート

Emailifyの実験的なImportタブを使って、既存のHTMLやMJMLをFigmaで編集できるメールレイヤーに変換します。

New EmailのImportタブを使うと、すべてのRowとColumnをゼロから作るのではなく、既存のメールのコードから始められます。HTMLやMJMLを貼り付けるかファイルを選択し、ソースを確認してから、編集可能なEmailifyフレームを作成します。

Importは実験的な機能で、現在はローカルで有効にした開発ビルドでのみ利用できます。通常のプラグインのビルドでは表示されません。以下の手順は、New EmailモーダルにImportがある場合に適用されます。

対応しているソース ​

  • HTML： メールのHTMLを貼り付けるか、.htmlまたは.htmファイルを選択します。
  • MJML XML： 完全な<mjml>ドキュメントを貼り付けるか、.mjmlまたは.xmlファイルを選択します。
  • MJML JSON： 標準的なMJMLのコンポーネントツリーを貼り付けるか、.jsonファイルを選択します。
  • コピーしたメールパッケージ： 実験的なCopy to Emailify拡張機能からパッケージを貼り付けます。

入力は2 MB未満にしてください。MJMLも、コンパイル後のHTMLがこの上限内に収まる必要があります。.emlメッセージ、ZIPファイル、任意のJSONには対応していません。.emlメッセージの場合は、インポートする前にHTML本文を抽出し、画像アセットにアクセスできるようにしてください。

アクセス可能な画像URLを使ってください。ログインが必要な画像、ローカルファイル、cid:などの添付ファイル参照は、ホスティングされたアセットに置き換える必要がある場合があります。

試しにインポートするメールを探していますか？Really Good Emailsでメールを開き、Codeを選択するとHTMLソースを表示できます。そのHTMLをコピーして、ImportタブにあるEmailifyのEmail code欄に貼り付け、Preview Importをクリックすると、メールを作成する前に内容を確認できます。

メールをインポートする ​

  1. FigmaでEmailifyを開きます。
  2. メール選択欄の横にある + アイコンをクリックして、New Emailを開きます。
  3. タブの並びの最後にあるImportを選択します。
  4. メールのコードをEmail codeに貼り付け、Preview Importをクリックします。または、Choose fileをクリックして、対応しているファイルを読み込んで解析します。
  5. PreviewとNotes（ある場合）を確認します。想定しているテキスト、画像、背景がソースに含まれているかを確認してください。
  6. Email nameを入力し、Create Emailをクリックします。
  7. 作成されたEmailifyフレームと、その編集可能なレイヤーを確認します。
  8. エクスポートする前に、EmailifyのHTMLプレビューで、生成されたデスクトップとモバイルの出力を確認します。

Importパネルでプレビューされるのはソースのメールです。再構築されたEmailifyレイヤーからエクスポートされる最終的なHTMLは表示されません。作成されたフレームとEmailifyが生成するプレビューは、必ず別々に確認してください。

ソースを編集すると、それまでのインポートの準備内容はクリアされます。更新したメールを作成する前に、もう一度Preview Importをクリックしてください。

MJMLをインポートする ​

mj-bodyを1つだけ含む、完全なMJMLドキュメントを1つ用意します。例：

xml
<mjml>
  <mj-body width="600px">
    <mj-section>
      <mj-column>
        <mj-text>Hello from Emailify</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

同じ内容をJSONで表す場合は、tagName、attributes、children、contentを使います。

json
{
  "tagName": "mjml",
  "children": [{
    "tagName": "mj-body",
    "attributes": { "width": "600px" },
    "children": [{
      "tagName": "mj-section",
      "children": [{
        "tagName": "mj-column",
        "children": [{ "tagName": "mj-text", "content": "Hello from Emailify" }]
      }]
    }]
  }]
}

EmailifyはMJML4を使ってMJMLを検証し、HTMLにレンダリングしてから、そのHTMLをもとに編集可能なレイヤーを再構築します。元のMJMLのコンポーネントツリーをそのまま復元するものではありません。インポート後に、カスタムCSS、フォント、スペース、レスポンシブの挙動を確認してください。

  • インポートする前に、mj-includeの内容をインライン化してください。インクルードされたファイルは読み込まれません。
  • mj-rawは編集可能なMJMLコンポーネントに置き換えるか、レンダリングされたHTMLをインポートして確認してください。
  • MJMLのアコーディオンやカルーセルは静的なバージョンを使ってください。インタラクティブなコンポーネントは、編集可能な形でのインポートに対応していません。
  • XMLのDOCTYPE宣言とエンティティ宣言を削除してください。無効なコンポーネント構造や属性は、修正してから再試行してください。

結果を確認する ​

作成したメールをソースと比較し、デスクトップと、375pxなどの狭いモバイル幅で確認します。すべてのテキスト、画像、背景画像、ボタン、リンク先を確認してから、カラムの縦積み、折り返し、パディングを確認してください。

Importは、ソースをEmailifyが対応しているレイアウト構造に対応付けようとします。複雑なネスト、カスタムCSS、利用できないアセットがある場合は、手動での調整が必要になることがあります。ソースの準備が成功しても、見た目の完全な一致や、すべてのメールクライアントでの配信時の挙動が保証されるわけではありません。

準備に失敗した場合は、Notesを開いて報告された問題を確認します。ソースを修正するか、アクセスできないアセットを置き換えてから、もう一度プレビューしてください。作成されたレイアウトに調整が必要な場合は、Row、Column、レスポンシブ設定を使い、そのあとメールのテストガイドに従ってください。