AMP for Emailの実装方法をわかりやすく説明

先日、3月26日にGoogleからGmailでAMP for Emailのサポートが発表されました。AMP(Accelerated Mobile Pages)とはスマホでWebサイトを高速に表示するための規格ですが、AMP for Emailを利用するとWebサイトのような動的な画面をEmail画面上で表示する事ができるようになります。

この記事では具体的なサンプルを用いてAMP for Emailの実装についてご紹介していきます。

開発・テスト環境の準備


AMP Emailでは基本的にHTML、CSSを用いてメールを作成することができます。とはいえ、一部AMP Emailの独自のルールに則って作成する必要があるため、書き方が正しいかチェックする必要があります。

Googleが提供しているAMP for Email PlaygroundではメールがAMP Emailのルールに沿って正しく作成されているかをチェックしてくれます。また、作成したEmailのプレビュー画面もリアルタイムで確認できるため大変便利です。Playgroundは以下のリンクからご使用いただけます。

AMP for Email Playground

基本的なテンプレート

まずは基本的なテンプレートについてご説明します。
これまでウェブサイト用に使用されてきたAMPの文法がAMP for Emailでもそのまま使用できますが、一部Email用に変更する必要があります。
また、任意のスタイルはstyle amp-custom内に記述できますが50キロバイトまでに容量を抑える必要があります。

注意
AMP for Emailは現状Gmailのみ対応(2019/04/15時点) しているため、それ以外のメールプロバイダーではAMP Emailを受け取ることができません。そのため、AMP for Emailを利用する場合はAMPメールとHTMLメールを合わせて送ってあげる必要があります。詳しくは以下の記事を御覧ください。

AMP for Emailの導入方法&利用申請方法をわかりやすく説明

メールに画像を追加

これまでもHTMLメールではimgタグを使用してメールに画像を埋め込む事ができましたが、AMP for Emailではamp-imgタグを使用します。

レスポンシブ対応

メールは多用なデバイス(スマホ、PC、タブレット)で閲覧されるため、実際に導入する際にはレスポンシブ対応が必須となります。AMPのレスポンシブ対応はlayout属性を使用する方法@mediaクエリを使用する方法の2種類が存在します。

layout属性で表示を変更

画像の表示方法を画面幅によって変更する場合はlayout属性を使用します。

layout属性にはresponsiveの他にfixedなど色々値を設定できるので、このへんに興味のある方は『amp-img layout』でググってみてください。

メディアクエリで表示を変更

AMP Emailではレスポンシブ対応でお馴染みのmediaクエリを使用する事ができます。具体的には以下のように実装することでスマホ、タブレット、デスクトップなどそれぞれの画面幅に応じてデザインを切り替える事ができます。

メールにスライドショーを設置


AMP for Emailではamp-carouselを使用してスライドショーを設置する事ができます。
スライドショーを設置する場合、まずヘッダ内でamp-carouselスクリプトを読み込みます。

動的なメールの作成


AMP Email内ではJavascriptを記述することができません。(これはAMP Websiteでも同様です。)そのかわりに、AMPでは独自のディレクティブが用意されています。amp-bindはその一つでユーザーからのインプットを受け取って画面の表示を変更する事ができます。

ここでは押されたボタンに応じて背景色を変更するデモをご紹介します。

まずはソースコードをご紹介します。

このサンプルコードではまずamp-stateid=stateを設定することでstateオブジェクトの初期化を行っています。このオブジェクトはデータバインドされているため、どこかで値が変更されるとそれ以外で使用されている箇所の値も変更されます。この例では各ボタンのタップイベントにAMP.setStateを設定しており、この部分でデータの値を変更しています。

変更されたデータは[text][class]などを使用することによって、タグ内の文字列やクラス値に代入されます。

この様にしてAMP Emailでは動的な画面を作成する事ができます。

AMPのイベントハンドラについて
AMP for Emailではtapイベントの他にも様々なイベントハンドラを使用する事ができます。利用できるイベントハンドラの一覧は以下のページで確認できます。

イベントハンドラ一覧

Ajaxでサーバーからデータを取得


このデモではサーバー側にAjaxを用いてリクエストを送信し、その戻り値を画面上に表示しています。Ajaxのリクエストはメールを開いたタイミングで送られるため、メール送信時点からサーバーのデータに更新があった場合でも常に最新のデータを取得する事ができます。

Ajaxでサーバーからデータを取得、画面に表示するためにはamp-listamp-mustacheを使用しています。

amp-listについて

amp-listはサーバーからJSONを取得する際に使用します。JSONの戻り値は{items: [...]}のような配列で有ることが期待されます。

公式ドキュメント(英語)
amp-list

amp-mustacheについて

amp-mustacheはテンプレート<template>...</template>を使用する際に利用します。テンプレート内でamp-listで取得したJSONのプロパティーを指定することで、自動的に表示する事ができます。また、amp-bindと組み合わせることによって、ユーザーの入力に合わせて表示する値を変更することもできます。

公式ドキュメント(英語)
amp-mustache

選択項目に応じてメール上でページ遷移


ユーザーの選択肢に応じて項目を出し分けをすることも可能です。以下のサンプルではユーザーの入力に応じて表示する文字を変更しています。
このように選択された値をamp-bindでバインドすることでブロックの出し分けが簡単に実現できます。

メールにフォームを設置


AMP Emailではメールにフォームを設置する事ができます。個人的にはこれが一番大きな変更なのではないかと思います。

これまではユーザーの入力が必要な際はユーザーをまずサーバーに移動させてから、サーバー上で操作を行って貰う必要がありました。しかし、AMP Emailではメール上にフォームを設置して、サーバーにデータを保存する事ができます。

下のサンプルでは名前とメールアドレスをサーバー上に登録する事ができます。また、サーバーからの戻り値が成功(submit-success)の時と失敗の時(submit-error)で表示するメッセージを変える事ができます。またサーバーからの返却されたJSONをamp-bindでテンプレートに埋め込み表示しています。

公式ドキュメント(英語)
amp-form

その他の機能

それ以外にもAMP for Emailでは次のような事が可能です。

  • FAQなどのアコーディオンの表示
  • GIFアニメの埋め込み
  • パーソナライズされたデータの取得と更新(参考)

まとめ

いかがでしたでしょうか?今までウェブサイトで使用されていたAMPの書き方をEmail上でも利用できるようになり、Emailで動的な画面を作成することができるようになりました。ただ、ウェブサイトで使用できるAMPのディレクティブが全てEmailでも使用できるわけではないので、使用できるディレクティブかどうかは公式サイトを御覧ください。

AMP Emailの導入に関する注意事項

また、その他AMP for Emailを利用するにはGoogleに申請を送るなど、事前準備が必要になります。
事前準備について知りたい方はこちらを御覧ください。

AMP for Emailの導入方法&利用申請方法をわかりやすく説明

最新記事