AMP（Accelerated Mobile Pages）はGoogleが中心に進めているモバイル端末でWebページを高速に表示するための仕組みです。これをメールに応用したAMP for Emailは、メールの世界で動的コンテンツを使えるようにし、よりインタラクティブなコミュニケーションを可能にしてくれます。
AMP Open Source Projectのサイトはこちらです。
amp.dev
動的コンテンツって具体的にどんなものなの？という疑問が浮かんだ方は「Gmail AMP for Email Playground」をみてください。下図のようにいくつかのサンプルが実際に確認できます。
これをみているうちに、AMP for Emailってどうやって送るんだろう？と気になったので、JavaMailとSendGridのSMTPで試してみました。お試しレベルであれば割と簡単で、次の2つを行うだけです。
①Gmailで動的メールを有効化して、許可するFromメールアドレスを設定する
②AMP MIMEパート（text/x-amp-html）を追加する
①の設定はGmailの「設定」で行います。
「動的メールを有効にする」にチェックを入れて「デベロッパー向けの設定」をクリックします。
Fromメールアドレスを指定します。
続いて②です。
JavaMailを使ったシンプルな送信プログラムは次のとおりです。
github.com
今回はこれをベースにして、SendGridのSMTPを使います。
接続先にSendGridのSMTPを設定します。
Properties prop = new Properties(); prop.put("mail.smtp.host", "smtp.sendgrid.net"); prop.put("mail.smtp.port", 587);
認証はSendGridのAPIキーを使います。
Transport.send(msg, "apikey", "SG._xxxxx");
マルチパートを設定している部分を抜粋するとこんな感じです。
MimeBodyPart text = new MimeBodyPart(); text.setText("こんにちは"); MimeBodyPart html = new MimeBodyPart(); html.setText("<html><body><b>こんにちは</b></body></html>", "UTF-8", "html"); MimeMultipart mp = new MimeMultipart("alternative", text, html);
ここにAMP MIMEパート（text/x-amp-html）を追加します。今回は序盤に紹介した「Gmail AMP for Email Playground」のamp-carouselを試しました。
MimeBodyPart amp = new MimeBodyPart(); amp.setText("<!doctype html>"+ "<html ⚡4email>"+ "<head>"+ " <meta charset=\"utf-8\">"+ " <script async src=\"https://cdn.ampproject.org/v0.js\"></script>"+ " <style amp4email-boilerplate>body{visibility:hidden}</style>"+ " <script async custom-element=\"amp-carousel\" src=\"https://cdn.ampproject.org/v0/amp-carousel-0.1.js\"></script>"+ " <style amp-custom>"+ " .emailbody {"+ " padding: 16px;"+ " }"+ " .images {"+ " max-width: 100%;"+ " }"+ " </style>"+ "</head>"+ "<body>"+ " <div class=\"emailbody\">"+ " <div class=\"images\">"+ " <amp-carousel width=\"800\" height=\"600\" layout=\"responsive\" type=\"slides\">"+ " <amp-img src=\"https://www.google.com/images/background/p1.jpg\" width=\"800\" height=\"600\""+ " alt=\"a sample image\"></amp-img>"+ " <amp-img src=\"https://www.google.com/images/background/p2.jpg\" width=\"800\" height=\"600\""+ " alt=\"a sample image\"></amp-img>"+ " <amp-img src=\"https://www.google.com/images/background/p3.jpg\""+ " width=\"800\" height=\"600\" alt=\"another sample image\"></amp-img>"+ " <amp-img src=\"https://www.google.com/images/background/p4.jpg\" width=\"800\" height=\"600\" alt=\"and another sample image\"></amp-img>"+ " <amp-img src=\"https://www.google.com/images/background/p5.jpg\" width=\"800\""+ " height=\"600\" alt=\"and another sample image\"></amp-img>"+ " </amp-carousel>"+ " </div>"+ " </div>"+ "</body>"+ "</html>","UTF-8", "x-amp-html"); MimeMultipart mp = new MimeMultipart("alternative", text, html, amp);
はやくJavaにraw stringが来てほしい…ﾎﾞｿﾘ
最後にFromを設定します。①でGmailに設定したFromを使います。
msg.setFrom("kikutaro@kikutaro.tech");
以上です。これで動的コンテンツの許可をしたメアドで受信します。メールを開くと「動的メール」を示すメッセージが表示されます。
こんな感じです。ちゃんとカルーセルになってる！
面白い技術である一方、デバッグとか大変そうだなぁ…なんて思ったり。メールの世界は今後どうなっていくのですかね。
ちなみに今回はSendGridのSMTPを利用しましたが、Web API v3も対応しているようなので、今度試したいと思います。
sendgrid.kke.co.jp