JavaScriptの実用例(4)

JavaScriptで、document.writeを使ってページ内にコンテンツを追加することは、そこそこ便利ですが、気になることもあります。今まで、JavaScriptはページとは別に外部スクリプトとして使うのがいいということを示してきましたが、これのロードに時間がかかるときは、少し困ったことになります。

ページの途中に外部スクリプトのロード(読み込み)が指示されていて、その外部スクリプトを実際にWebサーバーから取得するのに5秒くらい時間がかかるとすると、その間、ページ表示が途中で止まります。わざわざ遅いWebサーバーを準備することもできませんから簡単にデモで示すことはできませんが、これを読んでいるかたも、割と経験はあるんじゃないでしょうか。典型的には、いくつかアフィリエイトや広告の外部コンテンツを埋め込んでいるようなサイトによくあります。広告って、たくさんのサイトに表示させる必要があるものですから、広告を配信するWebサーバーはすごく高い負荷に対応しなきゃいけないんだと思います。でも対応しきれなくて、サイトの表示全体が遅くなってしまう原因になっているんでしょう。

document.writeのように「今表示しようとしている場所」にHTMLを書き出すのじゃなくて、ほぼ全部のHTMLが表示され終わったあとで、決まった場所にあらためてHTML(の一部)を放り込むようなことができれば、上の原因からくる遅さは解消できます。広告などの表示には相変わらず時間がかかったとしても、メインのコンテンツが早く表示できるのならそっちのほうがいいですね。別に広告でなくても、そもそも負荷の高いWebサイトで外部スクリプトの提供も重くなりがち、というときも同様です。

それには、innerHTMLというものを使います。これはHTMLの構成要素ごとに持っているプロパティのようなもので、あとで値を設定しなおすと、実際の表示内容にも影響を与えることができるんです。たとえばこんなHTMLがあるとしましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>page sample</title>
</head>
<body>
<div id="add1"></div>
<h1>なんとかかんとかのページです!</h1>
<p>なんとかかんとか・・・</p>

<script>
//上まで表示させてから、ここで何かする
</script>

</body>
</html>

スクリプトが実行されるタイミングでは、もうひととおりのコンテンツは表示されています。このタイミングでdivタグの中(今はからっぽ)に何か内容を放り込みたいな、というときに、下のように書きます。

<script>
//上まですでに表示されている。ここで何かする
var a = document.getElementById('add1');
a.innerHTML = '<table border="1"><tr><td bgcolor="yellow">AD here!</td></tr></table>';
</script>

(実際のサンプル)

上の例ではJavaScriptは外部化していませんが、実際のサンプルでは外部化しました。動作内容は変わりません。
内容を放り込んでおくために置いておくタグは、divにすることが多いです。なんの飾りもないブロック要素ですから、表示上のクセがなくていいのでしょう。また、そのタグにはid要素を定義しておくのがふつうです。ここではadd1という名前にしましたが、なんでもいいです。

そのタグが表す要素(DOMっていうんですが、別に知らなくてもいいです)を、document.getElementByIdっていう書き方で取得することができます。ここでは、aっていう変数がid="add1"に該当する要素を指し示すようにしました。あとは、a.innerHTMLっていうプロパティが、中身のHTMLを操作するための手掛かりです。好きなHTMLを文字列として突っ込めば、即座にその内容が実際の画面にも反映されます。

今回の例では決まったHTMLを設定しただけですが、この内容が、今までに見たことがある、カレンダーに反応して内容の変わるものだったり、占いみたいなものだったりしても、要領は同じです。

この手のスクリプトは、ページの最終部近くで実行させる必要があります。ページの最初で実行したら、まだその後の内容が表示されていないのですから、「idがadd1の何か」がまだ存在していないことになって、期待した動作になりませんからね。

ここらへんに注意すると、ページの内容をスクリプトで操作するという仕事が、割と安定してできるようになるでしょう。