本記事はドワンゴ Advent Calendar 2019の17日目の記事です。
昨日は 「一年間毎日一時間、メンバーに時間と場を配り続けた結果何が起こったのか？」 でした。
ドワンゴの会議室にはシースルーな部屋も一部あり、昨日筆者の @maruloop さん達のもくもく会は、よく見られる光景でした。
この記事でわかること
- AMP Eメールがざっくりどういうものか
- テスト送信の方法
はじめに
ドワンゴで企画職をしています。
エンジニアの方々のアドベントカレンダーが楽しそうで、参加してみたいと思っていました。叶って嬉しいです。
新卒で入り、フィーチャーフォン版サイトが最初の担当でした。
メールマガジンの配信1をしていた時期もあり、HTMLメールには、懐かしさを強く感じています。
（うまく作れない時の辛さは強烈2で、これもとても覚えています）
LINEなどのコミュニケーションツールやSNSに対して、なかなか新しい使い方が見えてこないメールですが、
2019/03に「GmailがAMP Eメールに対応した」と発表されました3。
よい勉強の機会としながら、この AMP Eメール の紹介を、 Advent Calendar 2019 17日目として記載しようと思います。
AMPメールについて
そもそも「AMP」？
Google検索結果に、ある時期から「⚡」マークのついたものが、時折表示されるようになったと思います。
これがAMPが利用されている例で、他の検索結果よりも圧倒的に高速に表示されます。
時事ワードやスポーツで検索すると、比較的よく見かけるように思います（「ラグビー」とか
検索サービス側でキャッシュを持つことと、表現に制限を設けていることから、この高速な表示を実現しています。
- 制限
- HTMLは、独自の記述となる(使えないタグがある。追加されているタグもある)
- JavaScriptはAMP用のものしか使えない(独自のものは使えない)
2017年ごろから見かけるようになったと思います。
徐々に広まってきて、今ではかなり一般的になってきました。
（特にSEOを気にされる人はよくご存じそうです。
AMP Eメールとは？
前述のAMPの仕組みを利用したものが、AMP Eメールです。
動的Eメール(ダイナミックEメール)とも書かれるようです。4
冒頭の GmailがAMP Eメールに対応した では、以下のようなことができると記載されています。
- 出欠確認
- アンケートに応える
- カタログを見る
- メール内でコメントに返答する
AMP now enables all-new email experiences like being able to submit RSVPs to events, fill out questionnaires, browse catalogs, or respond to comments right within the email. Emails can also stay up to date, displaying the freshest content from comment threads or the latest recommendations.
出欠、アンケート、コメントについては、メール中からPOSTできるのが、これまでのEメールとは異なる機能です。
カタログを見るについては「今、現在の新着」を表示することができる点が、異なります。
仕組みとしては、MIMEの1パートとして構成されているようで、テキストメール/HTMLメールとの関係に、さらに1パート追加です。
ためしにGmailじゃないメーラーで受け取ってみた結果がこちらです。（Becky! を使っています
x-amp-html が追加されているのが分かります。
送ってみる
自分のGmail宛であれば、 AMP OSS プロジェクト のページ( https://amp.gmail.dev/playground/ ) から、AMP Eメールを簡単に送れます。(テストではなく送る場合は、いくつかの作業が必要です5)
https://amp.gmail.dev/playground/ の表示です。(Googleのログインが求められます)
SENDを選択すると、自分のGmail受信トレイに、AMP Eメールが届きます。
ただし、おそらくデフォルトでは以下のような表示になると思います。
Gmailの設定から、「動的メール」の項目を探し、「デベロッパー向けの設定」を選択します。
ここで、「amp@gmail.devからの動的メールを常に許可する」にチェックを入れます。
※このまま受信トレイに戻ると反映されていそうですが、そうもならず。
「何かの設定を更新」→「保存」→「受信トレイ」とすることで、無事に有効になりました。
AMP Eメールで利用可能な表現
先程の playground の右上を選択すると、他のサンプルを見ることができます。
サンプルでどういったことを表現しているかを見てみると…
| サンプル名称 | 表していそうなもの |
|---|---|
| <amp-list>#1 | jsonを取得し、要素ごとに表示 |
| <amp-list>#2 | jsonを取得し、要素ごとに表示。要素の数や指示ができる |
| <amp-bind>#1 | ボタン押下のイベントを取得し、interTextとclassを変更できる |
| <amp-bind>#2 | プルダウン選択のイベントを取得し、hidden属性を変更できる |
| <amp-form> | プルダウン選択のイベントを取得し、hidden属性を変更できる |
| <amp-accordion> | アコーディオンで開く閉じる。ネストもできるし、アニメーションで開くこともできる |
| <amp-anim> | アニメーション。gifアニメが動くらしい |
| <amp-fit-carousel> | 画像のカルーセル表示 |
| <amp-fit-text> | 表示領域にあわせてフォントの大きさが変更できる |
| <amp-timeago> | 日付を相対表現にできる(「3日前」とかを適切に記載できる) |
AMP本体(webページ)に比べてAMP Eメールで使えるコンポーネントは随分少なく、上記のサンプルで8割紹介されているくらい…のようでした。
AMP for Email 認証
先に書いた「コメント」「アンケート」は、本人性の確認をする必要がありそうな機能です。
Google(Gmail)、Microsoft(Outlook)それぞれにドキュメントがありました。
( amp.dev のほうはあまりなく、Googleがもっとも詳細を書いているように思います
- Authenticating requests in AMP for Email | Google Developers
- AMP 認証 - Outlook Developer | Microsoft Docs
URL末尾にアクセストークンを付ける方法が紹介されています。
検証方法などの具体的なところは明言されておらず、送信サービス側でよく検討せよ、との模様。
(以下、 Microsoft のドキュメント より
AMP for Email では、アクセス トークンの作成方法や確認方法を既定しません。 ユーザーがメールで行えることを許可するアクションが範囲指定され、保護されていることを確認するのは、各メールの送信者の責任です。
気づかずにメール転送しちゃった場合も大丈夫かとか、気を巡らせるべきところはありそうだなあと思っています。
課題
これまでと違うEメールの使い方ができそうと感じます。
AMP自体もそうですが、webページ本体までたどり着くことなく、利用者のニーズを満たせるなと。
一方で、積極的に導入していくには
- AMP Eメール非対応環境の人にはアプローチできない
- そもそもメールを見ない人が増えた (その他のコミュニケーションツールのほうが効果的)
- 運用コスト・複雑性が増す(フォールバック用のHTMLを諦めればコスト減だが…)
と、大きめの課題があるようにも思います。
終わりに
初Qiita記事でした。
publicな箇所で書こうとすると曖昧な知識では書けず、ちゃんと調べつつ書かないとなーということを再認識しました。。
物事の理解をよりしっかりとしていきたいと感じたのが、一番得たものかもしれません。
明日18日は、 @lambdataro さんです。