HTMLメール

はじめに

ほとんどすべてのプロジェクトで、メールの送信について考える必要があります。 主な要件は、信頼できる配信に加えて、電子メールの魅力と利便性です。

そのような手紙の形成における主なニュアンス：

• すべてのスタイルは、特定のHTML要素のstyle
  
  
  
  属性としてインラインにする必要があります。
• すべての画像は、レターの個別の添付ファイルとして、またはbase64でエンコードされたデータの形式で埋め込む必要があります（2番目の方が便利です）。
• レターはDKIM （メーラーセットアップ）をサポートしている必要があり、送信者のドメインにはSPFレコードが含まれている必要があります。

以前、Rubyで作成されたPremailerプロジェクトを使用してHTMLメールを作成しました。 私もプロジェクトのサポートを引き受ける必要がありました（今はこの時間がないので、メンテナは大歓迎です）。

Nodeが至る所に浸透している間、Rubyの導入を避けたいと思いました。

ジュース

幸いなことに、最新のNodeエコシステムは豊富な電子メールメッセージング機能を提供します。 パグテンプレートの形式で電子メールを生成するチェーンを選択し、 ジュースを使用して変換し、バックエンドで特定のデータを置き換えます（Perlがあります）。

node 6+



+、 babel



（es2015、es2016、es2017、stage-0プリセット）を使用していることを前提としています。

設置

 npm install gulp-cli -g npm install gulp --save-dev npm install del --save-dev npm install gulp-rename --save-dev npm install gulp-pug --save-dev npm install premailer-gulp-juice --save-dev npm install gulp-postcss --save-dev npm install autoprefixer --save-dev npm install gulp-less --save-dev
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

gulpfile.babel.js：

 'use strict'; import gulp from 'gulp'; import mail from './builder/tasks/mail'; gulp.task('mail', mail);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ビルダー/タスク/ mail.js：

 'use strict'; import gulp from 'gulp'; import stylesheets from './mail/stylesheets'; import templates from './mail/templates'; import clean from './mail/clean'; const mail = gulp.series(clean, stylesheets, templates); export default mail;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ビルダー/タスク/メール/ stylesheets.js

 'use strict'; import gulp from 'gulp'; import config from 'config'; import rename from 'gulp-rename'; import postcss from 'gulp-postcss'; import autoprefixer from 'autoprefixer'; import less from 'gulp-less'; const stylesheetsPath = config.get('srcPath') + '/mail/stylesheets'; const stylesheetsGlob = stylesheetsPath + '/**/*.less'; const mailStylesheets = () => { return gulp.src(stylesheetsGlob) .pipe(less()) .pipe(postcss([ autoprefixer({browsers: ['last 2 versions']}), ])) .pipe(gulp.dest(stylesheetsPath)); }; export default mailStylesheets;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ビルダー/タスク/メール/ templates.js：

 'use strict'; import gulp from 'gulp'; import config from 'config'; import pug from 'gulp-pug'; import rename from 'gulp-rename'; import juice from 'premailer-gulp-juice'; const templatesPath = config.get('srcPath') + '/mail'; const mailPath = config.get('mailPath'); const templatesGlob = templatesPath + '/**/*.pug'; const mailTemplates = () => { return gulp.src(templatesGlob) .pipe(rename(path => { path.extname = '.html'; })) .pipe(pug({ client: false })) .pipe(juice({ webResources: { relativeTo: templatesPath, images: 100, strict: true } })) .pipe(gulp.dest(mailPath)); }; export default mailTemplates;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ビルダー/タスク/メール/ clean.js：

 'use strict'; import del from 'del'; import gutil from 'gulp-util'; const clean = done => { return del([ 'mail/*.html', 'src/mail/stylesheets/*.css' ]).then(() => { gutil.log(gutil.colors.green('Delete src/mail/stylesheets/*.css and mail/*.html')); done(); }); }; export default clean;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

