AMP for Emailを作るためのサービス、ライブラリまとめ

AMP for EmailはHTMLメールの拡張で、カルーセルやフォームなど便利な機能を追加できます。しかし、専用のタグを利用したり、送信してみないと実際に使えるのか分かりづらく、作成するのは容易ではありません。

そこでAMP for Emailに対応したメールを作成するのに便利なサービスを紹介します。これらを使えばAMP for Emailの作成がぐっと手軽になるはずです。

エディタ

以下はコードを書いて、実際の表示を確認できるプレイグランドになります。

AMP Playground

amp.devにて公開されているプレイグランドです。左側にコードを記述して、右側でプレビューを確認できます。作成したコンテンツをシェアする機能もあります。

untitled - AMP Playground

Playground — Mail.ru AMP emails

Mail.ruによって公開されているプレイグランドです。内容としては最低限しかありませんので、作成したHTMLコンテンツの検証目的で使うのが良さそうです。

Playground — Mail.ru AMP emails

ChintzRuparel/amp-mockups: test AMP Emails here (tester.html is for testing AMP Emails)

AMP for Emailのテストが行えます。外部サービスではなく自分たちでサーバーを立てるので、セキュリティ上の安心感はありそうです。

ChintzRuparel/amp-mockups: test AMP Emails here (tester.html is for testing AMP Emails)

便利ツール

AMP Boilerplate Generator

amp.devで公開されています。Web、アド、Emailの3パターンに対してAMPのベースになるコードを生成できます。間違いない形からはじめるので、作り込んでからのミス発覚を防げるでしょう。

AMP Boilerplate Generator

AMP Email Builder For Gmail and Outlook — Stripo

WYSIWYGでAMP for Emailの作成が行えるのが特徴です。あらかじめ用意されたブロックを組み合わせるだけなので、とても手軽に作成できます。

AMP Email Builder For Gmail and Outlook — Stripo

leemunroe/amp-email-templates: Simple AMP for Email Template Examples

AMP for Emailに対応したHTMLメールのテンプレートが登録されています。執筆時点でカルーセル、フォーム、基本形の3つが登録されています。

leemunroe/amp-email-templates: Simple AMP for Email Template Examples

ChrisThorn10/ampemails: Code for AMP Emails

AMP for Emailのフォームに加えて、サーバー側のコード(PHP)も公開されています。サーバー側と組み合わせた時の動作確認に使えるでしょう。

ChrisThorn10/ampemails: Code for AMP Emails

developertrix/ampForEmailPlusSalesforce

Salesforceと組み合わせて使えるAMP for Emailの実装例です。SalesforceではCORS制限があるので、Node.jsを使って解決しています。

developertrix/ampForEmailPlusSalesforce

judge2020/laravel-amp-email-mailable: Amp for email support for laravel mailable

LaravelでAMP for Emailを利用するためのライブラリです。AMP用の文章を追加してメール送信できるようにします。標準のMailableに代わる機能として開発されたものですが、現在はメンテナンスされていません。

judge2020/laravel-amp-email-mailable: Amp for email support for laravel mailable

NodemailerApp :: Nodemailer

ローカル開発用のSMTPサーバーです。AMP for Emailのレンダリングが可能です。ローカルでメールを送信し、AMP for Emailとして正しく表示されるか確認できます。

NodemailerApp :: Nodemailer

まとめ

AMP for Emailについてはまだ開発向けツールは多くありません。今後、UIライブラリなどの対応が待たれるところでしょう。そうしたライブラリができれば、HTMLメールと同じような形で導入、利用できるようになるはずです。

メールの大量配信を行う際にはCustomers Mail Cloudをぜひお使いください。