The Trap of Web Design

自分が作った既存のスクリプトの機能実装付加の見積もり提出を頼まれまして。

その関連のネッコのスクリプトは一昨年に prototype.js で書き直していたのだけど、今回修正するものはやっておらず、共通箇所多いのに別スクリプトになっちゃってるのが気に入らず、書き直そうと思っていたそのタイミングが、ほかで jQuery 使って「オッホッホー！こりゃ簡単！」なんてときだったから、いきおいづいて、prototype.js のやつまで、jQuery 仕様に書き換えた。

やってみて分かった。prototype.js 使ったコードを書き換える場合においては「jQuery のコードのほうがみづらいし、書き換えは面倒くさい」（笑）

---

それで、もともとの機能付加スクリプトをどうするかで迷ってしまったのだけど、なんとなく勢いで「ゼロから書く分にはきっと jQuery が早い」という判断で、チャチャチャッと書いたんですが、ナニが困るって、jQuery にしちゃったら「ちょっと、ここでフェードしちゃったりして…」などと無くても良いエフェクトつけて遊んでしまったりするので、タダの機能付加だった筈が別物になってしまった。

フォームの検索窓を送出すれば良いだけなのに、アニメーションはともかく、submit したら Ajax 使って、その場で結果だしちゃったと。（ホントは別の詳細情報ページに飛ぶもの）よくあるブログパーツ化ですな（笑）

ま、別物は別物で良いか。このさいコレ提案して売ろう。

jQuery について

Ajax 自体は prototype.js でも一緒だけど、jQuery のほうが、どうも DOM いぢりが簡単に思えるのは、メソッドチェーンによるところが大きいとみた。だって、とりあえず、.animate() いれちゃって、easing させたりするのが、簡単で面白いんだもーん。

ここで言及するのもしかしてハジメテか。Sony とか White House とかが話題になってたりするし。FLASH はほぼやめたに近いのだけど、コッチは追求したい。

DOM Scripting はもともと得意分野で、Ajax もあの春の日（笑）から各所に実装してきたようなヤツですから、そりゃあ勿論、スキあらば使う、と思ってたんですが「jQuery でできることは、prototype.js でも出来る」（厳密にいえば、ライブラリは使わなくてもできる）から、いずれか追求していくほうが良いかも、と思って、出遅れました。

テーブル行の奇数偶数背景色変更を、$('.shimashima tr:even').addClass('even-row'); だけで書けちゃう！というやつで面白くなったのがキッカケで、一応いろいろチェックしてるんですが、そりゃアニメーション関係含めておもしろがっているのは確かだけど。

なんていうか、ここまで DOM Scripting が簡単だとさ、元の HTML と実際の（JavaScript 環境下の）表示とまるっきり変えることも簡単じゃないですか。いや、jQuery 以前からそういう意識を持っていながら、ソレ自体の需要があるわけじゃないし、JavaScript 依存するより、せいぜいスタイルシート上までの静的状況でどこまで対処できるか、ということもあったから、やらなかったダケでさ。

そんなこと考えてたら、どうも今後は制作手法が根本的に変わっちゃうような気がします。

とりあえず、CSS ハックとかはナシさー。互換モード IE を document.compatMode で振り分けたりしてさ、ソッチだけにブロックを append や wrap で追加してスタイル指定したりさー。JS 使ってない IE だと崩れるって、そんなのどーでもヨイサー（笑）

ま、以前以上に「どこまでサーバーサイド処理にするのか」「ナニを JavaScript でやるのか」「環境依存ナシでもっとも重要な情報を構造的に HTML 上に記述する」といった制作手順自体で最初に行うユーザービリティ対応について、キチンと整理整頓してコトにあたる必要がある、と思った次第です。

このサイトもそんなことで、jQuery 使ってます。clips2 スキンのチェックのために、こんなシンプルな状態になったんですが、そのおかげでかますのは簡単でした。フォームの Ajax 送出（いまんとこ、実はなによりもコレが一番のスパム防御だったりする）と、thickbox（なんかこれ、準拠モードと互換モードの差異吸収のためか、元のコードの幅や高さの指定箇所が冗長なんで、そのへん書き換えて使ってるから、そのうち、自前で作り直す予定）だけなんで、地味ですね（笑）