WEBサイト上に、クリックするだけでメールを送信する機能をつけたい場合「mailto:」を使う方法があります。
今回はこの、「mailto:」の使い方ご紹介します。また、起動しない時の対処法や使う際の注意点も解説していきます。
目次
「mailto:」とは？
「mailto:」とは、HTMLタグのaタグとセットに使うことで、WEBページ上でメーラーを起動させることができるテクニックです。
<p>お問い合わせの際は、<a href="mailto:〇〇@gmail.com">〇〇@gmail.com</a>宛までご連絡ください。</p>お問い合わせの際は、〇〇@gmail.com宛までご連絡ください。
上記のように、aタグのhref属性に「mailto:メールアドレス」という形式で書くことで、メーラーが起動するようになります。このサンプルでは、「宛先」のみが既に入力された状態でメーラーが自動で起動します。
これ以外にも、起動した際「件名」「本文」等なども自動で設定できます。
書式サンプル
前述の通り、「mailto:」は、「件名」「本文」等が自動で入るような設定も可能ですので、サンプルをいくつか載せておきます。
件名（subject）
件名を入れたい場合は、「subject」を使います。
<a href="mailto:〇〇@gmail.com?subject=お問い合わせ">〇〇@gmail.com</a>カーボンコピー（cc）
ccをつけたい場合は、「cc」を使います。
<a href="mailto:〇〇@gmail.com?cc=〇〇@gmail.com">〇〇@gmail.com</a>ブラインドカーボンコピー（bcc）
bccをつけたい場合は、「bcc」を使います。
<a href="mailto:〇〇@gmail.com?bcc=〇〇@gmail.com">〇〇@gmail.com</a>本文（body）
本文を入力したい場合は、「body」を使います。具体的に記入してほしいことを記載したい際に便利です。
<a href="mailto:〇〇@gmail.com?body=お問い合わせ内容をご記入ください。">〇〇@gmail.com</a>改行（%0D%0A）
本文を改行したい場合は、「%0D%0A」を使います。
<a href="mailto:〇〇@gmail.com?body=お問い合わせ内容%0D%0A詳細">〇〇@gmail.com</a>複数項目を繋げる（&）
件名と本文、CCなど複数の項目を設定したい場合は、「&（&）」で繋ぎます。
<a href="mailto:〇〇@gmail.com?subject=件名&body=メールの本文&cc=〇〇@gmail.com">〇〇@gmail.com</a>起動しない時の対処法について
「mailto:」を使ったのに、メーラーが起動しない場合は、下記をご確認ください。
・ユーザー側の設定を確認
・単純にスペルミスがないか確認
ユーザー側の設定を確認
起動しない原因は、ユーザー側の設定が影響していることがほとんどです。
Windows、Macによって設定方法は異なりますが、デフォルトで、どのメールアドレスを使うのかは設定が必要です。
単純にスペルミスがないか確認
単純なスペルミスがないかも確認してみてください。
例えば「mailto」のスペルミスがないか、「:」を入れるのを忘れていないかをしっかりご確認ください。
注意点について
「mailto:」の使い方はご理解いたけたでしょうか？
実は、このテクニックは、あまり推奨されていないんです。理由は下記の通りです。
・スパムメールが確実に増えるから
・設定により、ユーザー側のメーラーが起動しないリスクがある
・文字化けを起こす可能性がある
スパムメールが確実に増えるから
このテクニックは、メールアドレスをネット上に公開しているようなものなので、アドレスがばれます。また、悪意のあるクローラーに収集されてしまうケースもあります。
※クローラーとは、特定の情報を収集して回るように作られたプログラムのこと。
設定により、ユーザー側のメーラーが起動しないリスクがある
設定により、ユーザー側のメーラーが起動しないリスクもあります。
これは、ユーザー側の問題になりますが、サイトの使い勝手が悪いという印象を与えてしまうかもしれませんので、注意が必要です。
文字化けを起こす可能性がある
こちらも、ユーザーが使う環境により左右されますが、すべての可能性に対応するのは極めて困難です。
「環境によりうまく動作しない場合があります。」的な注意書きがあった方が良いかもしれません。
まとめ
今回は、「mailto:」について使い方や、注意点等を執筆しました。
便利なテクニックではありますが、注意しなければならない点があることも頭に入れておいていただければと思います。
コメント