dTree カテゴリーリストにブログ記事数を表示する
Movable Type に表示する dTree カテゴリーリストに、ブログ記事数を表示するカスタマイズです。このカスタマイズを行なえば、dTree のカテゴリーリストにブログ記事が公開されているカテゴリーにブログ記事数を表示します。
ご要望を頂きましたので、本エントリーにて紹介致します。なお、このカスタマイズは「dTree サブカテゴリーリスト + 新着表示 for Movable Type」のカスタマイズを元にしています。
以下、サブテンプレートのみ示します。
「dTree サブカテゴリーリスト + 新着表示 for Movable Type」のひとつめのリストは、次の内容に変更してください。
<script type="text/javascript">
d = new dTree('d');
d.config.useCookies=false;
d.add(0, -1,'Categories','javascript: void(0);');
<mt:setVar name="cat_number" value="1" />
<mt:setVar name="level" value="1" />
<mt:topLevelCategories>
<mt:setVar name="cat_number" op="++" />
<mt:setVar name="tree[$level]" value="$cat_number" />
<mt:if name="level" eq="1">
d.add(<mt:getVar name="cat_number" op="--" />, 0,'<mt:categoryLabel escape="html" /><mt:if tag="CategoryCount"> [<$mt:CategoryCount$>]</mt:if> <span class="new"><mt:entries lastn="1"><mt:entryDate format="%Y:%m:%d:%H:%M:%S" /></mt:entries></span>','<mt:if tag="CategoryCount"><mt:categoryArchiveLink /><mt:else>javascript: void(0);</mt:if>');
<mt:else>
d.add(<mt:getVar name="cat_number" op="--" />, <mt:setVar name="tmp" value="$level" /><mt:setVar name="tmp" op="--" /><mt:getVar name="tree[$tmp]" op="--" />,'<mt:categoryLabel escape="html" /><mt:if tag="CategoryCount"> [<$mt:CategoryCount$>]</mt:if> <span class="new"><mt:entries lastn="1"><mt:entryDate format="%Y:%m:%d:%H:%M:%S" /></mt:entries></span>','<mt:if tag="CategoryCount"><mt:categoryArchiveLink /><mt:else>javascript: void(0);</mt:if>');
</mt:if>
<mt:setVar name="level" op="++" />
<mt:subCatsRecurse />
<mt:setVar name="level" op="--" />
</mt:topLevelCategories>
document.write(d);
</script>
</div>
<p style="text-align:center"><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
<script type="text/javascript">
<!--
// passage time
var pass = 24;
// display content
var content = 'New!!';
var currentDate = new Date();
var spans = document.getElementsByTagName('span');
for (i = 0; i < spans.length; i++) {
if (spans[i].getAttribute('class') == 'new' ||
spans[i].getAttribute('className') == 'new') {
if (spans[i].childNodes[0]) {
time = spans[i].childNodes[0].nodeValue.split(":");
var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]);
var now = (entryDate.getTime() - currentDate.getTime())/(60*60*1000);
now = Math.ceil(now);
if(-now <= pass){
spans[i].innerHTML = content;
spans[i].style.display = 'inline';
}
}
}
}
//-->
</script>「dTree サブカテゴリーリスト + 新着表示 for Movable Type」のふたつめのリストは、次の内容に変更してください。
<script type="text/javascript">
d = new dTree('d');
d.config.useCookies=false;
d.add(0, -1,'Categories','javascript: void(0);');
<mt:setVar name="cat_number" value="1" />
<mt:setVar name="level" value="1" />
<mt:topLevelCategories>
<mt:setVar name="cat_number" op="++" />
<mt:setVar name="tree[$level]" value="$cat_number" />
<mt:if name="level" eq="1">
d.add(<mt:getVar name="cat_number" op="--" />, 0,'<mt:categoryLabel escape="html" /><mt:if tag="CategoryCount"> [<$mt:CategoryCount$>]</mt:if>','<mt:if tag="CategoryCount"><mt:categoryArchiveLink /><mt:else>javascript: void(0);</mt:if>','<mt:entries lastn="1"><mt:entryDate format="%Y:%m:%d:%H:%M:%S" /></mt:entries>');
<mt:else>
d.add(<mt:getVar name="cat_number" op="--" />, <mt:setVar name="tmp" value="$level" /><mt:setVar name="tmp" op="--" /><mt:getVar name="tree[$tmp]" op="--" />,'<mt:categoryLabel escape="html" /><mt:if tag="CategoryCount"> [<$mt:CategoryCount$>]</mt:if> ','<mt:if tag="CategoryCount"><mt:categoryArchiveLink /><mt:else>javascript: void(0);</mt:if>','<mt:entries lastn="1"><mt:entryDate format="%Y:%m:%d:%H:%M:%S" /></mt:entries>');
</mt:if>
<mt:setVar name="level" op="++" />
<mt:subCatsRecurse />
<mt:setVar name="level" op="--" />
</mt:topLevelCategories>
document.write(d);
</script>
</div>
<p style="text-align:center"><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
<script type="text/javascript">
<!--
// passage time
var pass = 24;
// display content
var content = 'New!!';
var currentDate = new Date();
var spans = document.getElementsByTagName('span');
for (i = 0; i < spans.length; i++) {
if (spans[i].getAttribute('class') == 'new' ||
spans[i].getAttribute('className') == 'new') {
if (spans[i].childNodes[0]) {
time = spans[i].childNodes[0].nodeValue.split(":");
var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]);
var now = (entryDate.getTime() - currentDate.getTime())/(60*60*1000);
now = Math.ceil(now);
if(-now <= pass){
spans[i].innerHTML = content;
spans[i].style.display = 'inline';
}
}
}
}
//-->
</script>dTree サブカテゴリーリスト + 新着表示 for Movable Type
「dTree」というエクスプローラー風のツリー表示スクリプトを利用した、Movable Type のサブカテゴリーリストのツリー化カスタマイズを、下記のエントリーで以前紹介しました。
今回は、ご要望を頂き、dTree サブカテゴリーリストに新着表示を組み合わせてみました。このカスタマイズを行なえば、次のように新着ブログ記事のあるカテゴリーに対し「New!」マークを表示します。
なお、このカスタマイズでは、dTree の処理上、新着マークにアンカーがついてしまいます。
そこで、JavaScript を改変して、新着マークにアンカーを表示しない方法も併せて紹介します。
なお、以下のカスタマイズを行なう前に「dTree によるサブカテゴリーリスト for Movable Type」の４項までの作業を事前に行なってください。
また、新着表示についての詳細は「新着エントリーのあるカテゴリーに New マークをつける」を参照してください（リンク先のカスタマイズを行なう必要はありません）。
１．新着マークにアンカーをついたままにする
サブカテゴリーリストに次の内容を適用してください。これで再構築すれば新着マークが表示されます。デフォルトの設定では24時間以内の投稿に新着マークを表示します。
<script type="text/javascript">
d = new dTree('d');
d.config.useCookies=false;
d.add(0, -1,'Categories','javascript: void(0);');
<mt:setVar name="cat_number" value="1" />
<mt:setVar name="level" value="1" />
<mt:topLevelCategories>
<mt:setVar name="cat_number" op="++" />
<mt:setVar name="tree[$level]" value="$cat_number" />
<mt:if name="level" eq="1">
d.add(<mt:getVar name="cat_number" op="--" />, 0,'<mt:categoryLabel escape="html" /> <span class="new"><mt:entries lastn="1"><mt:entryDate format="%Y:%m:%d:%H:%M:%S" /></mt:entries></span>','<mt:if tag="CategoryCount"><mt:categoryArchiveLink /><mt:else>javascript: void(0);</mt:if>');
<mt:else>
d.add(<mt:getVar name="cat_number" op="--" />, <mt:setVar name="tmp" value="$level" /><mt:setVar name="tmp" op="--" /><mt:getVar name="tree[$tmp]" op="--" />,'<mt:categoryLabel escape="html" /> <span class="new"><mt:entries lastn="1"><mt:entryDate format="%Y:%m:%d:%H:%M:%S" /></mt:entries></span>','<mt:if tag="CategoryCount"><mt:categoryArchiveLink /><mt:else>javascript: void(0);</mt:if>');
</mt:if>
<mt:setVar name="level" op="++" />
<mt:subCatsRecurse />
<mt:setVar name="level" op="--" />
</mt:topLevelCategories>
document.write(d);
</script>
</div>
<p style="text-align:center"><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
<script type="text/javascript">
<!--
// passage time
var pass = 24;
// display content
var content = 'New!!';
var currentDate = new Date();
var spans = document.getElementsByTagName('span');
for (i = 0; i < spans.length; i++) {
if (spans[i].getAttribute('class') == 'new' ||
spans[i].getAttribute('className') == 'new') {
if (spans[i].childNodes[0]) {
time = spans[i].childNodes[0].nodeValue.split(":");
var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]);
var now = (entryDate.getTime() - currentDate.getTime())/(60*60*1000);
now = Math.ceil(now);
if(-now <= pass){
spans[i].innerHTML = content;
spans[i].style.display = 'inline';
}
}
}
}
//-->
</script>２．新着マークにアンカーをつけずに表示する
まず、dtree.js に下記のパッチをあてます。「パッチが分からない」とか、うまくいかない場合はこの先を読んでください。
--- dtree.js.bak Tue Jan 06 00:00:25 2009
+++ dtree.js Tue Jan 06 00:00:40 2009
@@ -22,7 +22,7 @@
// Node object
-function Node(id, pid, name, url, title, target, icon, iconOpen, open) {
+function Node(id, pid, name, url, mark, title, target, icon, iconOpen, open) {
this.id = id;
@@ -32,6 +32,8 @@
this.url = url;
+ this.mark = mark;
+
this.title = title;
this.target = target;
@@ -134,9 +136,9 @@
// Adds a new node to the node array
-dTree.prototype.add = function(id, pid, name, url, title, target, icon, iconOpen, open) {
+dTree.prototype.add = function(id, pid, name, url, mark, title, target, icon, iconOpen, open) {
- this.aNodes[this.aNodes.length] = new Node(id, pid, name, url, title, target, icon, iconOpen, open);
+ this.aNodes[this.aNodes.length] = new Node(id, pid, name, url, mark, title, target, icon, iconOpen, open);
};
@@ -285,6 +287,8 @@
str += node.name;
if (node.url || ((!this.config.folderLinks || !node.url) && node._hc)) str += '</a>';
+
+ if (node.mark) str += '<span class="new">' + node.mark + '</span>';
str += '</div>';直接 dtree.js をエディタ上で編集する場合は、下記の青色部分を追加してください。
...前略...
// Node object
function Node(id, pid, name, url, mark, title, target, icon, iconOpen, open) {
this.id = id;
this.pid = pid;
this.name = name;
this.url = url;
this.mark = mark;
this.title = title;
...中略...
// Adds a new node to the node array
dTree.prototype.add = function(id, pid, name, url, mark, title, target, icon, iconOpen, open) {
this.aNodes[this.aNodes.length] = new Node(id, pid, name, url, mark, title, target, icon, iconOpen, open);
};
...中略...
// Creates the node icon, url and text
dTree.prototype.node = function(node, nodeId) {
...中略...
str += node.name;
if (node.url || ((!this.config.folderLinks || !node.url) && node._hc)) str += '</a>';
if (node.mark) str += '<span class="new">' + node.mark + '</span>';
str += '</div>';
if (node._hc) {
...中略...そして、サブカテゴリーリストに次の内容を適用してください。これで再構築すれば新着マークが表示されます。デフォルトの設定では24時間以内の投稿に新着マークを表示します。
<script type="text/javascript">
d = new dTree('d');
d.config.useCookies=false;
d.add(0, -1,'Categories','javascript: void(0);');
<mt:setVar name="cat_number" value="1" />
<mt:setVar name="level" value="1" />
<mt:topLevelCategories>
<mt:setVar name="cat_number" op="++" />
<mt:setVar name="tree[$level]" value="$cat_number" />
<mt:if name="level" eq="1">
d.add(<mt:getVar name="cat_number" op="--" />, 0,'<mt:categoryLabel escape="html" />','<mt:if tag="CategoryCount"><mt:categoryArchiveLink /><mt:else>javascript: void(0);</mt:if>','<mt:entries lastn="1"><mt:entryDate format="%Y:%m:%d:%H:%M:%S" /></mt:entries>');
<mt:else>
d.add(<mt:getVar name="cat_number" op="--" />, <mt:setVar name="tmp" value="$level" /><mt:setVar name="tmp" op="--" /><mt:getVar name="tree[$tmp]" op="--" />,'<mt:categoryLabel escape="html" />','<mt:if tag="CategoryCount"><mt:categoryArchiveLink /><mt:else>javascript: void(0);</mt:if>','<mt:entries lastn="1"><mt:entryDate format="%Y:%m:%d:%H:%M:%S" /></mt:entries>');
</mt:if>
<mt:setVar name="level" op="++" />
<mt:subCatsRecurse />
<mt:setVar name="level" op="--" />
</mt:topLevelCategories>
document.write(d);
</script>
</div>
<p style="text-align:center"><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>
<script type="text/javascript">
<!--
// passage time
var pass = 24;
// display content
var content = 'New!!';
var currentDate = new Date();
var spans = document.getElementsByTagName('span');
for (i = 0; i < spans.length; i++) {
if (spans[i].getAttribute('class') == 'new' ||
spans[i].getAttribute('className') == 'new') {
if (spans[i].childNodes[0]) {
time = spans[i].childNodes[0].nodeValue.split(":");
var entryDate = new Date(time[0], time[1]-1, time[2], time[3], time[4], time[5]);
var now = (entryDate.getTime() - currentDate.getTime())/(60*60*1000);
now = Math.ceil(now);
if(-now <= pass){
spans[i].innerHTML = content;
spans[i].style.display = 'inline';
}
}
}
}
//-->
</script>Movable Type 4.2 のブログ記事ページを XHTML 1.0 Strict で valid にする
Movable Type 4.2 のテンプレートを XHTML 1.0 Strict で運用する時、ブログ記事ページおよびウェブページを valid にするカスタマイズです。
１．問題点
ブログ記事ページでは、form 要素に name 属性値が記述されているため、XHTML 1.0 Strict では valid な XHTML となりません。
下は W3C Markup Validation Service でチェックした結果です。
form 要素の name 属性値を単純に削除すると、JavaScript（mt.js）でコメントフォーム制御のために name 属性値を多用しているので、JavaScript を書き換える必要があります。
ということで、name 属性を削除した場合の JavaScript の変更差分を示します。
２．修正箇所
赤色部分を青色の内容に書き換えてください。数字は変更箇所前後のおおよその行番号を示しています。
379～384
function mtCommentSessionVerify(app_user) {
var u = mtGetUser();
var f = document['comments_form'];
if ( u && app_user && app_user.sid && ( u.sid == app_user.sid ) ) {
f.submit();
} else { function mtCommentSessionVerify(app_user) {
var u = mtGetUser();
var f = document.forms['comments-form'];
if ( u && app_user && app_user.sid && ( u.sid == app_user.sid ) ) {
f.submit();
} else {420～426
mtShowGreeting();
// populate anonymous comment fields if user is cookied as anonymous
var cf = document['comments_form'];
if (cf) {
if (u && u.is_anonymous) {
if (u.email) cf.email.value = u.email; mtShowGreeting();
// populate anonymous comment fields if user is cookied as anonymous
var cf = document.forms['comments-form'];
if (cf) {
if (u && u.is_anonymous) {
if (u.email) cf.email.value = u.email;458～463
function mtEntryOnUnload() {
if (mtRequestSubmitted) {
var cf = document['comments_form'];
if (cf) {
if (cf.post && cf.post.disabled)
cf.post.disabled = false; function mtEntryOnUnload() {
if (mtRequestSubmitted) {
var cf = document.forms['comments-form'];
if (cf) {
if (cf.post && cf.post.disabled)
cf.post.disabled = false;484～491
doc_url = doc_url.replace(/#.+/, '');
var url = '<$mt:SignInLink$>';
if (is_preview) {
if ( document['comments_form'] ) {
var entry_id = document['comments_form'].entry_id.value;
url += '&entry_id=' + entry_id;
} else {
url += '&return_url=<$mt:BlogURL encode_url="1"$>'; doc_url = doc_url.replace(/#.+/, '');
var url = '<$mt:SignInLink$>';
if (is_preview) {
if ( document.forms['comments-form'] ) {
var entry_id = document.forms['comments-form'].entry_id.value;
url += '&entry_id=' + entry_id;
} else {
url += '&return_url=<$mt:BlogURL encode_url="1"$>';535～542
doc_url = doc_url.replace(/#.+/, '');
var url = '<$mt:SignOutLink$>';
if (is_preview) {
if ( document['comments_form'] ) {
var entry_id = document['comments_form'].entry_id.value;
url += '&entry_id=' + entry_id;
} else {
url += '&return_url=<$mt:BlogURL encode_url="1"$>'; doc_url = doc_url.replace(/#.+/, '');
var url = '<$mt:SignOutLink$>';
if (is_preview) {
if ( document.forms['comments-form'] ) {
var entry_id = document.forms['comments-form'].entry_id.value;
url += '&entry_id=' + entry_id;
} else {
url += '&return_url=<$mt:BlogURL encode_url="1"$>';568～574
<mt:IfRegistrationAllowed>
var reg_reqd = <mt:IfRegistrationRequired>true<mt:Else>false</mt:IfRegistrationRequired>;
var cf = document['comments_form'];
if (!cf) return;
var el = document.getElementById('comment-greeting'); <mt:IfRegistrationAllowed>
var reg_reqd = <mt:IfRegistrationRequired>true<mt:Else>false</mt:IfRegistrationRequired>;
var cf = document.forms['comments-form'];
if (!cf) return;
var el = document.getElementById('comment-greeting');３．その他
XHTML 1.0 Transitional の場合、この修正を行わなくても valid になりますが、Another HTML-lint gateway では次のようなエラーが出力されます。
<form> の name 属性の値 `comments_form` と id 属性の値 `comments-form` は、同一タグ中では同じでなければなりません。
HTML 4.01 では必ず同じ値になっている必要があります。
XHTML 1.1 では name 属性自体が廃止されています。
４．配布テンプレートについて
この修正を行ったテンプレート（v1.10）を配布しています。
５．参考記事
参考記事は下記です。ありがとうございました。
JavaScript を無効にしてコメント投稿を可能にする
Movable Type 4.2 で JavaScript を無効にした状態でコメント投稿ができるようにするためのカスタマイズです。ご質問を頂いたので本エントリーにて情報展開致します。
単純にブラウザの JavaScript を無効にしてコメントを投稿すると、次のように「不正な要求です」というエラーになります。
JavaScript オフの状態でコメント投稿ができるようにするには、コメントフォームにある下記の1行を削除します。
<input type="hidden" name="armor" value="1" />補足ですが、コメントを受け付けられる状態にしている場合、JavaScript を無効にすると、コメントフォームが無条件に表示されます。サインインやCAPTCHAも表示されません。登録/認証の設定で、「認証なしコメント」のチェックを外していても投稿可能です。
Accordion によるサイドメニューの折りたたみ
JavaScript ライブラリ Accordion によるサイドメニューの折りたたみです。
Accordion は、いくつかのメニューをグループ化し、あるメニュータイトルをクリックすることで、グループ内の特定のメニューリストだけを表示し、他のメニューリストを閉じるライブラリです。下のサンプルへのリンクをクリックして、表示されたサンプルのサイドメニューをクリックしてみてください。
ここでは配布テンプレートのサイドバーを例にカスタマイズ方法を紹介します。Movable Type を例にしていますが、JavaScript 外部ファイルのアップロードが可能なブログサービスやブログツールであれば他のテンプレートでも適用可能です。
なお、Accordion は縦方向の折りたたみ以外に、横方向の折りたたみや入れ子にした折りたたみも可能です。
１．ライブラリのダウンロード
Accrodion のサイトにアクセスして、「Download the code!」をクリック。
「Get it here Accordion v2.0」の部分のリンクをクリックすればダウンロードが開始します。必要に応じてドネーションをしてください。
２．ライブラリのアップロード
ダウンロードしたアーカイブを展開し、accordion\javascript 配下にある、次の3つのファイルをブログディレクトリにアップロードします。ここでは javascript フォルダごとアップロードします。
javascript/prototype.jsjavascript/effects.jsjavascript/accordion.js
３．テンプレートの設定（ヘッダー）
ブログ管理画面より、「デザイン」-「テンプレート」-「テンプレートモジュール」-「ヘッダー」を選択し、head の終了タグ直前に下記の script 要素を追加します。prototype.js をすでに使用している場合は、一番上の1行は不要です。
<script type="text/javascript" src="<mt:BlogURL />javascript/prototype.js"></script>
<script type="text/javascript" src="<mt:BlogURL />javascript/effects.js"></script>
<script type="text/javascript" src="<mt:BlogURL />/javascript/accordion.js"></script>
<script type="text/javascript">
Event.observe(window, 'load', loadAccordions, false);
function loadAccordions() {
var leftAccordion = new accordion('links-left');
var rightAccordion = new accordion('links-right');
}
</script>
</head>関数 loadAccordions の中に記述している 2 行のパラメータ（赤色）は、折りたたみのメニュー全体を括っている id 属性を指定します。サンプルテンプレートでは、左サイドバー全体を括っている dl 要素の id 属性 links-left と、右サイドバー全体を括っている dl 要素の id 属性 links-right を、それぞれ指定しています（青色部分）。
<div id="links-left-box">
<dl id="links-left">
...中略...
</dl>
</div>
<div id="links-right-box">
<dl id="links-right">
...中略...
</dl>
</div>４．テンプレートの設定（サイドバー）
ブログ管理画面より、「デザイン」-「テンプレート」-「テンプレートモジュール」-「サイドバー（またはサイドバー2）」を選択し、折りたたみを行いたいサイドバーの class 属性値に accordion_toggle と accordion_content を追加します。
下は「最近のエントリー」に設定した例です。
変更前
<MTIf name="module_recent_entries">
<dt class="sidetitle">
Recent Entries
</dt>
<dd class="side">
<ul>
<MTEntries lastn="10">
<li><a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
</dd>
</MTIf>変更後
<MTIf name="module_recent_entries">
<dt class="sidetitle accordion_toggle">
Recent Entries
</dt>
<dd class="side accordion_content">
<ul>
<MTEntries lastn="10">
<li><a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
</dd>
</MTIf>５．スタイルシートの変更
ブログ管理画面より、「デザイン」-「テンプレート」-「スタイルシート」を選択し、次の内容を追加します。
.accordion_toggle {
display: block;
margin-bottom: 5px;
}
.accordion_toggle_active {}
.accordion_content {
overflow: hidden;
padding-bottom: 10px;
}なお、サンプルでは、次の既存のセレクタから赤色部分を削除して、上記セレクタの設定値の競合を回避しています。
.sidetitle {
margin-top: 3px;
border: 1px solid #666666;
color: #333;
background: #f6f6f6;
text-align: center;
font-size: 75%;
line-height: 2.0;
}
/* サイドメニュー */
.side {
margin: 3px 0 20px;
background: none;
color: #333;
font-size: 75%;
line-height: 1.5;
}これでブログ全体を再構築して、Accordion による折りたたみが動作すれば完成です。
６．特定のメニューをデフォルトで表示する
特定のメニューをデフォルトで表示する方法は、下記の記事を参照してください。
2008.08.03
loadAccordions の設定を一部見直しました。
2008.09.02
６項を追加しました。
Movable Type 4.2 における mt.js の変更点（その1：Ajax 対応と window.onload の代替スクリプト）
先日、Movable Type 4.2 におけるコメント投稿フォームの機能追加と改善点をエントリーしましたが、動作を制御する mt.js（インデックステンプレートの「JavaScript」）が、新しく実装し直されていますので、気がついたところを紹介したいと思います。
１．Ajax 用関数の追加
mt.js は今までコメントフォーム専用でしたが、検索結果（ページ分割された場合）を Ajax で表示するための関数 mtGetXmlHttp が追加されています。
<mt:Ignore>
/***
* Returns a XMLHttpRequest object (for Ajax operations).
*/
</mt:Ignore>
function mtGetXmlHttp() {
if ( !window.XMLHttpRequest ) {
window.XMLHttpRequest = function() {
var types = [
"Microsoft.XMLHTTP",
"MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP"
];
for ( var i = 0; i < types.length; i++ ) {
try {
return new ActiveXObject( types[ i ] );
} catch( e ) {}
}
return undefined;
};
}
if ( window.XMLHttpRequest )
return new XMLHttpRequest();
}２．window.onload の代替スクリプト
もうひとつは、JavaScript マスター Dean Edwards 氏による、window.onload の代替スクリプトが追加されています。
// BEGIN: fast browser onload init
// Modifications by David Davis, DWD
// Dean Edwards/Matthias Miller/John Resig
// http://dean.edwards.name/weblog/2006/06/again/?full#comment5338
function mtInit() {
// quit if this function has already been called
if (arguments.callee.done) return;
// flag this function so we don't do the same thing twice
arguments.callee.done = true;
// kill the timer
// DWD - check against window
if ( window._timer ) clearInterval(window._timer);
// DWD - fire the window onload now, and replace it
if ( window.onload && ( window.onload !== window.mtInit ) ) {
window.onload();
window.onload = function() {};
}
}
/* for Mozilla/Opera9 */
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", mtInit, false);
}
/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if (this.readyState == "complete") {
mtInit(); // call the onload handler
}
};
/*@end @*/
/* for Safari */
if (/WebKit/i.test(navigator.userAgent)) { // sniff
_timer = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
mtInit(); // call the onload handler
}
}, 10);
}
/* for other browsers */
window.onload = mtInit;
// END: fast browser onload initこれは、window.onload 前でも DOM 処理が可能になった時点で JavaScript を実行可能にしてくれるものです。
通常、JavaScript は、表示するページにサイズの大きな画像などがあると、それが全部読み込まれた後にしか動作しません。このスクリプトは画像の読み込みに関係なく、ページのDOM処理が可能になれば、JavaScriptが開始します。つまり、Ajax がページの描画に影響なく動作します。
参考サイト：
dTree を Movable Type 4.1/MTOS のネイティブタグで実装する
Movable Type 4.1/MTOS で変数の算術演算子と配列およびハッシュが実装されたことで、PHPあるいはJavaScriptとの組み合わせが必要だった処理が、ネイティブなタグのみで実装可能になりました。
全てのコードについて移植が可能であるかどうかは不明ですが、どの程度の威力があるか検証してみたかったので、サンプルとして、以前紹介した dTree のカスタマイズについてテンプレートタグで実装してみました。
１．dTree について
機能や設定方法は下記の記事を参照願います（実際にご利用になる場合、この記事の4項までの設定が必要です）。
で、元記事で紹介したPHP版のスクリプトは下記の通りです（若干直しました）。
<script type="text/javascript">
d = new dTree('d');
d.config.useCookies=false;
d.add(0, -1,'Categories','javascript: void(0);');
<?php $cat_number = 0; $level = 0; $tree = array(); ?>
<MTTopLevelCategories>
<?php $tree[$level] = ++$cat_number; if(!$level) { ?>
d.add(<?php echo $cat_number ?>, 0,'<$MTCategoryLabel encode_php="1"$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
<?php } else { ?>
d.add(<?php echo $cat_number ?>, <?php echo $tree[$level - 1] ?>,'<$MTCategoryLabel encode_php="1"$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
<?php } $level++; ?>
<MTSubCatsRecurse max_depth="3">
<?php $level--; ?>
</MTTopLevelCategories>
document.write(d);
</script>
<p style="text-align:center"><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>再掲になりますが、dTree によるサブカテゴリーリストの完成イメージは次の通りです。
この表示を行うための JavaScript は次の内容になっています（上記のPHPスクリプトから生成されたものです）。
<script type="text/javascript">
d = new dTree('d');
d.config.useCookies=false;
d.add(0, -1,'Categories','javascript: void(0);');
d.add(1, 0,'test1','http://.../test/');
d.add(2, 1,'test1-1','http://.../test/test11/');
d.add(3, 2,'test1-1-1','http://.../test/test11/test111/');
d.add(4, 2,'test1-1-2','http://.../test/test11/test112/');
d.add(5, 1,'test1-2','http://.../test/test12/');
d.add(6, 5,'test1-2-1','http://.../test/test12/test121/');
d.add(7, 5,'test1-2-2','http://.../test/test12/test122/');
d.add(8, 0,'test2','http://.../test2/');
d.add(9, 8,'test2-1','http://.../test2/test21/');
document.write(d);
</script>
<p style="text-align:center"><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>スクリーンショットと JavaScript（のカテゴリー）の対応はなんとなくお分かりになると思いますが、
d.add(...) の行で、カテゴリー部分を表示させています。
本エントリーでは、Movable Type のネイティブタグのみで、このカテゴリーを表示する部分の JavaScript を生成します。
２．dTree のカテゴリー表示部分のフォーマット
先程も簡単に紹介しましたが、JavaScript でカテゴリーを表示する部分は add 関数がキモとなっており、関数のパラメータは、
d.add([*1],[*2],[カテゴリー名],[カテゴリーのURL *3]);- *1：カテゴリーに一意に割り当てられたdTree用のカテゴリー番号
- *2：そのカテゴリーが属する親カテゴリーの番号
"0"はdTreeのルートに属する場合（=最上位のカテゴリー） - *3：dTreeの生成するa要素のhref属性になります。
となっています。
上記の add 関数部分を、サブカテゴリーリストを出力するサブテンプレートを応用して作成します。以下、add 関数の各パラメータをどのようなロジックで作成するかという解説を交えながら、ネイティブなテンプレートを組み立てていきます。
３．各パラメータ用のデータ生成方法
３．１ 第1パラメータ用のデータ生成
第1パラメータはカテゴリーに番号を順に付与していけば良いだけので、リスト1のように、
リスト1
<$mt:setvar name="cat_number" value="1"$>
<MTTopLevelCategories>
<$mt:setvar name="cat_number" op="++"$>
d.add(<$mt:getvar name="cat_number"$>,～略～);
<$MTSubCatsRecurse$>
</MTTopLevelCategories>とすれば良いことが分かります。
1行目でカテゴリー番号保持用の変数（cat_number）を1で初期化し、MTTopLevelCategories タグのループ内でインクリメントしていきます。
そしてインクリメント後に add 関数の第1パラメータに表示させればOKです。
３．２ 第2パラメータ用のデータ生成
第2パラメータの、自カテゴリーの属する親カテゴリー番号を算出する方法は色々なアプローチがあると思いますが、ここでの方法は、まず算出に必要なデータとして、現在処理されているカテゴリーの階層をインデックスとした自カテゴリー番号を、配列の変数として保持します。
「カテゴリーの階層」は、親カテゴリーの階層は0、子カテゴリーの階層は1、孫カテゴリーの階層は2...、という具合に、数値で表すこととします。
「カテゴリーの階層をインデックスとした自カテゴリー番号を、配列の変数として保持」とは、例えば一番最初の「カテゴリー1」を処理している時、このカテゴリーはルート階層（数値で表すと0）に属するので、
tree[0]=1という変数を作成することを指しています。左辺の変数 tree のインデックス0が階層の番号を示し、右辺の1がカテゴリー番号を示します。
「カテゴリー2」を処理している時、このカテゴリーは親カテゴリー（数値で表すと1）に属するカテゴリーなので、
tree[1]=2という変数を作成します。
この規則によって、各カテゴリーを処理する時には、刻々と内容が書き換わる、次のような配列が作成されます。
- カテゴリー1の処理中：tree[0]=1
- カテゴリー2の処理中：tree[1]=2
- カテゴリー3の処理中：tree[2]=3
- カテゴリー4の処理中：tree[2]=4
- カテゴリー5の処理中：tree[1]=5
- カテゴリー6の処理中：tree[2]=6
- カテゴリー7の処理中：tree[2]=7
- カテゴリー8の処理中：tree[0]=8
- カテゴリー9の処理中：tree[1]=9
少し話が難しくなりますが、このデータは次回の繰り返し処理で利用するためのものです。つまり、カテゴリー1の処理中に作成された、一番最初の、
tree[0]=1は（MTTopLevelCategories の）繰り返し処理の中でそのまま保持されており、次のカテゴリー2の処理の時に利用される、ということだけをとりあえず覚えていてください。
前置きが長くなりましたが、上記のデータを作成するサブテンプレートは、リスト2のようになります（青色はリスト1からの追加部分）。
リスト2
<$mt:setvar name="cat_number" value="1"$>
<$mt:setvar name="level" value="1"$>
<MTTopLevelCategories>
<$mt:setvar name="cat_number" op="++"$>
<$mt:setvar name="tree[$level]" value="$cat_number"$>
d.add(<$mt:getvar name="cat_number"$>,～略～);
<$MTSubCatsRecurse$>
<$mt:setvar name="level" op="++"$>
<$MTSubCatsRecurse$>
<$mt:setvar name="level" op="--"$>
</MTTopLevelCategories>2行目で配列インデックス用の変数levelを初期化し、5行目で、処理中のカテゴリー番号を、現在の階層をインデックスとした配列データに保持します。
階層の数値の増減は、MTSubCatsRecurse の直前と直後で操作しています。
プログラミングに不慣れな方には分かりにくいのですが、MTSubCatsRecurseはいわゆる再帰処理を行うためのタグで、現在処理しているカテゴリーに子カテゴリーが存在する場合、MTSubCatsRecurse の内容を取り出し、 MTTopLevelCategories の中で処理します。
つまり MTSubCatsRecurse は次の階層を処理するための再帰データとなるので、その直前で変数 level をインクリメントすることで、階層用のデータがインクリメントされます。
また、MTSubCatsRecurse の直後でデクリメントすれば、階層の数値を親カテゴリーの階層に戻せます。
さらに MTSubCatsRecurse の中に孫カテゴリーデータが存在すれば、変数 level はさらにインクリメントされることになります。
これでdTreeに必要なデータが揃いましたので、あとは子カテゴリーが属する親カテゴリーのカテゴリー番号を求めるだけです。
これは、現在処理されているデータの階層からデクリメントした配列の値、つまり自カテゴリーの上位の階層のカテゴリー番号を取得すればいい訳です。
言い換えると、例えば2行目の、
tree[1]=2の親カテゴリー番号を求める場合、上位の階層は
tree[0]であり、その中に親のカテゴリー番号が設定されているので、配列のインデックスをデクリメント（-1）、つまり、
tree[1-1]とすれば、tree[0] が求まります。あとはそこに設定されているカテゴリー番号1を取得すれば良い訳です。
また、4行目の
tree[2]=4の親カテゴリーを求める場合、上位の階層は
tree[1]となり、その中にカテゴリー番号が設定されているので、インデックスをデクリメント（-1）、つまり
tree[2-1]とすれば、tree[1] が求まるので、あとはそこに設定されているカテゴリー番号2を取得すれば良い訳です。
話をまとめると、リスト3のようになります（青色はリスト2からの追加部分）。
リスト3
<$mt:setvar name="cat_number" value="1"$>
<$mt:setvar name="level" value="1"$>
<MTTopLevelCategories>
<$mt:setvar name="cat_number" op="++"$>
<$mt:setvar name="tree[$level]" value="$cat_number"$>
<mt:if name="level" eq="1">
d.add(<$mt:getvar name="cat_number"$>, 0,'<$MTCategoryLabel escape="js"$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
<mt:else>
d.add(<$mt:getvar name="cat_number"$>, <$mt:setvar name="tmp" value="$level"$><$mt:setvar name="tmp" op="--"$><$mt:getvar name="tree[$tmp]"$>,'<$MTCategoryLabel escape="js"$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
</mt:if>
<$mt:setvar name="level" op="++"$>
<$MTSubCatsRecurse$>
<$mt:setvar name="level" op="--"$>
</MTTopLevelCategories>追加した6～10行目のうち、9行目が該当します。
第2パラメータの値に配列変数treeのデータを表示しています。
6行目の MTIf で処理を振り分けている理由ですが、親カテゴリーを処理している場合、さらに上位の階層（つまり dTree のルート階層）データを取得しようとしますが、これまでの処理では設定されていないデータなので、エラーを避けるため、その場合のみ、7行目で第2パラメータに固定で0を設定するようにしています。
３．３ 第3パラメータ用のデータ生成
第3パラメータのカテゴリー名には、<$MTCategoryLabel escape="js"$> を記述するだけです。なお、JavaScript として正常に動作するよう、escape モディファイアに "js" を指定します。
３．４ 第4パラメータ用のデータ生成
第4パラメータには、リスト4のようにカテゴリーのリンク、
リスト4
<MTIfNonZero tag="MTCategoryCount">
<$MTCategoryArchiveLink$>
<MTElse>
javascript: void(0);
</MTElse>
</MTIfNonZero>を設定します。
カテゴリーにブログ記事が1件以上投稿されている場合は、カテゴリーアーカイブへのリンクを設定し、投稿されていなければリンクの代わりに "javascript: void(0);" を設定し、リンクをクリックしてもページ遷移が発生しないようにしています。
最後に、第1パラメータと第2パラメータに表示される値をデクリメントします（青色はリスト3からの追加部分）。
リスト5
<$mt:setvar name="cat_number" value="1"$>
<$mt:setvar name="level" value="1"$>
<MTTopLevelCategories>
<$mt:setvar name="cat_number" op="++"$>
<$mt:setvar name="tree[$level]" value="$cat_number"$>
<mt:if name="level" eq="1">
d.add(<$mt:getvar name="cat_number" op="--"$>, 0,'<$MTCategoryLabel escape="html"$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
<mt:else>
d.add(<$mt:getvar name="cat_number" op="--"$>, <$mt:setvar name="tmp" value="$level"$><$mt:setvar name="tmp" op="--"$><$mt:getvar name="tree[$tmp]" op="--"$>,'<$MTCategoryLabel escape="html"$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
</mt:if>
<$mt:setvar name="level" op="++"$>
<$MTSubCatsRecurse$>
<$mt:setvar name="level" op="--"$>
</MTTopLevelCategories>これは変数cat_numberと変数levelの初期値を1にしているため、デクリメントしないと下のように、カテゴリー番号が2から開始されるためです。
d.add(2, 0,'test1','http://.../test/');
d.add(3, 2,'test1-1','http://.../test/test11/');
d.add(4, 3,'test1-1-1','http://.../test/test11/test111/');
d.add(5, 3,'test1-1-2','http://.../test/test11/test112/');
d.add(6, 2,'test1-2','http://.../test/test12/');
d.add(7, 6,'test1-2-1','http://.../test/test12/test121/');
d.add(8, 6,'test1-2-2','http://.../test/test12/test122/');
d.add(9, 0,'test2','http://.../test2/');
d.add(10, 9,'test2-1','http://.../test2/test21/');変数cat_numberと変数levelの初期値を1にしているのは、初期値0の場合にリスト系のテンプレートタグで正常にインクリメントされない不具合を避けるためです。
これにdTree用の前後のスクリプトを加えれば完成です（青色はリスト5からの追加部分）。
リスト6
<script type="text/javascript">
d = new dTree('d');
d.config.useCookies=false;
d.add(0, -1,'Categories','javascript: void(0);');
<$mt:setvar name="cat_number" value="1"$>
<$mt:setvar name="level" value="1"$>
<MTTopLevelCategories>
<$mt:setvar name="cat_number" op="++"$>
<$mt:setvar name="tree[$level]" value="$cat_number"$>
<mt:if name="level" eq="1">
d.add(<$mt:getvar name="cat_number" op="--"$>, 0,'<$MTCategoryLabel escape="html"$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
<mt:else>
d.add(<$mt:getvar name="cat_number" op="--"$>, <$mt:setvar name="tmp" value="$level"$><$mt:setvar name="tmp" op="--"$><$mt:getvar name="tree[$tmp]" op="--"$>,'<$MTCategoryLabel escape="html"$>','<MTIfNonZero tag="MTCategoryCount"><$MTCategoryArchiveLink$><MTElse>javascript: void(0);</MTElse></MTIfNonZero>');
</mt:if>
<$mt:setvar name="level" op="++"$>
<$MTSubCatsRecurse$>
<$mt:setvar name="level" op="--"$>
</MTTopLevelCategories>
document.write(d);
</script>
<p style="text-align:center"><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>よりエレガントな実装があると思いますが、その点はご容赦ください。
コメント投稿フォームの「情報を保存する」のチェックを外した時の振る舞いを変更する
Movable Type 4 のコメント投稿画面にある、「ログイン情報を記憶」というチェックボックス（下のスクリーンショット一番下のチェックボックス）は、投稿者情報（名前・電子メール・URL）をクッキーを利用して保存し、次回の投稿時に投稿者情報の入力を不要にするためのものです。
チェックボックスにチェックをしておけば、コメント投稿時に投稿者情報がクッキーに保存されます。
逆に、このチェックを外すと、チェックを外した瞬間にクッキーから投稿者情報を消去する動作が実行されるのですが、同時に、入力フィールドに記入された投稿者情報まで消去されてしまいます（下）。
チェックを外す操作によるフォーム情報のクリアは、ユーザが意図しない動作のように思われます。
ということで、このエントリーでは、チェックを外しても投稿者情報を消去せず、クッキー情報のみ削除するカスタマイズを紹介します。
１．設定方法
ブログ管理画面より、「デザイン」→「テンプレート」を開き、一覧に表示された「JavaScript」のリンクをクリック。これは mt.js というコメントフォーム制御用の JavaScript です。
「テンプレートの内容」にある赤色の部分
：
function forgetMe (f) {
deleteCookie('mtcmtmail', '/', '');
deleteCookie('mtcmthome', '/', '');
deleteCookie('mtcmtauth', '/', '');
f.email.value = '';
f.author.value = '';
f.url.value = '';
}
：を削除するか、赤色行の先頭に "//" をつけてコメントアウトします。
：
function forgetMe (f) {
deleteCookie('mtcmtmail', '/', '');
deleteCookie('mtcmthome', '/', '');
deleteCookie('mtcmtauth', '/', '');
// f.email.value = '';
// f.author.value = '';
// f.url.value = '';
}
：編集後、「保存と再構築」をクリックしてください。
Lightbox JS/Litebox で BlogPet を背景画像の下に隠す
Lightbox JS / Litebox でブログパーツ BlogPet の Flash を PNG 背景画像の下に隠す方法です。
以前、「Lightbox JS でブログパーツ等の Flash を PNG 背景画像の下に隠す」という記事を書いたのですが、BlogPetのソースコードが変更されており、ご質問を頂きましたので再掲します。
１．BlogPet のスクリプトを取得する
BlogPet 表示用の script 要素の src 属性に記述されたURLをブラウザ（Firefox 推奨）に入力すると、下のようなスクリプトが表示されます。
(function() {
try {
request = encodeURIComponent(document.URL);
referrer = encodeURIComponent(document.referrer);
} catch (e) {
request = escape(document.URL);
referrer = escape(document.referrer);
}
document.write(
"<object id='usa.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' " +
"classid='clsid:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' " +
"codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0' " +
"width='130' " +
"height='220'>" +
"<param name='allowScriptAccess' value='sameDomain' />" +
"<param name='movie' value='http://media.blogpet.net/5/8/243658.swf' />" +
"<param name='play' value='true' />" +
"<param name='loop' value='false' />" +
"<param name='menu' value='false' />" +
"<param name='quality' value='high' />" +
"<param name='bgcolor' value='#ffffff' />" +
"<param name='FlashVars' value='public_key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&domain=api.blogpet.net¤t_url=" + request + "' />" +
"<embed name='usa.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' " +
"type='application/x-shockwave-flash' " +
"pluginspage='http://www.macromedia.com/go/getflashplayer' " +
"width='130' " +
"height='220' " +
"allowScriptAccess='sameDomain' " +
"src='http://media.blogpet.net/5/8/243658.swf' " +
"play='true' " +
"loop='false' " +
"menu='false' " +
"quality='high' " +
"bgcolor='#ffffff' " +
"current_url='" + request + "'" +
"FlashVars='public_key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&domain=api.blogpet.net¤t_url=" + request + "' />" +
"</object><br />"
);
})();
document.write('<object id="site" classid="clsid:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="130" height="100" align="middle"><param name="allowScriptAccess" value="always" /><param name="movie" value="http://kk.blogtoy.net/swf/48.swf" /><param name="play" value="true" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="high" /><param name="FlashVars" value="domain=kk.blogtoy.net&source=/swf/13.swf&onclick=/click/2/classic/8" /><embed src="http://kk.blogtoy.net/swf/48.swf" loop="false" menu="false" quality="high" bgcolor="#ffffff" width="130" height="100" name="site" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" FlashVars="domain=kk.blogtoy.net&source=/swf/13.swf&onclick=/click/2/classic/8" /></object>');これを「ファイル」→「名前をつけてページを保存」を選択し、任意のファイル名（blogpet.txt 等）で保存します。
２．スクリプトの修正
保存したスクリプトを任意のエディタで開き、下記の青色部分を追加してください。注：計4ヶ所あります。
(function() {
try {
request = encodeURIComponent(document.URL);
referrer = encodeURIComponent(document.referrer);
} catch (e) {
request = escape(document.URL);
referrer = escape(document.referrer);
}
document.write(
"<object id='usa.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' " +
"classid='clsid:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' " +
"codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0' " +
"width='130' " +
"height='220'>" +
"<param name='allowScriptAccess' value='sameDomain' />" +
"<param name='movie' value='http://media.blogpet.net/5/8/243658.swf' />" +
"<param name='play' value='true' />" +
"<param name='loop' value='false' />" +
"<param name='menu' value='false' />" +
"<param name='quality' value='high' />" +
"<param name='bgcolor' value='#ffffff' />" +
"<param name='wmode' value='transparent' />" +
"<param name='FlashVars' value='public_key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&domain=api.blogpet.net¤t_url=" + request + "' />" +
"<embed name='usa.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' " +
"type='application/x-shockwave-flash' " +
"pluginspage='http://www.macromedia.com/go/getflashplayer' " +
"width='130' " +
"height='220' " +
"allowScriptAccess='sameDomain' " +
"src='http://media.blogpet.net/5/8/243658.swf' " +
"play='true' " +
"loop='false' " +
"menu='false' " +
"quality='high' " +
"bgcolor='#ffffff' " +
"current_url='" + request + "'" +
"wmode='transparent' " +
"FlashVars='public_key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&domain=api.blogpet.net¤t_url=" + request + "' />" +
"</object><br />"
);
})();
document.write('<object id="site" classid="clsid:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="130" height="100" align="middle"><param name="allowScriptAccess" value="always" /><param name="movie" value="http://kk.blogtoy.net/swf/48.swf" /><param name="play" value="true" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="FlashVars" value="domain=kk.blogtoy.net&source=/swf/13.swf&onclick=/click/2/classic/8" /><embed src="http://kk.blogtoy.net/swf/48.swf" loop="false" menu="false" quality="high" bgcolor="#ffffff" width="130" height="100" name="site" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" wmode="transparent" FlashVars="domain=kk.blogtoy.net&source=/swf/13.swf&onclick=/click/2/classic/8" /></object>');３．スクリプトをブログに設定
BlogPet 表示用の script 要素の src 属性 charset 属性を削除し、代わりに２項の内容を追加します。なお、language 属性も非推奨なので削除しても良いでしょう。
変更前
<script language="JavaScript" type="text/javascript" src="http://www.blogpet.net/js/xxxxxxxxxxxxxxxxx.js" charset="UTF-8"></script>変更後
<script type="text/javascript">
[２項の内容をここに入れる]
</script>以上です。
これで、ページ上の LightBox JS/LItebox 画像を表示した時、BlogPet が背景画像の下に隠れればOKです。
CSS+JavaScript によるカラムレイアウト切り替え（cookieによる状態保持）
CSS+JavaScript によるカラムレイアウト切り替えでは基本的な切り替え方法を紹介しましたが、このエントリーでは cookie を用いてスタイルを保持する方法を紹介します。
前述の通り、前回までのカスタマイズではブラウザ上でページ遷移やリロードをするとスタイルが元に戻ってしまうという欠点があります。例えば配色や文字サイズを切り替えたらそのままのデザインで他のページも閲覧したいケースは少なくないと思いますので、このカスタマイズを併用されるとユーザビリティが向上するでしょう。
サンプルを用意しましたのでリロードを実施してみてください。
注：IEのリキッドレイアウト表示に不具合があるようですので、サンプルは固定レイアウトのみに限定させて頂いてます。
CSS+JavaScript によるカラムレイアウト切り替えのカスタマイズが終わっていることを前提にカスタマイズを説明します。
１．cookie 保持スクリプトの追加
状態を保持したいテンプレートの <head>～</head> へ下記を追加します。外部ファイルにしても構いません。
<script type="text/javascript">
<!--
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
//-->
</script>このスクリプトは QuirksMode：Cookies からの抜粋です。
２．スタイル切り替えスクリプトに cookie 保持起動の追加
CSS+JavaScript によるカラムレイアウト切り替えの１項のスクリプトに下記の青色部分 *1 を追加します。
<script type="text/javascript">
<!--
function changeColumn(id) {
var elements = document.getElementsByTagName('body');
document.getElementById('links-right-box').style.display = 'block';
document.getElementById('links-left-box').style.display = 'block';
if(id == '3'){
：
（中略）
：
}
createCookie('style', id, 365);
}
//-->
</script>createCookie の引数には、cookie名・値（ここではカラムレイアウト）・有効期限（ここでは日単位）の順に設定します。有効期限が「365」であれば1年有効であることを示します。
３．ページ読み出し時の cookie 取得処理追加
状態保持をしたいテンプレートの最後の方（</html> の前）に下記を追加します。
<script type="text/javascript">
<!--
var id = readCookie('style');
if(id){
changeColumn(id);
}
//-->
</script>*1：色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox／Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。
CSS+JavaScript によるカラムレイアウト切り替え
公開テンプレート（Movable Type/Serene Bach/sb/ FC2ブログ/Seesaaブログ）でカラムレイアウトをリアルタイムに切り替えるカスタマイズです。ここでは公開テンプレートをサンプルに説明していますが、同様の構造であればどのようなテンプレートでも実現可能です。
とりあえず、どのような動作になるかをサンプルでお試しください（中央上部のプルダウンメニューで操作できます）。
以前、類似の記事でスタイルシート切替や3カラム可変と3カラム固定を切り替えるをエントリーしていますが、これらはいずれもスタイルシートを新たに追加する必要がありました。つまり「スタイルシートを切り替える」というカスタマイズでした。
今回のカスタマイズでは、スタイルシートの追加や切り替えなしにレイアウトを切り替えることができます。
その理由は、現在公開しているテンプレートでは1つのスタイルシートに
- 3カラムリキッドレイアウト
- 3カラム固定レイアウト
- 2カラムリキッドレイアウト（右サイドバー）
- 2カラム固定レイアウト（右サイドバー）
- 2カラムリキッドレイアウト（左サイドバー）
- 2カラム固定レイアウト（左サイドバー）
- 1カラムリキッドレイアウト
- 1カラム固定レイアウト
の8種類のレイアウトをまとめて記述しています。各レイアウトは body 要素の class 属性に割り当てているので、この class 属性値（青色 *1）を書き換えることでレイアウトが切り替わります。
<body class="layout-three-column">CSSには class 属性に対応するクラスセレクタが記述されています。例えば .layout-three-column では下記のような設定になっています（抜粋）。
body.layout-three-column {
margin-bottom: 20px;
}
.layout-three-column #box {
width: 850px;
}
.layout-three-column #content {
float: left;
width: 478px;
}
.layout-three-column #links-left-box,
.layout-three-column #links-right-box {
float: left;
width: 185px;
}
.layout-three-column #links-left,
.layout-three-column #links-right {
padding: 15px 15px 0 15px;
}公開テンプレートでは、同様の設定を8種類全てのレイアウトについて記述しています。目新しいテクニックではありませんが、ページデザインを切り替えるには非常に有効な手法です。
つまり JavaScript で class 属性値を書き換えれば簡単にレイアウトを切り替えることが可能、という訳です。具体的には、HTML（テンプレート）に切替用のスクリプトとプルダウンメニューまたはリンクを書き加えるだけで済みます。
以下、このエントリーでは全レイアウトを表示するカスタマイズ方法を説明します。組み合わせによってはサイドバーを非表示にするような効果を出すこともできますので、それらについては追ってご紹介したいと思います。
１．スクリプトの追加
切り替えを実施したいテンプレートの <head>～</head> へ下記を追加します。外部ファイルにしても構いません。
<script type="text/javascript">
<!--
function changeColumn(id) {
var elements = document.getElementsByTagName('body');
document.getElementById('links-right-box').style.display = 'block';
document.getElementById('links-left-box').style.display = 'block';
if(id == '3'){
elements[0].setAttribute('class','layout-three-column');
elements[0].setAttribute('className','layout-three-column');
} else if(id == '3l') {
elements[0].setAttribute('class','layout-three-column-liquid');
elements[0].setAttribute('className','layout-three-column-liquid');
} else if(id == '2l') {
elements[0].setAttribute('class','layout-two-column-left');
elements[0].setAttribute('className','layout-two-column-left');
document.getElementById('links-right-box').style.display = 'none';
} else if(id == '2ll') {
elements[0].setAttribute('class','layout-two-column-liquid-left');
elements[0].setAttribute('className','layout-two-column-liquid-left');
document.getElementById('links-right-box').style.display = 'none';
} else if(id == '2r') {
elements[0].setAttribute('class','layout-two-column-right');
elements[0].setAttribute('className','layout-two-column-right');
document.getElementById('links-left-box').style.display = 'none';
} else if(id == '2rl') {
elements[0].setAttribute('class','layout-two-column-liquid-right');
elements[0].setAttribute('className','layout-two-column-liquid-right');
document.getElementById('links-left-box').style.display = 'none';
} else if(id == '1') {
elements[0].setAttribute('class','layout-one-column');
elements[0].setAttribute('className','layout-one-column');
document.getElementById('links-left-box').style.display = 'none';
document.getElementById('links-right-box').style.display = 'none';
} else if(id == '1l') {
elements[0].setAttribute('class','layout-one-column-liquid');
elements[0].setAttribute('className','layout-one-column-liquid');
document.getElementById('links-left-box').style.display = 'none';
document.getElementById('links-right-box').style.display = 'none';
}
}
//-->
</script>２．切り替え用プルダウンメニューの追加
１項と同様、切り替えを実施したいテンプレートに下記のプルダウンメニュー（青色）を追加します。ここではカラム切り替えで非表示にならないよう、中央カラム上部に設定しています。
：
<!-- 中央カラム開始 -->
<div id="content">
<form id="cc">
<select name="select" onchange="changeColumn(this.form.select.value);">
<option value="3">3カラム</option>
<option value="3l">3カラムリキッド</option>
<option value="2l">2カラム(左)</option>
<option value="2ll">2カラム(左)リキッド</option>
<option value="2r">2カラム(右)</option>
<option value="2rl">2カラム(右)リキッド</option>
<option value="1">1カラム</option>
<option value="1l">1カラムリキッド</option>
</select>
</form>
<div class="blog">
：リンクにする場合は下記のようになります（どこに配置するかは自己解決してください）
<ul>
<li><a href="javascript:void(0);" onclick="changeColumn('3')">3カラム</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('3l')">3カラムリキッド</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('2l')">2カラム(左)</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('2ll')">2カラム(左)リキッド</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('2r')">2カラム(右)</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('2rl')">2カラム(右)リキッド</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('1')">1カラム</a></li>
<li><a href="javascript:void(0);" onclick="changeColumn('1l')">1カラムリキッド</a></li>
</ul>３．スタイルの追加
２項で一応完成ですが、プルダウンメニューの位置を整えるために下記のCSSを追加します。
#cc {
text-align:center;
padding-top: 15px;
}*1：色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox／Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。
mt-site.js について（その3：cookie登録の改善）
mt-site.js について（その2：注意事項）の最後で述べた、
コメント投稿フォームの「情報を登録しますか？」チェックボックスのチェックを外すと、mt-site.js の forgetMe が実行され、それまで入力していたコメント情報が消去されてしまいます。お世辞にも使い勝手が良いとは言えないので、別途修正案を提示したいと思います。の修正案です。これを行う理由は、cookie非登録というチェックを外す操作によるフォーム情報のクリアはユーザが意図しない動作である、というところに基づいています。英語圏では等しいのかもしれませんが少なくとも私はそう感じましたので。
解決策はたいした内容ではありません。管理画面よりテンプレートの mt-site.js を選択し、「テンプレートの内容」にある、
function forgetMe (f) {
deleteCookie('mtcmtmail', '/', '');
deleteCookie('mtcmthome', '/', '');
deleteCookie('mtcmtauth', '/', '');
f.email.value = '';
f.author.value = '';
f.url.value = '';
}の赤色部分を削除します。
2005.11.18 追記
mt-site.js について認識誤りがあったため本文を修正しました。
mt-site.js について（その2：注意事項）
Movable Type 3.2-ja 以降でデフォルト・テンプレートをご利用になるか、新たにテンプレートを作成される場合、mt-site.js の振る舞いの制約上、いくつか注意する点があります。またコメント・トラックバック関連の表示でいくつかの不具合が確認されていますので、下記の修正あるいは設定を推奨します。
１．cookie登録のチェックボックスを追加
修正の対象はコメント・プレビューテンプレートです。
エントリー・アーカイブには、コメント投稿フォームに cookie 登録用のチェックボックス
この情報を登録しますか?が存在しますが、コメント・プレビューテンプレートにはこのチェックボックスが存在しません。このチェックボックスが存在しないと、ページを開いた時に
document.comments_form.bakecookie has no propertiesという JavaScript エラーが発生します。これは mt-site.js の individualArchivesOnLoad に含まれるコード
if (mtcmtauth || mtcmthome) {
document.comments_form.bakecookie.checked = true;
} else {
document.comments_form.bakecookie.checked = false;
}が実行される時に document.comments_form.bakecookie がみつからないためです。
ということで、本チェックボックス（青色部分）を下記の位置に追加しましょう。
<p>
<label for="comment-url">URL: </label>
<input id="comment-url" name="url" size="30" value="<$MTCommentPreviewURL$>" />
</p>
<p>
<label for="comment-bake-cookie"><input type="checkbox"
id="comment-bake-cookie" name="bakecookie" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" />
この情報を登録しますか?</label>
</p>
</div>２．コメント関連タグのID属性について
mt-site.js はコメント投稿フォームにある下記のID属性を利用して表示・非表示を制御しています。
- comments-open
- comments-open-data
- name-email
- comments-open-text
- comments-open-footer
mt-site.js ではこれらのID属性有無チェックは行っていないため、テンプレートを自作される場合（特に他へ公開される等）はこれらのタグを含むようにしましょう。
３．トラックバック関連タグのID属性について
mt-site.js はトラックバック欄にある下記のID属性を参照して、表示・非表示を制御しています。
- trackbacks-info
３項と同様、テンプレートを自作される場合等はこれらのタグを含むようにしましょう。
４．その他１（commenter_name.js の削除）
コメント・プレビューテンプレートのヘッダ部分に記述されている
<script type="text/javascript" src="<MTStaticWebPath>js/commenter_name.js"></script>は不要です。この行が残っているとコメント・プレビュー画面で JavaScript エラーが発生する可能性があるため削除しましょう。
commenter_name.js というファイルは、英語版の初期β版には含まれていましたが、それ以降は含まれていません。また commenter_name.js の内容は mt-site.js に包含されていますので削除しても問題はありません。
公開テンプレートでは現在コメントアウトしていますが、初期のテンプレートでは有効になっている場合があるため、JavaScript エラーになる場合はこの行を削除してください。
５．その他２（cookie登録用チェックボックスの振る舞い）
コメント投稿フォームの「情報を登録しますか？」チェックボックスのチェックを外すと、mt-site.js の forgetMe が実行され、それまで入力していたコメント情報が消去されてしまいます。お世辞にも使い勝手が良いとは言えないので、別途修正案を提示したいと思います。
とりあえず無闇にチェックを外はずないよう気をつけましょう。
mt-site.js について（その1：仕組みと動作）
エントリー・アーカイブやコメント・プレビュー画面のヘッダ部分には、
<script type="text/javascript" src="<$MTBlogURL$>mt-site.js"></script>という設定があります。
この mt-site.js は、エントリー・アーカイブやコメント・プレビュー画面でのコメント・トラックバック欄の表示・非表示および、TypeKey認証時のコメンター情報や投稿フォームの表示を制御するためのものです。
以下、mt-site.js の仕組みおよび動作について説明します。
１．インタフェース
mt-site.js では下記のインタフェース（関数）が定義されています（内部で利用されるインタフェースは省略しています）。
- rememberMe：cookie に投稿者情報（名前・メールアドレス・URL）を保存
- forgetMe：cookie から投稿者情報（名前・メールアドレス・URL）を削除し、フォームデータをクリア
- individualArchivesOnLoad：設定状態によってコメント・トラックバック欄の表示・非表示を制御＋cookieからコメント投稿者情報取得
- writeTypeKeyGreeting：TypeKeyサイン・イン／サイン・アウト情報表示を制御
また、mt-site.js が取得された、つまりHTMLのヘッダに記述された冒頭の script 要素が読み込まれた時点で、
- commenter_name
が生成（プログラム的には「変数定義」を指します）されます。commenter_name は TypeKey による投稿者のニックネームで、ニックネームを cookie あるいは Movable Type から取得するコードも同時に生成されます（生成契機は２項参照）。このコードも script 要素が読み込まれる契機に実行されます。
２．生成契機
mt-site.js は、テンプレートの再構築を契機に生成されるダイナミックなスクリプトです。ダイナミックな生成を行う理由は、ブログのコメント・トラックバックの設定内容によってスクリプトの振る舞いを変える必要があるためです。
例えば、コメントを「一切受け付けない」という設定にした場合、エントリー・アーカイブのコメント欄は表示されなくなり、コメント・プレビュー画面は当然それ自体にジャンプできなくなります。
これは設定に応じた mt-site.js が再構築によって自動生成され、エントリー・アーカイブを表示する時にコメント投稿フォーム表示させないように mt-site.js が制御しているためです。
mt-site.js は「インデックステンプレート」として登録されており、「インデックス・テンプレートの再構築」を契機に生成されます（メインページではなく「インデックス・テンプレート」であることに注意してください）。設定の変更を行って「インデックス・テンプレートの再構築」が促された場合は、再構築が必要であることを指します（再構築が不要な場合は表示されません）。
それ以外の契機でインデックス・テンプレートの再構築を行う場合は、再構築画面の「すべてを再構築」または「インデックス・テンプレートを再構築」を選択してください。
また設定画面の TypeKey 登録を行い、インデックス・テンプレートを再構築すると、mt-site.js の最後の辺りに TypeKey 投稿者のニックネームを取得する
if ('user-domain' != 'user-domain') {
document.write('<script src="http://user-domain/mt/mt-comments.cgi?__mode=cmtr_name_js"></script>');
} else {
commenter_name = getCookie('commenter_name');
}が生成されます。
user-domain 同士を比較している部分は、実際には MTCGIHost と MTBlogHost が展開された値が設定されます。独自ドメインを取得している場合等には cookie からの取得ができない（ホスト名が異なるため）ので、
http://user-domain/mt/mt-comments.cgi?__mode=cmtr_name_jsが実行されます。ちなみにこのURLを実行すると、
var commenter_name = 'hogehoge';というレスポンスになります。hogehoge の部分がコメンター情報で、つまりコメンター情報が JavaScript として直接HTMLに表示されるという仕組みです。
３．動作
エントリーアーカイブにおける、TypeKey サイン・インした後の TypeKey 関連情報の表示の流れを説明します（設定画面で TypeKey 登録が完了していることを前提としています）。
３．１ ニックネーム取得
ページが表示されると（厳密にはヘッダの script 要素が実行されると）、mt-site.js に記述された、
if ('user-domain' != 'user-domain') {
document.write('<script src="http://user-domain/mt/mt-comments.cgi?__mode=cmtr_name_js"></script>');
} else {
commenter_name = getCookie('commenter_name');
}が実行されて、cookie あるいは Movable Type より投稿者のニックネームを取得。
３．２ 名前・メールアドレスの表示制御
次に、body 要素の individualArchivesOnLoad が実行され、commenter_name が存在する場合は、コメント投稿フォームの名前・メールアドレス欄を非表示に、存在しない場合は表示します。
３．３ サイン・インの表示制御
最後に、投稿フォームの中にある writeTypeKeyGreeting が実行されて、commenter_name が存在する場合は、コメント投稿フォームに
サインインを受け付けました。hogehoge さん。コメントしてください。(サイン・アウト)と表示し、存在しない場合は、
TypeKey IDを使ってサイン・インしてください。と表示します。
2005.11.18 追記
本文を修正しました。
