2013年1月 : してログ

見つけたフォームに片っ端からコメントスパムを投稿していくロボットへの対策ですが、単純な対策でかなり効果がありました。この手のスパムコメントは、ほとんど英文のやつで放っておくとすぐに、もの凄い数に上ってしまいます。

ロボットは、見つけたフォーム要素の種類(type="text" など)と名前(name="email" など)を頼りに書き込みを行います。そこで、ダミーの入力欄を設けてロボットを騙してやればロボットかどうか判定できると考えました。最初は、名前を日本語ローマ字(name="namae" とか)にしてみましたが、これは効果がありません。最終的に、非表示のフォーム要素を使う方法が、大いに効果ありました。

<input type="text" name="name" style="display:none;" />

このように、ブラウザに表示されないダミーのテキスト入力欄を設けます。このフォームの受け取り側では、この要素が空の場合のみ正しい処理をするようにします。たったこれだけですが、今のところロボットはうまく騙されてくれているようです。

正規表現で html を処理する下記のようなコード、一行コメントアウト(ダブルスラッシュ)でコメントアウトすると致命的なエラーになります。これ、何故だか分かりますか? 私はこれで小一時間ほど、悶々としていました。

preg_match('/<a.+?>(.+?)<\/a>/su',$html,$match);

これは一行コメントアウトが、それを書いた場所から改行コードまでをコメントアウトするもの、という認識でいる限り分かりません。正しくは「改行コードまたは PHP コードブロックの終わり」までをコメントアウトするもの(こちらのマニュアル参照)です。PHP コードブロックの終わりとは、すなわち「?>」のことであり、上記の正規表現内に文字の並びとして現れています。

結果、行末までのコメントアウトとならず、途中で PHP コードブロックから外れて直接ソースコードが出力されるばかりか、致命的な構文エラーの原因となってしまいます。このようなコードをコメントアウトしたい場合は、複数行コメント(「/*」と「*/」)で囲みます。

特に、今回のような html を処理する場合の正規表現式で出てきそうな、この形は注意したいところです。

Windows サーバーにリモートデスクトップ接続で作業しているときに、ネットワーク障害などで異常切断されてしまうと、今まで作業していたデスクトップに再接続できなくなることがあります。これは、今までの接続がゾンビになって裏で動いており、再接続で新しいデスクトップが生成されるためです。前のデスクトップでバッチ処理していたり、未保存のファイルがあるときに陥ると焦りますが、回復させる方法があります。

ゾンビ接続の回復方法
  1. 再接続して新しいデスクトップを開きます
  2. タスクマネージャーからユーザーのタブを開きます
  3. ゾンビになった接続と、再接続した接続のユーザーが表示されます
  4. ゾンビになった接続を選択し「切断」ボタンを押します
  5. 再接続したほうは、ログオフします
  6. もう一度、再接続すると、ゾンビになったほうに再接続されます
参考:タスクマネージャ

ゾンビを切断する際に誤って「ログオフ」を選んでしまうと、水の泡となりますので気をつけてください。また、どちらのユーザーか分かりにくいですが、上の方がゾンビと思って間違いないと思います。もし、違う方を切断してしまっても、自分の接続が切れるだけなので心配は要りません。

嘘だろ~、っと半信半疑で覗いたら、ほんとでした。本家アドビの CS2 ダウンロードページに、シリアル番号と一緒に公開されています。利用にはアドビにユーザー登録が必要ですが、誰でも登録可能なので本来数十万円するような高価なソフトウェアが(旧バージョンとはいえ)無料で利用可能となっています。アドビはオラクルと並んであんまり好きじゃなかったんですが、これで一気にファンになってしまいました。

ただし、記載をよく読んでみると「既存の正規ライセンスを所有されている」人が対象のようです。アクティベーションサーバーの停止により利用できなくなるユーザーへの救済措置らしいです。が。

Adobe - CS2ダウンロード
http://www.adobe.com/jp/downloads/cs2_downloads/index.html
無料で使えるソフトウェア達
  • Creative Suite 2
  • Acrobat 3D 1.0 for Windows
  • Acrobat Standard 7.0
  • Acrobat Pro 8.0
  • Audition 3.0
  • GoLive CS2
  • Illustrator CS2
  • InCopy CS2
  • InDesign CS2
  • Photoshop CS2
  • Photoshop Elements 4.0/5.0
  • Adobe Premiere Pro 2.0

Google Maps API V3 のマーカーに追加になった、size と origin を使うと、大きい画像の一部分をアイコン画像として使うことができるようです。メリットとしては、サーバーとの通信を減らし読み込み時間を改善できる、ということなのでしょう。

昨日の Boeing 747 flight! に、上のような画像を用意して試してみました。例えば、赤いマークされたアイコンを表示するには、下記のようにします。

var mkr_plane = new google.maps.Marker({
	position: new google.maps.LatLng(37.954075, 139.113039),
	icon: new google.maps.MarkerImage("B747-400-99.png",
		new google.maps.Size(99, 99), // Size
		new google.maps.Point(189,99), // Origin
		new google.maps.Point(50, 50)), // Anchor
});

