LotusNotesな日々IBM社のLotusNotesに関係する何かを日々語ってるようなきがしないでもないブログです。 

スポンサーサイト

   ↑  --/--/-- (--)  カテゴリー: スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

(記事編集) http://mesosune.blog123.fc2.com/?overture" target="_new

--/--/-- | Comment (-) | HOME | ↑ ページ先頭へ |

クロスブラウザ対応の必要性

   ↑  2007/12/14 (金)  カテゴリー: HTML/XML/XHTML
今回は、WEBページを触れてCSSとかJavaScriptという単語は知ってるよ?
という程度の技術力の開発者の方向けに
とっつきやすさだけを目指しているのでいろいろ間違っています。
「ソコは間違っているぜ!」をいいたい方は、
お手数ですけど、コメントを「管理者のみ閲覧可」にしてくださいませ(笑)

歴史的背景とかも恐ろしく省略した書き方をしています。

何が略されているか、
何がどう間違っているかが気になった方は検索をしてみてください。

※携帯用ブラウザ対応はちょっと別次元なので今回はパス。
-------------------
1.何故いろいろな環境に対応しなくちゃいけないの?
-------------------
今までユーザーエージェント(UA)といえば「ブラウザ」で、
「ブラウザ」といえば、InternetExploer(IE)かNetScape(NN)だった。
OSは、WindowsかMacだった。

むろん今までにもメールクライアントがHTMLを表示できたりしていたし、
MacもWindowsもバージョンが違えば動作が違っていた。

ここ最近、RedHat(Linux)のGUI化、ブラウザの多様性により
初心者でも気軽に凝った環境を使うことが出来るようになり、
それが「多数」になってきている。

昔は"特殊な環境"に対応するしないは開発者の良心に任されている面も多くあった。

しかし、今は"環境の多様性に合わせて動作するのが当然"で、
標準化意識の浸透により対応するのが自然という認識が業界だけではなく
一般のユーザの間にもできてきている。

(ユーザフレンドリー/ユーザビリティの問題もあるけど
あまりつっこんでいくとここだけで1000文字超えるので、略略。)

-------------------
2.何故クロスブラウザにしなければならないか。
-------------------
表示する側の環境の多様性に対応しようとしたことにする。

一個づつ設計要素を新規で加えて対応するのは
「同じものを表示する」と考えると
資源的にも工数的にも相当無駄であると思うだろうし
一緒のところにちょこちょこっと追加して対応できるのならそっちのほうが楽だと考えるだろう。

そうやって色々な人が頭をひねくった結果が、クロスブラウザという概念。

-------------------
3.どうやってクロスブラウザを実現すればよいの?
-------------------

(1)基本は記述規則

一番にいえることはDTD(Document Type Definition:マークアップ規則)を守って記述するということ。

CSSとかJavaScriptの記述法則をいくらきれいにしたところで、マークアップ規則が正しくないと、
CSSやJavaScriptに対応していないブラウザでは何がなんだか分からないよ!
ということがおきうる。
HTMLだけでCSSとかJavaScriptがなくとも表示できる状態までもっていくのが好ましい。

HTMLはかなりマークアップが適当でも表示してくれるので、
慣れていないうちは間違っていても意外と気がつかなかったりする。

正しくマークアップしくしようと思うと、相当にきちんと考えないと出来ない。
しかし、マークアップ規則が正しいHTML文書は
CSSやJavaScriptを適用する作業を、時に100、200倍と早くすることになる。

※ちょっと細かい話。
HTMLにもバージョンが存在し、ブラウザによってもどのHTMLバージョンを正とするかは異なる。
依存関係もあるので、HTMLライブラリなどで確認しながら作業を行うことが必要。
(元々があまり難しいことをしなければ依存関係がある変なタグも使わないで済んだりするんですけどね)

(2)CSSを使わないでもタグで装飾できるよね。

元々HTMLは文字の色とかも全てタグ(の要素)で行っていた。
色とか形とかの装飾表現まで全てタグで表現していると
本当の意味で「互換性がなくなりそう」だったので、CSSで装飾表現を行うようになった。

「タグ中に装飾を直接書き込むのは依存するので推奨されていない」
と覚えておくと楽。

(3)JavaScriptもタグにかけるよね。

簡単な処理なら確かにできるが、
分岐を含めて、動作をタグ内だけで全てを行うのは事実上不可能と思ったほうが良い。
出来たとしても、タグとかにかいていると改変時に困るだけなのでお勧めできない。

JavaScriptにもバージョンがある。
ブラウザによって対応しているバージョンの違いがあるので注意が必要。
また、同じブラウザでもブラウザのバージョンによって動きが大きく異なることもある。

こればっかりは調べながらやるしかない。

分岐をするためには、
・ブラウザの種類を調べる
・ブラウザの種類とバージョンを調べる。
・ブラウザがそのJavaScriptをサポートしているかどうかを調べる。
などの方法がある。

(4)CSS/JavaScriptのテクニック?
CSSもJavaScriptもブラウザ(UA)ごとの仕様(バグとかもここでは仕様と言い切ってみる)を
うまいこと利用して分岐しようとしても調べていくと
「全てのブラウザに対応することは出来ない」のが分かると思う。

つまるところ、結局は「どの多数を取るか?」という作業になる。

どの多数を取るのかというのはそのサイトの活用方向にもよるが、
(1)でしっかり「CSSとかJavaScriptがなくとも表示できるサイト」になっているのなら
一定条件以外はCSSやJavaScriptは適用しないとしてやればいいので、
あまり心配するところではないのかもしれない。

どこで区切りをつけて諦めるか。というのもとても大切。

※不具合による仕様を利用した仕組みを作ることを「ハックする」と一般的にいいます。
仕様などを調べる際に吃驚したり、「悪いことだ!」と頭から思い込みませんように;と書いておきます。

(5)確認環境は?
一定のスクリプト対応がなされる前と後ではっきりとわかるものを使ってテストするのが良いと思う。
たとえばWindowsだとIE(5.0以降)とNN4.7の環境の差とか。

環境がないよ!という方は、
こんなソフトウェアもあったりするのでご検討を。
スポンサーサイト

(記事編集) http://mesosune.blog123.fc2.com/blog-entry-49.html

2007/12/14 | Comment (0) | Trackback (0) | HOME | ↑ ページ先頭へ |
この次の記事 : 競合回避方法(@式)
この前の記事 : 右クリック - 2

Comment

コメントを投稿する 記事: クロスブラウザ対応の必要性

お気軽にコメントをぞうぞ。
非公開 (管理人のみ閲覧可能なコメント) にしたい場合には、ロック にチェックを入れてください。

  任意 : 後から修正や削除ができます。
  非公開コメントとして投稿する。(管理人にのみ公開)
 

Trackback

この次の記事 : 競合回避方法(@式)
この前の記事 : 右クリック - 2
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。