blog.ishinao.net

javascriptでテンプレート的なことをやる方法は？ (18:48)

JavaScriptでテンプレート的なことをやってみようかと思って試しに、

<script language="javascript">
function add() {
var clone = document.getElementById('template').cloneNode(true);
var contents = document.getElementById('contents');
contents.appendChild(clone);
clone.all('title').innerHTML = '<h1>タイトル</h1>';
clone.all('number').innerText = Math.random() * 100;
clone.style.display = "block";
}
</script>
<a onclick="add()">add</a>
<div id="template" style="display: none;">
<span id="title"></span>
<span id="number"></span>
</div>
<div id="contents">
</div>

とかやってみたんだけど、allってIEでしか使えない（というか、Mozilla系では使えない）のか。Mozilla系でも使えるようにするには、どう書けばいいんだろう？

惜しい

DIVの子エレメントを取得できないなら、元テンプレートの内容を書き換えちゃってからcloneNodeしてしまえ！　と思ったんだけど、Firefoxではなんか挙動が変だ。title、numberを書き換えると一個前にcloneNodeした内容まで書き換わってしまう。cloneNodeしてもIDが一緒だから、getElementById('title')とかしたターゲットがtemplateの中身だと絞れていないってことか？　IEだとこっちでも正常に動いているんだけど。
　そういやFirefoxでは中身が空のspanのinnerTextは設定できなかった（多分createTextNodeしなきゃダメなんだと思う）んで、innerHTMLに変えた。

<script language="javascript">
function add() {
document.getElementById('title').innerHTML = '<h1>タイトル</h1>';
document.getElementById('number').innerHTML = (Math.random() * 100).toString();
var clone = document.getElementById('template').cloneNode(true);
var contents = document.getElementById('contents');
contents.appendChild(clone);
clone.style.display = "block";
}
</script>
<a onclick="add()">add</a>
<div id="template" style="display: none;">
<span id="title"></span>
<span id="number"></span>
</div>
<div id="contents">
</div>

やっと動くようになった

なんか無駄に回りくどいんだけど、互換性のためにはこう書かなきゃだめなの？　もっと短くて両対応な書き方あるかなー。

<script language="javascript">
function add() {
var contents = document.getElementById('contents');
var template = document.getElementById('template');
var clone = template.cloneNode(true);
contents.appendChild(clone);
var title = getChildElementByClass(clone, 'title');
if (title) {title.innerHTML = 'タイトル';}
var number = getChildElementByClass(clone, 'number');
if (number) {number.innerHTML = (Math.random() * 100).toString();}
clone.style.display = "block";
}
function getChildElementByClass(pnode, className) {
for (var i = 0; i < pnode.childNodes.length; i++) {
var current = pnode.childNodes[i];
if (current.className == className) {return current;}
}
}
</script>
<a onclick="add()">add</a>
<div id="template" style="display: none;">
<h1 class="title">default title</h1>
<span class="number">default number</span>
</div>
<div id="contents">
</div>

ってなんか (16:53)

Ajaxをつかった「くっつき〜」系みたいな感じだな。違いは、js無効でも前回リビルド時のデータが表示されている、と言う点くらいか。

静的コンテンツとして生成しつつも、Ajaxを使って動的コンテンツを埋め込む (16:51)

Ajax関連の思いつき。movable typeみたいに基本的にコンテンツは静的に生成する。が、コメントやtrackbackみたいな動的コンテンツ部分が混ざっていると、通常はリビルドしないとコンテンツは表に反映されない（んだよね。MTの作りって見てないけど）。

そこでAjaxを使い、コメントやtrackbackなどの動的要素部分について、非同期でサーバーに問い合わせ、もしも更新があったらその部分だけをダイナミックに書き換える。そうすることで、完全リビルドしなくてもAjaxが有効なブラウザ環境ならば最新データが見える。もしもAjaxが無効な環境だとしても、少なくとも最後にビルドされた状態は見える。

といった感じで、静的生成しつつも、Ajax環境なら動的生成の恩恵も受けられる、という中間形態でパブリッシュできるようにしておくといいかもしれない。

まあblogツールの例の場合は、リビルドした方が効率がよさそうな感じだけど、CMS系一般として考えるとほとんど静的コンテンツ生成＋Ajaxによる一部動的コンテンツ、という仕組みがうまくはまる例がありそうだ。blogツールでも切込隊長blogみたいなコメントチャット状態のところだと結構いけるかも。

なんで楽曲データとか歌詞とかのデータを入れないのか (15:30)

コピーコントロールCDとかSACDとかDVD-AUDIOとか、レコード会社さんはなんかいろんなことをやっているけど、そんなのに金をかける余力はあるのに、いまだにCDの楽曲情報はCDDBとかから取らなきゃいけないの？　CDの楽曲情報（CDタイトル、曲タイトル、作成者、歌詞、ジャケット画像……）をとっととCDに入れてくれよ。

なんかRubyがやたらとCPUを食っているんで (14:14)

いったんリファラーの表示を中止。高速化されたという新しいdisp_refererを入れてみようか。でもうちの場合、あんまりリファラーって使われていない気もするから、非表示のままでもいいかな。

大雪ですよ！ (00:08)

渋谷を出たときには雨だったのに、埼玉に着いたらなんか大雪なんですが。車の上とかにすでに10センチ以上つもっているんですが。この調子だと明日の朝子供を保育園に送るのに車を使えないかもしれない。キッツイなー。