shikaの雑記ブログ

web系エンジニアの雑記ブログ

技術

jsでメール本文の初期値を設定

投稿日:

メールリンクをクリックしてメーラーを起動した際に、
メール件名や本文、BCCが初期値として入力させるには

<a href="mailto:mail@sample.com?bcc=test@sample.com&subject=【メール件名】〇〇について&body=メール本文">パンフレット請求メールを送る</a>

のように、?&で繋いでいく必要がありますが、
メールフォームなどで送信先がページによって変わる際にも
全ページに固定の件名や本文などを追加していくために、共通のJavaScriptで自動挿入する方法をまとめました。

<div class="mail-link">
  <a href="mailto:mail@sample.com">メールを送る</a>
</div>

このようなメールリンクに対し、下記のように固定でBCCの宛先・件名・メール本文を挿入します。
メール本文はデータ型で区切り、改行コードを差し込んでいます。

$(function(){
    var mailLink = $('.mail-link a');

    var lineFeed = "\r\n";
    // BCC
    var bcc = 'test@sample.com';
    // 件名
    var subject = '【メール件名】〇〇について';
    // 本文
    var body = [
            'お名前:',
            '電話番号:',
            '郵便番号:',
            'ご住所:',
            'その他連絡事項:'
    ];

    var mailto = mailLink.attr('href');
            mailto += '?bcc=' + bcc;
            mailto += '&subject=' + subject;
            mailto += '&body=' + body.join(encodeURIComponent(lineFeed));

    mailLink.attr('href', mailto);
});

このメールリンクをクリックすると…

出ました! このようなメールが生成されます。

このように、メール内容を複数ページで一括管理したい時などに有効です。

-技術
-

執筆者:


  1. 中島  より:

    お忙しい中失礼いたします。
    メールリンク(mailto)のことについて、一点伺いたいことがあります。メールフォールからコメントをした場合、相手方のwebサーバーとやり取りすることになるため端末情報やIPアドレス等の所謂足跡がログ等に残ると思うのですが、メールリンクからコメントや問い合わせを送った場合、送信者に悟られない形でこちらの端末情報やIPアドレス情報がwebサーバーの管理者に伝わるようにスクリプトが組まれている可能性ってあるでしょうか?それとも、あらかじめ本文にこちらの端末情報等が記載される仕組みでなければ、mailtoはwebサーバーを介さないので、こちらのメアド以外何も伝わらないのでしょうか?
    長文申し訳ございません。m(__)m

    • shika より:

      中島さま

      お問い合わせいただき誠にありがとうございます。
      ご質問につきまして回答させていただきます。

      > 送信者に悟られない形でこちらの端末情報やIPアドレス情報がwebサーバーの管理者に伝わるようにスクリプトが組まれている可能性ってあるでしょうか?
      はい。IPアドレスなどクライアント側の情報の取得は基本的にはサーバ側(PHPなど)の役目ですが、
      JavaScriptでもクライアント側のIPアドレスを取得する手段もあります。

      代表的なものに「ipinfo.io」(https://ipinfo.io/) というwebサービスがあり、
      例えばこれを仕込んでおいて
      1. メールリンクのあるページを開いたユーザのIPアドレスを取得
      2. 1.の取得結果をmailtoのhrefに持たせる
      などすれば、IPアドレスを傍受することも可能かと思います。

      「送信者に悟られない形で」をJavaScriptのみで実現するのは難しいですが、
      例えなのですがsubjectの中に意味のない文字列(一見、URLか乱数のように見える長文字列)の中に
      IPアドレスを忍ばせたりすると、
      長すぎるメール件名は後半部分が見切れて送信者には見落としやすい形で
      送らせたりできるでしょうか。

      以上、ご質問の趣旨に即していますでしょうか?
      ご一読いただけますと幸いです。

      ブログ管理者 shika

  2. 中島 より:

    お忙しい中返信いただき誠にありがとうございます。m(__)m
    やはりwebサーバーを介さずにメールを送るとなると送信元の情報の取得にも限界があるのですね。迷惑メール防止の観点からも近年mailtoではなくメールフォームが主流になってきている理由が分かった気がします。

    つまりはサーバー側で「あらかじめ知りたい内容(この場合はIPアドレス)をどこかに記載させた形の問い合わせメール」を送信者に送らせるようにするようスクリプトを組むことができるということですね。
    従って、注意深く見れば、送信者からも「このメール送ったら自分のIP相手に筒抜けじゃないか!だってメールの中に書いてあるし!」と確認できるということでしょうか。その場合自分で個人情報を消してからメールを送ればよさそうですね(返信はもらえないかもしれないですが)

    最後にお時間よろしければ上記の私の理解で合っているか返信いただければ幸いです。
    大変な長文となってしまい申し訳ありません。
    私の知りたい内容について的確な回答をいただき大変参考になりましたm(__)m

    • shika より:

      中島さま

      > 従って、注意深く見れば、送信者からも「このメール送ったら自分のIP相手に筒抜けじゃないか!だってメールの中に書いてあるし!」と確認できるということでしょうか。その場合自分で個人情報を消してからメールを送ればよさそうですね(返信はもらえないかもしれないですが)
      はい、私からの回答は仰っている通りです。

      送信者サイドだけでなく受信者(フォーム設置者)サイドとしても、送信先となるメールアドレスを公開することでスパムメールの対象にされ得るので、フォームの送信先を知らせなくて良いwebフォームの方が安全、ということですね。

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


関連記事

クロスドメイン制約を回避するChromeショートカットを作る

No 'Access-Control-Allow-Origin' header is present on the requested resource. のエラーのせいでドメイン …

jQueryにてリンク先のドメインを一括置換

htmlのaタグ内に設定された特定のドメイン部分のみを、 開発サーバなど別環境に設置されている時にはその時のドメインに後から置換する、という処理を要求されたので locationやreplaceやRe …

2重線が重なり合うスタイルを組むには(No 画像, Yes CSS!)

この画像のように、2重線が少しズレて重なっている枠線の実装に迫られましたが、 通常のborderとbox-shadowを少しずつずらせばcssのみで実現できました。 画像も疑似要素も使用してませんよ! …

住所と緯度経度を教えてくれるChatbot作った

G suiteアカウント向けにリリースされたHangouts Chatでは、誰でも簡単にbotが作れちゃうとか。 せっかくなんで何か社内業務に課題でもないかガサ入れしていたら、 「ある施設の緯度と経度 …

schtasks.exe – コマンドを時刻指定して実行する

1日の業務の中で決まった時刻に特定のコマンドを実行したい場合には、タスクスケジューラで登録すると便利です。 手順と概略 Windowsではタスクスケジューラとして schtasks.exe が用意され …