【HTMLメール】GmailでHTMLメール用のソースコードを扱う方法

Gmailでソースコードを利用してHTMLメールを送信する方法って無いの？
そんなニーズに応えるための具体的な手順とツールを紹介します。

はじめに

メールマガジンで配信しているHTMLメールを修正したいけど、メール本体かソースコードくらいしか手元にない。そんな中で修正を求められるコーダーの方はいませんでしょうか。

HTMLメールのソースコードは、様々なメールクライアントへの対応（主にOutlookアプリ）で複雑怪奇となっていることで有名ですが、そのためには、”ソースコードをHTMLメールとして送信したい”機会が検証のためにも必ず訪れます。

ただ、「HTMLメール Gmail」と検索しても、”リッチテキストエディタでHTMLメールが作れます”といった非コーダー向けのコンテンツが検索エンジンの上部にズラッと並んでしまい、目的の記事がなかなか見つからないといったことがあるかと思います。

そこで、HTMLメール用のソースコードをGmailで扱う方法を調べたのでまとめておきます。

方法

結局のところ、メール本文にエスケープされない形でソースコードを挿入出来れば良いので下記の方法でやりやすい手段を選べばどれも問題ありません。

方法１．DevToolsでメール作成画面のメッセージ本文に挿入する

1. Gmailで画面左上部「 作成」ボタンを押下してメール作成画面（ポップアップ）を開く

2. メール作成画面で[F12]キーを押してDevToolsを立ち上げる

3. DevToolsのElementsパネルのセレクトモードで画像のようにメッセージ本文を選択する
   

4. 下記のようにaria-label="メッセージ本文"が付与されている要素の直下を変更する
   ※ <textarea>要素ではなく、該当する<div>要素の中身を変更してください。

   DevTools

   <div id=":1jw" ... aria-label="メッセージ本文" ... />
   -  <br clear="all">
   -  <div>...</div>
   +  (確認したいソースコードを挿入する)
   </div>
   

5. DevTools上で編集を完了するとメッセージ本文がHTMLとして表示されます
   

6. 表示を確認して問題なければそのまま送信することでHTMLメールを送ることができます
   各メールクライアントで閲覧可能なアドレスを宛先に指定して検証を行いましょう。

Gmailのアップデートによって、アップデート以前の方法が利用出来なくなってしまうことがあるため、記述時点での最新の手段として捉えていただければ幸いです。

方法２．Google拡張機能でHTMLエディタをメール作成画面に追加する

Google拡張機能でアドオンとしてメール作成画面のGUI上に表示させるので 方法１ と比べて取っ付きやすいと思います。
ただ、オフィスワークで使用する場合は、各拡張機能のプライバシーポリシーがchromeウェブストア上に開示されているので確認した上で利用するようにしましょう。

■ cloudHQ提供拡張機能

メール作成画面の送信ボタン右のツールチップに「Edit HTML」と表示されるアイコンが追加され、メッセージ本文がHTML編集画面とライブプレビュー画面が2分割で表示されるようになります。
利用時には会員登録が求められるため、会員登録を行いたくない方は次の拡張機能を利用しましょう。

プライバシーにおいて、「個人を特定できる情報」を収集及び使用することを開示されているため、プライバシーポリシーをご確認した上で利用してください。

上記「HTML Editer for Gmain by cloudHQ」に対して、自作したテンプレートを保存したり、デザイン済みのメールテンプレートを挿入できる機能が追加された拡張機能です。
「HTML Editer for Gmain by cloudHQ」と異なり、会員登録が求められないので多機能でも手早く利用することができると思います。

プライバシーにおいて、「個人を特定できる情報」を収集及び使用することを開示されているため、プライバシーポリシーをご確認した上で利用してください。

■ その他拡張機能

メール作成画面の右上部にアイコン（</>）が追加され、メッセージ本文がHTMLコードで表示されるようになります。アイコンの押下でHTML編集とプレビューの切り替えをすることができます。

プライバシーにおいて、利用者のデータを収集または使用しないことを表明しています。

最後に

GmailでHTMLメール用のソースコードを扱う方法をご紹介しました。

この記事が、HTMLメールの修正や検証を効率的に行うための一助となれば幸いです。
技術の進化により新たな方法が登場する可能性もあるため、常に最新情報を確認しながら作業を進めていきましょう。

皆さんのHTMLメール制作がスムーズに進むことを願っています。