アップデートに負けないWPtouchカスタマイズ

カスタマイズした内容がアップデート適用で消える

WPtouch Moblie Plugin(以下WPtouch) は自分のサイトをあまり深く考えなくともスマートフォン対応にしてくれる非常に便利なプラグインで、自分の環境に合うようにスタイルシートなどをカスタマイズして使っているユーザも多いと思う。このサイトもスマートフォン向けには、WPtouchのスタイルシートbauhausを少し手を入れて使っている。

ところがプラグインがアップデート(更新)され、これを適用した場合はこうして手を加えた部分もすべて初期状態になってしまう。 続きを読む アップデートに負けないWPtouchカスタマイズ

VBScriptの正規表現における改行(LF)

VBScriptの正規表現エンジン(RegExpオブジェクト)のドットメタ文字(.)は、改行(ラインフィード、vbLf)にはマッチしない。MultiLineプロパティにTrueを指定しても同じ。知ってる人には当たり前の話なんでしょうけど、なつきは「MultiLine=複数行処理」を誤解してハマったので。MultiLineプロパティをTrueにすると、文字列の先頭(^)、末尾($)がそれぞれ改行(LF)の直後、直前にマッチするようになる。それだけ。

続きを読む VBScriptの正規表現における改行(LF)

WordPressへCSV形式で記事を移行

4年ぶり?にサイトリニューアルしました。PHPによる独自システムからWordPressベースに変更。デザインそのものはほとんど変わってないというか新しいのが思いつかなかった。WordPressに移行したことで、スマートフォンと携帯での閲覧にも最適化できてるはずです。プラグインさまさまですな。過去の記事もこれから順次移行していきますので。あ、以前のサイトはhttp://ska.xii.jp/にしばらく残しておきます。

続きを読む WordPressへCSV形式で記事を移行

IPアドレスでコメントブロック

中国からの政治的な中傷コメントがたびたび見かけられるので、ちょっと対策。中国のホストの大半が逆引きできない(IPアドレスからホスト名の名前解決ができない)のを利用して、逆引きできないIPアドレスからはコメントできないようにしました。

$host = gethostbyaddr($_SERVER['REMOTE_ADDR']);
if( !$host || preg_match('/^d{1,3}.d{1,3}.d{1,3}.d{1,3}$/', $host) === 1 ){
  /* エラー処理 */
}

コメントが送信されたとき、環境変数 REMOTE_ADDR に格納されたアクセス元のIPアドレス(xxx.xxx.xxx.xxxの形式)をgethostbyaddrして、戻り値がIPアドレスのままだったら(ホスト名の解決に失敗したら)エラー処理に移行。

かの国にも熱心なファンはいるわけで、一部の狂信的愛国者のために特定地域まるっとシャットアウトするような対策を取らないといけないのは非常に心苦しいのです、が、現状致し方ない。

<2011/1/29 17:51追記>正規表現が間違ってたのを修正しました。

リファラスパム

アクセス解析の被リンク(リファラ)を眺めてると、ときどき変なURLを見かけることがあります。そのURLのページを訪れても、内容は自分のサイトと縁もゆかりもない。ページ内に自分のサイトへのリンクもない。にもかかわらず、リファラが残ってる。それが一日に何度もあったり、そのページが何かを売ろうとする内容だったりする場合は、リファラスパムを疑うべきかも。

リファラスパムとは、ある特定のURLをリファラ(HTTP_REFERER)にセットしたHTTPリクエストを、不特定多数のwebサーバに無差別に送ることをいいます。専用のツールを使って、SEO(検索サイトで上位を目指す)目的で実施されることが多いみたい。

で、そんなリファラスパムを送りつけるツールのひとつと目されてるギガアクセスプロモーターなるソフトでは、以下のようなしくみでSEOを実現してるらしいです。

  1. 検索上位にしたいページのURLと、キーワードを入力する。
  2. 入力されたキーワードでYahoo!検索し、上位1000件のページに、先ほどのURLをリファラに仕込んだHTTPリクエストを投げる。
  3. 投げられたページのあるwebサーバに、リファラ入りのアクセスログが残る。
  4. そのサイトに逆アクセスランキングがあった場合、リファラのURLをリンク元として表示してしまう。
  5. 不特定多数の関連するページから被リンクが得られるので、ページランクが上がり、検索上位になる。

(参考:最近目立つリファラスパム情報まとめ : web memo.Ver.2)

逆アクセスランキングやページランクの仕組みをうまく利用した巧妙な手口です。法に触れる行為ではないんですが、ある意味、性善説に立ったシステムであるページランクの理念を踏みにじったり、人のページを勝手にサクラに使ったりする行為はモラルに反する。人として許されるものではない。

こういうツールを使う人たちは、悪意を持ってというよりも、アクセスアップを期待して軽い気持ちで(あるいは仕組みを知らずに)使ってるような気がします。で、こうしてweb管理者たちに憎まれていることに気づいていない。

