  |
はてなキーワード: Lightboxとは
Greased Lightboxとは画像リンクをクリックするとページを移動することなくリンク先の画像を見ることができるという便利なユーザースクリプトである。たぶんGreasemonkey上で動くからGreasedという名前なのだろう。ちなみにOperaでも使える。
でGreased Lightboxが動作すると画像以外は暗くなり、画像が見やすくなるのだが黒いPC画面というのはあまり見たいものではない。画像の後ろに自分の顔が映ると萎える。というわけでこの黒い半透明の背景を白くしようと思った。
とりあえずgreasedlightbox.user.jsの色を表している部分を全部白にしてみたが背景は変わらなかった。どうやら背景は色を指定して表示しているのではなく、画像を直接指定して表示しているらしい。その画像を表す部分を見つけた。
var pngOverlay= "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABGdBTUEAAK%2FINwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAPSURBVHjaYmJgYDgDEGAAANsAz1TKIeAAAAAASUVORK5CYII%3D')";
これを見るとbase64がカギを握っていそうだ。Wikipediaによると
Base64は、データを64種類の印字可能な英数字のみを用いて、それ以外の文字を扱うことの出来ない通信環境にてマルチバイト文字やバイナリデータを扱うためのエンコード方式である。
ということらしい。意味不明の文字列が半透明の黒い画像を表しているということだろう。ということは半透明の白い画像を表す文字列と置き換えれば背景を変えることができる。というわけでGIMPを使って白い色の透過PNG(1px四方)を作った。 次にこのページ( http://sveinbjorn.org/dataurlmaker )でその画像を文字列(Base64形式)に変えた。そしてgreasedlightbox.user.jsの先程の文字列と置き換えた。
変更前
var pngOverlay= "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABGdBTUEAAK%2FINwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAPSURBVHjaYmJgYDgDEGAAANsAz1TKIeAAAAAASUVORK5CYII%3D')";
変更後
var pngOverlay= "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sDHg0AJ+6ZOggAAAANSURBVAjXY/j//38kAAlVA1faOaSqAAAAAElFTkSuQmCC')";
こうしてGreased Lightboxの背景が白い半透明になった。かなり薄めだがGreased Lightboxが動作していると分かればいいのでこの程度の濃さで充分かな。
http://www.conceptconception.com/
ぱっと思い出したのでこれだけ。
海外ものはもっとあるみたいで。
なんて、中村勇吾のディレクションらしいし。
http://twitter.com/yugop/status/3417529825
（まぁ多分不本意じゃないの。知らんけど）
Lightboxとかなら、あくまで一部というか、
アートディレクションにはそこまで関わらない部分だけど、
これ、表現の軸がパクリなんだよ？
jquery使用、という事実がそういう意識をぼかしているんだろう。
いいのかよ、webデザイナー。
というか、ディレクター。
Guthrie氏「われわれのベンチマークでは、Webブラウザにおいてネイティブ環境のJavaScriptの300〜1000倍の高速動作を確認している」ってことだから、パフォーマンスの種類によって300〜1000倍かと思ったけど、この結果を見るとパフォーマンスというのはイベント処理とか描画処理とかを含む総合的なものらしい。そんなわけで総合的に300〜1000倍だと。
ただJavaScriptとSilverlightは性質の異なるものだし、どう総合的に判断したのか分かりかねる。最近流行のLightboxばりのアニメーションとか？ 比較するならFlash & ASと比較してほしい＞Microsoftの中の人
速度面以外でFlashとSolverlightを比較してみると……
Google Maps以前のころ。ヘビーユーザーのあいだではJavascriptオフが常識になっていた。度重なる時計の再発明に業を煮やし、IEのActiveXに警戒心を抱き、不安定なOSをさらに不安定にするため暗躍するのがJavascriptでありJScriptだった。
Google Mapsがあれだけのインパクトを与えたのは、ひとえに、こういった先入観を打ち砕いたからに尽きる。信じられないことに、Javascriptって便利なのだ。実に見事な枯れた技術の水平思考である。
Ajaxという言葉が帰納され、ライブラリがぼこぼこと発表される。ネイティブオブジェクトの拡張と、クロスブラウザのための供物ラッパー集合体たるprototype.jsを筆頭に、様々なものが世に出、様々なアプリケーションがより手軽に実装できるようになった。
script.aculo.usやLightBoxやmoo.fxといった、エフェクト中心のライブラリも出回り始める。IEのせいで煩雑な記述を強要されたグラフィックアーティストが、DOM操作によって問題を解決しようとし始めた。リンクにmouseoverしたらうっとうしいエフェクトを振りまくスクリプトが当たり前のように設けられた。このはてなも、いつの間にか大量のMochikit/*.jsを読み込んでページのレンダリングを遅らせている（たまにad.hatena.ne.jpのレスポンスが遅いときなど目も当てられない）。これらに共通することは、多くの人がそれを望んでいないということだ。
もちろん好ましい方向への進化もあった。OperaがUser Javascriptを発案・実装し、FirefoxもGreasemonkeyでそれに追随。SafariもCreammonkeyを得て、いわゆるモダンブラウザユーザーは、豊かなスクリプトライフを楽しめるようになった（IEにもなんとかいう同様の機構を実現する環境はあるが、IEユーザーには敷居が高いのかほとんど見かけない）。Livedoor ReaderやGoogle Readerはイベントを操作することで、キーボードでの操作を今までにないほど豊穣にした。入力フォームのリアルタイムバリデーション、Google AnalyticsやAdsenseの導入容易さなど、見るべき意匠もいくつかある。
しかし平均的に考えて、何の変哲もない個人ブログにJavascriptは必要ないものだ。素人がつくったタイマーは、いつもユーザーを憂鬱にする。素人がつくったAjaxサイトは、だいたいの場合IEとFirefox以外を排除するもっともらしい理由を得るためにAjaxを使う（Dellが自社サイト上で「Netscape4.6以上で閲覧せよ」と警告することによって、やる気のなさを主張するようなものだ）。
我々が自分のブラウザ上でページを表示するとき、Javascriptによる意外な効果などまったく期待していない。UIにおいては最速こそ正義、というmala氏の言葉を引用するまでもなく、不必要に重いサイトはそれだけで忌避するに足る理由となる。流行を追って常識を忘れるのは愚かとしか言いようがない。
Firefox(のNoScriptアドオン)とOperaは、ページごとサイトごとにきめ細かなJavascriptの挙動を設定できる（不勉強にしてSafariについては知らない。IEはできない）。Javascriptに限らず、広告ブロックや不要ファイルの無視、特定Flashの再生可否など、ユーザーは「何が要らないか」を指定でき、要らないものを気軽に突っぱねられるようになった。不要なものを除去する習慣が、ヘビーユーザーのあいだで間違いなく形成されつつあるのだ。
何かひとつのことをするためのJavascriptは、これからしばらく出現し続けるだろう。ウェブマスターが、重厚長大な飾りで貧弱なコンテンツを隠すためだけに。何かを拒絶するテクノロジーは、今後しばらく発展し続けるだろう。十重二十重のラッピングに疲れた人たちのために。
