メールアドレスをリンク化し、クリックでメーラーを起動させることができる記述といえば、
<a href="mailto:メールアドレス">メールアドレス</a>
ですね。今回は、このaタグmailtoでメーラーを起動させた際に、件名や本文をデフォルトで設定する方法を学習します。
前提
そもそもの前提として、aタグのmailtoはあまり使わない方向で制作を進めていくほうが良いようです。
- メーラーが起動することを予測できないユーザーもいる
- 意図したメーラーを起動する方法がわからないユーザーもいる
- 迷惑メールの原因になりやすい
などの理由により、非推奨とされることがあります。
(ちなみに個人的にも、スマホはともかくPCでメーラーを起動されるのはあまり良くは思わないですね…汗)
クライアントから「アドレスクリックでメールを送れるようにしてくれ」というような指示がある時は別ですが、そうでない場合はメールフォームなどを作成するほうが一般的なようです。
それを前提に置き、それでもmailtoを使用する場合で、件名や本文をデフォルト表示させたいときは、mailtoアドレスの末尾にパラメーターを付与します。
mailtoに使えるパラメーター
パラメーターは
<a href="mailto:test@test.com?パラメーター値=表示させたい文字列">test@test.com</a>
のように入力します。
「件名」をデフォルトで指定
?subject=表示させたいメールの件名
「本文」をデフォルトで指定
?body=表示させたいメールの本文
日本語や改行を含む場合などはエンコードしよう
特に日本語や改行などを表示させる場合は、URL用にエンコードを行わないと文字化けを起こしてしまう可能性があります。
文字化けを起こしてしまうと、ユーザーにとって利用しにくい・できないものになってしまうので、必ずエンコードをするようにします。
エンコード例:
%E3%82%A8%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%89
これは「エンコード」と書いてあります(文字コード:UTF-8)。長っ!
エンコードをする際に便利なフォームがこちら。
URLエンコード・デコードフォーム
文字列を入力し「エンコードする」を押すと、文字をエンコードして表示してくれます。
日本語の件名と本文をデフォルト入力した状態でメーラーを起動させるには、以下のようにします。
(例)
<a href="mailto:test@test.com?subject=%E3%81%8A%E5%95%8F%E3%81%84%E5%90%88%E3%82%8F%E3%81%9B&body=%E2%97%8B%E2%97%8B%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E6%95%99%E3%81%88%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84%E3%80%82">お問い合わせ</a>
起動したメーラーでは、以下のように表示されます。
宛先:test@test.com
件名:お問い合わせ
本文:○○について教えてください。
実際に確認してみましょう!
お問い合わせ
※このメールアドレスはダミーです。メールは送らないようお願いいたします。
※エンコードの文字コードはUTF-8です。
まとめ
今回はaタグのmailtoに使える、件名や本文のデフォルト入力パラメータを学習しました。
mailtoを使用するにあたっては、非推奨とされる場合があることや、メーラーの環境によりエンコード結果に差が出ることなどに考慮する必要があります。そのうえで、もしも使う機会があれば、この記事を参考にしてみてください。
ここまで読んでいただき、ありがとうございました。
コメント