以下は、SKAに来た、リファラスパムと目されるURLとその送り主のホスト名、のうちの一部。すべてホスト名がわかってるのでプロバイダに申告すれば利用停止処置なり警告なりはしてもらえそうですけど。今んトコそこまでやるつもりはないです。とりあえず、やめて。

www.ark-west.com/
softbank218124047012.bbtec.net
accessbomb.quu.cc/hotel/
p2192-ipbfp4203osakakita.osaka.ocn.ne.jp
www.infocart.jp/e/47001/143976/
ntsitm071057.sitm.nt.ngn5.ppp.infoweb.ne.jp
cart05.lolipop.jp/LA03771172/
229.net112138191.t-com.ne.jp
lovegolf100.seesaa.net/
ntaich246063.aich.nt.ftth.ppp.infoweb.ne.jp
mazasite-ganbaru.net/
121-83-117-174f1.osk3.eonet.ne.jp
symply.net/sm23lp/ansintohsi
l031082.ppp.dion.ne.jp
www6.ocn.ne.jp/~tideji/
p4085-ipad206sapodori.hokkaido.ocn.ne.jp
www.dahlia-mj122-05.info/nonohair/
219x120x71x58.ap219.ftth.ucom.ne.jp

ThickboxとIE8のバグ

写真1バグ報告を受けました。WinXP+IE8で画像の詳細表示をすると、拡大画像が半分くらい下にずれてこんな感じになるとのこと。

Thickboxの表示座標が下にずれてしまうバグはIE7で既知のもので、パッチも出ている(SKAのはすでに適用済み)のだけど、IE8でもなにかの条件で出るみたい。試してみたけどウチのXP+IE8では再現しなかった。IE7を導入したことのあるPCにだけ起こるのか?とか、IEと何かのプログラムとの競合が原因か?とかいう考察もあるですね。

IE7の話ですけど、制作者が意図しなかったユーザエージェントが原因かなあというのも……でもリンク先のコードの例だとThickboxは悪くなくてjQuery.browser.versionがIE7を判別できてない(?)のが大本の原因な気がする。jQuery1.3以降では正しく判別するみたい(けど非推奨属性)。

結局諸悪の根源はIE7っぽいのですがよくわからん。もしご使用の環境で同じ症状が出るようでしたら、とりあえずIEを使わないのをおすすめします。どうしてもという場合はOSの再インストールを。

Thickboxを導入

画像のサムネイルをクリックすると画面がグレーアウトして、拡大画像が中央に表示されるスタイル。巷ではこれを(最初に実現したスクリプトの名前をとって)Lightbox風と呼んでいるようですが。今回それ系のひとつであるThickboxをSKAに仕込んでみた。なお、以下の説明にはエントリ記述時の最新版であるThickbox 3.1を使用している。

導入方法

設置は非常に簡単。まず公式サイトからthickbox.js, jquery.js, thickbox.css, loadingAnimation.gifの4ファイルをダウンロードする。

次に、thickbox.jsの8行目を、導入環境に応じて書き換える。loadingAnimation.gif(拡大画像のローディング中に表示されるアニメーションGIF)のある場所を指定する部分。

var tb_pathToImage = "thickbox/loadingAnimation.gif";

呼び出し元となるHTMLファイルから見た相対パスで指定する。SKAではHTMLがドキュメントルート直下にあり、loadingAnimation.gifを含むthickboxの構成ファイルはすべてルート直下のthickboxディレクトリに置くことにしたので、上記のような指定となる。

修正がすんだら、先述の4ファイルをサーバにアップロードする。

なおパスを正しく指定したにもかかわらず上記のアニメーションGIFが表示されない(IEなら、×印になる)ときは、アップロードしたファイル名の小文字・大文字を確認してみること。デフォルトではloadingAnimationのAだけが大文字になっているが、たとえばNextFTPを使用していて「すべてのファイル名を小文字に変換してアップロードする」のオプションが有効になっているとこれが小文字になってしまっていて、ハマる。

そして、呼び出し元のHTMLからこれらの構成ファイルを参照するため、HTMLのhead要素内に以下のタグを記述する。

<link rel="stylesheet" type="text/css" href="thickbox/thickbox.css" />
<script type="text/javascript" src="thickbox/jquery.js"></script>
<script type="text/javascript" src="thickbox/thickbox.js"></script>

link要素のhref属性とscript要素のsrc属性に記述するパスは、導入する環境に応じて変わることに注意。SKAでは先述したように、構成ファイルはいずれもルート直下のthickboxディレクトリにあるため、上記のような指定となる。

最後に、Lightbox効果を適用したいimg要素(サムネイル画像)を囲むa要素(リンク)に、「class="thickbox"」を追加する。以下は一例。

