最終更新日：2006.10.17
webmaster@kototone.jp
こととねは、クリエイティブ・コモンズ・ライセンス（表示 - 継承 2.1 日本）の下でライセンスされています。
普通のBlogならそんなことはないと思うのですが、私の使っているBlogというのはレイアウトの変更自由度が極めて少なく、というかプロバイダから提供されているレイアウトから選択する以外のレイアウト変更はできないのです。そのため、ちょっとした変更を加えたいと思っても不可。画像を左にフロートしているのを各記事末の日付でもって打ち消したいと思っても、CSSの書き換えができないから手も足も出ない。じゃあせめてweb拍手ボタンをつけたいと思っても同様。でも、最近JavaScriptでもってDOMを操作してみて、こいつを使えば問題解決できそうなんじゃないかという思いを強めまして、そしてチャレンジ。ついに、長らくの懸案をクリアすることに成功したのでした。
私のとった手は、外部JavaScriptを使うという方法でした。こととねのディレクトリ内にJavaScriptのファイルを置き、それをBlogから参照、関数を実行するという方法です。この方法をとれるとわかったのはずいぶん前で、それはBlogタイトル下の記述部分にHTMLタグを書くことができるとに気付いていたからなのですが、ただ可能とはわかってもそれをやるだけの技術がなかった。ですが、人間あきらめなければ、なんとはなしにでもできるようになるものなのです。
ただ、ずいぶんと妥協しました。私の当初の案では、左側メニューのDIV要素内にweb拍手ボタンを追加する予定だったのですが、HTMLの記述に問題があるからか（実際問題がある）適切にノードを取得することができず、この案はあきらめざるを得ませんでした。せめてDIV要素にIDが振られていればと思ったのですが、ないものは仕方ありません。唯一ID属性の設定されていたA要素を頼りにしようとしても、getElementByIdで取得したはずのこのA要素の親要素が取れない。そんなプロパティはないっていわれる。なぜ？ HTMLの構造に問題があるから？ そうかも知れません。そうではないかも知れません。けど重要なのは今できないということで、だから私は数時間粘って考えて、これを断念すると決定したのでした。
結局私のとった解は、ID属性値を設定したSPAN要素を前述の記述部内に用意して、ここに記述とweb拍手ボタンを追加する。web拍手ボタンの位置はCSSで制御するというものでした。けれどここでも問題があって、当初私はposition: absolute;を使って、web拍手ボタンを左メニュー領域に持っていったのですが、月別表示に切り替えると、よりよってボタンの位置にカレンダーが表示されるんですね。これには参りました。どうにもメニュー領域にはボタンの置ける場所はないようだと気付いて、しかたがないから現在の位置に置くことで妥協したのです。
次に弱ったのはCSSの記述ですね。CSSはHEAD要素内に置きたい。HEAD要素はHTML中に一度しか現れないから、document.getElementsByTagName('head')で取得したノードリストの0を参照したらそれがHEAD要素だから、ここにSTYLE要素を挿入してやればよいと思って、そのようにしたらMozilla系では問題ないのに、IEでエラーが出ます。と、ここで悩むこと数時間。結局はユーザーエージェントを調べて、Netscapeの場合とIEとで挙動を変えることにしたのですが、まあここでもいろいろ問題があって、もういちいちは書かないけれど、IE立てればSafariが立たず、Safariを立てればIE立たずという状況に陥って、まあ力技で解決したと、そういうわけです。
言葉でくどくど説明するよりソースを読んでもらったほうが早いでしょう。以下にHTML断片とJavaScriptのコードを示します。
<span id='TARGET'></span><script type='text/javascript' src='http://www.kototone.jp/blog.js'></script><script
type='text/javascript'>add();</script>function add() {
var elementDesc = document.getElementById('TARGET');
var elementForm = document.createElement('form');
elementForm.setAttribute('action', 'http://www.kototone.jp/cgi-bin/webclap/clap.cgi');
var elementDiv = document.createElement('div');
var cssText = '';
elementDiv.setAttribute('style', cssText);
elementDiv.style.cssText = cssText;
var elementNode = document.createElement('input');
elementNode.setAttribute('type', 'submit');
elementNode.setAttribute('value', 'web拍手');
cssText = 'margin-top: 3em; float: right;';
elementNode.setAttribute('style', cssText);
elementNode.style.cssText = cssText;
elementDiv.appendChild(elementNode);
elementForm.appendChild(elementDiv);
elementDesc.appendChild(elementForm);
var textNode = document.createTextNode('いろんなものの感想なんかを、思いつくままにお送りすることとねお試しBlog');
elementDesc.appendChild(textNode);
var elementBr = document.createElement('br');
elementDesc.appendChild(elementBr);
textNode = document.createTextNode('&が&と表示されるようになって困ってます。')
elementDesc.appendChild(textNode);
var elementBr = document.createElement('br');
elementDesc.appendChild(elementBr);
textNode = document.createTextNode('コメントSPAMのため一時休止していたコメントを復活させました。')
elementDesc.appendChild(textNode);
cssText = '.iteminfo {clear: both}';
if (navigator.appName == 'Netscape') {
var elementHead = document.getElementsByTagName('head');
var elementStyle = document.createElement('style');
elementStyle.setAttribute('type', 'text/css');
var cssNode = document.createTextNode(cssText);
elementStyle.appendChild(cssNode);
elementHead[0].appendChild(elementStyle);
} else if (document.styleSheets[0].addRule) {
document.styleSheets[0].addRule('.iteminfo', '{clear: both}');
} else {
var elementHead = document.getElementsByTagName('head');
var elementStyle = document.createElement('style');
elementStyle.setAttribute('type', 'text/css');
var cssNode = document.createTextNode(cssText);
elementStyle.appendChild(cssNode);
elementHead[0].appendChild(elementStyle);
}
}