Javascript/Javascript関連情報

クロスブラウザを制する Part 1 クロスブラウザとは

「クロスブラウザを制する」は、JavaScriptのクロスブラウザテクニックを紹介していくシリーズだ。今回はテクニックの解説に入る前にクロスブラウザスクリプトの概略と現況を眺めてみたい。

高橋 登史朗

執筆者:高橋 登史朗

Javascriptガイド


「クロスブラウザを制する」は、 JavaScriptのクロスブラウザテクニックを紹介していくシリーズだ。今回は第1回目ということでテクニックの解説に入る前にクロスブラウザスクリプトの概略と現況を眺めてみたい。| クロスブラウザを制するシリーズの目次 |

*


JavaScriptはブラウザ上で動作する最も普及した言語だ。JavaScriptは、IEでもNetscapeでもOperaでもプレステ2でもドリームキャストでもザウルスでもPalmでも動作させることができる。でも、困ったことがある。各ブラウザの動作が実は完全に同じでは無いことだ。

対象とするブラウザのバージョンやOSを限定すれば問題はないが、単純にそれだけでは、せっかくのクロスプラットフォーム王なJavaScriptの( しかもインターネットの )甲斐が無いというものだ。

この問題は、Netscape(NN)とIEがバージョン4になった1998年頃に決定的になった。当時最新の技術だったDHTMLをそれぞれのブラウザが違う方法で実装したからだ。この時はじめて、ユーザーの側から、ブラウザの違いを超えてひとつのコードで動かすための「クロスブラウザ」というテクニックが生まれたのだ。

しかし、NNとIEのブラウザ戦争もおおむね終結し、IEが大きなシェアを握っている現在、「クロスブラウザ」は多少コストの高い方法に見えなくもない。でも、本当にそうだろうか? 世の中はWindowsとIEだけではない。これ以外にも多くの環境が存在し、INTERNETはまさにそのるつぼなのだ。

ウェブ上で多くの人に見てもらいたかったら、ブラウザ毎の互換とそして、OSを超えた互換を気にする必要は、なかなか無くなりそうにもない。

WinのIEで作ってもMacで動くとは限らない。OS間の違いを埋めてくれるのは数多くのOS上でクロスに動いてくれるMozillaやNNだ。だから、IEとNN(Mozilla)の互換への気配りは相変わらず今年も必要というわけなのだ。

さて、ひとことで「クロスブラウザ」と言っても、いろいろな切り口がある。とりあえず、上記の歴史的な意味は別にして、ブラウザをクロスするという目的に添って考えると...

  • 1. JavaScript1.1で書く
  • 2. ブラウザ毎のページを複数用意する
  • 3. クロスブラウザ関数等のライブラリを利用する

    と、いった方法がある。

    まず、
    1. は一般的にはクロスブラウザとは呼ばれてはい ない。ただ、標準化されたJavaScriptの基本部分なので、結果としてクロスブラウザな仕上がりとなる。メンテナンスが楽で将来的にも安定しているとは思うが、DHTMLなどが使えないから基本的なおとなしいものしか作れない。それでも、今後、組み込み媒体(PDAや携帯や家電など)へのJavaScript実装が進むとこの部分が最も重要という場面がくるかもしれない。

    2. は手間のかかる手だが良い方法だ。各ブラウザに 最短で最適のコードだけを手渡すことができるからだ。 でも、ひとつの動作の為に複数のファイルの変更 とブラウザ毎のバランス調整を都度行わなければ ならないわけで、メンテナンスは気が遠くなるほど 大変なものになる可能性がある。しかし、たとえば、クロスのための分岐とクロスブラウザライブラリをサーバー側に用意することで、最適化されたクロスブラウザシステムを作れるといった可能性はある。これは、後日検討してみたい。

    3. は一般的なクロスブラウザ手法だ。ブラウザ間の 違いは既成の(または自作の)関数などで吸収して プログラムの本筋とは外れたブラウザの実装の差異 に頭を悩ませなくても良いようにするというやり方だ。 少し長めのコードになるのが欠点だが、将来新しい ブラウザが出てきたときもプログラムの流れには触 らずに関数やオブジェクトだけを取り替えれば良いわけだからメン テナンスも楽になるはずだ。

    このシリーズで取り上げるのは主に3の方法だ。 いくつかの機能を毎回ひとつずつ取り上げてクロス ブラウザな関数を提供していく。

    実際の現場では更にいろいろなテクニックを複合して 仕上げられているというのが現状だが、クロスな関数 中身がわかればブラウザ毎に分解して使うことも可能だ。

    主なターゲットブラウザはWin/Mac/LinuxのNN4と Win/MacのIE4にIE5、そして、NN6とそのベースであるMozillaだ。


    参考 : DynamicHTML/cross-browser Examples
  • 【編集部おすすめの購入サイト】
    楽天市場で Javascript 関連の書籍を見るAmazon で Javascript 関連の書籍を見る
    ※記事内容は執筆時点のものです。最新の内容をご確認ください。
    ※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

    あわせて読みたい

    あなたにオススメ

      表示について

      カテゴリー一覧

      All Aboutサービス・メディア

      All About公式SNS
      日々の生活や仕事を楽しむための情報を毎日お届けします。
      公式SNS一覧
      © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます