NN&IE互換のDHTMLだっ

1998.7.9--昨日DHTML本脱稿しました(へへ)。7/24頃に出回るそうですが、前著の時はすぐに完売してなかなか手に入りませんでしたから(笑;;)もしかしたら予約しておいた方が安全かも(_ _b(部数少ないんです^^;)。タイトルは「だれでもカンタンDynamicHTMLサンプル集」; 発行 : 秀和システム ; 著者 : 高橋登史朗 ; ISBN4-87966-807-9ということになってます。タイトルは「カンタン」でも入手は「カンタン」ではないよ～とf^^;;;;。え～と値段は確か2800円+税だと思います。

著作権フリーのcrooss-browserのDHTMLscriptが90本CD-ROMに入ってるのでかなりお得な気はします(^-^)。本というよりアプリな感じですね～。

***
ここでやろうとしているのはNNとIE共通で動くDynamicHTML(最近はCross Browserなどと呼ばれています)の基本文法をあぶりだそうということです。これは、わたしもやってみなければわかりませんが(笑)、たぶんNetscape社にもMicrosoft社にもわからない? or 公表していない部分についての作業です。

Cross BrowserがあたりまえのJavaScriptから見るとこの言い回し自体が変な感じ(笑)なんですがDynamicHTMLを扱う時にはこの考え方無しでNNとIEを互換させることは不可能です。

そして、当然ですがJavaScript1.1＋アルファの部分とW3CのCSS-Pに関して両ブラウザはかなり互換しており、その部分だけでも充分にブラウザをベースとしたクロスプラットフォームでかつ使えるDHTMLアプリ開発ができそうに思えます。NNとIEのDHTMLが非互換だとあきらめてonlyNNやonlyIEへ走ってしまう前に互換部分で使えるものについてもう少し調べてみましょう(^0^)/。INTERNETは無数の異環境を結び付けてゆく世界です。そこで、必要とされる言語の特性が少なくとも非互換ではないことだけはどうせ(笑)明らかなのですから。

Dynamic HTMLはデザイナー本来の表現能力を引き出してくれる本格的なWebデザイン時代の技術だ。

高橋登史朗
「ワイア－ド」１９９８．３号掲出の原稿より

　DHTML(Dynamic HTML)を使うと、ページに貼り込まれた画像や文字やボタンやフォームなどのすべてのHTML要素をレイヤー化して見えなくしたり、見えるようにしたり、位置を動かしたり、重なり合わせたりということが自由に、好きなタイミングで、しかも、ピクセルやcmなどの望みの絶対位置指定に従ってデザインできるようになる。しかも、プラグインもヘルパーアプリも必要ない。HTMLを書くのと同様にフリーのエディターがあれば作れて、ブラウザだけで見ることができる。

　つまり、DHTMLとは文字通り、これまでのスタティック(静的)すぎたHTMLに対するダイナミック(動的)なHTMLということなのだ。　DHTMLはHTMLなどWWWに関するさまざまな規格を作っているW3C(World Wide Web Consortium)によって1997年1月と8月に草案化されたCSS-P(Positionig HTML Elements width CSS)注1をベースにJavaScriptなどを使ってコントロールするかたちでネットスケープ社のCommunicator4.0とマイクロソフト社のIE4.0という2大ブラウザに搭載された。

　この草案の著者名のところにはネットスケープとマイクロソフトの担当者名が仲良く並んでいる。これを見て想像できる通りCSS-PをベースとしたDHTMLに関してこの2つのブラウザは互換しており、一応1本のJavaScriptコードを書くだけで両方のブラウザで動作させることが可能である(若干のテクニックは必要だが)。
　ところが、両社がブラウザ戦争を繰り広げるなかで、それぞれが自社の優位性と独自性とを競って宣伝した結果、約1年経過した現在、世間ではなぜか「DHTMLは全く互換性がないらしい?」ということになってしまっている。確かに、両社が拡張したかなりの数の命令は互換性が低く、それぞれのページを見て学べば学ぶほど独自の非互換のコードができ上がるという悲しい状況なのだが、実は、DHTMLの恩恵と呼べる大抵のことはそれら独自のコードなど使わずにCSS-P関連の両ブラウザに共通する命令(JavaScript)だけで実現できるのだ。

　問題は、両社がお互いに自社の独自性を競っている立場上クロスブラウザコードについての解説をしにくい?ことかもしれない。　しかし、そういう情報が入手しにくいとは言っても、INTERNETがマシンや言語など多くの異なった環境を包含するために最大公約数的な共通の仕様をより選択しやすい傾向があることを考え合わせるなら、DHTMLの未来もまたそのあたりに着地してゆく可能性は低くはないだろう(もちろん、両社がDHTML完全互換のブラウザを作ってくれるのがユーザーには1番なのだが...)。　現在、両社が提唱するDHTMLには上記のようにダイナミックな、たとえばインタラクティブなアニメーションを可能にする技術などの他にも、FONTをネット上から取り込んで意図した通りのデザイン画面を構築したり、Netcasterのようにプッシュ型コンテンツに関する技術やデータベース関連の技術などが目白押しでまさに目が離せない状況となっている。

　97年末にリリースされたMacromediaのDHTML対応ツール「Dreamweaver」は、ドラックドロップでページ内の絶対位置へコンテンツを配置できたり、アニメーションを作れるなどのすぐれものだ。また、他社からも98年には対応ツールのリリースが予定されており、時代はDHTMLによる本格的なWebデザインへと向かい始めているようだ。

注1
[ W3C ] Positioning HTML Elements with Cascading Style Sheets (CSS-P)
http://www.w3.org/TR/WD-positioning

[ Netscape ] JavaScript Guide(11/26/97)
http://developer.netscape.com/library/documentation/communicator/jsguide4/index.htm

[ Netscape ] JavaScriptリファレンス(10/31/97)
http://developer.netscape.com/library/documentation/communicator/jsref/index.htm

[ Netscape ] DYNAMIC HTML IN NETSCAPE COMMUNICATOR(08/07/97)
http://developer.netscape.com/library/documentation/communicator/dynhtml/index.htm

[ Microsoft ] Dynamic HTML
http://www.microsoft.com/workshop/author/dhtml/

[ Microsoft ] DHTML References
http://www.microsoft.com/msdn/sdk/inetsdk/help/dhtml/references/dhtmlrefs.htm

*ワイア－ド　発行ＤＤＰデジタルパブリッシング　０１２０－０７－４９４６

ちなみにこの文章は

<DIV ID="Msg1"
       STYLE="position:absolute;
              left:20;
              top:100;
              width:480;
              visibility:hidden;
">
文章
</DIV>

で画面左から２０ピクセル、上から１００ピクセル、幅４８０ピクセルのレイヤを作ってから文章を流し込んでいます。表示visibilityをhiddenにしてあるのであとでvisibleに変更するまで画面には表示されません。こうしておいてからあとでtitle　bar内のリンクをクリックしたときにvisibilityをvisibleに変更するようにしています。

で、
visibilityをvisibleに変更するのに

  function showLAYER(layer名){
    if(document.layers)document.layers[layer名].visibility='show'
    if(document.all)document.all(layer名).style.visibility='visible'
  }

というfunctionをここでは使っています。
if(document.layers)document.layers[layer名].visibility='show'はＮＮ４用で
if(document.all)document.all(layer名).style.visibility='visible'はＩＥ４用です。
ＮＮ４用ではvisibility='show'と書いていますが、実はvisibility='visible'でも動作します。 'show'の方がNetscapeの公式な仕様で、'visible'といういいまわしはCSS-Pの仕様です。先日NetscapeのDHTML担当者にそのことを聞いてみたらNetscapeでは'show'でも'visible'でもどちらでもよいようです。

で、
hiddenに変更する時は

  function hideLAYER(layer名){
    if(document.layers)document.layers[layer名].visibility='hide'
    if(document.all)document.all(layer名).style.visibility='hidden'
  }

としています。

互換DHTMLを学ぼうとするときにDHTMLの非互換部分は回り道とゆ～か迷路のようなものです。もちろん、非互換部分が役に立たないという意味ではありませんが、ここでは今のところ取りあげる予定の無いものについて列記しておきます。

１．IEでしか動かないフィルタとトランジッション
２．IEでしか動かないデ－タバインデイング
３．WinのIEでしか動かないVBScript
４．NNでしか動かない<LAYER>タグ
５．NNでしか動かないしJavaScriptでも動かない(笑)JavaScript Style Sheet
６．その他NNかIEでしか動かず、しかも代替できないない命令群

＊もし将来互換すれば取り上げるかも知れませんけど．．．
ちなみに、互換をとろうとすると機能を犠牲にしなければならないなどと深刻になる必要は有りません（＾＾）たとえばフィルタのほとんどは簡単な互換scriptでむしろ自由にオリジナルなものを作れますし、<LAYER>タグは<DIV ID="" STYLE="position:...">などの互換タグで置き換え可能です。デ－タバインデイングのような処理も互換scriptで構築しといた方が得な気がしませんか？JavaScript Style SheetはCSS-P＋JavaScriptで十二分ですし、VBScriptはせっかく書いてもIE+Winでしか見れないから結局IE,NN、Win,Mac,UNIXでも動くJavaScriptで書き直しみたいなことになりそうな雰囲気です^^；。ま、よ～は、とりあえずいま使える互換部分だけでも結構すごい〔＾0＾〕と言いたいわけです、はい。
んじゃ、ま、今日のところはそうゆ～ことで
(^^)/~

SimpleSamples
SimpleなSamples

MenuBar 1
クリックすると出てくるメニュ－バ－1(DHTMLを解釈できないブラウザでは非表示)

TypeWriting
タイプライタを打つように文字が順番にでできます(DHTMLを解釈できないブラウザでは非表示)

FadeImage
画像のフェイドインフィルタ－です(NN4,IE4以外のDHTMLを解釈できないブラウザでは非表示)

3D-blocks
画像を重ねて作った3D風アニメ－ションです(DHTMLを解釈できないブラウザでは非表示)

fishFollower
マウスの動きを追跡する魚のアニメ－ションです(DHTMLを解釈できないブラウザでは非表示)

.jsDB001基本
.jsDB002検索 button .jsDB003検索 SELECT OPTION
JavaScriptと.js外部ファイルによる簡易デ－タべ－ス処理(DHTMLを解釈できないブラウザでは非表示)

fontStyleGenerator
フォントのスタイル定義を自動表示するスクリプト(DHTMLを解釈できないブラウザでは非表示)

Base Script for Dragon
レイヤをドラッグして動かすための基本スクリプト

Drag on the Dragon!
ドラゴンをドラッグしてごみ箱へ捨てる、だじゃれだけのためのスクリプト。ごみ箱も動かして見てね。アルゴリズムちよっと間違ってるけど....^^;;;

AniMaker pro0.0
アニメ－ションソ－ス自動作成スクリプト。ロ－カルディスクから選択した画像をドラッグして動かすと、その軌跡がスクリプトの中に記録されます。あとは、ソ－スウインドウへ出力されたソ－スをコピ－してあなたのぺ－ジへはるだけです。

Cross Browser Clock 01
マイクロソフトのページでみかけたので(笑)作って見ました。あっちは、IE4でしか動きませんが、こちらはIE4でもNN4でも動いてついでにDHTMLを解釈できなければステータス行へ表示するとゆ～超親切設計です(しかも、ソースがシンプル^^)。

Output Text to the Page
Formに入力した文字を画面へ出力します。WinだとFormも特別サイズになってます^^;(ん～ボタンはWinとMacで違うからどうしても完全に同じにはできないぞ...作るしかないかf^^;)。