秒でHTMLメールをつくる！

はじめに

スタートアップのエンジニアです。
エンジニアが1人なので エンジニアができそうなこと は全部ぼくのタスクになります。
「こういうのやりたい！やっといて！」と雑に言われると、半分「あ？」と思いながら半分「できることが増えるぞー！ワクワク！」という感情で取り組んでいます。

今回は「ユーザーにイベント告知したいから、HTMLメール作って送っておいて！」でした。

HTMLメール作ったことねーし！
って思いながら、いかに早く簡単に作れるかを考えてみました。
フロントエンジニアではないぼくにとって、自分でHTMLを組むのはゲロだるいため、画像を使うことにしました。

結論

1. 画像を入手する

2. サーバーに画像を置く

3. 本文を作る

オンラインエディタ( http://asomin.net/htmleditor/ )に下記コードを書いて、生成された内容をgmailの本文にコピペ

<img src="{画像のurl}" alt="MyImage" style="width:100%; max-width:100%">

完成！こんな感じに送れました！

くわしく

1.画像を入手する

メールの本文になる画像です。
ぼくの場合は社内にデザイナーがいたので、作ってもらった画像をそのまま使いました。
今回は説明のため、Zennのページ( https://zenn.dev/about )のスクショを使います。

2. サーバーに画像を置く

画像は絶対パス(http://、https:// から始まるアドレス)で指定する必要があります。
Wordpressやs3に配置すればOKですが、今回は説明のため、個人でも無料で使えるGyazo( https://gyazo.com/ )に配置します。

3. 本文を作る

gmailだとhtmlの編集ができないので、オンラインエディタ( http://asomin.net/htmleditor/ )を使って本文をつくります。
まず、「ソース」タブにコードを書きます。Gyazoのurlを使うとこんな感じになります。
※ブラウザ、スマホの両方で良い感じに見えるように width:100%;max-width:100%" を追加します。

<img src="https://i.gyazo.com/3c92eef03381eef0ab72ea5ad4298f18.png" alt="Image from Gyazo" style="width:100%;max-width:100%">

ちなみに、リンクを付けたい場合はこんな感じになります。

<a href="https://zenn.dev/about">
  <img src="https://i.gyazo.com/3c92eef03381eef0ab72ea5ad4298f18.png" alt="Image from Gyazo" style="width:100%;max-width:100%">
</a>

つぎに、「エディター」タブを開き、内容をコピーします。
:-:
さいごに、gmailの本文にペーストします。
:-:
おわりです！