email
HTMLメール

Email Markupでメール体験をリッチにしよう

More than 1 year has passed since last update.

GmailやInboxを使っている方は、時々メールの題名の隣にボタンが置かれているのを見かけたことがあると思います。GitHubやAmazonから来たメールには、高確率でボタンが表示されていると思います。例えば、View Issueや、荷物を追跡といったボタンですね。

Screen Shot 2016-06-25 at 11.33.55.png

上記のボタンは単に対象のサイトに飛ぶだけですが、例えばGoogleカレンダーはもっとリッチです。招待を受けた予定に参加するかどうか、いちいちGoogleカレンダーに移動することなく、Gmail上で返事をすぐにすることができます。

Screen Shot 2016-06-25 at 11.39.25.png

QiitaやQiita:Teamでも、6月23日から送信されているメールのいくつかで、Qiitaで表示Qiita:Teamで表示というボタンがGmailやInboxで表示されるようになりました。

2d40c83f-915d-6417-1984-ca6a9139becc.png

QiitaやQiita:Teamで以下のようなタイミングで送信されたメールには、ボタンがでるように仕込んであります。

  • 他のユーザからコメントが投稿されたとき
  • 他のユーザから自分にメンションされたとき
  • 他のユーザから編集リクエストを受け取ったとき
  • 他のユーザに送った編集リクエストが採用されたとき

受け取ったメールを開くことなく、ボタンをクリックするだけで、すぐにコメントやヘンリクエストを確認することができます。QiitaやQiita:Team上で行われるコミュニケーションをできるだけ迅速に行えるようにするための工夫として、このボタンが寄与してくれることを期待しています。

この投稿では、GmailやInboxでこのようなボタンを表示するために必要なことを技術的な観点で紹介したいと思います。

Email Markup

GmailやInboxでメールにボタンを表示するためには、Email Markupという技術を使います。

Email Markup - Google Developers

これは、HTML Microdataを使って、Schema.orgで規定されたスキーマでアクション(=どのようなことをしたいか)をHTMLメール内に埋め込むことで、GmailやInboxがボタンを表示してくれる仕様となります。利用可能なアクションは、以下のようなものがあります。

  • RSVP Action - Googleカレンダーの予定など、イベントの出欠等の返事
  • Review Action - レストラン、映画、商品やサービスなどのレビュー
  • One-click Action - シングルクリックで実行可能な何か
  • Go-to Action - より複雑なインタラクション

利用するスキーマは、それぞれ以下のようになっています。

アクション 利用するスキーマ
RSVP Action RsvpAction
Review Action ReviewAction
One-Click Action ConfirmAction, SaveAction
Go-To Action ViewAction, TrackAction

上記の4つのアクションは、更に以下の分類がされています。

  • In-App Action - GmailやInboxの中でアクションが完結する。RSVP Action, Review Action, On-Click Actionがこれに含まれる。
  • Go-To Action - GmailやInboxの中でアクションが完結しない、より複雑なインタラクションを有する場合に使われる。

Email Markupは、誰でも自由に適用できるわけではなく、Googleの審査の結果承認された場合にのみ、GmailやInboxにボタンが出てきます。そして、In-App Actionに関する審査はそれほど厳しいものではないのですが、Go-To Actionについては厳しい審査があります。というか、以下のように「特定のユースケースでしか承認していません」とされています。

We are currently only approving Go-To actions for very specific high-value usecase with high interaction rate (e.g. Flight Check-in, Shipment tracking links).
Actions / Schema Guidelines

Qiita, Qiita:Teamで使っているマークアップ

Qiita、Qiita:Teamでは、Go-To Actionの ViewAction を使っています。ViewAction では、ボタン名と、クリックされたときの遷移先のURLを指定することになります。具体的には、以下のようなHTML断片を、送信するHTMLメールのbody要素内のどこかに埋めます。

<div itemscope itemtype="http://schema.org/EmailMessage">
  <div itemprop="potentialAction" itemscope itemtype="http://schema.org/ViewAction">
    <link itemprop="url" href="クリックされた時の遷移先のURL"/>
    <meta itemprop="name" content="ボタン名"/>
  </div>
  <meta itemprop="description" content="説明文" />
</div>

説明文の指定は必要なのですが、どこで使われているかはわかりません(GmailやInboxでは表示されていません)。

他のスキーマを使う際にも、やりたいことを忠実に各スキーマに従って書いていくだけです。

試すことは誰でも可能

Email Markupは原則Googleからの承認を得て利用するものですが、特定の条件下では実際に誰でもEmail Markupを試すことができます。その条件とは、「宛先と送り主が同じ」であること、です。

実際に僕が試したときには、JavaMailに慣れていたので、以下のようなコードを書いてHTMLメールを送信させました。

pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>jp.eisbahn</groupId>
  <artifactId>test</artifactId>
  <version>1.0-SNAPSHOT</version>

  <dependencies>
    <dependency>
      <groupId>com.sun.mail</groupId>
      <artifactId>javax.mail</artifactId>
      <version>1.5.2</version>
    </dependency>
  </dependencies>

</project>
SendHtmlMail.java
package jp.eisbahn.java.test;

import javax.mail.*;
import javax.mail.internet.InternetAddress;
import javax.mail.internet.MimeMessage;
import java.util.Properties;

public class SendHtmlMail {

    public static void main(String[] args) {
        String to = "<YOUR_EMAIL_ADDRESS>"; // "from"と同じ
        String from = "<YOUR_EMAIL_ADDRESS>"; // "to"と同じ
        final String username = "<USER_NAME>";
        final String password = "<USER_PASSWORD>";
        String host = "<SMTP_SERVER_NAME>";
        Properties props = new Properties();
        props.put("mail.smtp.auth", "true");
        props.put("mail.smtp.starttls.enable", "false");
        props.put("mail.smtp.host", host);
        props.put("mail.smtp.port", "25");
        Session session = Session.getInstance(props, new Authenticator() {
            @Override
            protected PasswordAuthentication getPasswordAuthentication() {
                return new PasswordAuthentication(username, password);
            }
        });
        try {
            Message message = new MimeMessage(session);
            message.setFrom(new InternetAddress(from));
            message.setRecipients(Message.RecipientType.TO, InternetAddress.parse(to));
            message.setSubject("Test HTML Mail");
            message.setContent(
                    "<html><body>" +
                    "<h1>That is a HTML mail.</h1>" +
                    "<div itemscope itemtype=\"http://schema.org/EmailMessage\">" +
                    "<div itemprop=\"potentialAction\" itemscope itemtype=\"http://schema.org/ViewAction\">" +
                    "<link itemprop=\"url\" href=\"https://www.eisbahn.jp/yoichiro\"/>" +
                    "<meta itemprop=\"name\" content=\"Watch Blog\"/>" +
                    "</div>" +
                    "<meta itemprop=\"description\" content=\"Watch Blog\" />" +
                    "</div>" +
                    "</body></html>",
                    "text/html");
            Transport.send(message);
            System.out.println("Done.");
        } catch(MessagingException e) {
            e.printStackTrace();
            throw new RuntimeException(e);
        }
    }

}

これを実行して送信されたメールをInboxで確認すると、Watch Blogというボタン(Inboxの場合はリンクですが)が表示されたことが確認できました。

Screen Shot 2016-06-25 at 13.59.40.png

Java以外でも、基本的にSMTPサーバと通信してHTMLメールを送ることができれば、同じようにEmail Markupを試すことができます。

セキュリティの要件

Googleによる審査通過後にEmail Markupが使えるようになると、GamilやInboxが内部で持っているホワイトリストに、Email Markupの利用を許可するFromのメールアドレスが追加されます。つまり、Email Markupが適用されるメールは、「Fromが詐称されていないこと」が保証されている必要があります。

Fromが詐称されていないことを確認するために、Email Markupでは以下のいずれかが送信されるメールに適用されていることが求められます。

SPF (Sender Policy Framework)

SPFは、Fromで書かれたメールアドレスのドメインDNSのSPFレコードで引いてきて、引けた場合はそのメールの送信元サーバがSPFレコードで引いたIPアドレスかどうかチェックすることで、詐称されているかどうかチェックする仕組みのことです。

DNSサーバでSPFが適用されているかどうかは、digコマンドを使って確認することができます。例えば、Amazon SES (Simple Email Service)では、以下のようになります。

$ dig txt us-west-2.amazonses.com
...
us-west-2.amazonses.com. 900    IN  TXT "spf2.0/pra include:amazonses.com -all"
us-west-2.amazonses.com. 900    IN  TXT "v=spf1 include:amazonses.com -all"
...

DKIM (DomainKeys Identified Mail)

DKIMは メールのヘッダに署名を入れておいて、メール受信時にDNSサーバにある公開鍵を使って妥当性を検証することで、詐称されているかどうかチェックする仕組みのことです。

SMTPサーバにDKIMが適用されているかどうかを確認する方法は、そのSMTPサーバから送られたメールのヘッダで以下のような記述があるかどうかで確認することができます。

...
DKIM-Signature: v=1; a=rsa-sha256; q=dns/txt; c=relaxed/simple;
    s=rsv;ibwontowitnbiownotbt; d=example.com; t=14666787334;
    h=Date:From:Reply-To:To:Message-ID:In-Reply-To:References:Subject:Mime-Version:Content-Type:Content-Transfer-Encoding;
    bh=...;
    b=...
