The Trap of Web Design

昨日ブロックの領域スクロールの JavaScript 書きました。この ichiro.to のサイトでさ、すごーい昔（ネットスケープ 4時代終盤）にウインドウスクロール（およびスクロールバー自体）まで自由にできたら良いよなぁ、とやったことあるんだけど、その後仕様準拠だとかアクセシビリティとかを考えるようになってからそうそうやらなくなったもののひとつ。

例によって prototype.jp や Rico とか使えば簡単だなとか思ったんだけど、サラリとみたところちょっと考えた動作にするには逆に二度手間（無用な動作が増える）になるなと思い、普通に function 書いた。スタイルシート側で入れ子にしたブロック要素を position: absolute; にして、親で表示領域指定。overflow: hidden; にしておき、小要素側は高さを指定しないでおく、と。

---

要素の高さは obj.offsetHeight で取得。ページ描画完了後（本当はそのブロック生成完了後）に取得するように onload イベントにしておく。スクロールのボタンは onmousedown にて呼び出す。動かすブロックが親ブロックの高さを超えているときに setInterval で obj.offsetTop を変化させる。

そもそも最近は HTML 側に属性で on ナンチャラを書く事もやらなくなりつつあるんだけど、今回のスクリプトは公開が限定されている端末用なんでそのへんはわざわざキレイに書くような必要がない。だいたい HTML 側も文書構造なんてほぼどうでもよくて、body 以下の内容は殆どが position:absolute; の div ブロックで構成しているものだから、そういう気遣いは全くしてない。そのへんは実は通常のウェブページよりも単純明快。うごけばいいの、うごけば（笑）ユーザーエージェント毎の判別処理なんかもいれてないし。

setInterval や setTimeout ってユーザーエージェント側の能力によって数値そのままのスピードにならんことがあり、早くしたらメモリや CPU を食う。なのにテスト用実機は頂けない制作環境なのでそのへんは勘。北海道内複数各所の端末でタッチパネルのモニターで動作させるやつなんだけど。

ここで疑問。タッチパネルで onmousedown って効くのか？ onmouseover は使わないようにしてるんだけど。

そんなんでテストは手元の通常環境で終わっちゃってあとは稼働後に現地に行かねば分からん（笑）という。ウェブ以外に情報端末で動作する Director のやつとか作ったりもするんけど、そういう場合はテスト用実機を貰ってさんざんチェックしたあと実機毎納品する。最近はほとんど FLASH。自分はあんまり担当しなくなって、たまにチェックしてるのみてツッコミいれてたりする（笑）

上記作業がなんとかなったから次に先日二週間程度行われたイベントの公式サイトにおまけで期間中に撮った画像をいれるっていうのを作った。イベント自体が終了してしまっていて、アクセスもすでに少なくなってるんだけど、制作管理を結構自由にやらせていただいてて、いっぱい画像あるから出したいね、って希望があったのでやっとこうか、って感じで。あくまでもオマケ扱いで実は見た目にはどこにもリンクが張っていないという。見つけた方おめでとう、みたいな。関係者にも知らせてやんない（笑）みつけてなんかいわれたら対処する。

ウェブで画像ライブラリ作るとなると凝るならいくらでもネタはあるけど、今回のは prototype.js の new Ajax.request で呼び込んだ HTML ソース内に lightbox.js のコードを仕込むというよくあるパターンで数分で作っちゃった。画像呼び出しも PHP でディレクトリ内一覧取得で自動化したので、画像アップロードしたらでる。

Ajax で呼び込んだ HTML に lightbox のコードいれたって動作しないじゃん、ってなんか前もやった気がするんだけど。ようはさ、lightbox.js ではページ読み込み時に rel 属性を探して、lightbox ってキーワードがはいってるやつを DOM 操作してるわけだから、一度ページ描画した後に innerHTML なんかで書き換えちゃった中身に対してそのままでは動作を付加できない。てことは、書き換え時に再度 lightbox.js にソース解釈させれば良いわけで、それ行ってるスクリプト記述を探した。

一番最後に initLightbox() ってある。それを innerHTML 書き換え後に呼び出したら動いた。それだけ。

ちなみに MacIE はライブラリ JS へのリンクコード自体を送出しないようにしてるので、見れず、エラーも出ません。どんどん対処をやめちゃってよいでしょ。もう。