犬土偶日記
海の近くに住みたい
話題：Webプログラミングとか
2004年11月01日
CSSとJavaScript
公開日時： 不明
日曜のスロデータのページを作り始めたんだが、台ごとのデータをtableで表示すると列数が多すぎてセル内で変に改行されまくりで読みづらくなる。かと言って改行禁止のスタイルを使うと今度は解像度の小さい環境では横方向のスクロールバーが出てしまう。横方向のスクロールの鬱陶しさは誰でも理解できると思う。それだけは何としても避けるべきなのだ。ということで、必要な列だけを表示することはできないかと考えてみたりした。列をグループ化してそこにスタイルを適用する。見えなくするにはdisplay:none;だ。でもよく調べるとtableのcolgroupやcolを不可視にするにはvisibility:collapse;を使うらしい。ということで、とりあえずXHTMLで表を作り、そこにスタイルを適用してみた。IEはvisibility:collapse;だと思いっきり無視されるようだ。display:none;にするとちゃんと消える。まぁブラウザの実装状況がそうなのだからそうするしかないだろうと諦め、でもふと思い直してネスケとオペラでも見てみた。ここからが地獄ですよ。ネスケではIEとは逆にdisplay:none;では消えずにvisibility:collapse;で消えるのです。そしてオペラはどっちも無反応。これは困ったぞ。それにスタイルを切り替えるのはJavaScriptだ。ブラウザごとに違う処理をするとなれば各ブラウザ特有のオブジェクトやメソッドを真偽判定してブラウザを特定しなきゃいけない。あんまりJavaScriptは詳しくないから調べるのが大変だ。どっちにしろOperaでは列を消せないのだから、列を消したり表示させたりするスイッチとしてのフォームコントロールをも表示しないようにしなくてはいけない。Operaでは元々そんな機能など無いように見えなければならない。困った。実際のスタイル、スイッチの部分、と二重に考えなければならない。ブラウザの設定でスクリプトをOFFにしてる場合も考えないといけない。フォームのチェックボックスをスイッチに使うことにしたんだが、それに対応するイベントハンドラがどうにもしっくり来ない。oncheckとかonuncheckとかいう属性があっても良さそうなものなのに。しょうがないからチェックされたかどうかではなく、クリックされたかどうかで調べる。その場合、キーボードでTabキーを押してフォーカスしてEnterキーでチェックされる可能性も考えてonkeypressとonclickで処理する。そしてscript要素にJavaScriptを書き殴る。スクリプトが動く環境ではその部分を実行し、動かない環境では何も起こらない。それで切り替えスイッチの部分を書き出せばよい。そう思ったんだが、しかしXHTMLではscript要素内にタグを書いてはいけない。タグというか『<』や『>』のようなものを書いてはいけない。そういうものは『<』『>』のようにしないといけない。でもそうするとタグとして機能しないからそのまま表示されてしまうし、実は『&』もスクリプト内に書いてはいけない。そういうのが出現するスクリプトは外部ファイルとして用意しないといけないことになっている。仕方がないから外部ファイルを用意してfunctionを用意し、それを実行させたい部分でいちいち<script type="text/javascript">関数名(引数);</script>みたいに書かないといけない。Operaでは不要だからOperaでは書き出さないようにしないといけない。そしてIEとネスケならスイッチ部分を書き出せばいいんだが、ここに問題がある。実際にスタイルを切り替えるfunctionにID名を引数として渡す。困った事にid属性は一意のものだから複数の要素に同じIDをつける事ができない。それで何が困るのかというと、IEでdisplay:none;が適用されるのはcol要素だけでcolgroupには効かないのです。ネスケの場合は、display:none;はcolgroupにもcolにも効かないんだが、visibility:collapse;がcolには効かずにcolgroupに効くんだ。これはヤバイ。もし両方ともcolに効くのならcolのidをスクリプトに送ってgetElementByIdで要素を取得してそのスタイルをブラウザに応じて書き換えればいい。でもネスケならcolgroup、IEならcolのスタイルを書き換えるということになり、IDは一意なのでfunctionに送る引数もブラウザごとに変えないといけないわけなのです。ブラウザによってcolのidを送るか、colgroupのidを送るか振り分けないといけない。同じIDが使えるならラクなんだけどそれができない。それに最初は合計のデータだけ表示しておいて、チェックすると表示される、という風にしたかったんだが、それだと最初から非表示にしないといけないので、スクリプトOFFの環境では表示することができなくなってしまう。スクリプトOFFの状態を考慮すれば通常のtableを全てJavaScriptに書かせて<noscript>でもう1個同じtableを書かないといけないのか？Operaは非表示にできないからそのままでもOK。でも最初から非表示だと困るぞ。それにソースが美しくない。やり方がスマートではない。それに、スクリプトがOFFでもスタイルシートがOFFになるわけではないから、スタイル要素内にtableの列を非表示にするスタイルが記述されてれば消えてしまう。noscriptで書き出すtableの列にはidを指定せずにスタイルが適用されないようにすればいいだろうか。結局、IE、NN、OP、スクリプトOFF、色々考えないといけなくなった。
なんか色々考えてるうちに混乱してきた。CSSの実装状況が各ブラウザごとにめちゃめちゃ違うので、同じようにやろうと思うと共通するものしか使えないわけだが、それだと激しくショボいやつになる。というか俺がやろうとしてることは実現不可能。だからブラウザごとに振り分けないといけないんだが、そうするためにCGIを使わないならばJavaScriptを使うしかないわけで、めんどくさいことにJavaScriptの実装も各ブラウザでかなり違ってたりするのでめちゃめちゃ大変だ。今は特定のブラウザしか対応してないオブジェクトを真偽判定してブラウザを特定するような強引な技は、将来他のブラウザがそのオブジェクトに対応する事で無残な結果をもたらす。そもそも俺が念頭に置いてるブラウザがIEとNNとOPだけってのがおかしい。他のブラウザを使ってる人もいるだろう。世の中には俺の知らないユーザーエージェントがたくさん存在する。この3大ブラウザとはCSS・JavaScriptの実装が中途半端に違う環境も存在する可能性が高い。だからハッキリ言って俺がやってることは無意味なのだ。DynamicHTMLというのは本来、強烈に環境に依存するクソ技術なのだ。このページを見たい奴はこのブラウザのこのバージョンで見ろとか、かなり閲覧者に無理強いするウンコなものなのだ。俺が嫌いなのはそういう理由があるからだ。ならばやらなくてもいいじゃないかと思った。何で無理にこんなことしてるんだろう。表のセル内で改行されたって読めないわけじゃない。読みにくいだけだ。大半の人がIEを使ってるんだからIEの人向けにオマケとして実装すればいい。他のブラウザではDHTMLが動かないようにするだけでいいじゃないか。そもそもこんなに苦労してもこのページを見る奴なんてほとんど居ないぞ。苦労が報われない。多少勉強になったかもしれんが、CSS以外の部分は無駄な知識だ。ブラウザごとに同じように見せようなんてことは時間の無駄だ。そう思ってIE以外の部分の処理は全て消した。スッキリした。これでもIEなら実行という部分でdocument.charsetというオブジェクトをブラウザ判定に使っている。IE以外で対応してるブラウザがあったら死ぬ可能性が高い。何故ならcolを消すスタイルシートの実装はIEが間違ってるからだ。document.charsetに対応してて且つ正しくCSSを実装してるブラウザがあれば酷いことになる。つまりあのスロデータのページはウンコまみれの駄作ということになる。データとしての価値がないとまで言えるかどうかは分からないが、相当ダメダメな物になった。まぁ元々どうでもいい内容なので今回は放置ですが。なんかそんなようなことで1日無駄に過ごしてみた。夕方眠くなったので布団に倒れこんだら深夜まで寝てた。録画しておいたHEY!HEY!HEY!を見たらもう朝になっていた。雨戸締め切ってるから時間の感覚がない。と書きながらPCの右下の時計を見たらもう10時半！なんじゃこりゃ！！HEY!HEY!HEY!見てからギター弾いたり本読んだり飯食ったりとかしてたらいつの間にかこんな時間だよ。何もしないうちに時間だけが過ぎていく。ヤバイな。いつの間にか11月に入ってるし。仕事でやってるCGIも早く作らねば。激しくめんどくせぇけどやるしかない。納期があるからね。遊びでやるのと仕事でやるのとではやる気の度合いが著しく違う。もうこれ系の仕事はやらないと思う。面白くない。遊びでやるからこそ面白い。面白くなければやる価値は無い。
話題：Webプログラミングとか
Info.
| 公開日時 | 不明 |
|---|---|
| 本文文字数 | 3975文字 (タグ込み) |
| URL | https://orca.xii.jp/debug/diary/diary.cgi?id=dogoo;date=20041101 |
| RSS1.0 | https://orca.xii.jp/info/diary-dogoo.rdf |
Comments
コメントはありません。