LoginSignup
3
1

More than 1 year has passed since last update.

@YoshinagaYuta(祐太 吉永)in株式会社LIFULL

AMP for Email入門 Vol.1 ～テストメール送信編～

Posted at

こんちには！
LIFULLエンジニアの吉永です。

本日はAMP for EmailというEmailで今までにない新しい体験を提供している技術について調査した内容を備忘録代わりにアウトプットしたいと思います。

AMP for Emailとは？

Googleが開発した、インタラクティブなやりとりをメーラー上で実現できる技術。
https://amp.dev/about/email/

どんなことができる？

  • メール上でWebページへ遷移させることなくアンケートへ回答、そのアンケート結果をメール上へ表示したりできる。
    • もうちょっと具体的に書くと、性格診断コンテンツなどのようにいくつかの設問にメール上で答え、診断結果をWebページに遷移させずにメール上に表示できる。
  • ECサイトからのお知らせメールで、メールサーバーからの送信時点の情報ではなく、ユーザーがメールを開いた瞬間の旬な情報を表示したりできる。
    • 例えば期間限定セール開催中でタイムセールをやっていたり、連日目玉商品が入れ替わるような性質のイベントの場合、従来の静的なメールではユーザーが開いた時には既にその情報が古くなっていて、実際にはタイムセールも終わっていたり、目玉商品も売り切れていたりなどのがっかり体験を無くすことが可能になる。
    • やろうと思えばカート追加、決裁などもメール上でできる。

どんな技術なの？

  • 従来のメールはテキストメール、HTMLメールが主流だが、AMP for Emailはこれらのメールとの共存が出来るように設計されている。
  • HTMLメールはメーラーの設定によってHTMLを表示拒否していたり、表示できない場合の事を考慮して、マルチパートという形式で送っているが、AMP for Emailはこのマルチパート内に新たにAMP for Email用のパートを用意し、AMP for Emailに未対応のメーラーで開いた場合はテキストかHTMLメールが表示されるように考慮されている。
  • また、AMP for Emailはパーソナライズされているメールであり、個人を識別できるような情報をメール内に含んでいることも考慮（アンケートに回答する際にログインなどを必要としないようにしている場合、第三者へそのままメールを渡すとなりすましが容易にできてしまう）して、転送した場合はAMP for Emailパートが除去されて転送されるように考慮されている。
  • メーラーによってはAMP for Emailを表示する期限を設けている場合もある。その場合はテキストかHTMLメールが表示されるようになる。
  • AMP for Emailに対応しているメールクライアントは2022/06時点で4つしかない。
  • AMP for Emailを送信するには各メーラーへの届出、審査が必要になる。審査未通過の場合は、開発者モードなどのデバッグ機能を用いての確認しかできない。

ひとまずAMP for Emailを送ってみる

ということで、習うより慣れろ！精神にもとづき、ひとまずAMP for Emailを送信してみてどんなことができるのかを体験していきたいと思います。

  1. Googleアカウントにログインする。
  2. https://amp.gmail.dev/playground/ にアクセスする。
  3. SENDボタンを押す。image.png
  4. 自分のGoogleアカウント宛てにメールが届く。※届かない場合は設定の動的メールが無効になっている可能性もあるので、設定を見直す。
  5. 受信したメールを開き、稲妻アイコンが確認できればAMP for Emailとして受信できている。image.png

受信したメールのソースを見ると下記のようになっていると思います。

Content-Type: text/plain; charset="UTF-8"

This is the plain text content. To see dynamic emails sent from amp@gmail.dev in Gmail, whitelist amp@gmail.dev in Gmail Settings > General > Dynamic email > Developer settings.
--0000000000007ef0c605e11422ef
Content-Type: text/x-amp-html; charset="UTF-8"
Content-Transfer-Encoding: quoted-printable

<!--
     Below is the mininum valid AMP4EMAIL document. Just type away
     here and the AMP Validator will re-check your document on the fly.
-->
<!doctype html>
<html =E2=9A=A14email data-css-strict>
<head>
  <meta charset=3D"utf-8">
  <script async src=3D"https://cdn.ampproject.org/v0.js"></script>
  <style amp4email-boilerplate>body{visibility:hidden}</style>
</head>
<body>
  Hello, AMP4EMAIL world.
</body>
</html>
--0000000000007ef0c605e11422ef
Content-Type: text/html; charset="UTF-8"

This is the <b>HTML content</b>. To see dynamic emails sent from amp@gmail.dev in Gmail, whitelist amp@gmail.dev in Gmail Settings > General > Dynamic email > Developer settings.

