JavaMailとSendGridを使ってAMP for Emailを試してみる

AMP（Accelerated Mobile Pages）はGoogleが中心に進めているモバイル端末でWebページを高速に表示するための仕組みです。これをメールに応用したAMP for Emailは、メールの世界で動的コンテンツを使えるようにし、よりインタラクティブなコミュニケーションを可能にしてくれます。

AMP Open Source Projectのサイトはこちらです。
amp.dev

動的コンテンツって具体的にどんなものなの？という疑問が浮かんだ方は「Gmail AMP for Email Playground」をみてください。下図のようにいくつかのサンプルが実際に確認できます。
f:id:kikutaro777:20190830002738g:plain

これをみているうちに、AMP for Emailってどうやって送るんだろう？と気になったので、JavaMailとSendGridのSMTPで試してみました。

8/31追記：JavaMailと書きましたが、今はJakarta Mailが正しい呼称です。

お試しレベルであれば割と簡単で、次の2つを行うだけです。

①Gmailで動的メールを有効化して、許可するFromメールアドレスを設定する
②AMP MIMEパート（text/x-amp-html）を追加する

①の設定はGmailの「設定」で行います。
f:id:kikutaro777:20190830003817p:plain

「動的メールを有効にする」にチェックを入れて「デベロッパー向けの設定」をクリックします。
f:id:kikutaro777:20190830003926p:plain

Fromメールアドレスを指定します。
f:id:kikutaro777:20190830004032p:plain

続いて②です。

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);