JSでクリップボードへコピー～ホムペ・ブログの問い合わせ先メアドが迷惑メールの標的に…

迷惑ボットに収集される問い合わせメールアドレス

大昔からのホムペ運営者の悩み事「問い合わせ先に書いたメールアドレスに大量の迷惑メール」。

それを回避するため、＠だけをカタカナにしたり、←こんな画像準備して閲覧者に手動入力してもらったり。なんでゴミスパムのために閲覧者に負荷を与えにゃならんのだ。

それでうちがやってたのがメアド各部分を分解し表中に並べ、間に架空のドメインを挟みそれを非表示としたもの。

<table style="width:50%;">
<tbody>
<tr>
<td style="text-align:right;vertical-align:middle;">poku_blog</td>
<td style="width:0px;display:none;">sagi-mail.gekitai.com</td>
<td style="text-align:center;vertical-align:middle;">@</td>
<td style="width:0px;display:none;">meiwaku.anchibot.com.jp</td>
<td style="text-align:left;vertical-align:middle;">yahoo.co.jp</td>
</tr>
</tbody></table>

8年こーやってて迷惑メールが1通も届いてないのがジマン。でもコピーしてみると分かりますが、これでも＠前後に無駄な空白が入ってしまいます。

なので、コピー後、閲覧者にその空白を削除してもらう必要があります。なんで閲覧者に負荷を与えにゃならんのだ。

閲覧者が編集しなくてよい問い合わせメールアドレス

それで今回作ったのがこれ。ボタンを押すと連絡先がクリップボードにコピーされます。

ボタンを押した後、テキストファイルか何かに貼り付けしてみて下さい。ポク太郎のメアドが表示される筈。

問い合わせページにこのボタンを設置しておけば、スパムボットに気付かれずに閲覧者にメールアドレスを知らせられます。

まぁ、JavaScriptを許可してない閲覧者も居ることは居ますが、統計的に2％程度。そんな少数派の方向けにJavaScript有り無しで表示の仕方を変えるのも手ですが、今は時間が無いのでこれで。

<div style="text-align:center;">
<button id="b_copy" style="font-size:20px;width:250px;height:150px;">連絡先をコピーする</button>
<div id="madd"></div></div>

次にJavaScript側。

document.getElementById('madd').style.display = '';
document.querySelector('#b_copy').addEventListener('click', copy_madd);

function copy_madd() {
  var id = 'sample_id';//←ここをご自身のIDに変えてね。
  var at = '@';
  var dm = 'sample.co.jp';//←ここをご自身のドメインに変えてね。

  var str = id + at + dm;
  if(navigator.clipboard){
    navigator.clipboard.writeText(str);
    document.getElementById('madd').style.color = 'red';
    document.getElementById('madd').innerHTML = '連絡先をコピーしました！' + '<br />' +  'メールソフトの宛て先に貼り付けて下さい。';
  }
}

JavaScriptが動く環境なら無料ブログでも可能。Blogger・はてな・LiveDoorブログ・Seesaaは当然問題なく使えます。

ただし、JavaScriptを設置する場所によっては、先頭と最後を<script type=”text/javascript”></script>タグで囲むなどの注意は必要です。

貼り付け場所・前後のタグの付け方は、無関係な話題のこちらの記事で説明してるので参考にしてね→記事内目次を自動で無料ブログに追加するJavaScript。

不親切だけど今時間が無いのであしからず。