なぜ作ったのか?

HTMLメールの作成はメーラーによってCSSの各種プロパティの対応状況が異なり、テーブルコーディングかつスタイルをインラインで要素に記述しなくてはならない。。。めんどくさい!

そのため、下記を実行できる環境を作成しました。

  • 外部ファイルで記述したCSSをインラインに自動変換してくれる
  • SASS使いたい
  • HTMLやCSSに変更があればブラウザを自動更新する
  • 作成した内容をメールで送って確認できるようにする

詳細は下記をご覧頂ければと思います。

工夫した点

メールアドレスや接続情報などを.envから読み込むことで、公開したくない情報をgithub上に公開せずに設定できるようにしました。

また、複数のメールを作成するときにコマンドに引数を持たせることで送信するメールを指定できるようにしました。(メールの件名を指定できるようにしたのはおまけです。)

画像の埋め込みについて

HTMLメールで画像を表示するにはサーバー上に画像を配置して、プロトコルから記載したパスで読み込む必要があります。

今後、ローカル環境にある画像を手軽に読み込ませる方法を模索しようと考えおります。
現状では画像のサイズのみを合わせてLorem Picsumで仮画像を配置する方法を取っております。

いい方法がありましたら教えてください。

参考にさせて頂いたサイト

この記事を書いた人

Yuki Tomioka

元焼肉店店長からゼロシード株式会社の1人目のwebエンジニアとなる。テクニカルディレクターとして勤務し、WordPressのカスタマイズやアクセス解析や広告運用などに従事。現在は事業会社のフロントエンドエンジニアとして勤務。
タイムチケットで相談も受け付けてます。