HTMLメール
Webでいろいろできるようになった
メールもHTMLで送られてくることが増えた
HTMLメールも進化してる…?
表現力とか
開発のしやすさとか
残念ながら いまだガラケーと同じくらい
十数年くらい進化してない
Webの開発は現代に近いほど楽
どうして……
1. JSが使えない
多くのメーラーはJSが使えない
マルウェア対策でブロックされがち
Gmailではxxx.jsを添付できない
いまのWebはコンポーネントの組み合わせで作られる
ReactとかVueとか
コンポーネントで開発がかなり楽になった
コンポーネントを組み合わせる部分はJS
メーラーではコンポーネントの組み合わせで開発ができない
つまり、昔ながらの方法でしかHTMLが書けない
CSSの読み込み
CSSの読み込み方には3種類ある
1.外部読み込み形式2.埋め込み形式3.インライン形式
外部読み込み形式
CSS専用のファイルをリンクする方法
最も新しい形式、現在の主流
BootStrapなどのライブラリを利用できる
メーラーでブロックされる
埋め込み形式
HTMLドキュメントの<style>内にまとめて配置する方法
同じスタイルを複数個所に適用できる
メーラーでブロックされがち
インライン形式
HTMLドキュメントの各タグ内にいちいち記述する方法
ほとんどのメーラーに受け入れてもらえる!
いにしえの方法(最近の教材には「この方法はやめろ」って書いてる)
同じスタイルの場合でもそれぞれに記述する必要がある
冗長で文字数が多くなりがちでメンテしづらい
でも、このインライン形式で書くしかない
対応されないCSS
メーラーごとにCSSの対応が違う
HTMLメールの標準が決まってない
それぞれのメーラーが気の赴くままに対応している
新たに生まれたCSSに対応していない場合も多い
HTMLメールが出始めたころのCSSで書くと崩れにくい!
HTMLメールが出始めたころのCSS
テーブルレイアウト
角丸や影、半透明は画像で用意
レスポンシブ?なにそれ?
ガラケー向けのサイトも当時同じような環境でつくってた
頑張っていろんなCSSに対応しているメーラーもある
↑頑張ってる
Apple Mail (macOS/iOS) : 188/202
Outlook (macOS) :
181/202
Mozilla Thunderbird (macOS) : 171/202
Outlook (Android/iOS) : 138/202
Outlook
(Outlook.com) : 128/202
Gmail (Desktop Webmail) : 116/202
Yahoo! Mail (Desktop Webmail) :
114/202
Yahoo! Mail (Android) : 94/202
Gmail (Android) : 86/202
Gmail (iOS) :
81/202
Outlook (Windows 10 Mail) : 55/202
Outlook (Windows) : 49/202
↓頑張ってない
GmailとWindows向けのOutlookがあんまり頑張ってないので
いにしえのCSSで書くしかないよね
まとめ
HTMLメールはつくるの大変
つくってくれるサービスにまかせよう