本日  昨日
 
03/16(Sun) 03:12

o ダイナミックHTML(Dynamic HTML)とは
ダイナミックHTML(Dynamic HTML)とは、今までのHTMLでは不可能だった、自由なポジショニングや動的表現を可能にしたHTML技術の事です。

インターネットの2大ブラウザ・Netscape Communicator と Internet Explorer はそれらの最新バージョン・Version4.0xにて共にDynamic HTMLをサポートしています。しかし、ここで大きな問題が・・両ブラウザのDHTMLプログラムには互換性がほとんどないという問題があります。

やはり、私を含めほとんどのホームページ作者はより多くの人に楽しんでもらえるホームページを目指していると思いますので、両ブラウザで同じように動く、Dynamic HTMLページを望んでいると思います。
この工作室では、当ページで適用した、クロスブラウザのサンプル集と解説を行うつもりです。

Dynamic HTMLの特徴

  1. Style Sheetで、コンテンツの自由なポジショニングが可能なため、かなり洗練されたデザインのコンテンツを作成出来ます。
  2. 今までよりインターラクティブで、きめ細かなホームページの製作が可能です。
  3. 文字の大きさやレイアウトなど、ブラウザの違いを意識せずに表示をHP作成者の意図に合わせてコントロールすることが可能になります。
  4. HTML自身に記述するため軽く、JAVAや、プラグインなどの技術を使わずに、比較的容易に動的コンテンツが作成できます。

o クロスブラウザ(Cross Browser)とは
クロスブラウザ(Cross Browser)とは、どのようなブラウザ ( 特に Netscape社の Netscape Communicator と Microsoft社の Internet Explorer )でも動作する HTML を指すようです。

ところが、 NC4.0 及び IE4.0 以降は StyleSheet と レイヤーを中心として CGI 等を使用せずダイナミックな動きや表現を演出する「Dynamic HTML」を前面に出した、 両社独自仕様の JavaScript を公開・実装したため、「Cross Browser」は非常に難しい問題となりました。

特に問題となるのは、両社の実装した新機能が非常に異なるために、両者を吸収する仕組み作りがホームページ作成者の課題となったこと、及び、StyleSheet とレイヤーの実装により、 古いバージョンのブラウザとの共存自体が事実上困難になったこと、ではないでしょうか。

  1. DHTML は IE4.0 又は NC4.0 以上のみでしか通用しない。
  2. DHTML は Style Sheet と JavaScript1.2 が必須で、JavaScript1.2 は Microsoft社 と Netscape社 で実装がかなり異なり、互換性の問題がある。
  3. IE4.0・NC4.0 で共に動作する DHTML が存在する。これを一般には「Cross Browser Dynamic HTML」と言います。
DHTMLを互換させるための基本テクニック
NC4.0とIE4.0のDHTMLを互換させるためには、いくつかのテクニックが必要となります。その基本的なものについて説明します。
No基本テクニック説明
CSSのpositioning HTMLに準拠する NCとIE共通で文字や画像などを動かせる状態にするにはCSSのpositionプロパティを使います。
NCのLAYERタグをなるべく使わない NCの独自タグであるLAYERはCSSでサポートされていません。NCはCSSベースのDHTMLもサポートしていますからDHTML表記をCSSに統一します。
IEのVBScriptやAxtiveXをなるべく使わない IE独自のこれらの機能もクロスブラウザの実現を目的には普通使われません。
NCとIEはオブジェクト構造が違いネストの扱いも異なります NCとIEはオブジェクトの仕様が異なっています。ネストされた(入れ子になった)レイヤーの表記方法がNCとIEとで違うので注意が必要です。

ブラウザの判定
互換DHTMLを作成するにあたって、NC4、IE4などの4.0バージョンのブラウザ間の違いを意識せずにDHTMLスクリプトを書けるようにするために、NC4、IE4かをスクリプト内で分岐する必要があります。

また、DHTMLやJavaScriptを使えない旧バージョンに対応するときにはブラウザやバージョンなどによって処理を分岐する方法も必要になります。
(1、2項のスクリプトは「だれでもカンタンDynamicHTMLサンプル集」から引用しました。)

  1. オブジェクトの有無を調べる
    <例1>
    if(document.layers||document.all){
    	//DHTMLを使える場合(NC4,IE4用)の命令をここに書く
    } else {
    	//DHTMLを使えない場合の命令をここに書く
    	alert('NC4かIE4以上でみてね^^;;')
    }
    
    <例2>
    (1)layers
      if(document.layers){
        //layersが使える場合(NN4用)の命令をここに書く
      }
    (2)all
      if(document.all){
        //allが使える場合(IE4用)の命令をここに書く
      }
    (3)images
      if(document.images){
        //imagesが使える場合(NN3,IE4[Mac版はIE3]以上用)の命令をここに書く
      }
    (4)opener
      if(document.opener){
        //openerが使える場合(NN2,NN3,IE4[Mac版はIE3]以上用)の命令をここに書く
      }
    
  2. ブラウザとバージョンを調べる
    var brwsr=(navigator.appName=="Netscape"||navigator.appName=="Microsoft Internet Explorer")
    var ver=(navigator.appVersion.charAt(0)>=4)
    var dhtmlbrwsr=(brwsr||ver)
    if(dhtmlbrwsr){
    	//DHTMLを使える場合(NC4,IE4以上用)の命令をここに書く
    } else {
    	//DHTMLを使えない場合の命令をここに書く
    	history.go(-1)  //前のページへ戻す
    }
    
  3. JavaScript未対応、JavaScript設定「無効」ブラウザのために <NOSCRIPT> <!--JavaScript未対応、JavaScript設定「無効」ブラウザ用のメッセ−ジ--> <font color=red> せっかくご来訪戴きましたが、ご覧のブラウザではこれより先をご案内することが出来ません。 </font><p> <font color=blue> (1)Netscape Ver2.0 または MSIE Ver3.0 以上の機能を有するブラウザを入手されるか<br> (2)上記以上のブラウザをお使いの場合は、JavaScriptの設定を「有効」にして </font><p> 再度ご来訪下さいますようお願いいたします。 </NOSCRIPT>
Cross Browser関数
各スクリプトの説明の中に、Cross Browser関数を明記してあります。この関数は、「だれでもカンタンDynamicHTMLサンプル集」から引用したもの(著作権フリーです)、自作のものがあります。この関数をコピーして<SCRIPT>と</SCRIPT>の間にペーストしておくだけでこの機能をNC,IE共通で利用できるようになります。
 
 
©1997- Kikuchisan's workshop All rights reserved //

スポンサーリンク

関連コンテンツ