こんにちは、先日Web開発チームに加わりました西口です。

HTMLメールの制作って煩わしくないですか？
おそらくそう感じているWebデザイナーの方は多いのではないかと思っています。

HTMLメールの制作って大変

特に下記のような点が挙げられると思います。

• テーブルレイアウト（コーディング面倒…）
• インラインCSS（コーディング面倒…）
• メールクライントごとで差のあるCSS対応（表示チェックどうすんの…）
• 各種メールクライアントでの表示テスト（古い環境もまだまだ現役…）

などなど…

弊社でもHTMLメールはそこまで頻繁に作成することがなかったので、これまでワークフローを見直すことがなく、ヘイトの増加を感じつつもHTMLを直接コーディングして作成していました。

ただ、やはりこういうフローでは時間がかかってしまったり表示確認が面倒だったので、どうにか効率良くならないかと調べていたら、HTMLメール作成用のGruntプラグインがありました。

試しにそれらを使ってみたところ、以前に比べて効率が良くなるなと感じた点があるので、今回はそれらのツールを紹介してみたいと思います。

CSSをインラインで書くのが面倒

まずは、CSSのインライン化をしてくれる grunt-premailer というツールです。

CSSに記述されたスタイル定義を該当のHTML要素にインラインスタイルとして追加してくれるツールです。簡単に言うと、別々にコーディングしていたHTMLとCSSをガッチャンコして、HTMLメール用のファイルを生成してくれます。

このツールを使うと、CSSコーディングは、SassやLESSを使って書くことができるので、いつもと同じ感覚で進められます。

これだけでも、作業時間は随分削減された印象です。

使い方は、

npm install grunt-premailer --save-dev

でインストールして、Gruntfile.js にタスクを追加、

optionsの設定類はプラグインのページを参照してください。

あとは、HTMLとCSS（テンプレートエンジンやCSSプリプロセッサを使っている場合は事前にビルド）を用意して、タスクを実行するとCSSがインライン化されます。

メールクライアント毎の表示確認が面倒

メールを見る環境は、ブラウザやメールクライアントアプリなどさまざまな種類、パソコンやモバイルなどさまざまなデバイスがあります。

また、メールクライアントによってCSSの対応状況もバラバラということもあり、できればより多くの環境で表示確認をおこなうのが理想ですが、それを実現するのもまたまた面倒です。

そこで、次に紹介するのはHTMLメールの表示確認を手助けしてくれる、grunt-mailgun と grunt-litmus というふたつのツールです。

メールのテスト送信をする grunt-mailgun

こちらのツールは、メール配信サービスのMailgunを使ってローカルのメールをテスト送信するツールです。

Gruntタスクでメールを送信できるので、すぐにクライアントアプリなどでの表示確認がおこなえます。

使い方は、いつものようにプラグインをインストールして、

npm install grunt-mailgun --save-dev

タスクを追加しますが、こちらのツールは、Mailgunのサービスを利用するため、事前にアカウントを作成し、apiキーを取得しておく必要があります。テスト送信程度であれば、無料プランでも充分だと思います。

また、有料プランでは分析などのメールマーケティングに使えそうな機能も提供されているようです。詳しくはサイトをご覧ください。

Gruntfile.js に自分のapiキーを書いておくのが不安という場合は、別ファイルに記述して、共有しないようにもできます。

他のメール配信サービスだと、送信するのにあれこれ設定が必要だったりするところが、このツールではコマンド一発で送信できるので、表示確認するのがすごく楽になります。

クライアント毎の表示確認が一度にできる grunt-litmus

次のツールは、HTMLメール（Webページ）の復数環境での表示確認ができるサービス litmus を使用して表示テストするためのツール、grunt-litmus です。

このツールはlitmusを使用してのテストのため、事前にlitmusのアカウントが必要になります。

今回は試した程度で、無料トライアルでの利用だったため、確認できる環境がふたつ（Outlook2003とIEのGmail）だけでしたが、有料プランでは30以上のクライアントでの表示確認が可能なようです。

まずは、プラグインのインストール

npm install grunt-litmus --save-dev

タスクを追加、

このタスクでも、同じく username や password は別ファイルで管理しておく方が良いでしょう。

タスクを実行すると、litmusのテストにローカルのhtmlメールのデータを送信してくれます。 そして、送信が完了したら、litmus上で設定した環境ごとでの表示確認ができます。

一度に復数環境での表示確認ができるので、確認作業の時間がかなり短縮されます。

HTMLメールワークフロー

最後に紹介するのは、今回ピックアップしたツールに加え、テンプレートからのHTMLビルド、Sassのコンパイルなど、HTMLメール制作の一連のワークフローをGruntタスクとしてまとめてくれている、grunt-email-workflow です。こちらは、先ほど紹介したMailgunの中の人が公開されているようです。

Gruntタスクだけじゃなく、CSSプリプロセッサにSCSS、テンプレートエンジンにHandlebarsを利用したメールの雛形も用意されているので、これだけですぐに試してみるということも可能です。

HTMLメールの制作をどうにかしたいと感じている方が、まずは今回紹介したようなツールを試してみたいという時に手軽に始められるのではと思います。

まとめ

HTMLメールの制作を手助けしてくれる3つのGruntプラグインを紹介しました。

ひとつはCSSをインライン化してくれる grunt-premailer。
次に、表示確認につかえる、grunt-mailgun と grunt-litmus です。

そして、HTMLメールのワークフロータスクをひとまとめにした Grunt Email Design Workflow もとりあげました。

HTMLメールのような単発で発生するような制作タスクでも、ワークフローを見直し効率化することで、普段と同じ感覚で作業を進められたり、また、メインタスクの作業時間の確保にもなり、その効果は少なくないように思います。

また、Gruntは、最近のWebサイトの制作環境ではかなりの確率で導入されていることもあり、これらのツールを試すのもすぐにできると思いますので、今回取り上げたツールが、HTMLメールのワークフローをどうにかしたいなと感じている方の参考になればと思います。