gulpを使用してレスポンシブ Eメール デザイン作成の効率をあげる

UI開発者 郡司

私がレスポンシブ Eメール デザインを作り始めた頃、制作ワークフローの中に2つの重い作業が発生していました。

  • CSSファイルからHTML要素に直接スタイルを指定するインライン化
  • 変換後のHTMLファイルの送信

この作業を手作業で行うのは大きく時間を割きます。当時はまずツールでスタイルのインライン化を行い、今度はそのHTMLファイルを用いてメールを作成・送信をしていました。つまり、この作業はコピー&ペーストの繰り返しです。

HTMLメールは、たとえWebブラウザーで正常に表示されたとしても、いざ送信してみると必ずと言ってよいほど、レイアウトの崩れている閲覧環境（Webブラウザー/メーラー）があります。そのため、何度もコピー&ペーストしてはメールを送信していました。

そこで、タスクランナーを使用して上記の問題を解決する方法を探りました。探す基準としては、メディアクエリーの記述はstyle要素として記述されること、他のツールに依存せずにメールを送信できることです※。その基準のもと今回使用するnpmは以下になります。

※ 今回使用するタスクはデバック用になります。本番での使用は推奨していません。

ディレクトリ構成は以下になります。

sample/
├ css/style.css
├ src/*.html //インライン化する前のHTMLファイル格納先
├ dest/*.html //インライン化後に格納されるHTMLファイル
├ package.json
└ gulpfile.js

以下をインストールします。

npm install --save-dev gulp gulp-juice gulp-mail

gulpfile.js内の記述は以下になります。

'use strict';

var gulp = require('gulp');
var juice = require('gulp-juice');
var mail = require('gulp-mail');
// メール情報 ※ 適宜変更
var mailinfo = {
    to: [
        'test@gmail.com',
        'test@yahoo.co.jp',
        'test@outlook.jp'
    ],
    from: '自身のメールアドレス',
    smtp: {
        auth: {
            user: 'ユーザーID',
            pass: 'パスワード'
        },
        host: 'メールホスト',
        secureConnection: false,
        port: ポート番号
    }
};
// インライン化するタスク
gulp.task('inline', function () {
    return gulp.src('./src/**/*.html')
        .pipe(juice({
            preserveMediaQueries: true,
            webResources: {
                relativeTo: './src',
                images: false
            }
        }))
        .pipe(gulp.dest('./dest'));
});
// メールを送るタスク
gulp.task('mail', function () {
    return gulp.src('./dest/**/*.html')
        .pipe(mail({
            subject: '[TEST]' + new Date(),
            to: mailinfo.to,
            from: mailinfo.from,
            smtp: mailinfo.smtp
        }))
});

gulp inline、gulp mailと入力するだけで今まで手動だった作業が自動化され、すべての作業をエディタ内に完結することができました。

その他にも自動化を行うことで、作業が面倒だったためにインライン化されたHTMLファイルのみを修正し始め、元のHTMLファイル、CSSファイルと同期がとれなくなるようなことがなくなり、他の人への引継ぎが簡単になるメリットもあります。

この経験を経て私の中でレスポンシブ Eメール デザイン作成では、タスクランナーの使用は必須となりました。他にもレスポンシブ Eメール デザインのワークフローのなかでは自動化できる箇所がたくさんあると思います。しかし、今回紹介した作業が自動化されるだけでも作成のハードルは下がると考えます。