SendGridでAMPメールを送ってみよう

SendGridサポートエンジニアの菊田(@kikutaro_)です。弊社のブログではこれまでに2回、AMPメールを紹介してきました。

具体的にどうやってAMPメールを送信するのか？気になる方もいると思うので、今回のブログでは私がSendGridを使ってAMPメールを送るまでに試した内容を紹介します。

おすすめメール配信サービス「SendGrid」を始めるメール配信サービス「SendGrid」を始めるGmailガイドライン対応！メルマガ一斉送信もシステム経由の自動通知メールもこれ1つで解決。無料で試してみる

AMPメールとは？

AMPはAccelerated Mobile Pagesの略称で、Webサイトをモバイル端末で快適に扱えるようにするための技術です。AMPをメールに適用したものがAMPメールで、従来のメールに比べてよりリッチなコンテンツを提供できます。たとえば、デモサイトではメールの中で画像を切り替えられるカルーセルの例が紹介されています。

AMPメールとは？

GmailでAMPメールを触ってみよう

Gmailのアカウントさえあれば、Googleの「AMP for Email Playground」で簡単にAMPメールを送受信できるので、早速試してみましょう。

まずはGmailでAMPメールを表示できるように設定します。画面右上のギアマークから「すべての設定を表示」を押してください。

すべての設定を表示

「全般」タブにある「動的メールを有効にする」にチェックを入れて、「デベロッパー向けの設定」をクリックします。

デベロッパー向けの設定

「動的メールのプレビュー」ダイアログが表示されたら「amp@gmail.devからの動的メールを常に許可する」にチェックをいれて保存します。

動的メールのプレビュー

受信設定は以上です。

次に「AMP for Email Playground」にアクセスします。

AMP for Email Playground

デフォルトだと画面右上のプルダウンメニューで「Hello, AMP4EMAIL world」が選択されていますが、このメールだと文字だけで通常のHTMLメールとの違いが分かりにくいので「<amp-carousel>」に変更してください。

「<amp-carousel>」に変更

「<amp-carousel>」を選んでカルーセルが表示されたら「SEND」ボタンを押しましょう。すると「Email sent to xxxx@gmail.com」というメッセージが表示されるので、Gmailの受信トレイを確認してください。

GmailでAMPメールを受信すると⚡マークのアイコンやポップアップで「動的メール」と表示されます。

雷マーク

動的メール

メールは現在ログインしているGoogleアカウントのGmailに送られます。画面上にはログイン中のアカウント名は表示されないため、複数のアカウントを使っている方はご注意ください。事前に今回使うGoogleアカウントにだけログインした状態にしておくのがおすすめです。

メール内に以下のようなカルーセルが表示されたら成功です。

カルーセル

SendGridでAMPメールを送信する

続いてSendGridを使ってAMPメールを送信する方法を紹介します。

最初に受信設定を1つだけ追加してください。前述の「GmailでAMPメールを触ってみよう」にあった「動的メールのプレビュー」にある「この送信者からの動的メールを常に許可する」に、これからSendGridで使用する送信元Fromのメールアドレスを登録してください。

動的メールのプレビュー

設定は以上です。

SendGridのWeb API v3は「Google AMP for Email」に対応しているため、以下の手順で送信できます。

  1. Domain Authentication設定を行う
  2. 「text/x-amp-html」パートを入れたマルチパートメールで送信する

AMPメールを送信するには、送信者認証で以下の条件を満たす必要があります。

上記の条件はSendGridのDomain Authentication設定で満たせます。

２の具体的な送信リクエストは以下のとおりです。typeに「text/x-amp-html」を指定して、valueには先ほど「AMP for Email Playground」で試したカルーセルのサンプルHTMLを使いました。

POST https://api.sendgrid.com/v3/mail/send HTTP/1.1
Authorization: Bearer xxxxx
Content-Type: application/json

{
  "personalizations": [
    {
      "to": [{"email": "to@example.com"}]
    }
  ],
  "from": {"email": "kikutaro@kikutaro.tech"},
  "subject": "AMP",
  "content": [
    {
      "type": "text/plain",
      "value": "TEXTだよ"
    },
    {
      "type": "text/html",
      "value": "HTMLだよ"
    },
    {
      "type": "text/x-amp-html",
      "value": "<!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='700' height='450' layout='responsive' type='slides'><amp-img src='https://www.google.com/images/background/p1.jpg' width='700' height='450'layout='responsive' alt='a sample image'></amp-img><amp-img src='https://www.google.com/images/background/p2.jpg' width='800' height='600'layout='responsive' alt='a sample image'></amp-img><amp-img src='https://www.google.com/images/background/p3.jpg' width='700' height='450'layout='responsive' alt='another sample image'></amp-img><amp-img src='https://www.google.com/images/background/p4.jpg' width='700' height='450'layout='responsive' alt='and another sample image'></amp-img><amp-img src='https://www.google.com/images/background/p5.jpg' width='700' height='450'layout='responsive' alt='and another sample image'></amp-img></amp-carousel></div></div></body></html>"
    }
  ]
}

成功すると「AMP for Email Playground」で送ったものと同じメールが届きます。

AMPが普及するにはまだまだ時間がかかると思いますが、新しい形のメールを実際に触ってみると色々と夢が膨らみます。ご興味ある方はぜひお試しください！

おすすめメール配信サービス「SendGrid」を始めるメール配信サービス「SendGrid」を始めるGmailガイドライン対応！メルマガ一斉送信もシステム経由の自動通知メールもこれ1つで解決。無料で試してみる

おすすめ記事

検索

カテゴリ

アーカイブ

メールを成功の原動力に

開発者にもマーケターにも信頼されているメールサービスを利用して、
時間の節約、スケーラビリティ、メール配信に関する専門知識を手に入れましょう。