バナー画像

mailtoとは?

mailtoとは、Webページ上でメールソフト(メーラー)を起動させるスキームのことです。

メールアドレスがリンクになっており、クリックするとメーラーが起動します。

あのリンクがmailtoスキームで設定されたリンクになっています。

mailtoの使い方・書き方

mailtoは、aタグのhrefに次のように記述します。

<a href="mailto:送信先メールアドレス"></a>

サンプルメールアドレスで動きを確認してみましょう。

<a href="mailto:potepan@sample.com">メーラーを起動します</a>

■実際のリンク

メーラーを起動します

上記のリンクをクリックすると、potepan@sample.com宛でメーラーが起動されるはずです。

※potepan@sample.comは架空のアドレスです。送っても届きませんのでご注意を。

 

では次に、mailtoを使ったアレンジ方法を次の7つ見ていきましょう。

  1. mailtoで本文・件名を入れる方法
  2. mailtoでCC・BCCを入れる方法
  3. mailtoで改行・半角スペースを入れる方法
  4. mailtoで複数の項目を指定する方法
  5. mailtoで複数の宛先に送る方法
  6. mailtoでGmail/Outlookを起動する方法
  7. MailtoUIで起動するメーラーを選択式にする方法

ひとつずつ解説します。

1.mailtoで本文・件名を入れる方法

mailtoで本文・件名を入れる方法は次の通りです。

▼件名

<a href="mailto:送信先メールアドレス?subject=件名">件名が入ります</a>

▼本文

<a href="mailto:送信先メールアドレス?body=本文のテキスト">本文が入ります</a>

それぞれ、送信先メールアドレスの後ろに「?」を付けます。

件名の場合は「subject」本文の場合は「body」を指定して、表示させたい内容を記載すればOKです。

2.mailtoで宛先・CC・BCCを入れる方法

mailtoでCC・BCCを入れる方法は次の通りです。

▼CC

<a href="mailto:送信先メールアドレス?cc=CC先メールアドレス">CCが入ります</a>

▼BCC

<a href="mailto:送信先メールアドレス?bcc=BCC先メールアドレス">BCCが入ります</a>

本文・件名と同様に、?の後ろに「cc」「bcc」を記述しましょう。

3.mailtoで改行・半角スペースを入れる方法

mailtoで改行・半角スペースを入れる方法は次の通りです。

▼改行

<a href="mailto:送信先メールアドレス?body=本文を入力%0D%0Aここで改行します">改行入りの本文が入ります</a>

▼半角スペース

<a href="mailto:送信先メールアドレス?body=本文を入力%20ここに半角スペースが入ります">BCCが入ります</a>

4.mailtoで複数の項目を指定する方法

ここまで紹介してきた要素(件名・CCなど)を複数指定するには、「&amp;(&)」で要素をつなげましょう。

サンプルで表示を確認してみます。

<a href="mailto:potepan@sample.com?subject=ポテパンと一緒にHTMLを学ぼう!&amp;body=ポテパンでHTMLのmailtoの使い方を見てみましょう。&amp;cc=pote@sample.com&amp;bcc=pan@sample.com">メーラーを起動します</a>

■実際のリンク

メーラーを起動します

5.mailtoで複数の宛先・CC・BCCに送る方法

mailtoで複数の宛先・CC・BCCに送りたい場合は、「,(カンマ)」でアドレスをつなげればOKです。

サンプルで表示を確認してみます。

<a href="mailto:potepan@sample.com,potepaninfo@sample.com?cc=pote@sample.com,poteinfo@sample.com&amp;bcc=pan@sample.com,paninfo@sample.com">メーラーを起動します</a>

■実際のリンク

メーラーを起動します

6.mailtoでGmail/Outlookを起動する方法

mailtoで起動するメーラーを「Gmail」や「Outlook」に変更したい場合もあるでしょう。

ここでは、mailtoでGmail/Outlookを起動する方法(Windows)を次のステップで解説します。

1.デフォルトアプリの設定を変更する
2.ハンドラの設定を変更する

基本的に1が設定できていれば、リンクをクリックした際に指定したメーラーが起動するはずです。

1で起動しない場合は2も設定してみてください。

では、順番に説明します。

1.デフォルトアプリの設定を変更する

①スタートアイコンから「設定」を選択し、「アプリ」をクリック

デフォルトアプリの設定を変更する

②検索ボックスで「メール」と検索し、「詳細オプション」をクリック

デフォルトアプリの設定を変更する

③「既定のアプリを設定する」をクリック

デフォルトアプリの設定を変更する

④メールの欄から任意のメーラーを選択

デフォルトアプリの設定を変更する

以上でデフォルトアプリの設定を変更できます。

2.ハンドラの設定を変更する

「Gmailを選んでいるのに、リンクをクリックしてもGmailが開かない…」

こんなふうになっている場合はハンドラの設定もしましょう。

①Chromeの「︙」から「設定」をクリック

ハンドラの設定を変更する

 

