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

<img width="100%" alt="Gmail の受信トレイ一覧に表示されるボタンの名称" src="https://qiita-image-store.s3.amazonaws.com/0/78776/c6d585f7-4de5-f4f4-4fc3-2ce23f33fee5.png">

## TL;DR

> HTML メールに Gmail 用マークアップの「[Go-To Actions](https://developers.google.com/gmail/markup/reference/go-to-action)」を使う。

以下の 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](https://developers.google.com/gmail/markup/overview) | markup | Gmail @ Google Developers
  - [Reference](https://developers.google.com/gmail/markup/reference) | markup | Gmail @ Google Developers

## TS;DR（詳細と所感）

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

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

<img width="100%" alt="Gmail の受信トレイ一覧に表示されるボタンの名称" src="https://qiita-image-store.s3.amazonaws.com/0/78776/c6d585f7-4de5-f4f4-4fc3-2ce23f33fee5.png">

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

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

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

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

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

- [Schema.org](https://en.wikipedia.org/wiki/Schema.org) @ 英語版 Wikipedia

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

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

### 指定した URL へのジャンプに "[Go-To Action](https://developers.google.com/gmail/markup/reference/go-to-action)"

<img width="30%" src="https://developers.google.com/gmail/markup/images/actions-go-to-action.png">

アクション名|アクション内容<br>（できること）|
|:---|:---|
|[Go-To Action](https://developers.google.com/gmail/markup/reference/go-to-action)| Go-To アクションは受信トレイから指定された URL を直接開くことができます。|


### 承認や登録などの一発アクションに "[One-Click Action](https://developers.google.com/gmail/markup/reference/one-click-action)"

<img width="30%" src="https://developers.google.com/gmail/markup/images/actions-one-click-action.png">

アクション名|アクション内容<br>（できること）|
|:---|:---|
|[One Click Actions](https://developers.google.com/gmail/markup/reference/one-click-action)| ワンクリックアクションは、Gmail や Inbox を離れることなく、受信トレイから直接操作を実行できます。 ワンクリックアクションは、サービスURLで `HttpActionHandler` を宣言することによって実行されます。|

### Yes/No アンケートなどに "[Rsvp Action](https://developers.google.com/gmail/markup/reference/rsvp-action)"

<img width="30%" src="https://developers.google.com/gmail/markup/images/actions-rsvp-action.png">

|アクション名|アクション内容<br>（できること）|
|:---|:---|
|[Rsvp Actions](https://developers.google.com/gmail/markup/reference/rsvp-action)|[RSVP（お返事願います）](https://ja.wikipedia.org/wiki/RSVP)アクションでイベントを宣言するために使用します。イベントに参加するためのボタンを含む、イベントカードが電子メールの横に表示されます。|

- 意見フォームの [ReviewAction](https://developers.google.com/gmail/markup/reference/review-action) は2017年7月に廃止されました。