jqueryの勉強しています。

この不景気を乗り切らなくちゃ！　個人事業主だから営業も自分で頑張らなくちゃ！
ってことで、新しい営業ツールサイトを制作中です。

どうせ営業ツール作るんだったらjqueryの勉強も兼ねて「Movable Type」 + 「jquery」 + 「PNG画像（アルファーチャンネル付き画像）」 + 「PCサイト」 + 「携帯サイト」を作ろうと手をつけだしたけど、やはり変なスパイラルに入ってしまった。

ま～。ここからは愚痴だらけなので、お暇なら読んでください。
※簡単に言えばIE6でPNG画像表示方法とLightBOXに代わるjqueryの話です。

----------ここから愚痴です。------------

トラブルの原因は数日前のBLOGでも書いたけどIE6。
今回は自分の中のテーマで 出来る限りPNG画像（アルファーチャンネル付き画像）を使ってデータを軽く・レイヤーを重ねたサイト なんだけど、最初はIE6のPNG問題は DD_belatedPNG で回避すれば良いやなんて思っていたら DD_belatedPNG が jquery とケンカして動かない。

仕方が無いので、jqueryでIE6・PNG画像表示（バックグラウンドでも）出来る物かないか調べてみたら「IE PNG Fix」なんてスプリクトを発見。

「IE PNG Fix」の使用方法は簡単で、しかもjqueryを喧嘩しない。

「IE PNG Fix」サイトの真ん中ぐらいにDownloadコーナーがあるのでiepngfix.zipかをクリックするとソースからサンプルなどがzip圧縮されたデータがダウンロードできます。
解凍後、「iepngfix.htc」をエディターで開いて16行目にblank.gifへのパスを指定している場所があるので、blank.gifをアップロードする自分のサイトの階層に変更しなければいけません。
"blank.gif"の部分は、相対パスを使用する時は、透過PNGを表示させるHTMLファイルからの相対パスです。お使いの環境に合わせて変更してください。
「iepngfix.htc」、「blank.gif」、「iepngfix_tilebg.js」を自分のサイトにコピー。
cssに「img, div { behavior: url(iepngfix.htc) }」を追記。
HTMLのヘッダに「<script type=”text/javascript” src=”iepngfix_tilebg.js”></script>」追記。

IE PNG Fix導入後はIE6でPNG画像が表示されるようにはなったけど、PNG画像が多いと重たい・・・。
重たいというか、IE6で表示したときには、最初は透明・アルファーチャンネルが反映されていないPNG画像が表示され、その後PNG画像に透明・アルファーチャンネルが反映される。
PNG画像が少なければ気にならないけど、PNG画像を多用していると、どうも表示にワンテンポ遅れた感が・・・・。

IE6だけと考えれば許容範囲だろうと自分を納得させ、営業ツールサイトを作成していたら、またしてもIE6トラブル（予想範囲だけど）。

原因は簡単。
PNG画像をpositionプロパティで数枚重ねたりしているんだけどIE6だけマージン幅が倍で認識される・・・。IE6のマージン問題も判っていたけど・・・・。やはり腹が立つ～！！キィー！！
CSSハックするか、IE6用のCSSを書けば問題は解決できるから良いんだけどメンテナンス性が落ちるんだよな～。トホホ。

そんなこんなで、IE6問題も一つ一つ潰して、Movable Typeのテンプレート基幹部分も大方出来上がり、次はMovable Typeで簡単にできる写真集カテゴリーを作っていると、またしても問題が・・・・。

今まではMovable Typeで作るアルバム部分はアップロードする画像のサイズに関係なくサムネイルとリサイズした画像を生成させLightBOXで表示させていたので、同じソース持ってくれば良いやと思っていたら・・・・・。LightBOXとjqueryも喧嘩するのね・・・。知らなかった・・・・。ガク。
※Movable TypeとLightBOXで作るアルバム集はライカ動物病院様で採用していただいております。

なにかjqueryでLightBOXもどきのものが無いか調べてみたらこんなの発見。

jQuery lightBox plugin
導入も簡単そうだし、LightBOXと同じ動きをしてくれるので問題ないんだけど、どうせ新しい事をするなら違った見せ方をしたいって事で今回は見送り。
ColorBox
なかなか面白そう。見る側もナビゲーションが表示されていて使い勝手も良い。でも今回はLightBOXと余り見た目が変わらないので見送り
ThickBox
すでに実験済みなのと、今回は写真集がメインなので外部htmlやFlashが表示出来る機能は不要。それに新しい事がしたいので今回は見送り。ThickBoxの導入サンプルはこちら
FancyBox
appleのサイトっぽい感じでLightBOXとちょっと違う見せ方も良いぞ。見る側のナビゲーションがオンマウスで表示される部分はCSS弄ればなんとかなりそう。

と色々物色した結果、今回はFancyBoxを採用。
早速、営業ツールサイトに組み込んでテストしてみたら、動きもスムーズだしMovable Type + LightBOXの画像生成ソースにチョットだけ手を加えるだけで完了。なかなか良い感じです。

ま～。愚痴ばかりまとまりも無くダラダラと書いたけど、来週には今回のトラブルを潰した営業ツールサイトを公開できるかな？

かな？本当に？月末・月初めでバタつきそうだし自信なし。