メールアドレスをリンク化し、クリックでメーラーを起動させることができる記述といえば、
<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を使用するにあたっては、非推奨とされる場合があることや、メーラーの環境によりエンコード結果に差が出ることなどに考慮する必要があります。そのうえで、もしも使う機会があれば、この記事を参考にしてみてください。
ここまで読んでいただき、ありがとうございました。
コメント