年賀状サイト「Nenga. 皆と違う、年賀状。」で使っているjQueryプラグインなどのTips。


今月立ち上げた、年賀状サイト「Nenga. 皆と違う、年賀状。
制作当初はFlashでと考えたり、CMSでとも考えていたりしたのですが今回もお得意?のJavaScriptでインターフェースを固めました。
現状様々なJSライブラリがあり、Lightboxなどいいものがたくさんある中で、最近よく使っているのがjQuery。
さまざまな用途に応じたクラスやライブラリが多くあり、複数を使ってもあまり不具合が起こらないのでよく使っています。
Nenga.で使っているのはjQuery+prettyPhoto+Nivo Slider
トップページで画像が次々と切り替わるアニメーションはNivo Sliderで指定したクラスやIDの中の画像を児童でスライドショーにしてくれるものです。単にIDを指定してしまうと複数をスライドショーにするのが難しくなるので、今回はクラス+タグで指定しています。スライドショーに使う画像は前後で明暗がはっきりした画像にすると切り替わりがシャープに仕上がると思います。
各ページをウインドウで表示するのに使っているのがprettyPhoto
かなり高機能なビュアのインターフェイスでFlashや動画などにも対応しています。また、デフォルトで数種類のテーマファイルが入っているのでホワイト、ブラックなどサイトのスタイルに合わせて選ぶことができます。
自分の予想以上にアクセスがあるのでちょっとピッチはやめて年賀状のデザインもアップしないと。。。ですね。

最近のHackintoch HP mini

昨年買ったネットブックをMac化、Hackintoshにして半年。
実用性は実際あまりなく、ネットや原稿うち程度にしか使えない代物ですが、TwitterやGoogle Readerを表示するために使っているSnackr用のデスクトップのサブディスプレイとしてはなかなか最適な一台。
あとは移動時(特に新幹線)のネットガジェットとして使用中。
たまに音が出てしまうのでヘッドフォンジャックを塞いで物理的にミュートさせています。
そして最近、すべてのMacのデフォルトのブラウザーにしていたFireFoxをGoogle Chromeに変更。テーマやブックマークなどをデスクトップ機と同期させ、かなり利便性向上→現在といった感じ。
一つ気になるのはタッチパッド。やはりMac のもののほうが断然操作しやすい…
やはりマウスをつかうしかないのかな。。。

IE6×透過PNG、DD_belatedPNG.fixでの不具合対処

引き続き、IE6でONGを使う際の不具合対処法。
今日はDD_belatedPNG.fixです。
こちらも自由度の高いもので簡単に設定することができるライブラリ。
しかし、使っていると不具合が、、、
同じページ内で透過PNGが適用されない場合があります。
1. 他のJSライブラリなどとバッティングしてしまっている
2. 実は使用する画像を他のオブジェクトでも使っている
2はなかなか気付けないのでご注意。ポジション設定などで1枚画像にして使っている場合などももしかすると不具合の原因になっている場合があります。
[amazonshowcase_ce4881841b2c1c75c995af601d61c54e]

IE6、ドロップダウンメニュー+透過PNGでのバグ

今後のためにメモ。
JavaScript+CSSでドロップダウンメニューを作ったものの、
確認するとIE6ではフォームが選択・入力できなかったり、
ドロップダウンメニューのリンクが選択できなくなったりしてしまうバグが・・・
いろいろ探してみたところ、透過PNGを実装するjQuery+meca.jsが原因と判明。
すごく便利なmeca.js。。。なのに悔しい!
IE6 必須のページでのドロップダウンは透過PNGをなどと贅沢を言ってはいけないようです。。。
そろそろHTML5をという時期にさしかかってのIE6対策はなかなか難しい。。。
[amazonshowcase_ce4881841b2c1c75c995af601d61c54e]