MJMLをレスポンシブメールHTMLに変換

MJML（Mailjet Markup Language）は、レスポンシブメール開発を容易にするオープンソースマーカー言語です。手動でHTMLメールを書くのは困難で、メールクライアント（特に古いOutlook）はネストされたテーブル、インラインスタイル、MSO条件付きコメントを必要とします。MJMLはmj-section、mj-column、mj-button、mj-image、mj-textなどの高レベルのコンポーネント語彙を提供し、自動的にその古いテーブルベースのHTMLにコンパイルされ、現代および古いクライアントで一貫した表示を実現します。

メールクライアントはHTMLをサンドボックス化し、再構成します。多くのクライアントはスタイルを削除し、外部スタイルシートを無視し、CSSプロパティの小さなサブセットしか無視しません。Windows用OutlookはMicrosoft WordのHTMLレンダラーを使用しており、flexbox、grid、さらにはフロートのサポートがありません。すべてのクライアントで安定的にレンダリングされる唯一のレイアウトの基本は、明示的な幅属性を持つHTMLテーブルと各要素へのインラインスタイルです。MJMLはこの冗長で誤りの多い構造を、クリーンなコンポーネントの背後で隠しています。

MSO条件付きコメントは、次の形式の特別なHTMLコメントです Microsoft Outlook（Windows）のみが処理します。これにより、Outlook向けに代替マーカーを送信できます。たとえば、Outlookの破損したレンダラーで実際の長方形として表示されるVML（ベクターマークアップ言語）の形状を備えたボタンを提供できます。コンパイルされたMJML出力にはこれらの条件付きコメントが含まれており、1つのテンプレートがApple MailおよびGmailからOutlook 2007以降に順応的に劣化します。

レスポンシブメールは通常、2つの戦略を組み合わせます：流動的なテーブルベースのデスクトップレイアウト（最大幅600px、中央配置）と、狭いビューで列を垂直にスタックし、フォントサイズを調整するCSSメディアクエリ。いくつかのクライアントはメディアクエリを無視するため、MJMLはパーセンテージベースのテーブルで既に一般的な幅に適応するレイアウトを生成し、クライアントがそれらを無視する場合に上にメディアクエリのオーバーライドを追加します。結果として、CSSサポートが部分的な場合でも、携帯電話で意図的な表示が実現されます。

美しく整形された出力はインデントと改行を維持しており、マーカーの確認、テンプレート変更の差分、またはコードレビューに貼り付ける際に役立ちます。最小化された出力は空白とコメントを削除してパッケージサイズを縮小し、一部のESPはキロバイト単位で料金を請求し、Gmailは約102KBを超えるメッセージをカットするため、非常に重要です。機能的には、両者は同じレンダリングされたメールを生成します。作成時には美しく整形されたものを、送信時には最小化されたものを選択してください。