②プライバシーとセキュリティの「サイトの設定」をクリック
ハンドラの設定を変更する
③「ハンドラ」をクリック

ハンドラの設定を変更する

④メール欄を確認し状況にあわせて次の対応をします

ハンドラの設定を変更する

⑤Gmailを開きポップアップから「許可」をクリック

ハンドラの設定を変更する

これでGmailがデフォルトメーラーとして設定されているはずです。

mailtoのリンクをクリックしてGmailが起動すればちゃんと設定できています。

7.「MailtoUI」で起動するメーラーを選択式にする方法

ユーザーの設定によらず、起動するメーラーを選択させたい場合はMailtoUIを使うとよいです。

使い方はいたって簡単です。サイトにも書かているように、</body>タグの直前にCDNを記述します。

サンプルコードで動きを確認してみましょう。

<script src="https://cdn.jsdelivr.net/npm/mailtoui@1.0.2/dist/mailtoui-min.js"></script>

そしてaタグのclassに「mailtoui」を指定すればOKです。

サンプルコードで動きを確認してみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>MailtoUIを使ってみる</title>
</head>
<body>
  <a class="mailtoui" href="mailto:potepan@sample.com">メーラーを起動します</a>
  <script src="https://cdn.jsdelivr.net/npm/mailtoui@1.0.2/dist/mailtoui-min.js"></script>
</body>
</html>

次のようにメーラーの選択画面が表示されれば、MailtoUIが適用されています。

■表示確認

7.「MailtoUI」で起動するメーラーを選択式にする方法

mailtoで起動しない時は?

mailtoのリンクを選択してもメーラーが起動しない原因のほとんどは、「1.デフォルトアプリの設定を変更する」で紹介したデフォルトアプリの設定ができていないものによるでしょう。

また、Gmailの場合は「2.ハンドラの設定を変更する」の設定もあわせて確認してみてください。

mailtoは非推奨・危険性がある?

mailtoの使い方・書き方について解説してきましたが、実はmailtoの使用は非推奨です。

その理由には、次の5つが挙げられます。

  1. 利用ユーザのメール設定に依存する
  2. 文字化けする可能性がある
  3. スパムや迷惑メールの標的になる恐れがある
  4. ユーザビリティがいまいち
  5. SSLフォームで個人情報を扱うのが標準になってきている

ひとつずつ説明します。

1.利用ユーザのメール設定に依存する

メーラー設定を前述しましたが、利用者がメーラーを設定していないと起動しないこともあります。

また、スマートフォンやタブレットの使用も一般的になり、パソコンでメール確認することも減ってきているのが現状です。

2.文字化けする可能性がある

メーラーを無事起動できたとしても、文字コードが異なるために「文字化け」が起こる可能性も出てきます。

利用するメーラーにあわせて文字化け対策もできますが、すべてのメーラーにあわせて対策するのは面倒ですし非効率的ですよね…。

参考までに文字列のエンコードができるサイトを紹介します。

URLエンコード・デコード

3.スパムや迷惑メールの標的になる恐れがある

メール設置側のリスクとして、スパムや迷惑メールの標的になる恐れがあります。

毎日のようにスパム・迷惑メールが届くのは嫌ですよね…。

このようなリスクを避けるためにもmailtoの使用は非推奨といえます。

ただし、スパム対策・迷惑メール対策ができる「mailgo」という機能があるので、ここではmailgoについて少し紹介します。

「mailgo」でスパム・迷惑メール対策

mailgoもMailtoUI同様にタグの直前にCDNを記述します。

    <script src="https://unpkg.com/mailgo@0.6.7/dist/mailgo.min.js"></script>
</body>

mailgoにはCDNが2種類あるので、どちらを使ってもOKです。

迷惑メール対策としてaタグに次の3つを設定をします。

■サンプルコード

<a href="#mailgo" data-address="potepan" data-domain="sample.com">メーラーを起動します</a>

詳しくは「mailgoのInstallation」を参考にしてみるとよいでしょう。

4.ユーザビリティがいまいち

リンクテキストによっては「リンクだと思ってクリックしたのに、メーラーが起動した」などユーザビリティを損なう可能性もあります。

5.SSLフォームで個人情報を扱うのが標準になってきている

個人情報の取り扱いがより重視される中で、メールアドレスを悪意をもって取得・利用できてしまう可能性もmailtoにはあります。

SSLフォームで個人情報を扱うのが標準になってきているため、mailtoをあえて使う必要はないでしょう。

mailtoの代わりになる方法

mailtoの代わりになる方法は、CGIや無料メールフォームの利用が挙げられます。

ここでは詳しく解説しませんが、次のようなメールフォームがよく利用されています。

まとめ

HTMLのmailtoについて解説しました。

mailtoは比較的容易にメールの設定ができる反面、スパムなどの標的になりやすいといった危険性もあります。

mailtoを使う際は、ぜひこの記事を参考にしてください!

 

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。