...

Googleへの申請

マークアップした結果がGmailやInbox上でちゃんと機能することを確認し、実際に使うSMTPサーバでSPFやDKIMが適用されていることが確認できたら、いよいよGoogleに利用申請を出すことになります。申請をするために、以下の2つのことを行います。

  • schema.whitelisting+sample@gmail.com 宛にマークアップされたメールを、実運用時に使用するSMTPサーバから送信する。
  • 申請フォームに各種情報を入力し、利用申請を提出する。

もしEmail Markupを適用したいメールの種類が複数ある場合は、その全てを schema.whitelisting+sample@gmail.com 宛に送っておいた方が良いでしょう。送信されたメールの内容に基づいて、Googleの Developer Platform Support チームが審査を行います。

ガイドラインを再確認する

申請フォームから利用申請を出す前に、もう一度Email Markupのガイドラインを読んでおくべきでしょう。Googleによる審査がそのガイドラインに基づいて行われるため、申請する側も正しくその内容を理解しておくべきですし、そのガイドラインに沿ったマークアップがされているべきです。以下に、そのガイドラインを和訳したものを掲載しますので、理解の助けにしてください。


Source: Register with Google - Email Markup

私たちは、電子メール内にあなたがどのようにスキーマを使うかを見るのを楽しみにしています。あなたは、今日からあなた自身の統合テストを開始することができます。あなたがあなた自身に(x@gmail.comからx@gmail.comに)送った全てのスキーマは、Googleのプロダクト上で表示されるでしょう。さあ、試してみてください!

あなたのユーザにマークアップされた電子メールを送る準備が整ったら、あなたはGoogleに登録する必要があります。この手順に従ってください:

  • 以下の一覧にあるガイドラインや要求のすべてを満たしているかどうか確認してください。

  • マークアップ/スキーマを含む実際の電子メールを、あなたのプロダクションサーバ(または類似の DKIM/SPF/From:/Return-Path: ヘッダを持つサーバ)から schema.whitelisting+sample@gmail.com に送信してください。Registration Guideline内に一覧されたガイドラインや要求のすべてに沿っているかどうかをチェックするために、私たちはこれが必要です。

    • もし、テスト/ブランクな電子メール、スキーマを含んでいない電子メール、またはレビューのための電子メールを送っていない場合は、あなたの申請は何のフィードバックもなく破棄されるでしょう。
    • 電子メールを送信する前に、マークアップが正しいかどうか確認してください。詳しくは、Testing your Schemaを見てください。特に、電子メールがEmail markup Testerに何のエラーもなくパスし、できるだけ多くのデータを含んでいることを確認してください。
    • 電子メールが転送されるときには、Gmailは全てのマークアップを削除します。電子メールを転送せずに、直接送ってください。
  • registration formに記入してください。私たちはあなたに折り返し連絡します。

Registration Guidelines

あなたが送ったスキーマが処理されるようになるために、以下のガイドラインに必ず従ってください:

Email Sender Quality guidelines

  • 電子メールは、DKIMまたはSPF経由で認証されている必要があります。
  • SPFチェックのトップレベルドメイン(TLD)やDKIMの署名は、あなたのFrom:電子メールアドレスのTLDと一致する必要があります。
    • 例: もしあなたがFrom: foo@bar.comを使う場合は、DKIMまたはSPFはbar.comまたはsub.bar.comでなければなりません。
    • Gmailは、あなたのReturn-Path:電子メールアドレスのドメインのSPFをチェックするのみです。もしあなたがDKIMではなくSPFを信頼するのみであれば、あなたのReturn-Path:電子メールアドレスはあなたのFrom:電子メールアドレスのTLDと一致しなければなりません。
    • あなたのSPFまたはDKIMの設定が正しいかどうかをすぐにチェックするために、Email Authentication help articleをご覧ください。
  • 電子メールが静的な電子メールアドレスから来なければなりません(例: foo@bar.com)。
  • 電子メールが、Gmail Bulk Sender Guidelinesに従っていなればなりません。
  • あなたのドメインからのメールの高容量な送信(Gmailに最低1日で数百の電子メールのオーダー)の持続的(少なくとも数週間)な履歴
  • ユーザからのスパムクレームの非常に低いレート。

