『 lightwindow.js Demo 』のサイトにもあるように、 “ Inline Content ” に “ <p></p> ” 以外の要素を使うと、なんだかゴチャ～っと上詰めにまとまって表示されてしまうという現象が起こってる。
いわゆるサイト内で ID を付与したコンテンツ。
とりあえず目次を作って、一つひとつのリンクにアンカーを付与し、その “ # ” の場所に移動できるというなんとも便利なマークアップ。
それを “ lightwindow ” では、その ID を付与したコンテンツのみを飛び出せ ID みたいに独立した枠内に表示させてくれるという優れもの。
たとえば、最初に見たときは非表示、その要素を隠しておきたい部分に使用すれば、必要なとき、見たい人のみそれをクリックしたら見れるというような小細工ができる。
ゲームの攻略法とか映画のネタバレとか、なんかの注意事項だの利用規約だの、はたまた恋人との秘密の一行日記だの、用途はさまざまだろうさな。
にも関わらず、表示がおかしいということに気づいた先日。
Demo でも全部が “ p ” タグでそれぞれ包括されてるわけだけど、それができるんなら、リストタグでもできるだろうとタカをくくっていたのが大間違い。
たとえば、 “ <dl><dt></dt><dd></dd></dl> ” とかのタグ。
そんなん、どう考えたってリストで表示したほうが見やすいに決まってる。クイズの回答とか英語の単語帳にするにせよ、好きなキャラクターの個別な感想にせよだ。
これはどうやら、CSS でいくら修正をはかっても、なおらない模様。
ただし、それらを全部 “ p ” に変更すると、ちゃんと表示してくれる。
あぁ～、だりっ。
まったくもって、吐きそうだ。
今までは、『Movable Type 備忘録』でお馴染みの bzbell さん開発は “ effectbox ” というものを使わせてもらっていたんだけど、ここへきて “ lightwindow ” で一元的に統一するという運びにした。
アダプターという形で動く上に、いろいろ汎用性の高い “ shadowbox.js ” 。
写真表示の定番である “ lightbox ” 。
中間的にほどよく使えて、サクサクッと手軽にいろんなものを見せられる “ Highslide.js ” 。
どれもこれも素人には受ける手法で、いわゆる “ カッコいい ” っていう表示法。
しかしながら、実際やっぱそんなに使い分ける必要はないのだな。
プラス、そういう部分で Javascript を多用すると、あんまりよろしくない。
重たくなる。
ただでさえ重たくなる “ lightbox ” に、またほかの処理もさせるわけだから、重くなるのは当然至極。
で、どうせなら一本で統一したい。
多少重いのは目をつぶるとしても、一元管理できたほうがメンテナンスも楽チンポ。
サイトの表示速度なんざ、使ってるブラウザに依存してる部分が大きくなってきてるし、なんだかんだで IE が主流というのも現実。
だから Javascript の多用は避けたいのだな。
まあ、ここの表示が遅いのは、今となっちゃ、ほぼすべて『 CORESERVER 』さん自体の重さであるとも言える。
CORESERVER さん、最近重すぎじゃないでしょうか？ このご時世にありながら、昼間とかより、テレホーダイの時間のほうが速いんですよ？
まっ昼間にタイムアウトとかあり得なくない？
それとも、データベースの MySQL の設定がおかしいのか？
Google API に問題ありか？
やっぱ、なんだかんだでサーバーにアップリンクして読み込ませたほうがいいのかしら。
とはいえ、 “ prototype ” は、Google API から引っ張ってきたほうが速くなった感が強いんだけど。
とまあ、一元管理で統一化をするとなると、なんでもスパッと表示させることのできるライブラリが必要になってくる。
そこで発見したのが “ lightwindow ” というわけ。
“ lightview ” も候補にあり、バージョンアップされたあかつきには、たいへん麗しゅう表示をしてくれるようになっていた。カスタマイズ性もかなり高い上、非常に優れたライブラリ。
でも、却下。
なんか “ lightbox ” 風ではあるんだけど、いろんなところで “ lightbox ” じゃない。
動画とかはいいんだよ。ただ、写真をギャラリー表示させたとき、両サイドに変な耳みたいなのが出て、それで “ NEXT ” と “ PREV ” を管理する。
それがダメ。
画像の半分ずっこでそれらが移動できたほうが見た目もいい。余計なのが飛び出すのは好きじゃない。
角丸とか背景色とかもイジれてカスタマイズ性はピカイチだけど、そういうのはどうでもいいわけ。やりたくなったら自分でスクリプトいじりゃいいだけの話。
だから、 “ lightwindow ” なのである。
より “ lightbox ” なのである。
こっちこそ CSS でイジりゃいいじゃんと思うだろうが、CSS でイジるのは面倒なのです。
それはなぜなら、いちいち F5 で更新するたびに、飛び出せ lightwindow が消えるから。
“ effectbox.js ” は、たしかにすっげぇ便利なんだけど、いろいろ用途によってライブラリを切り替えるとなると、その記述も連動して変えないといけないという難点も出てくる。
それプラス、記述のほうも Javascript になっちゃうから、微々たることでも SEO としては望ましくないようにも思える。
今んとこ俺様が探したなかで、もっとも “ lightbox ” 風かつカスタマイズ性も高く、なんでもかんでも表示させれる上に、そんなに重たいと感じないのが、lightwindow.js ではないかと思ふ。
jQuery のライブラリで統一できれば、恐ろしい軽さでサクサク動いてくれんだけど、やっぱしこれ、なかなかどうして jQuery では、やりたいことをやってくれるライブラリがないのだな。あっても、いろいろ組み込まないといけないっぽい。
そして、jQuery では、ライブラリ自体が少ない。
スクリプトのほう直接イジるしかないのかなぁ～……
めんどくせぇなぁ～……
また見た目のほうイジんないといけないのかなぁ～……
楽しそうだけどなぁ～……
完全なブロック要素じゃなきゃダメなのか？
CSS でブロック要素にカモフラージュしただけじゃダメ？
ごまかされてくれないの？
そこが Strict にひっかかってるのかい？ DTD は、チュートリアルどおり “ Transitional EN ” にしないと拒否されんのかい？
そこが規格の厳しさってもんなの？
つったって、 “ p ” も “ dl ” もブロック要素だろ？
違うのか？
あくまで “ dl ” のほうはリストってことなのか？
でも、 “ dl ” とかも全部 “ div ” に変えてみたところで、結果は同じだったんだよ？
一番のブロック要素でしょ？
くそったれめが……
でもカスタマイズとかパラメーターとかいろいろ設定できて、表示系のライブラリとしては既製品のなかじゃ一番かゆいところに手が届くものの１つなんだよなぁ～。
もったいねぇ～。
設置も簡単だし、Movable Type なら、lib > MT > Asset > のなかの “ Image.pm ” ってやつを直接ちょちょっとイジってやれば、画像の挿入した時点ですぐ全部書いてくれるしさ。
写真の表示なら、ほかのどのライブラリよりも優れてると思う。
title とか caption がつけれて、著作権の所在も載せれるし、なんら問題ない。
あそうそう。
そういえば、こちら万能とも言えるライブラリ “ lightwindow ” なんだけども、オプションの１つとして “ パラメーター ” っつーのが多くある。
その中に “ lightwindow_width ” ってので、飛び出せ別枠の幅とか高さを、故意に調節できる機能も用意されてる。
これは、動画の表示に重宝する。
ただし、小さな写真においては、その説明文の長さを考慮して幅を広くしようとしても、写真表示部分の幅のみ広くなるだけで、下の感想とかギャラリー設定では枚数部分、そして “ By ” のスペースの幅は、その写真の幅分しか与えられない。
たとえば、原本に幅が 200px の写真をアップロードしたいとしよう。
でも、あるじゃない？
写真は小さいけど、そこに詰まってる想い出はドデカいものとか。
なかなかどうして説明が長くなってしまいそうだよな。
だから、そのへんを考慮して、パラメーターを “ lightwindow_width="400" ” として 400px の幅を設定するわけだ。
これですべての思いの丈を綴ることができる!!
と思いきや、その写真下にできるキャプションの部分は、写真原本の幅である 200px 分のままでしかないわけよ。
つまり、写真のほうは 400px と広いスペースにも関わらず、その下には 200px の狭い説明スペースがぶら下がってる状態になってしまうということ。
意味がねぇ。
頭でっかちんちんが一番醜い。恥ずかしい。
マカダミアナッツ・チョコレートで、チョコレートから中のマカダミアがはみだしてるような状態だよ。溶けてもないのに。
ワイルドだねぇ～とか本場だねぇ～とか感じる人もいるかもしらんが、それじゃ商品として売りだせないやな。マカダミアナッツが好きで買ったとて、結局はチョコレートが食べたいわけでしょ、きっと。
とまあ、こんなような事柄から、現時点では “ Highslide.js ” が一番いいのではないかと思えてならない。
バージョンアップも頻繁にされてるみたいだし、今じゃキャプション機能もついて、飛び出せウィンドウの位置も設定できるみたいだし、どうにかすれば Inline Content もうまいこと表示してくれそうな気がする。っつーか、してくれる。
ギャラリーとしての見応えは劣るものの、サムネイル写真をクリックすれば、ズボッとまるで産み出されたかのごとく拡大された元の写真が記事から飛び出せ青春してくるわけだから、サクサク感はピカイチだ。
“ lightwindow ” にはない自動スライドショーの機能もついてるみたいだし、カスタマイズさえすれば、インパクトも動作もナイスになりそうだし、重さの面でも改善できそうな気がす。
ただし、 “ Highslide ” は、どうやら動画はできないみたいなんだな、これが。
そんなにアップしないとはいえ、そこが唯一の難点。
これで一本化というのは難しそうだ。
プラス、前に何回か使ってみて実際に感じたことだけど、ただ Highslide にするための記述だけでけっこう面倒なのと、そっからさらにカスタマイズすると、そっちの記述がまたいちいち面倒なんでね。
これは『 Wordpress 』用かなと。
なんかいいライブラリねぇかなぁ～……
jQuery ベースの『 Facebox 』ってのも使ってみたけど、ありゃガサくて使えねぇ。めっちゃめちゃ軽いんだけどさ。
ただ “ lightbox ” だけ入れるんなら、jQuery 版のほう入れたほうが、prototype のより設定も使い勝手も上だからいい。
『 lightview 』は、カスタマイズ性も高いし、ゲロかっこいいし、多少重くても我慢できる範囲だし、ギャラリーでは自動スライドショーなんて小ジャレタ機能も搭載されてるんだけど、イマイチしっくりこねぇんだよな。自動スライドショーでなんて見ねっつの。
『 lightbox 』と『 Highslide 』は、動画に対応してないっぽいから、却下。
動画なんざたいしてアップしないから、別ウィンドウに出してもいいんだけど、 “ target="_blank" ” は、XHTML じゃ非推奨にされたから論外。いや、たしかもう使っちゃダメなんだっけか？
っつーか、ライブラリで見せようなんて小細工自体、もうやめようかなとか思ってみたりなんかしてる。
単品の写真なんざ、別にアップにする必要ないんだよな。きっと “ lightwindow ” とかによる写真表示はウザいっていう人もいるでしょう。
ぶっちゃけ、サムネイルの写真だけでなんとなく全体像つかめちゃうしな。
そう。
でもこの lightwindow とかによる写真表示っつーのは、ギャラリーのとき効果絶大。
写真にしか興味のない人なら、とりあえず写真だけザーッと先に目を通せるし、詳細というよりは、こざかしい説明も載せることができたりするんだな。
個人的にはそこにこそ醍醐味を感じております。
もう自分で作るしかないのかなとか感じまくってきてるそんな京子の語呂。
- January 8, 2009 12:26 AM
- [ Library.js ]