典型的なテンプレートは次のようになります（generic.pug）：

 include base.pug +base tr(height='74') td.b-mail__table-row--heading(align='left', valign='top') , tr td(align='left', valign='top') | <%== $html %>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

base.pugの場合：

 mixin base(icon, alreadyEncoded) doctype html head meta(charset="utf8") link(rel="stylesheet", href="/stylesheets/mail.css") body table(width='100%', border='0', cellspacing='0', cellpadding='0') tbody tr td.b-mail(align='center', valign='top', bgcolor='#ffffff') br br table(width='750', border='0', cellspacing='0', cellpadding='0') tbody.b-mail__table tr.b-mail__table-row(height='89') tr.b-mail__table-row td(align='left', valign='top', width='70') img(src='/images/logo.jpg') td(align='left', valign='top') table(width='480', border='0', cellspacing='0', cellpadding='0') tbody if block block td(align='right', valign='top') if alreadyEncoded img.fixed(src!=icon, data-inline-ignore) else if icon img.fixed(src!=icon) br br tr td(align='center', valign='top')
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

実際、ブランクは準備ができており、テンプレートはコンパイルされています。 構成モジュールの形成は簡単で、オプションです。

ここで空のリポジトリの準備： https : //github.com/premailer/gulp-juice-demo

 gulp mail
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ViewActionなど

GMail / Inboxなどの多くの電子メールクライアントは、メッセージビューモードでの特別なアクションをサポートしています。 メッセージコンテンツに次のタグを追加すると、簡単に実装できます。

 div(itemscope, itemtype="http://schema.org/EmailMessage") div(itemprop="action", itemscope, itemtype="http://schema.org/ViewAction") link(itemprop="url", href="https://github.com/imlucas/gulp-juice/pull/9") meta(itemprop="name", content="View Pull Request") meta(itemprop="description", content="View this Pull Request on GitHub")
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

詳細については、「 メールのマークアップ」セクションをご覧ください。

まあ、と少し統合（あなたの言語を選択、ここではPerlが必要です）

 sub prepare_mail_params { my %params = %{ shift() }; my @keys = keys %params; # Camelize params for my $param ( @keys ) { my $new_param = $param; $new_param =~ s/^(\w)/\U$1\E/; next if $new_param eq $param; $params{$new_param} = delete $params{$param}; } %params = ( Type => 'multipart/mixed; charset=UTF-8', From => 'support@ourcompany.co.uk', Subject => '', %params, ); # Mime params for my $param ( keys %params ) { $params{$param} = encode( 'MIME-Header', $params{$param} ); } return \%params; } sub _template_processor { state $instance = Mojo::Template->new( vars => 1, auto_escape => 1, ); return $instance; } sub send_mail { my %params = %{ shift() }; my $html = (delete $params{message}) // ''; my $template = delete $params{template}; my $stash = (delete $params{stash}) // {}; unless ( $template ) { $template = 'generic'; $stash->{html} = $html; } $html = _template_processor()->render_file( Config->directories->{mail}. "/$template.html", $stash, ); $html = encode_utf8( $html ); my $msg = MIME::Lite->new( %{ prepare_mail_params( \%params ) } ); $msg->attach( Type => 'HTML', Data => $html, ); if ( $mail_settings->{method} eq 'sendmail' ) { return $msg->send(); } if ( $mail_settings->{method} eq 'smtp' ) { return $msg->send('smtp', $mail_settings->{host}, Timeout => $mail_settings->{timeout}); } croak "Unknown Config mail.method: ". $mail_settings->{method}; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

便利なリンク

• この記事のプロジェクトのソースコード 。
• 選択：40以上の便利なツール、リソース、および電子メールの操作に関する研究
• MJML gulp-mjml
  
  
  
  含む独自の構文を持つ便利な電子メールプリプロセッサ。 ヒントをくれたIcewildに感謝します。
• 電子メールの基礎2 。 高度なHTML構文とCSSフレームワークを備えた別の電子メールプリプロセッサ。 ヒントをありがとうA1MaZ 。

PS：レターテンプレートの改良に感謝します。