GMail の受信トレイに「〜で表示」ボタンを表示させる #Google

TL;DR

HTML メールに Gmail 用マークアップの「Go-To Actions」を使う。

以下の HTML マークアップを Gmail が検知すると、受信トレイのタイトル横にボタンが表示される。

sample.html

<body>
    <p>Here's your body and soul.</p>
    <p>"<a href="https://YOURSITE.COM/PATH/">Go Go Go</a>"</p>

    <!-- Go-To-Actions -->
    <div class="footer">
        &mdash;<br />
        <a href="https://YOURSITE.COM/PATH/">YourSiteで表示</a>
    </div>
    <div itemscope="" itemtype="http://schema.org/EmailMessage">
        <div itemprop="potentialAction" itemscope="" itemtype="http://schema.org/ViewAction">
            <link href="https://https://YOURSITE.COM/PATH/" itemprop="url" />
            <meta content="YOURSITEで表示" itemprop="name" />
        </div>
        <meta content="Qiitaで表示" itemprop="description" />
    </div>
    <!-- /Go-To-Actions -->
</body>

Gmail を拡張する HTML タグに関するリファレンス
- Overview | markup | Gmail @ Google Developers
- Reference | markup | Gmail @ Google Developers

TS;DR（詳細と所感）

Qiita で「編集リクエスト」でコントリビュートしたら採用された旨のメールが届きました。

ふと、「Qiitaで表示」ボタンが目に付き「そういえば最近このボタン見るなー」と思って、どうやっているんだろうと調べてみました。

まずは、参考となった届いたメールのソースを見てみました。恐らくトリガーとなる記述を HTML メール内部に含めるか、ヘッダーに含めるかだと思ったからです。

結果から言うと HTML 内のマークアップに含まれていました。GMail の「メッセージのソースを表示」（HTML メールの内容を確認）すると、イコールだらけの ASCII コードにエンコードされていました。

これは Quoted-printable と呼ばれるエンコードで、このままだと扱いづらいのでデコードしてみたところ、文末に DIV や META タグに itemscope, itemprop といった見慣れない属性が付いており、それらしき記述がありました。

この記述方法は Gmail 専用なのかと思ったのですが、どうやら、これは schema.org の制定した markup 記法に準拠した記述のようです。

schema.org とは Microsoft（の Bing チーム）、Google や Yahoo! などが立ち上げた団体です。「インターネット、Web ページ、電子メールメッセージなどで構造化されたデータのスキーマ（図式）を作成、維持、促進する」ことを目的としているみたいです。つまり、HTML や JSON などの方言をまとめようとする、隙間を狙った団体の１つということです。

Schema.org @ 英語版 Wikipedia

schema.org 自体の認知度や準拠率を考えても、（2020 年現在）汎用とは言えませんが、相手が GMail を利用していることがわかる場合は試してみる価値はあるかもしれません。

HTML メールで GMail にできるアクション一覧

指定した URL へのジャンプに "Go-To Action"

アクション名	アクション内容（できること）
Go-To Action	Go-To アクションは受信トレイから指定された URL を直接開くことができます。

承認や登録などの一発アクションに "One-Click Action"

アクション名	アクション内容（できること）
One Click Actions	ワンクリックアクションは、Gmail や Inbox を離れることなく、受信トレイから直接操作を実行できます。ワンクリックアクションは、サービスURLで `HttpActionHandler` を宣言することによって実行されます。

Yes/No アンケートなどに "Rsvp Action"

アクション名	アクション内容（できること）
Rsvp Actions	RSVP（お返事願います）アクションでイベントを宣言するために使用します。イベントに参加するためのボタンを含む、イベントカードが電子メールの横に表示されます。

意見フォームの ReviewAction は2017年7月に廃止されました。