IDA Life Blog

HOME  >  勉強
カテゴリー : 勉強 - プログラミング
•JavaScript •お問い合わせ •メールアドレス •ブログ運営
公開日: 2023-11-24
最終更新日: 2024-04-28

分解されたメールアドレスを組み立てて表示する【JavaScript】

img_4

私はこのホームページを管理していますが、訪問者（ユーザー : 閲覧者）からの問い合わせを受け付けるために、お問い合わせ用のメールアドレスを掲載しています。お問い合わせを受け付ける方法として、お問い合わせ用のメールアドレスを公開する方法があります。ただし、メールアドレスをそのまま掲載すると、インターネット上でそのメールアドレスが収集されて、迷惑メール（スパムメール）が送られてくる原因になりうるそうです。そこで、メールアドレスは最初は非表示にしておいて、リンクをクリックすることでメールアドレスがはじめて表示されるようにしてみます。これには JavaScript を利用します。

Contents
• 経緯
• プログラムにメールアドレスを読み取らせないための、一般的な対策
◦ 画像にする、または一部を別の記号に書き換えて掲載する
◦ 専用のメールフォームを設ける
• JavaScriptを使う方法
◦ サンプルコード
◦ サンプルコード解説
• サンプルコードの改良
• まとめ

ブログにメールアドレスをそのまま掲載しておくと、スパムメールの対象にされてしまうリスクが高くなるようです。そのため、当ブログでも、メールアドレスをそのまま掲載する以外の方法を検討する必要があると思いました。

メールアドレスをそのまま載せておくと、そのまま読み取ることができるため、メールアドレスを収集するプログラムによって、収集されやすいかもしれません。

簡単に収集されないようにするために、メールアドレスの文字列を画像にすることが有効かもしれません。画像なら、テキストデータではないので、プログラムは簡単にメールアドレスを読み取ることができないからです。

または、アット―マーク（@）を別の記号で書いておいて、ユーザーにそれをアットマークに読み替えてもらう方法もあります。以下に例を示します。

お問い合わせは、abcde＝mail.idayos.com までお願いいたします。
※「＝」を「@」に読み替えてください。

お問い合わせ用の、専用のメールフォームを設ける方法があります。この方法は、管理者はメールアドレスを公開する必要がありません。現在のWebページでよく見られる方法ですが、メールアドレスを掲載する方法に比べて仕組みが複雑なので、管理者にとってはページのメンテナンスが煩雑になるのが難点です。

ここでは、分解されたメールアドレスを組み立てて表示する方法を考えます。プログラムは JavaScript を使用します。ここでは、説明のためのメールアドレスとして「sample@mail.idayos.com」という架空のメールアドレスを使用します。

[sample1.html]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"/>

<script>

function OnLinkClick() {
  let a = 'sample';
  let b = '@';
  let c = 'mail.';
  let d = 'idayos.com';
  let mailTo = a + b + c + d;
  
  console.log(mailTo);
}
  
</script>

</head>

<body>

<p>お問い合わせは、以下のメールアドレス宛にお願いいたします。</p>
<a href="javascript:void(0);" onclick="OnLinkClick();">問い合わせ先を表示する</a>

</body>
</html>

#sample1.htmlをブラウザで開くと、以下のように表示されます。

「問い合わせ先を表示する。」

[ 画像1. ブラウザの表示 ]

 

画面の「問い合わせ先を表示する。」をクリックすると、コンソールには以下のように表示されます。(メールアドレスは黄色マーカーでハイライトしました。)

コンソールに表示されたメールアドレス

[ 画像2. コンソールにメールアドレスが表示された. ]

 

#sample1.htmlの OnLinkClick() の中には、メールアドレスの断片が変数として格納されています。let mailTo = a + b + c + d; という記述で変数を連結し、メールアドレスを1つの文字列に完成させています。完成したメールアドレスを、console.log() でコンソールに表示させています。

#sample1.html は、コンソールにメールアドレスを表示しますが、ページの本文には表示しません。ユーザーが使うには、ページ本文に表示する必要があります。そこで、コードを改良します。次のコードは#sample1.html を改良したものです。

[sample2.html]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"/>

<script>

function OnLinkClick() {
  let a = 'sample';
  let b = '@';
  let c = 'mail.';
  let d = 'idayos.com';
  let mailTo = a + b + c + d;
  
  console.log(mailTo);
  
  let elem1 = document.getElementById('dispAddress');
  let elem2 = document.getElementById('inqAddress');
  elem1.style.display = 'none';
  elem2.innerText = mailTo;
}
  
</script>

</head>

<body>

<p>お問い合わせは、以下のメールアドレス宛にお願いいたします。</p>
<a href="javascript:void(0);" onclick="OnLinkClick()"; id="dispAddress">お問い合わせ先を表示する。</a>

<p id="inqAddress"></p>

</body>
</html>

このコードの黄色くハイライトした部分は、#sample1.html に追記した部分となります。このコードでは、「お問い合わせ先を表示する。」をクリックすると、以下のように表示されます。

本文に表示されたメールアドレス

[ 画像3. 本文にメールアドレスが表示された. ]

 

#sample2.htmlは、リンクをクリックすると JavaScript が実行されるようになっています。このやり方は、以下のサイトを参考にしました。

参考：
"リンクのクリック時にJavaScriptを実行する - リンクのonClickの実装 : JavaScript プログラミング | iPentec". www.ipentec.com.

この記事では、JavaScript を利用して、「お問い合わせ先を表示する。」をクリックしたタイミングでメールアドレスを表示するコードを書いてみました。この方法は、メールアドレスをそのままHTMLの中に書いておく方法に比べて、迷惑メールのためのプログラムに収集される可能性は低いと思います。メールアドレスはJavaScriptの中でバラバラに存在するため、ページを開いただけではメールアドレスを読み取ることができないからです。ただし、JavaScriptを実行すればメールアドレスを読み取ることはできるので、収集を完全に防ぐことはできないと思われます。