問題 × 解決策

メールアドレスを直接入力せず、Javascriptで安全に表示させる

問題

メールアドレスを、スパムの標的になりづらい安全な方法で表示するには?

解決策

メールアドレスを別の文字列に変換してくれるサービスで変換し、それを使用して表示します。

はじめに

メールアドレスを直接表示してしまうと、スパムなど、悪意の標的になる危険性があります。
なのでメールアドレスを別の文字列に変換してくれるサービスを使って、安全に表示させる方法をご紹介します。

メールアドレスを別の文字列に変換してくれるサービス

まず、このサービスにアクセスして、表示させたいメールアドレスを入力し、生成ボタンをクリックします。

するとこのようなソースを表示してくれます。

function secretaddress() {
var ma = String.fromCharCode( メールアドレスの変換コード );
var mt = String.fromCharCode( mailto:の変換コード );
document.write('<a href="'+ mt + ma + '">' + ma + '</a>');
}

今回の方法では、4行目のdocument.writeの部分は使用せず、jQueryのhtmlを使って表示させます。

表示用のjsファイルの作成

新規でjsファイルを作成し、先ほどのソースをコピー&ペーストして、少しソースをいじります。

表示用のクラスを決めておき、そのクラスが存在すればメールアドレスのリンクを表示するというスクリプトになります。

  • 今回は便宜上、maillinkという表示用クラスを設けておき、さらにサブとしてクラスを設けることで、サブのクラスによって表示するメールアドレスを変えられるようにしています。
$(function(){ 
// DEFAULT 
var ma = String.fromCharCode(メールアドレスの変換コード ); 
var mt = String.fromCharCode(mailto:の変換コード ); 
if($('.maillink.default').length){ // classにmaillinkとdefaultを持つ要素が存在するならば 
// classにmaillinkとdefaultを持つ要素内に、メールアドレスのリンクを挿入 
$('.maillink.default').html('<a href="'+ mt + ma + '">' + ma + '</a>'); 
}; 
});

マークアップを行います。

マークアップはいたってシンプルです。
上記のmaillinkとdefaultをクラスとして設定すれば完了です。

<p>
<span class=“maillink default”>メールアドレス</span>
</p>

コメント

コメントを残す

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

one + 8 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