スタイルシート、JavaScript、DOM、ブラウザ判別、PHP 等ウェブ制作関連の各種情報
JavaScript でも FLASH でもそうですが、こういったユーザーエージェント側の機能を使う場合は、常にユーザー側環境で使えない環境になっていることを意識する必要があります。この点への気遣いというか配慮がまず抜けてる状況によくでくわします。自分はその大変さをよく知っています。クライアントに簡単に画像きりかえ、画面上でパーツを動かす等を頼まれることはあることです。しかしながらそれによってどういう効果を得ようとしているのか、を問いただすとやる気をなくします。実際普通にユーザーとして見て廻っているときに「動くから面白い」と思うのと「ウザい、邪魔」と思うのとドッチが多いか、よーく考えたい。自分は制作開始初期からなんでもかんでも動かしてきましたが、そろそろそういうのは若いモノにまかせたい（笑）。
最近こういったことを真面目に考えてます。サーバーサイドスクリプト等もかなり自由に扱えるようになると、その使い分けの判断が重要だからです。
サーバーサイドスクリプトにできない、あるいはスマートな動作ではない状況、ひとことでいうと「ページ描画後にページ自体をリロードや移動することなく、なんらかの変化をさせる」場合にJavaScriptを使います。インタラクティブな効果（ユーザーのマウスオーバー等での変化）はやり方によってはユーザビリティ向上の意味も持ちます。中でも有益なのが「フォーム等の入力内容チェック」。JavaScriptを使うべき箇所の筆頭ではないかと思う。
使う場合には必ず、動作しない場合に例えばページ移動ができない、情報が見れないという状況を作らないようにする対策記述をします。情報そのものがどうしても代替え表示不可能な場合もあります。そういった場合は記述タグ自体をJavaScriptで送出してしまいます。非対応環境では「動作しないもの」を出すのではなく、その内容自体を提供しないようにするのです。情報そのものがコンテンツとして重要な箇所は、そんなことしません。その上で全く別の表現での代替え表示を行います。
ウェブページでユーザビリティ、アクセシビリティの観点を重要視するようになればなおさらのこと、リンク記述をJavaScriptで制御する場合は気をつけなければなりません。JavaScriptが動作しない環境や、そのスクリプトでエラーを出せば、ハイパーリンク自体が動作せず、ユーザーは見たい情報にたどり着けなくなります。
<a href="javascript:void(0);">リンク</a> とするのはアウト。JavaScriptが動作しない場合に、デッドリンクになる。<a href="#">リンク</a> とするのも基本的にアウト。JavaScriptが動作しない場合に「現在開いてるページを再読み込み」することになる。上記は「JavaScriptで制御するために、通常動作をさせない」JavaScriptでの手法としてよく解説されていますが、正しくありません。href属性には、JavaScript の動作に関わらず、必ずハイパーリンク指定をしなければならない。通常は、onclick="return false;" 等とすることで、通常動作を制御するのが正しい。
「クリック」というイベントをキッカケとするために、必ず a 要素でなければならないということはないので、例えば「クリックしたら（ページ移動なしで）隠れた画像を表示する」という場合は、クリックしたい箇所の要素にonclick="hogehoge();return false;" というイベント記述をすればよいのです。また、その場合、スタイルシートでカーソルを変更したり、ボタン風にしたり、他のハイパーリンクに似せたりすることで、ユーザビリティを確保します。
HTML自体では制御不能なことが可能になるのがJavaScriptですが、基本的にそういったページ移動制御をJavaScript依存で記述してはいけない、ということです。最初からJavaScriptでの動作効果を作る前にまずノーマルな状況で動作するようにして、その上にJavaScriptの効果を「重ねる」ようにします。状況によっては、ノーマル用の記述はそのまま noscript 要素の内容とします。
また、スクリプトの代替えがないような場合、例えば「ウインドウを閉じる（window.close()）」「前のページに戻る（history.back()）」といったようなものは、その箇所のHTMLソース自体をJavaScriptの document.write()、もしくは DOM制御の cleateElement等を使って、JavaScript非動作環境ではその記述（送出）自体をしないようにします。
DOM制御が非常にやりやすくなってきました。 CSSと絡めて「キチンと記述すればキチンと動作する」状況になりつつあります。以前はブラウザ毎に別処理をするのが普通でしたから（現在でも以前との互換を考えると記述量は増えたりしますが）そういったことに惑わされずに動作そのものの最適化に時間を使えます。
また、 CSS対応環境が一般的になれば、JavaScriptを使わなくても可能な事があります。よくある「マウスオーバー画像きりかえボタン」等は、a:hoverを使えば可能。ハッキリいってわざわざ画像にしなくても良かったり。そういう箇所は、JavaScriptを使わない方法にしたほうが、何かとよろしいもので。
使うなら「使わなきゃ不可能」な表現をしたいもので、その上で「もし機能を外されてもサイト自体の動作や情報提供になんら影響はない」状況にいかに持っていくか、をシッカリ裏側で整備しなければならないから大変なのです。それに、使ったのならなんらかのユーザー側への利益提供があるようにしないと、ユーザーは、スクリプト使ってるだけで見ない、嫌い、という状況になり、これは他にクッキーの利用や、FLASH でも同様で、どうでもいいモノが増えると、よいモノまで嫌われる傾向にある気がして、だから（個人サイトはともかく）企業サイトや行政サイトなどで「どうでもいいところで」「あってもなくてもよい」スクリプト表現はどんどんやめていただきたいと考える訳です。ということで、オマエはドウナンダといわれそうですが、自分はだからこそここのホームのようなヤツは他ではやらないわけで、実はコッソリ各所に仕込まれているユーザー側にはスクリプトと分からない、だけどスクリプトがなければできないコトが一番重要だったりするのでした。
noscript要素というものがあります。意味的に似た要素にはnoframes要素というのもあります。これらの要素の使い方で「うむ」というものにもあまり出会いません。仕方ないので自分が書きます。ただ、困ったことに仕様書どおりの記述で期待する動作をしないユーザーエージェントがあります。
noscript要素は「スクリプト未対応ユーザーエージェントは送出して、対応していれば送出しない」ものです。スクリプト非動作環境での代替えコンテンツを提供します。では「代替えコンテンツ」というものはどのようなモノでしょうか？「スクリプトがオフ、または対応していません。オンにするか、対応ブラウザをお使い下さい」というのではなくて、そういう環境は少ないから、というのではなく、役に立つ使い方ができる気がするのですが。
ようはこれはひとつの「ブラウザ判別」です。JavaScriptバリバリのページを作っておいて、それが送出できない場合のみ「代替え」といわず「専用」コンテンツを送出してみようと考えてみましょう。本来はJavaScriptだとクライアントサイドの処理で済むのでそのほうがよいのだけれど、ダメならサーバーサイドの処理を使うようにするということだってあるんじゃなかろうか。
例：フォームのプルダウンで小窓を出すような場合、新しいウインドウのサイズを固定するためにはJavaScriptが必要なのですが、つかわなければ普通にリンクして同じページ（別でも良い）を開く、とか。ほかにも考えよう。
時間があると解析している JavaScript の可能性でビビることのできるページ。
上のページ知ってたんで表現として新鮮さはなかったんですが Google のマップサイトの今後にも期待。
更新 2007-08-19 01:58 初回投稿 2005年05月17日 02:38
フリーのウェブサイトディレクター。音響オペレーター。北海道札幌にて活動中。
Web Site designed by Studio Susto