2009.02.10
mailto:リンクのメルアドをスパム避けのためにjQueryを使いながら処理してみる
javascriptライブラリである「jQuery」を業務でもよく利用しています。プログラムのことが分からないデザイナーでも、CSSのクラスを割り振るような感覚で手軽に動きや処理を行うことができます。
今回たまたま、お問い合わせフォームではなく、mailto:を使ったリンクをして欲しいという依頼がありました。実装するだけならあっという間なのですが、メールアドレスが公開され、スパムメールが届いてしまうことを考えた時に、何かしら処理を入れたいなと思い、素人ながらに処理らしいものを入れてみました。
javascriptを使っているので、OFFになっているときにどうするの？というツッコミが入りそうですが、そのあたりはスルーしてw、紹介してみようと思います。
1.jQueryと外部JSファイルの読み込み
jQueryと外部JSファイルの読み込ませるために、〜タグ内に以下のようなコードを追加します。
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2.6");</script>上記のコードは、googleが各JSライブラリの管理と提供をしてくれている「AJAX Libraries API – Google Code」というサイトから読み込ませるための記述です。基本的にファイルが消えることはないので最近よく利用しています。
<script type="text/javascript" src="js/jquery.user_code.js"></script>
上記のコードは、今回のmailto:リンクのメルアドをjQueryで処理するためのコードを書くファイルです。出来る限り外部化するようにしています。まとめるとこんな感じ。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>title</title>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2.6");</script>
<script type="text/javascript" src="js/jquery.user_code.js"></script>
</head>2.アスキーキーコード化
メールアドレスを隠す方法はたくさんあると思いますが、今回はアスキーコードに変換した方法を利用します。「アスキーコード変換」を使い、mailto:hoge@hoge.comの文字列をアスキーコード変換します。
- 変換前
-
mailto:hoge@hoge.com - アスキーコード変換後
-
mailto:hoge@hoge.com
3.アスキーコードをテキスト処理
アスキーコード処理した文字列ですが、「&#」と「;」は処理をしたいので、テキストエディタで処理を行います。具体的には以下のようになります。
- 「
&#」の文字列を一括置換で削除 - 「
;」の文字列を「,（カンマ）」に一括置換
- 変換前
-
mailto:hoge@hoge.com - 変換後
-
109,97,105,108,116,111,58,104,111,103,101,64,104,111,103,101,46,99,111,109
4.jQueryのコードに埋め込む
$(document).ready(function(){
$('.mailto_link').click(function(){
var str = String.fromCharCode(109,97,105,108,116,111,58,104,111,103,101,64,104,111,103,101,46,99,111,109);
$('.mailto_link').attr("href",str);
})
});おおざっぱな流れは
.mailto_linkのクラスを設定したaタグをクリックしたら- アスキーコードに変換した文字列を
String.fromCharCodeという命令？を使って普通の文字列にし .mailto_linkのhref属性に追加する
という流れになります。
5.htmlタグにクラスを割り振る
今回紹介したコードは、メールを送信したいaタグに対してクラスを割り振る必要があるため、以下のように該当するタグに以下のようなコードを追加します。
<a href="javascript:void(0);" class="mailto_link">お問い合わせ</a>href属性にあるjavascript:void(0);は、空っぽなのも変だし、#も微妙かな、と思い、記述しています。
上述したように、これらの処理はjavascriptをoffにしている人には使えない点が問題ありますが、offにしている人はあまりいないと思いますので、そのあたりは各自判断していただければと思います。
Tumblr
