【HTML】リンクから件名や定型文を入れてメールソフト起動する方法
「Webシステム内からクリック一つで、顧客宛にメールソフトを起動してほしい」という要望がありました。
通常、サイトの表側ではフォームを用意する事が多いかと思いますが、今回はサイトの管理画面側のお話。
最近はメールアプリもクラウドが充実して、Outlookなどのメーラーを使用する方がめっきり減った印象ですよね。
ただ顧客によってはそういった、昔から慣れ親しんだメールソフトで問い合わせ対応などの連絡をしたいというようなご要望も健在です。
実装自体はaタグだけで簡単なもので済みます。
ですが今回は少し一捻りとして、定型のテンプレート文が入った状態でのメーラー起動という仕様で実装しましたので、解説していきたいと思います。
メーラー起動はaタグhrefにmailto
これは過去、ブラウジング中にリンクを踏んで想定外にメーラーが起動する事で覚えた気がします。
個人的にこれまであまりメーラーを利用しておらず、なるべくそういったメーラー起動の可能性があるリンクはURLがどうなっているか注意して確認していたからです。
実装その１：aタグのhref属性に「mailto:(メールアドレス)」を指定
まずシンプルな宛先が入った状態でのメーラー起動の実際のタグは以下のようになります。
<a href="mailto:test@test.com">メールソフト起動リンク</a>
宛先のメールアドレスをリンクのアドレスとして「mailto:」に続けて入力するだけです。
これだけで宛先が入力済の新規メール作成として、Outlook等のWindows/Macの標準のメールソフトが起ち上がります。
実装その2：複数の宛先指定にはカンマ区切り
<a href="mailto:test@test.com,test2@test.com">メールソフト起動リンク</a>
カンマを入れて複数のアドレスを指定する事が出来ます。スペースなど入れないように注意しましょう。
実装その3：件名や本文も「?」以降に「subject=件名」や「body=本文」を「&」で繋げる
<a href="mailto:test@test.com?subject=Kenmei&body=Honbun">メールソフト起動リンク</a>
フォームのGETメソッドで遷移されるURLのような形ですね。
日本語や記号の文字化け、改行の文字コード対応
bodyの本文では文字コードの問題もあるので注意が必要です。
記号や改行には以下のようなコードが使用されます。
- 改行する際には、「%0D%0A」を指定
- 半角スペースを空けるには「%20」を指定
- ?には「%3F」を指定
最近のメーラーでは問題なさそうですが、少し古めの環境でメールソフトお使いの方などは日本語や記号全般に文字化けが起こったりする可能性もあります。
文字化けを避けるためには以下の文字列エンコードが可能なサイトなどを利用して変換をしておきましょう。
URLエンコード・デコード｜日本語URLをサクッと変換 | すぐに使える便利なWEBツール | Tech-Unlimited
実装その4：Cc、Bcc追加には「?」以降に「cc=アドレス」や「bcc=アドレス」を「&」で繋げる
<a href="mailto:test@test.com?cc=test3@test.com&bcc=test4@test.com">メールソフト起動リンク</a>
CcやBccの同報メールにも、メールアドレスの指定の末尾に「?」をつけて、以降に「cc=アドレス&bcc=アドレス」という形でつなげて書きます。
件名や本文と同じ形なので、同時に全て指定した場合は
「test@test.com?cc=test3@test.com&bcc=test4@test.com&subject=kenmei&body=honbun」
というようなリンク指定になります。
?以降については&で繋げていれば順不同です。
実際の実装結果と表示例
こちらがCC/BCCと、件名/本文を入力済の状態でのメールソフト起動リンクの実装例です。実際クリックして頂くと、お使いの環境での標準メーラーが起動するかと思います。
実際僕の使っているWindows10で上記のリンクを踏むとこんな感じにメーラー起動されます。↓
他のメールやアドレスが映らないよう一部範囲しか映してませんが、ちゃんと文字化けもなくテンプレートつきで標準メールソフトが起動してるのがご確認頂けるかと思います。
リンクにちょっと追加するだけで定型文メール起動が出来て簡単
最近ではめっきりこういったリンクでメーラー起動するようなサイトは見かけなくなりましたが、需要も一定数はありそうなので調べた内容について記載してみました。
是非ご参考いただければ幸いです。
最後までお読みいただいてありがとうございました！
リンク