Actions / Schema Guidelines

  • 利用可能な最も高い忠実度のアクションが使われるべきです。例えば、もしインタラクションが In-App アクション(One-Click, RSVP, Review)によって達成される場合、それが使われなければなりません。より複雑なインタラクションのために、Go-To アクションを使うことができます。
  • アクションは、高いインタラクションレートが期待される取引のメールで使われるべきです。それらは、宣伝用のバルクメールで使われるべきではありません。
  • Go-To アクション:
    • アクションを実行することができる特定のページ内に深くリンクしなければなりません。
    • ボタンのラベルは、起きることを明確に反映していて、そのページでユーザが行うであろうことに正確でなければなりません。
    • アクションのラベルは、句読点を含むべきではなく、またすべて大文字であるべきではありません。短く簡潔である必要があります。
    • もし In-App アクションがあなたのユースケースのために使われる場合、あなたは In-App アクションを使わなければならず、Go-To アクションは使ってはなりません(例: "Verify Email Address"や"Please Review"は、In-App アクションを使うべきです)。
    • 私たちは、現在 Go-To アクションを高いインタラクションレートを持つ非常に限定した高い価値があるユースケース(例: フライトチェックイン、発送追跡リンク)でのみ承認しています。
  • アクションの要求のサービスでのハンドリングについて、低い失敗率と迅速なレスポンス。

申請フォームから登録する

Email Markupの利用申請を、以下のフォームから登録します。

Gmail Schema Whitelist Request

各項目について、何を入力すべきかを以下に説明します。

項目 入力すべき内容
What is your name? 自分の名前。
What email address should we use to contact you? 自分のメールアドレス。
Provide a phone number we can use to reach to you if needed. 無記入で大丈夫。
What is the name of your company? 会社名。
What is your company's website address? 会社のコーポレートサイトのURL。
What does your company do? What is its main goal or product? 会社が行っていること、ビジョン、製品の説明。
How many users does your service/product/company have? サービスや製品のユーザ数。
Where is your company located? 会社のある場所。国名と都市名でOK。
Describe the email to which you plan to add schema. What is its purpose? スキーマを追加する予定のメールの目的の説明。
Is your email Promotional or has a Promotional Intent or is a Solicitation? メールがプロモーションや勧誘が目的ならYes。
Which Structured Data Type do you plan to add to your email? 利用する予定の構造データを選択。
Which Action do you plan to add to your email? 使いたいアクションを選択。
If you plan to use a One-Click or Go-To Action, what text will appear on the button? ボタンに表示したいラベル文字列。
From what email address are these emails sent? Email Markupに対応したメールの送信元メールアドレス。
What languages are used in your emails? メールで使われる言語。
On what day did you send a sample email to schema.whitelisting+sample@gmail.com? メールを送信した日付。
Subject of sample email sent to schema.whitelisting+sample@gmail.com メールを送信した際の題名。

上記の中で、"Describe the email to which you plan to add schema. What is its purpose?"については、かなり長文になるかと思います。Email Markupの審査では、「何の目的で使うのか?」が重視されるっぽいので、できるだけ詳しく書きましょう。

あとは待つだけ?

Email Markupを既に利用している方々が書かれたBlogをいくつか読みましたが、申請フォームから申し込み後、特に何もなく数日〜数週間後に承認のメールが届いて、GmailやInboxでEmail Markupが有効になったようです。ただし、それらはどれもIn-App Actionの利用申請でした。

Qiita、Qiita:TeamではGo-To Action(の中のViewAction)を利用しようと考えて、申請を出しました。申請フォームから登録後、より詳しいユースケースの説明を求められ、サービスとメールとユーザのインタラクションを全て説明するための資料を作って送ったり、追加で説明をメールで返信したりを繰り返しました。結局、なんだかんだで1ヶ月以上交渉したことになります。さまざまな紆余曲折がありましたが、説明したユースケースやインタラクションが最終的には認められ、Developer Platform Support から Gmail Team による最終レビューを無事通過して、Go-To Actionが使えるようになりました。

Email Markupの基本的なスタンスは、「できるだけIn-App Actionの範囲内で使ってもらう」です。Go-To Actionを申請する場合は、「なぜIn-App Actionでは無理なのか」や「Go-To Actionによって、現状のトランザクションがどれだけ良くなるか」など、「それならGo-To Actionがいいかもね」と言ってもらえるくらいの説明と説得(?)が必要になります。しかも、そのやり取りは全て英語になりますので、苦手な方は覚悟しましょう。

まとめ

近年では、メッセンジャーアプリが大流行し、「もうメールは死んだ」とまで言われるようになりましたが、メールの実力が発揮されている分野はまだまだ多いです。そのメールの世界は、Email Markupによってさらに進化していますし、ユーザの体験をより向上させるためにEmail Markupはもってこいの技術です。Go-To Actionは少し壁が高いですが、In-App Actionは比較的承認を得やすいですので、ぜひ皆さんも担当されているサービスでメールを使っている箇所があれば、Email Markupの採用を検討してみてはいかがでしょうか?