<a href="sample1.jpg" class="thickbox"><img src="thumb/sample1.jpg" /></a>

複数の画像をアルバム表示したい場合は、class指定に加えてrel属性で任意の文字列を指定する。同一の文字列を指定した画像が同一グループとして扱われ、順番にアルバム表示することができる。以下は一例。

<a href="sample1.jpg" class="thickbox" rel="album"><img src="thumb/sample1.jpg" /></a>
<a href="sample2.jpg" class="thickbox" rel="album"><img src="thumb/sample2.jpg" /></a>
<a href="sample3.jpg" class="thickbox" rel="album"><img src="thumb/sample3.jpg" /></a>

注意点

  • 動作にJavascriptを利用している。Javascriptを利用するギミックの常として、Javascriptが有効でない環境ではLightbox効果を実現できない。しかしHTML上の記述は単なる画像への(class指定された)リンクなので、リンクをたどれば(サムネイルをクリックすれば)リンク先の画像を表示することができる。
  • 機能の実装のためにthickboxというクラス名を使用するため、導入する環境に同名のクラスがある場合は、誤動作を防ぐために重複しない名前に変更したほうがいいかもしれない。
  • 拡大画像を表示する際のデザインとして独自のCSSを使用しているが、Javascriptが有効でユーザースタイルシートを適用している環境では表示が崩れるかもしれない。

Lightbox.jsとの違い

  • 元祖Lightboxでは拡大画像がブラウザの表示領域より大きい場合ははみ出してしまい、スクロールしないと見られないが、Thickboxでは表示領域内に収まるように適当に縮小して表示される。
  • 拡大画像を表示したままスクロール操作をすると、画像は動かずに、グレーアウトしたリンク元のHTML文書だけがスクロールする。
  • アルバム表示した際に表示される拡大画像下の進む・戻るリンクのパスは、おそらく相対パス。Lightboxのそれはたぶん絶対パス。SKAには絶対パス表記のリンク先を別ウインドウで表示するJavascriptを適用しているので、Lightboxだとクリックするたびにウインドウが開いて閉口した。これがLightboxでなくてThickboxを選んだ理由なのですが……。

コメント処理を軽く

コメントの投稿処理(投稿ボタンをクリックしてから画面が更新されるまでの処理時間)を軽くしてみました。

右側の「COMMENTS」って部分にコメント一覧がありますが、今まではここに「直近にコメントのあったエントリ名とコメント数」を表示してました。ここの表示のために、コメントが投稿されるたびに、全エントリのコメント数と最後にコメントが投稿された時刻を取得してコメント投稿時刻順エントリ一覧を作ってテキストファイルに書き出して……というちょっと凝った処理を書いていました。

凝った処理だけに、エントリ数やコメント数が増えてくると当たり前ながら処理に時間がかかるようになる。レスポンスが悪くなって二重投稿も増えてきたので、仕方なく「コメントの投稿時刻が新しい順にエントリ名+投稿者を表示」という巷のブログシステムにありがちな広く採用されている方式に変えました。こちらはやっていることは「コメントデータを作成時刻の新しい順にソートする」だけ。……うん、やっぱり余計なことをしないと速いわ。

またまたリニューアル

そんなわけで懲りずにまたリニューアルをかましてしまいました。極めてかもしだ。かもすぞ。最近更新が少なかったのはリニュ作業に没頭してたからなのですねー。

見た目はさほど変わってないですが、内部処理ががらっと変わってます。処理効率を高めてオーバヘッドを減らしたので、レスポンスが従来よりも良くなってるはずです。たぶん。あと細かいところで実装が変わってます。コメントが承認なしで投稿できるとか。今年初めからの懸案だった検索機能も近々追加できます。

RSSノススメ

先週あたりからこっそりRSS配信してます。IE7だとページ表示時にフイッ♪とか音がしてRSSアイコンがオレンジに変わるので気づきやすいと思いますが、FirefoxでもOperaでもそのほかのRSSリーダーでも、RSS auto-discovery対応であれば検知してくれるはずです。たぶん。

このauto-discoveryという仕組みを以前は知らなくて、なんでブラウザはRSSの存在を検知できるんだろうと悩んだりもしたけれど私は元気です。力任せに総当たり検索してるのではないか――そう考えていた時期が私にもありました。

SKAアンテナも、RSSを配信しているページはRSSを更新の判断材料にしています。最近はRSS配信ページも増えました……ほとんどブログですが。ブログはたいてい標準で配信機能がついてますからね。

逆に個人サイトでブログ以外でRSS配信してるサイトってほとんどない。この機会にRSSの配信にチャレンジしてみるのはいかがでせうか皆さん?とりあえず作ってみるだけならRSSエディタ Headline-Editor Lite版が参考になりますお。継続的に配信していくには手動ではつらいのでCGI(PerlとかPHPとか)の導入が必須ですが。