shimakyohsuke.com

長らくティザーサイト状態だったこのサイトも有料プランなので
なんか書いていきます。

HTML メール作るときのメモです。

EJS ちょっと好きになった。

まだ完成してないですが
とりあえず Gist 置いてみます。

※絶賛コーディング中なのでソースは変更されるかもしれません。


どうして EJS 使ったか

大好きな jade で書きたかったけど、
jade ファイルだと head 内に CSS 書いても Emmet が動かなかった。

拡張子が .jade なので、まあそう動かないわなーッて感じなんですが
Emmet の設定変更するのはなんか嫌だったので
EJS で書いて、head 内の CSS 部分を include すればええやんって思いついたらできた。

とりあえずこのまま作成してます。
(.ejs ファイルだと CSS の Emmet が動いた。これはこれで不可解)

MailChimp とか使ったほうがいい予感はする

MailChimp とか便利なサービスあるけど
GUI で作っていくのが面倒で直書きでやってます。

MailChimp
http://mailchimp.com/

index.ejs ができたら吐出された index.html を
MailChimp のテンプレート作成の項目でソースファイル打ち込むことができるので
そこで簡単な表示確認ぐらいしようかなと思います。

最終的にできあがった index.html はここで変換します。

HTML email inline styler
https://inlinestyler.torchbox.com/styler/

Inliner
http://zurb.com/ink/inliner.php

また画像ですがテスト中にいちいち画像アップロードするのも面倒なので
ダミー画像いれてくれるサービス使ってます。

PLACEHOLD.IT
http://www.placehold.it/

他に HTML メール作成する環境でおすすめあったら教えて欲しいです。


2015.04.10 追記

HTML メール を作成するにあたって参考にしたサイト

ここにほとんどのこと書いてくれてる
ありがたい

HTMLメール制作のコツや便利なサービスいろいろ | Webクリエイターボックス
http://www.webcreatorbox.com/webinfo/html-email/

レスポンシブ対応のメールはこもり まさあきさんの記事

ASCII.jp:今日から始めるレスポンシブEメールデザイン入門
http://ascii.jp/elem/000/000/971/971079/

上の記事で紹介されてたこれも買っちゃいました。
こもり まさあきさん著
レスポンシブEメールデザイン マルチデバイス時代の魅せるメルマガの作り方 (Web Professional Books) [Kindle版]
http://www.amazon.co.jp/E-Web-Professional-Books-ebook/dp/B00RKU2V6E/