Mozilla 用のサンプルを作ってみよう

前へ 目次 次へ

今回からいよいよ Mozilla の DOM です(笑)。


もはやご存じの通り Mozilla の DOM は W3C の仕様をベースにしています。 この4月に NN6 PR1 が公開され、比較的安定して動作するようになってきた訳です。

そこで、DOM の仕様書を見ながら "Hello World!" の文字列を ウィンドウの中央に表示する スクリプトを書いてみましょう。

HTML で記述するなら

    <p style="text-align:center">Hello World!</p>

で済みますが、これでは面白くないので

    <div id="d1" style="position:absolute;">Hello World!</div>

として、d1 を中央に配置するわけです。

    var d1=document.getElementById('d1');
    d1.style.left = Math.floor((ウィンドウの幅-d1の幅)/2)+'px';

とでもしたいのですが、"ウィンドウの幅" と "d1の幅" は W3C の仕様書を見ても出てきません。

これらの値は HTML や CSS, DOM の仕様にはありません。 どうやら、ブラウザ特有の資源であるため(?) W3C では規定していないようです。

DHTML のようにブラウザのウィンドウの中を動かしたり、 ブラウザのユーザ設定に従って、ダイナミックにレイアウトしたい場合は これらの情報は必須なのですが...

しょーがないので、 mozilla.org のドキュメントを漁りましょうか(笑)...

... う〜ん、どうやら Mozilla が開発中のためか mozilla.org にも、 ちゃんとした仕様書はないようです。 困りました。

幸い Mozilla の DOM は IDL( Interface Definition Language )という 設計用の言語で記述されています。 つまり、 Mozilla のソースを見れば、説明文はないものの、 プロパティやメソッドの名称、引数などはわかりそうです。

ってことで、Mozilla のソースをハッキングしてみましょう...

実は、こんなことが理由で始まったプロジェクトが MDS プロジェクト ( Mozilla's DOM Sample Project )なのです。 f(^^;; ← 宣伝だったりして...

Mozilla's DOM Sample Project http://cgi.din.or.jp/~hagi3/JavaScript/JSTips/Mozilla/MDSProject.htm
※ MDS プロジェクトでは一緒にサンプルスクリプトを作成してくれる
  仲間を常時募集しています( 宣伝モード ^^; )。

このページには Mozilla の Milestone 毎に実装されている DOM を IDL から抽出した データから作成したDOM一覧 や 各DOM との差分の一覧表があります。

そこで、 ウィンドウ関連のプロパティを見れば window.innerWidth というウィンドウの幅を示すらしいプロパティがあることがわかります。

また、レイアの幅に関しては HTMLElement に offsetWidth という プロパティがあるので( M14以降です )、これが使えそうです。

結局、レイア "d1" を中央に配置するには

    var d1=document.getElementById('d1');
    d1.style.left = Math.floor((window.innerWidth-d1.offsetWidth)/2)+'px';

で良さそうだってことがわかります。 f(^^;;

ということで、結局 W3C の仕様書だけでは DHTML などの スクリプトを作成するには充分でなく、 Mozilla の開発で付加されている DOM が色々とありそうだということが分かってきました。

※ Mozilla の開発は
  「まず実装してみて、これを評価し、良ければ採用、ダメなら削除」
  と言う具合に進めているようです。

そして、これらの結果はいずれ W3C DOM Level3 として公開されると思われます。

次回からは、いきなりスクリプト作成をしてみる暴挙には出ず、 再び W3C DOM とどのように異なるか、NN4 との互換性はどうか、 など比較してみようと思います。

前へ 目次 次へ

戻る Copyright(c) 2000 ShinSoft All rights reserved.