テキスト、AMP for Email、HTMLのそれぞれのパートが確認できましたね。

その他のサンプルも確認

せっかくなので、その他のサンプルも見てみましょう。
https://amp.gmail.dev/playground/ にて右上のExamplesから<amp-list> #2を選択します。
image.png
すると上のキャプチャのようにフルーツの一覧が並ぶようになりました。
SENDボタンを押すとメールが届き、開封後、少し待つとフルーツのリストが表示されます。
AMP for Emailのソースを見ると分かりますが、https://amp.gmail.dev/playground/public/ssr_amp_list というエンドポイントからフルーツの一覧を取得し、JSONをパースしてリストへ反映させています。
レスポンスJSONは下記のようですね。

{
  "items": [
    {
      "id": "1",
      "img": "https://amp.dev/static/samples/img/product1_640x426.jpg",
      "name": "Apple",
      "price": "1.99",
      "stars": "&#9733;&#9733;&#9733;&#9733;&#9733;",
      "attribution": "visualhunt",
      "url": "#",
      "color": "green"
    },
    {
      "id": "2",
      "img": "https://amp.dev/static/samples/img/product2_640x426.jpg",
      "name": "Orange",
      "price": "0.99",
      "stars": "&#9733;&#9733;&#9733;&#9733;&#9734;",
      "attribution": "visualhunt",
      "url": "#",
      "color": "orange"
    },
    {
      "id": "3",
      "img": "https://amp.dev/static/samples/img/product3_640x426.jpg",
      "name": "Pear",
      "price": "1.50",
      "stars": "&#9733;&#9733;&#9733;&#9734;&#9734;",
      "attribution": "visualhunt",
      "url": "#",
      "color": "green"
    },
    {
      "id": "4",
      "img": "https://amp.dev/static/samples/img/product4_640x426.jpg",
      "name": "Banana",
      "price": "1.50",
      "stars": "&#9733;&#9733;&#9733;&#9733;&#9733;",
      "attribution": "pixabay",
      "url": "#",
      "color": "yellow"
    },
    {
      "id": "5",
      "img": "https://amp.dev/static/samples/img/product5_640x408.jpg",
      "name": "Watermelon",
      "price": "1.50",
      "stars": "&#9733;&#9733;&#9733;&#9733;&#9733;",
      "attribution": "pixabay",
      "url": "#",
      "color": "red"
    },
    {
      "id": "6",
      "img": "https://amp.dev/static/samples/img/product6_640x424.jpg",
      "name": "Pear",
      "price": "1.50",
      "stars": "&#9733;&#9733;&#9733;&#9734;&#9734;",
      "attribution": "visualhunt",
      "url": "#",
      "color": "green"
    }
  ],
  "part_of_them": {
    "pear_and_banana": [
      {
        "id": "3",
        "img": "https://amp.dev/static/samples/img/product3_640x426.jpg",
        "name": "Pear",
        "price": "1.50",
        "stars": "&#9733;&#9733;&#9733;&#9734;&#9734;",
        "attribution": "visualhunt",
        "url": "#",
        "color": "green"
      },
      {
        "id": "4",
        "img": "https://amp.dev/static/samples/img/product4_640x426.jpg",
        "name": "Banana",
        "price": "1.50",
        "stars": "&#9733;&#9733;&#9733;&#9733;&#9733;",
        "attribution": "pixabay",
        "url": "#",
        "color": "yellow"
      }
    ]
  }
}

上記JSONを下記のHTMLコード部分でテンプレートにはめ込んで出力しています。

  <amp-list id="amp-list-placeholder" noloading width="auto"
            height="1000"
            layout="fixed-height" src="https://amp.gmail.dev/playground/public/ssr_amp_list">
    <div placeholder>
      <ul class="results">
         <li></li><li></li><li></li><li></li><li></li>
      </ul>
    </div>
    <template type="amp-mustache">
        <div class="products">
            <amp-img width="150"
                   height="100"
                   alt="{{name}}"
                   src="{{img}}"></amp-img>
            <p class="name">{{name}}</p>
            <p class="star">{{{stars}}}</p>
            <p class="price">{{price}}</p>
        </div>
    </template>
  </amp-list>

JSONの展開はVue.jsでも採用されているマスタッシュ構文で行います。

AMP for Emailで利用できる各種テンプレート構文などはおいおい紹介していこうと思いますので、本日はこれくらいでAMP for Email入門編を終えたいと思います。

最後までご覧いただき、ありがとうございました。
それではまた次の記事でお会いしましょう。

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
1