はじめに

mailto スキームについて調べたので、mailto リンクを使って 宛先(To)/CC/BCC/件名(Subject)/本文 を指定する方法を簡単に整理した。

TL;DR

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 詳細
    1. mailto で指定可能な項目
    2. 設定例
      1. 全部乗せ
      2. 宛先(To)
      3. CC
      4. BCC
      5. 件名(Subject)
      6. 本文
    3. JS で簡単に指定
  4. その他・メモ
    1. GUI で簡単に作れるツール Mailtolink
    2. 最大長
  5. まとめ
  6. 参考文献

詳細

mailto で指定可能な項目

項目 指定方法 補足
宛先(To) mailto: 直後に指定 ,(カンマ)区切りで複数指定可能
CC cc= で指定 ,(カンマ)区切りで複数指定可能
BCC bcc= で指定 ,(カンマ)区切りで複数指定可能
件名(Subject) subject= で指定 空白、日本語などは URL エンコードが必要
本文 body= で指定 空白、改行、日本語などは URL エンコードが必要

設定例

全部乗せ

mail example

項目 指定内容 補足
宛先(To) to1@example.com と to2@example.com
CC cc1@example.com と cc2@example.com
BCC bcc1@example.com と bcc2@example.com
件名(Subject) mySubject
本文 hello
world		 改行あり

コード

1
<a href="mailto:to1@example.com,to2@example.com?cc=cc1@example.com,cc2@example.com&bcc=bcc1@example.com,bcc2@example.com&subject=mySubject&body=hello%0D%0Aworld">mail example</a>

宛先(To)

1
<a href="mailto:to1@example.com">mail example</a>

mail example

CC

1
<a href="mailto:to1@example.com?cc=cc1@example.com">mail example</a>

mail example

BCC

1
<a href="mailto:to1@example.com?bcc=bcc1@example.com">mail example</a>

mail example

件名(Subject)

1
<a href="mailto:to1@example.com?subject=mySubject">mail example</a>

mail example

本文

1
<a href="mailto:to1@example.com?body=hello%0D%0Aworld">mail example</a>

mail example

JS で簡単に指定

JavaScript で mailto リンクを作りたい場合、URL インターフェイスを使うのが楽。(実は mailto プロトコル(スキーム)も処理できる)

cc, bcc, subject, body はクエリパラメータとして searchParams.set() で設定すれば良い。送信先だけは mailto: 直後に指定が必要なので new URL() の段階で指定しておく。

最後に toString() で出力すれば、日本語などもエンコードされて mailto:... 形式で出力できる。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const to = ['to1@example.com', 'to2@example.com'];
const url = new URL(`mailto:${to.join(',')}`);

const cc = ['cc1@example.com', 'cc2@example.com'];
url.searchParams.set('cc', cc.join(','));

const bcc = ['bcc1@example.com', 'bcc2@example.com'];
url.searchParams.set('bcc', bcc.join(','));

url.searchParams.set('subject', 'はじめまして');
url.searchParams.set('body', "本文です\nこんにちわ");

url.toString();
// => "mailto:to1@example.com,to2@example.com?cc=cc1%40example.com%2Ccc2%40example.com&bcc=bcc1%40example.com%2Cbcc2%40example.com&subject=%E3%81%AF%E3%81%98%E3%82%81%E3%81%BE%E3%81%97%E3%81%A6&body=%E6%9C%AC%E6%96%87%E3%81%A7%E3%81%99%0A%E3%81%93%E3%82%93%E3%81%AB%E3%81%A1%E3%82%8F"

上記の toString() 出力結果を使ったリンクが以下。

new URL で作った mailto リンク

IE を無視して良ければ URL でやるのが簡単。


ブラウザーの互換性 より引用

その他・メモ

Mailtolink.me | The Mailto Link Generator

最大長

ブラウザ、メールクライアントによって最大何文字まで使えるかが変わってくる模様。少し古いが以下ページが参考になる。
※あくまで簡単なテンプレ程度にとどめておいて、極端に長大な内容を詰め込むのはやめた方が良さそう。

firefox - MAILTO max-length of each internet browsers? - Stack Overflow

まとめ

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list