« 救命病棟24時・第10話 | トップページ | もしもこのお笑い芸人が受験したら? »

2005.03.16

DOMカスタマイズの分かりやすい説明

ココログを始めとするblogにおいて、JavaScript等を使った各種カスタマイズで今や欠かせないのが、「DOM・ドキュメントオブジェクトモデル(Document Object Model)」です。簡単に説明すると、DOMとは「HTMLやXMLで記述された各要素を操作するための標準インタフェース」で、一つのHTMLのソースを「ツリー構成のオブジェクト群」に見立てた階層構造で管理するものです。

ここ「あずスタ」で言えば、「コメント表示のツリー化」や「記事部分の装飾・告知」等がDOM操作に当たるもので、先日自作した「ココログ・トラックバックURLをコピーするスクリプト」も同じくそうです。・・・なんて言って説明しても、やっぱりピンと来ない人は多いですよね? 私もここで難しく書き綴る気は無いけど、少しでも多くの人に「DOMを使ってこういう風にカスタマイズをしていたんだ?」と一応でも理解してもらいたいため、易しく書き綴ることによって「DOMカスタマイズ」の分かりやすい説明をしたいと思います。

○DOMの分かりやすい(と思っている)説明・「blog市」編

blogのHTMLのソースを「手書きの地図」だと思ってください。
それは「blog市の地図」だとしましょう(「南セントレア市」じゃなくてね)。
そしてあなたは、blog市の市長だとしましょう!(気分が良い?)

地図には、番地(「id」や「class」)が、
至る所に割り振られて記載されています。HTMLのソースを見れば、
「id="main"」や「class="content"」という記述が見つかると思います。

さて、市長のあなたは、地図を見ながらこう提案しました。
「この番地の道路を工事して拡張しよう!」。
これは、「ソースのidやclassが○○の所を書き換える」と言い換えられます。

市長は地図の中から、「id="○○"」、
または「class="○○"」という記述を探して、場所を特定します。
それが済んだら、消しゴムで道路を消して、
市長の思い通りに道路を描き、拡張工事の案を決定します。これで終了です。
実はこれが、「DOMによるカスタマイズの基本操作」なんです。

もう一度言うと、「地図上の番地を特定して、そこを思い通りに変更する」という操作をしていたわけです。実際には、その操作をJavaScript等のプログラムで行っていて、最初に書いた「階層構造」の理論に基づいて処理します。当然ブラウザがDOMに対応している必要があり、またJavaScriptを有効にする設定になっている必要もありますが、後はプログラム自体が正しい操作で記述さえされていれば、どの環境でも作者(上の例では市長)の思い通りにカスタマイズされることになります。

以上、「DOMによるカスタマイズ」を一応でも理解してもらえたかな?(コメントいただけるとうれしいです) 結局やっていることは「書き換え」なんですね。ただそれを実現するためには、JavaScript等の文法を勉強する必要はあります。でも、ちょっと頑張れば自分でもできるような気になりませんか? 実際私も独学でJavaScriptを勉強してDOMを理解し、自作のスクリプトによるカスタマイズができるようになりました。後は他には無い工夫とスタイルシート(CSS)によるデザインの組合せで、カスタマイズの可能性が広がります。興味を持った方は少しずつでも勉強して、「blogのカスタマイズ」を楽しんでみてはいかが?

|

« 救命病棟24時・第10話 | トップページ | もしもこのお笑い芸人が受験したら? »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/15963/3327241

この記事へのトラックバック一覧です: DOMカスタマイズの分かりやすい説明:

« 救命病棟24時・第10話 | トップページ | もしもこのお笑い芸人が受験したら? »