【HTML】mailtoでメールを送る方法・設定方法を画像付きで解説!
  • facebookページ
  • twitterページ
  • 2020.03.16

    【HTML】mailtoでメールを送る方法・設定方法を画像付きで解説!

    mailtoとは?

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

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

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

    mailtoの使い方・書き方

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

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

    ■実際のリンク

    メーラーを起動します

    上記のリンクをクリックすると、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で本文・件名を入れる方法は次の通りです。

    ▼件名

    ▼本文

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

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

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

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

    ▼CC

    ▼BCC

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

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

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

    ▼改行

    ▼半角スペース

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

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

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

    ■実際のリンク

    メーラーを起動します

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

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

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

    ■実際のリンク

    メーラーを起動します

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

     

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

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

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

    • 何もない→Gmailを開きます
    • Gmailが既定になっていない→「︙」から「デフォルトとして設定」をクリック
    • Gmailが既定になっている→「︙」から「削除」をクリック

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

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

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

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

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

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

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

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

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

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

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

    次のようにメーラーの選択画面が表示されれば、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を記述します。

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

    • https://unpkg.com/mailgo@0.6.7/dist/mailgo.min.js
    • https://cdn.jsdelivr.net/npm/mailgo@0.6.7/dist/mailgo.min.js

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

    • href:#mailgo
    • data-address:@より前のメールアドレス
    • data-domain :@より後ろのメールアドレス

    ■サンプルコード

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

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

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

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

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

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

    mailtoの代わりになる方法

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

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

    • Googleフォーム
    • form run
    • Tayori
    • オレンジフォーム
    • mailformpro

    まとめ

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

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

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

     



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE