Snapのプレビューを特定のリンクに限定する方法

たまに見かける Snap Preview Anywhere のプレビュー画面。
手順通りに設置するとなんでもかんでもプレビューされてうざいなあと思ってたんだけど、ちゃんと特定のリンクのみプレビューする方法がFAQに書いてありました。

1.パラメーターの ap=1 を ap=0 に変更
2.プレビューを表示するリンクに class="snap_preview" を追加

ちなみに検索ボックスを非表示にするには、sb=1 を sb=0 に変更。
これだけやっておけばけっこう使える機能かと。

忘れちゃならないShift-JISの「表」

訳あってShift-JISでPHP書いてたら、まったくもって動いてくれず、
1文字1文字穴があくほど見て回ったら、犯人は「表」だった。
そうか、これが噂の「ダメ文字」って奴か。
Shift-JISでは2バイト目に0x5Cを持つ文字が制御文字として認識されてしまうらしい。
（Wikipedia）
「ソ」「噂」「能」「暴」なども要チェック。
いちおう「表￥」で回避したけど、mi使ってるとそれ以降の色表示がぐちゃぐちゃになってしまうのが難点かと。

reflection.js の落とし穴

基本的にPhotoshopでやればいいじゃんと思っていたのと、設置がいとも簡単そうだったので、今まであまり興味をそそられなかった鏡面反射エフェクト reflection.js を遅ればせながら試してみた。
設置は確かに簡単で、距離と明るさをHTML上でカスタマイズできる点も秀逸なんだけど、いくつか落とし穴を発見したのでメモ。

1.body onload がすでに使ってあると反映されない

詳しく見てないけど、jsファイルの中身とバッティングするようです。

2.対象となる画像にCSSで behavior が使ってあるとWINで反映されない

前回紹介した PNG Behavior とはもろにバッティングしました。

3.設定した反射距離の高さ分が自動的に加わる

これは当然の仕様なんだろうけど、下のブロックの絶対位置を変えたくない時はCSSをいじらざるをえない。
position を使うか、margin-top でマイナス指定するか。
margin-top を変えると、エフェクトが反映されないブラウザで見た時に困ったことになりそうなので、めんどくさいけど position 使ったほうがいいような気がする。
やってないからうまくいくかどうかわからないけど。

以上若干難点はあるものの、基本的にはとても便利なエフェクトだと思います。

IE6以前の透過PNG処理

透過GIFのジャギーが気になり続けて2年余り、IE7標準搭載のVISTAが発売された勢いに乗って、キャラクターをPNG画像に置き換えてみた。
左が元のGIF画像、右が置き換えたPNG画像。
ともにパスで切り抜いて背景を透明にしてるのだけど、エッジの美しさに雲泥の差がある。
IE7的にはこれでOKなんだろうけど、やっぱりIE6以前のブラウザにも対応しておかなきゃってことで、ありがたく使わせてもらったのがPNG Behavior。
使い方はいたって簡単。
ダウンロードした pngbehavior.htc と blank.gif をサーバーにアップして、CSSに

img { behavior: url("pngbehavior.htc"); }

を書き加えるだけ。
IE6でしか確認してないけど、いともあっけなく成功しました。
こんなことならもっと早くやっとけばよかった。
なおデフォルトでは blank.gif を対象ページと同階層に置かなければ正常に表示されないようになっているため、対象となるページが複数にまたがる場合は、pngbehavior.htc の29行目、

var blankSrc = "blank.gif";

をURLパスなどに書き換えたほうがいいかと思います。