7/8 スパム対策をしてメールアドレスを公開する方法 [ホームページ作成] All About

スパム対策6. フォームを使ってメールアドレスを掲載する方法

テキスト入力フォームを活用してメールアドレスを記載しておく方法もスパム対策になります。HTMLソース内にメールアドレスを直接記述するわけではないのに、メールアドレスをコピーしたりボタンクリックでメーラを起動したりできるため、利便性を損なわずに済みます。

メールアドレスをそのまま掲載するわけではないものの、JavaScriptを使ってメーラの起動を可能にしたフォームの例

メールアドレスのうち「@」記号の左右でテキスト入力欄を分割して表示しているため、ソースを読んでもメールアドレスだとは分かりにくくなっています。間に表示する「@」記号を画像にすればソース上では完全に分からなくなるため、さらに自動収集を防ぎやすくなるでしょう。

【このスパム対策の目次】

フォームを使ってメールアドレスを掲載するメリット・デメリット

■フォームを使ってメールアドレスを掲載するメリット
ボタンをクリックするだけでメーラを起動できますし、テキスト入力欄の中身をコピーすればメールアドレスをコピーすることもできます。自動収集プログラムがJavaScriptを実行した結果からメールアドレスを収集するタイプでも、メールアドレスが画面上に表示されるわけではないため、収集される可能性は低そうです。

■フォームを使ってメールアドレスを掲載するデメリット
メールアドレスをコピーしたいだけの場合は、2回に分けてコピーする必要があるので少し手間がかかります。また、JavaScriptが使えない環境ではメーラを起動する機能が使えません。もっとも、現在ではJavaScriptが使えない環境を考慮する必要性はあまりないので、この点はデメリットとは言えないでしょう。

フォームを使ってメールアドレスを掲載する書き方

メールアドレスのコピーやメーラの起動を実現するHTMLソースとJavaScriptソースは以下の通りです。HTMLソース計11行の内側に、JavaScriptソースも含んでいます。

■HTML・JavaScriptソース：

<form name="fm">
   <input type="text" name="e1" readonly value="example" onfocus="this.select(); document.execCommand('copy');">
   @
   <input type="text" name="e2" readonly value="example.com" onfocus="this.select(); document.execCommand('copy');">
   <script type="text/javascript">
      function ms() {
         location.href = "mailto:" + document.fm.e1.value + "@" + document.fm.e2.value;
      }
   </script>
   <input type="button" value="メーラで送信" onclick="ms();">
</form>

上記のソースは、メールアドレスとして「example@example.com」を使った例です。「@」記号の左右で分けて2つのinput要素(テキスト入力欄)に記述しています。実際に使う際には、太字で記載してあるメールアドレスの部分だけを修正して下さい。それ以外はそのままコピー＆ペーストするだけで使えます。

■表示・動作確認：
お使いのブラウザで動作を試してみたい場合は、サンプルページ「メールアドレスをフォームで表示する例」をご覧下さい。メールアドレスを分割して格納した2つのテキスト入力欄からコピーすることもできますし、「メーラで送信」ボタンをクリックして直接メーラを起動することもできます。

なお、先程のHTML＋JavaScriptソースの内容について、以下で簡単に解説しておきます。カスタマイズしたい場合にはご参照下さい。

テキスト入力欄の自動選択機能の作り方

メールアドレスを「@」記号の左右で分割して記述した2つのテキスト入力フォームには、以下の工夫を施しています。

閲覧者が文字列をコピーしやすいよう、テキストフォーム内をクリックするだけで全体が選択されてクリップボードにコピーされるように作成しています。
テキストフォームの中身を誤って書き換えてしまわないよう、編集できない状態にしてあります。

■1. テキストフォーム内をクリックするだけで全体を範囲選択してコピー
テキストフォームを作るinputタグの中に書いた「onfocus="this.select();"」の記述によって、「テキストフォームがクリックされた際に中身の全体を範囲選択する」という処理が行われます。詳しくは、記事「コピーさせたい文字列をコピーしやすくする」もご参照下さい。

さらに続く「document.execCommand('copy');」の記述によって、「いま範囲選択されている内容をクリップボードにコピーする」という処理が行われます。これによって、閲覧者はわざわざコピー操作をする必要がなくなります。特にモバイル端末では操作が面倒なので、手間を省けるでしょう。

ただし「クリップボードにコピーされた」という事実は見ただけでは分からないため、「クリックするだけでコピーされますよ」という案内は併記しておく必要があるでしょう。

■2. テキストフォームの中身を編集できない状態にする
input要素で作るテキスト入力欄は、readonly属性を加えると読み取り専用状態で表示されます。これによって、ユーザが誤ってキーボードに触れたとしても中身は書き換わりません。

コピー＆ペーストを不要にする「メールを送信」ボタンの作り方

テキスト入力フォームの横にある「メールを送信」ボタンをクリックすると、メールアドレスがメーラに渡されます。たいていの環境では、このメールアドレスを宛先にした新規メール作成画面が開くでしょう。このボタンを用意しておけば、わざわざメールアドレスをコピー＆ペーストすることなくメールを送信可能なので便利です。

この機能は、JavaScriptで下記の2つの処理を実行することで実現しています。

■処理1. メールアドレスを生成する
テキスト入力フォーム2つに書かれた文字列を「@」記号で結合することでメールアドレスを生成しています。先のHTMLソースでは、form要素には「name="fm"」という記述で「fm」という名称を付加しています。2つあるinput要素には「name="e1"」と「name="e2"」という記述でそれぞれ「e1」と「e2」という名称を付加しています。

この場合、JavaScriptで「document.fm.e1.value」と書けば、フォーム「fm」に含まれる入力欄「e1」の中身が得られます。したがって、下記のように書くことで2つのテキストフォームの中身を「@」記号で結合してメールアドレスの形にできます。

document.fm.e1.value + "@" + document.fm.e2.value

■処理2. メーラにメールアドレスを渡す
ブラウザのアドレス欄に直接「mailto:example@example.com」などと入力すれば、たいていの環境ではメーラが起動します。これと同じことをJavaScriptで実行しているだけです。

先程の処理1で作成したメールアドレスの先頭に「mailto:」という7文字を加えてから、それをURLとしてブラウザに渡します。指定のURLへ移動させるには、location.hrefプロパティにURLを代入すれば良いだけですから、それと同じ方法を使って「mailto:」で始まるメールアドレスを渡せば、メールアドレスへのリンクをクリックした際と同じ状況を作れます。

location.href = "mailto:" + document.fm.e1.value + "@" + document.fm.e2.value;

上記の処理を「メールを送信」ボタンがクリックされた際に実行するよう書けば、メーラを起動する機能になります。

JavaScriptソースに「mailto:」の文字も含めないようにする方法

この方法ではJavaScriptソース内に「mailto:」の文字列が含まれるので、その直後にメールアドレスを生成していることは容易に判明します。その点が気になるなら、前ページの「スパム対策5. JavaScriptでメールリンクを生成する方法」でご紹介したASCIIコードを使う方法を併用すると良いでしょう。

具体的には「"mailto:"」の部分を「String.fromCharCode(109,97,105,108,116,111,58)」に置き換えて、以下のように記述します。

location.href = String.fromCharCode(109,97,105,108,116,111,58) + document.fm.e1.value + "@" + document.fm.e2.value;

これなら、JavaScriptソースの中に「mailto:」の文字列も出てこなくなります。

最後に、メール送信フリーCGI・PHPを使う方法をご紹介いたします。

前のページへ

次のページへ

スパム対策をしてメールアドレスを公開する方法(7ページ目)