Yuna's Tedious Talk

日々思ったことをつらつらと書いてます。


HTMLエンティティ化

メールアドレスや掲示板へのリンク等、広告業者に拾われると困る情報。
メールアドレスはスパムメールが増える。
掲示板へのリンクを普通にしておくと、掲示板そのもののアドレスを
拾われてしまい、スパム書き込みの巣窟になったりします。

かといって、HPに載せるメールアドレスをアレンジして@を別の文字に
しておいて「●●を@に変えて送って下さいね」と注意書きしても、
見ている方への手間を取らせてしまうことになります。
画像にしても同じで、写し間違えちゃうこともあるかもしれません。

そんなときに便利なのがHTMLエンティティ化です。
たとえば「a」という言葉も、a、だけではなく数字でも表現できます。

「a」

これ、数値文字参照と言われている方法で記述したもの。aと書いてありますが

実際ソースを見てみると「a」という数字記号の組み合わせ。
(実際は半角英数字)
このように、アドレス系の文字を数値文字に変換するだけで、
自動収集プログラムからは拾われにくくなります。

そんなわけで参考にしたページがあったので、そのソースをもってきました。
著作権は作ってくださった広瀬行夫さんにあります。

HTMLエンティティ化

以下説明などの引用です。使い方わからない場合など参考になさってください。


説明
ホームページに公開するメールアドレスなどを広告業者に収集されるのを防止するためのソフトウエアです。WWWページに記載するメールアドレスなどをこのプログラムでエンティティコード(数値文字実体参照)に変換して書き換えてやれば、WWWページを実際に見ている人間には支障を与えることなく、メールアドレスなどが自動収集プログラムなどから見つかり難くなります。

使い方
変換したいメールアドレスなどを上側のフィールドに入力して「変換」ボタンをクリックすると下側のフィールドに変換されたテキストが表示されます。「検証」ボタンをクリックすると実際のWWWページ上で変換されたテキストがどう見えるかを新しいウィンドウ(注3)に表示します(注4)。そのウィンドウのソースをブラウザの機能で表示して比較してみるのもよいでしょう。

このページ単独で動作します。ブラウザの保存機能でこのページをローカルディスクに保存しておけばオフラインでも利用できます。

由来
本プログラムは嶌津信彦さんのVisualBasicプログラム「HTMLエンティティ生成」からヒントを得て、同様な機能をWindows以外のOSでも利用できるよう、JavaScriptで実装してみたものです(一部の機能は未実装です。実際に「HTMLエンティティ生成」を利用したことはないので、本当に同一の機能を再現しているかどうかは未検証です)。嶌津氏とは何の関係もありませんが、アイデアを下さったことに感謝します。

注意
  1. 16進形式のエンティティはHTML4.0対応ブラウザでないと正しく認識されない可能性が有ります。古いブラウザ(例えばNetscape Navigator 4.0、Netscape Communicator 4.7 など)にも対応させたい場合はエンティティ出力形式で10進を選択して下さい。
  2. 一部のブラウザではJavaScriptの実装が不完全だったり、不具合が有るかもしれません。あまりに古いブラウザ(Netscape のバージョン2など)では動作しないかもしれません。また、例えば Opera 6 では「入力文の半角スペース、タブ、改行を除去する」のチェックを外す必要があるかもしれません。
  3. ブラウザによってはJavaScriptが新しいウィンドウを作成するのを防止するように設定できるものがあります。そのように設定されている場合、検証ボタンは機能しません。
  4. 検証での表示はリンクになっていますが、リンクが機能するためには入力文中に mailto:、http://などのURLスキームが指定されている必要があります。


参考
  • どのように見つかり難くなるかの検証結果が嶌津氏のWWWページに掲載されています。
  • メールアドレスが記載されているWWWページ(例えばBBS)へのリンクをエンティティ化することによって間接的にアドレス収集を防止することも可能でしょう(効果のほどはわかりませんが)。
  • 世界中のWWWページでメールアドレスのエンティティ化が普及すれば、おそらく自動収集プログラムも対応してくることになるでしょうが、現在のところは普及していないようですし、少なくとも収集効率を落とす効果は有るでしょう。


こんな便利なモノが5年も前にあったとは。
もっともっと勉強が必要だなぁと感じた今日この頃です。
広瀬さんありがとうございました。
comments (0) | trackbacks (0) | edit

posted by 由奈



CSSハック。

センタリングレイアウトをすると、background-positionをcenter topにしても
中央にあるブロックがずれるのです。(IE6.0にて現象確認)

どういう事かというと…。



こういうコト。
センタリングのズレ

センタリングのズレ

背景に斜線をつかったものとかで、他の画像と重ねてドロップシャドウを
かけたりすると画像を部品化して組み合わせてページを作っていくことに
なるわけですが、画像を組み合わせてレイアウトしても、IEだと中央よせ
にした画像が、ウィンドウの大きさをかえたりするときにズレちゃうのです。
(上図のようなかんじで。)
Firefox,Opera,Safariだと普通なの、ちゃんと真ん中寄せになって、しっかり
背景とぴったり合うわけです。

なんでこうなるんだろーって思って調べてみたら、ようやく見つけました。

参考ソース

IEだとなぜか1pxズレてしまうらしいので、CSSに、IE用の記述を加えます。

*+html body{
padding:0 0 0 1px;
}
* html body {
padding:0 0 0 1px;
}

*+と、*と、htmlの前に記述するのがポイント。
もちろん、padding-left:1px;でもいいけど、私はpaddingなどの指定は
一括の方が好きなので…^^;

そんなわけで、リニューアル作業中のノビヨファンサイトのデザインも、
これでスッキリしたわけであります。
あとはデータを詰め込んでと…。

リニューアル作業は続きマス…。
comments (0) | trackbacks (0) | edit

posted by 由奈



これは便利。

スクリーンショット.JP
これで全部のブラウザを用意しなくてもWebページのデザインチェックが
可能になりますー。(無料版はスクリーンショットにロゴが入りますが)
周りからはどんな風に見えてるんだろう?と気になる方は、気軽に
チェックできますねぃ♪

ただ、結局は、見え方がヘンだった場合にはちょっとずつソース修正を
しながらその都度ブラウザチェックしちゃうので、結局はスクリーンショット
ではなく、ブラウザから見てしまう私なのでした。w
あと、実際の見え方もそうだけど動きも重要ダシネ…。

にしてもネスケ7.1の見え方がヘン…。Firefoxあるから油断してた…。
ってことで少しスタイルシートの修正とソースの修正をしておきました。
うぅむ、overflowタグもめんどくさい仕様になってますね。
IE基準で作っていくととんでもないことになりそうです。



※追記

今日は、ウィルちゃんの命日でした。
毎年来るこの日も、なんだか年月がたつにつれ、やはり薄れかけていく
感じがしますね…。
でも、いまでも忘れてはいません。これからも私の中で生き続けていくと思う。
comments (0) | trackbacks (0) | edit

posted by 由奈