ちなみに、変更前はマーカーイメージ画像そのものを入れ替えてアニメーションさせていました。この方法を使った結果、チラツキがまったく無くなり非常にイイ感じです。

Boeing 747 flight!

GoogleMaps 201314

Google Maps V3 で少し遊んでみました。ボーイング747が Google マップ上を飛行するだけのものです。九州あたりを離陸した飛行機は新潟空港へ向かいます。目的地のマーカーはドラッグでき、移動させればどこへでも飛んで行くことができます。

Boeing 747 flight! (Google Maps)

久しぶりに算数をしたので、あんまりスマートな書き方にはできませんでした。加速度を入れていないので、旋回しても速度は落ちず常に一定の速度で飛行します。あと、日付変更線の付近をまたぐと、遠い反対側へ向かおうとしてしまいます。

このB747のイメージは、HDD の整理をしていて見つけたもので、今回は15°毎に回転イメージを作ってみました。もう少し細かくしても良かったかも知れません。

メインコンテンツが少ないときに、不恰好になってしまうサイトデザインになってしまうこと、ありませんか? このサイトもそうでした。メインコンテンツが長く詰まっているページだとイメージどおりでも、数行程度の短いコンテンツでは、広告ばかりが目立ち、コンテンツの終わりの枠が、赤ちゃんの“よだれかけ”のように捲れ上がってしまいます。

そんなときに便利なのが、min-height です。これを div などに指定すると内容が少なくてもそれ以下のサイズにはなりません。これを使えば、フッタにゴテゴテ入れた広告が必要以上にせり上がることも無くなり、非常に見た目がよろしくなります。マージン取るのに <br /> たくさん入れるのは止しましょう。

<div class="contents_outer" style="min-height:100em;">
  <div class="contents" style="min-height:40em;">
    ... メインコンテンツ ...
  </div>
  <div class="ad"> ... 広告のコード ...</div>
</div>

この例は、広告がトップから 40em 以下に上らないようにし、コンテンツの枠自体も 100em を切らないように制限した、当サイトの CSS の指定です。

YUI reset した後の CSS でいつもネックだったフォーム要素のデザインについて少し調べてみました。ここで言うデザインとは、グラフィックを使ったリッチなやつではなく、標準の要素の文字サイズのばらつきや、ボタンの高さについてです。文字サイズについては CSS で単に font-size 指定すれば揃えられます。

ボタンの高さ指定はなぜか無視されます。結論から言うと、ボタンが inline 要素として定義されているためのようです(インライン要素は高さ指定が無視されます)。これは、下記のように display: inline-block として定義しなおして解決できました。

input[type="button"],
input[type="submit"],
input[type="clear"],
input[type="file"] {
	display:		inline-block;
	height:			2.5em;
	padding:		0.2em;
}

ただし、file タイプだけは残念な表示(ブラウザによっても異なる)になってしまいました。また、Firefox のみ半角英数字だけのボタンと、全角文字入りのボタンで1ドット違っています。これは半角英数字を日本語フォントで表示させてみても解決できず、課題として残ってしまいました。しかし、遠目で見れば、その違いは分からず違和感がある程度です。今のところ、ボタンの中に全角文字を入れる、くらいしか解決方法は無いようです。

昨日取り付けたばかりのコメントシステムだが、最初のコメントは案の定、スパムコメントでした。しかも何と早いことか。昨日の今日で、バ○アグラがなんたらとか言う英語のスパムが書き込まれてしまいました。検索エンジンのスパイダーと違って、UA 偽装してたりするだろうから、本当に迷惑な話だと思います。

こういったスパム対策はユーザーの利便性を損ねないと完全に解決することができないだけに、いつも悩む点であり、ウェブで何かを運営する際に萎えてしまう点でもあります。この先、画像認証を導入するのか、承認制を導入するのか、ロボット判定を頑張るのか、何れにしても楽しくない作業が待っています。

よく使われる画像認証は、本来と無関係な作業をユーザーに強いてしまう、障害を持った人を排除してしまう(聴覚を使った認証もあるが)、などあまり好きな解決方法ではないです。画像認証以外の人間らしさの判定も幾つかあげてみます。

  • あり得ない速度での投稿(フォームの提供から投稿ボタンを押されるまでの時間が余りにも短いとき)
  • ページ内の画像などが要求されていない(フォーム狙いでクロールされているなら画像は要求しないだろう→見えない画像タグに投稿トリガーを仕込んでおく)
  • JavaScript でキーイベントを見る(フォームに実際入力されたか判断できそう)
  • JavaScript で確認ダイアログを入れる
  • submit ボタンをやめて、通常ボタンと JavaScript で投稿させる

まあ、上にあげたようなことは、昔あるプロジェクトで散々やりましたが、結局どれも突破されてしまうんですよね。画像認証にしても OCR と組み合わせて突破するプログラムもあるし、JavaScript で色々工夫しても実際のブラウザを自動運転するようなやつが相手だと意味が無いです。