フォールバックの仕組み

フォールバックエンジンはMailInAppの中核です。存在理由は、メールクライアントがあらゆる点で一致しないからです: 一部はモダンなCSSをレンダリングし、一部は<style>タグを取り除き、クラシック版のOutlookはMicrosoft Wordの描画エンジンでメールをレンダリングします。最低共通仕様に合わせてデザインする代わりに、あなたは一度だけデザインします — そしてエンジンがすべてのブロックを3つのティアにコンパイルします。

3つのティア

ティア1 — キネティック

CSSによる本格的なインタラクティブ性です: スライドするカルーセル、展開するアコーディオン、アニメーションするリビール。キネティックマークアップは、CSSステートマシン——非表示のチェックボックスやラジオ入力の:checked状態が何を表示するかを決める仕組み——の上に構築されています。これがメールクライアントが実際にサポートしているインタラクティブ性だからです。JavaScriptは一切使用されません。すべてのメールクライアントがそれを取り除いてしまいます。

キネティックレンダリングはGmail(Webおよびモバイルアプリ)、Apple Mail、Yahoo Mail、Samsung Mailに届きます — 消費者向け受信トレイの大多数です。

ティア2 — 静的

一部のクライアントは<style>ブロックを完全に取り除きます(Gmailは切り取られたメッセージからもそれらを削除します)。それらのクライアントでは、すべてのブロックが行動を促すリンクを伴うすっきりとした縦積みのコンテンツに変換されます——投票する、ギャラリーを開く、フォームを送信するためのリンクは、ホスティングされたライブビューを指します。プレーンなリンクはメールクライアントの100%で機能するため、このティアは普遍的です。

ティア3 — Outlook

クラシック版のWindows版Outlookは、Wordでレンダリングされ、キネティックCSSも大半のモダンなレイアウトもサポートしていません。エンジンはOutlook用の条件付きコメント——Wordの描画エンジンにしか見えないマークアップ——の中に、各ブロックの専用テーブルベース版を出力します。クラシック版Outlookの受信者は、崩れたメールではなく、意図の通ったすっきりとしたメールを受け取ります。

1つのメール、すべての受信トレイ

3つのティアはすべて同じHTMLファイルの中に収められています。どのティアが受信者に表示されるかは、脆弱なクライアント判定ではなく、そのクライアント自身のレンダリング規則によって決まります:

• キネティックCSSをサポートするクライアントはティア1をレンダリングし、静的版を非表示にします。
• スタイルを取り除くクライアントは自然とティア2をレンダリングします。
• Wordの描画エンジンは条件付きコメント経由でティア3しか見ません。

インタラクションも同じ思想に従う

データを収集するブロック(投票、評価、フォーム)は、既定でリンクベースのインタラクションを採用しています——各選択肢はプレーンなリンクで、それが回答を記録します——リンクこそがどこでも機能する唯一のプリミティブだからです。メール内でのフォーム送信は、それをサポートするクライアントに対する段階的な強化として、その上に重ねられます。詳細はインタラクションと分析を参照してください。

エンジンが拒否すること

エンジンの役割の一部は「いいえ」と言うことです。クライアントのサポートが乏しい、あるいは一貫していない技術——JavaScript、埋め込み動画、<details>要素、CSS変数——は、デモがどれほど魅力的に見えても、決して使用されません。ある技術が優雅に劣化できないなら、それは出荷されません。サポート状況の全体像はメールクライアントのサポート状況にあります。

AMP for Emailは、単にそのリストの中で触れられるだけでなく、明示的に独立して取り上げられています: それは欠けている機能ではなく、意図的なトレードオフだからです。なぜAMP for Emailを使わないのか?を参照してください。