月送りカレンダーにリアルタイムカレンダーを適用する場合の補足
月送りカレンダーにリアルタイムカレンダーを適用する場合の修正手順です。月送りカレンダーを使われている方がリアルタイムカレンダーを導入した時に「うまく表示されない」という質問を以前から時々受けておりましたので、改めてまとめてみました。
ポイントは次の2点です。
- 「アーカイブ・ファイルのテンプレート」修正
拡張子が .html になっている月送りカレンダー用ファイルの拡張子を .php に変更します。 - テンプレートの修正
月送りカレンダー用ファイルを呼び出している各テンプレートの、iframe タグに記述されている月送りカレンダー用ファイル名を変更します。
なおリアルタイムカレンダーに変更する手順は本来のエントリーをご覧ください（この記事は前準備のみ記しています）。
１．「アーカイブ・ファイルのテンプレート」修正
月送りカレンダーの２項にある「ファイルの関連付け（管理ページの「ウェブログの設定」→「アーカイブの設定」）」では、「アーカイブ・ファイルのテンプレート」を
<$MTArchiveDate format="calendar/%Y/%m/index.html"$>と設定していますが、ご覧の通り拡張子が .html で出力するようになっています。これを
<$MTArchiveDate format="calendar/%Y/%m/index.php"$>に変更します。変更が終わったら保存・再構築してください。
２．テンプレートの修正
月送りカレンダーの３項にある「カレンダーの設置」では、 iframe タグの内容は下記のようになっていると思います。
<iframe name="cal-iframe" src="<MTBlogURL>archives/calendar/<MTDate format="%Y/%m/index">.html" width="150" height="115" scrolling="NO" frameborder="0" marginwidth="0" marginheight="0">
</iframe>これが各テンプレート（メインページ／カテゴリーアーカイブ／月別アーカイブ／個別エントリーアーカイブ等）から実際にカレンダーを呼び出して表示する部分ですが、呼び出すファイルの拡張子が .html となっているため（赤色部分）、この状態では xxxxx.html というファイルしか呼び出せません。
ということで .html を .php に修正します（青色部分）。
<iframe name="cal-iframe" src="<MTBlogURL>archives/calendar/<MTDate format="%Y/%m/index">.php" width="150" height="115" scrolling="NO" frameborder="0" marginwidth="0" marginheight="0">
</iframe>親カテゴリーにサブカテゴリーのエントリー数の合計を表示する
Category：[カテゴリー]
Tag：[Category, Customize, MovableType, Plugin, SubCatCount, SubCategory]
Permalink
Movable Type のサブカテゴリーリストで、親カテゴリーのエントリー数に、サブカテゴリーのエントリー数を合計して表示するカスタマイズです。SubCatCount プラグインを利用します。当サイトでは右側にあるカテゴリーリストの ( ) 部分に、サブカテゴリーとのエントリー数の合計を表示しています。
１．プラグインのダウンロード
下記のサイトの本文下の方にある「download」のリンクからアーカイブをダウンロードします。
２．プラグインファイルのアップロード
ダウンロードしたアーカイブを解凍して、その中にある SubCatCount.pl を plugins ディレクトリにアップロードします。
３．テンプレート修正
各テンプレートのサブカテゴリーリストを表示しているタグを下記のように修正します。
３．１ デフォルトテンプレートに追加：常にサブカテゴリーとの合計を表示
デフォルトテンプレートではカテゴリー数を表示する状態になっていませんので、単純に MTSubCatCount タグを追加します（青色部分）。この場合、サブカテゴリーをもつ親カテゴリーは常にサブカテゴリーのエントリー数の合計を表示します。
<div id="categories">
<h2>カテゴリー</h2>
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTSubCatCount$>]
<MTElse>
<li><MTCategoryLabel> [<$MTSubCatCount$>]
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>３．２ デフォルトテンプレートに追加：親カテゴリーは自カテゴリーと合計の両方を表示
こちらはサブカテゴリーをもつ親カテゴリーに対して、自カテゴリーのエントリー数とサブカテゴリーのエントリー数の合計を両方表示する場合です。青色部分を追加します。
<div id="categories">
<h2>カテゴリー</h2>
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]<MTHasSubCategories>(<$MTSubCatCount$>)</MTHasSubCategories>
<MTElse>
<li><MTCategoryLabel><MTHasSubCategories> (<$MTSubCatCount$>)</MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>３．３ 公開テンプレートに追加：常にサブカテゴリーとの合計を表示
公開テンプレートではカテゴリー数を表示する状態になっているので、MTCategoryCount を MTSubCatCount タグに置き換え（赤色部分を削除し、青色部分を追加）、カテゴリーのエントリーがない条件タグには新たに追加します（青色部分）。表示内容は３．１と同様です。
<div class="side">
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$><$MTSubCatCount$>]
<MTElse>
<li><MTCategoryLabel> [<$MTSubCatCount$>]
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</div>３．４ 公開テンプレートに追加：親カテゴリーは自カテゴリーと合計の両方を表示
サブカテゴリーをもつ親カテゴリーに対して、自カテゴリーのエントリー数とサブカテゴリーのエントリー数の合計を両方表示する場合です。青色部分を追加します。
<div class="side">
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]<MTHasSubCategories>(<$MTSubCatCount$>)</MTHasSubCategories>
<MTElse>
<li><MTCategoryLabel> (<$MTSubCatCount$>)
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</div>３．５ サブカテゴリーリストの折りたたみを利用：常にサブカテゴリーとの合計を表示
サブカテゴリーリストの折りたたみを利用している場合の修正方法です。赤色部分を削除し、青色部分を追加します。内容は３．１と同様です。
<div class="side">
<div id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$><$MTSubCatCount$>] <MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> [<$MTSubCatCount$>]<MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>３．６ サブカテゴリーリストの折りたたみを利用：親カテゴリーは自カテゴリーと合計の両方を表示
サブカテゴリーリストの折りたたみを利用している場合で、サブカテゴリーをもつ親カテゴリーに対して、自カテゴリーのエントリー数とサブカテゴリーのエントリー数の合計を両方表示する場合です。青色部分を追加します。
<div class="side">
<div id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]<MTHasSubCategories>(<$MTSubCatCount$>)</div></MTHasSubCategories>
<MTElse>
<li><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> (<$MTSubCatCount$>)<MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>ブロックレベル要素とインライン要素
ウェブスタンダードなエントリーを書くための基礎知識です。タイトルについて、他に詳しく書かれたサイトが色々ありますが、当サイトでもまとめて記しておきたいと思います。
HTML要素の構造
HTML文書は一つのhtml要素からなります。さらに html要素は head 要素と body 要素からなります。そして、body 要素の中で使える要素（タグ）は大きく「ブロックレベル要素」と「インライン要素」の二つに分類することができます。
ブロックレベル要素
「ブロックレベル要素」とは、見出し（h1?h6）・段落（p）・リスト（ul/ol ）・テーブル（table）など、文書の基本的な構造を示すものです。その名の通り「ブロック（矩形）」として、要素の前後に改行を伴った表示がされます。
ブロックレベル要素の主なタグは次の通りです。
- p / h1?h6 / ul / ol / dir / pre / dl / div / noscript / blockquote / form / hr / table /fieldset / adress
インライン要素
「インライン要素」は強調文字（strong）・リンク（a）といったテキストに装飾をしたり機能をもたせる、あるいは改行（br）のようにテキスト内のある部分に対して何らかの意味づけをしたりする機能を持たせるものです。インライン要素の前後には改行は含まれません。*1
インライン要素の主なタグは次の通りです。
- i / b / u / s / em / strong / code / a / img / object / font / br / span / iframe / input / select / textarea / label / button / layer
なお単なるテキストもインライン要素に含まれます。
ブロックレベル要素とインライン要素の関係
ブロックレベル要素とインライン要素を記述するにあたって、次のような関係（制約）があります。エントリーの記述にあたって気をつけなければならないものを挙げておきます。
- ブロックレベル要素の内容に、他のブロック要素やインライン要素を含むことができます（例外あり）
- インライン要素の中にブロックレベル要素を含むことはできません
- p 要素はブロックレベル要素ですが、子要素としてインライン要素しかもつことができません
- div 要素・blockquote 要素は子要素としてブロックレベル要素しかもつことができません
その他
- ul / ol / dl / hr / table の各要素の内容モデルは決まっています（例えば ul は li ）
- HTML4.0/XHTML1.0 Strict の場合、body要素の直接の子要素としてインライン要素を記述することはできません（Transitional はOK）
- li / dt / dd / td / tr 等は「内容モデル（ある要素の子要素になることができる要素）」として扱われるだけで、どちらの要素にも該当しません *誤解がありましたらご指摘ください
主な参考サイトは下記です。ありがとうございました。
- NEXTindex：HTML 文書とはなんだろうか
- The Web KANZAKI：ブロックレベル要素とインライン要素
- ぴよぴよ実験室：HTMLメモ（for 自分）
- とほほのWWW入門：HTMLのタグと要素
以上です。この続編として、Movable Type でウェブスタンダードなエントリーを書くためのカスタマイズ方法について記していきたいと思います。
*1：CSSの display プロパティでブロックレベル要素として表示することも可能です
週間東洋経済・7月30日号「ブログ資本主義」
東洋経済新聞社の週間東洋経済・7月30日号に「ブログ資本主義」というタイトルでブログの特集がされています（計16ページ）。表紙は「はてな」の近藤敦也社長です。
前半はU30（アンダー30）によって立ち上げられた著名なカンパニーと「韓流ブログ」サイ・ワールドの台頭が取り上げられ、その間に「ブログ知識12選」として、基本的なブログの知識から「ブログで稼ぐ方法」「ブログが検索エンジンの上位に来るって本当？」「『ブログ作法』のススメ」等、常識的な観点でのワンポイントが記されています。
後半は「ビジネスブログ11の事例研究」と題して各企業や自治体・大学での導入事例が紹介されています。個人的には企業ブログとの関わりはないのですが、現在の普及ぶりを目の当たりにすることができ、企業レベルでも今後さらに浸透していく気配を感じさせます。
紹介されているブログを直接訪れても記事に書かれているような実感はわかないと思います。そういう意味でこういったブログ界を俯瞰し動向を把握できる記事に時々お目にかかれるというのはありがたいことです。
PC系雑誌のやや似通ってきたブログ特集（失言）に食傷気味の方にはお勧めです。まだ発売中と思いますので気になる方は本屋に行きましょう。東洋経済新聞社のサイトから単品購入もできるようです。
TypeKey サイン・インのメッセージを変更する
個別エントリーアーカイブ／コメント・プレビュー／コメント・エラーの各コメント欄を整形しました。コメント欄にあるTypekeyバナーの配置は、以前から気に入っていた Ogawa::Memoranda さんのコメント欄のアイデアを勝手ながらそのまま拝借させて頂きました。ありがとうございます。
またTypeKeyサイン・イン後の日本語ニックネームが文字化けする件が残っていましたので、TypeKeyでサイン・インしても表示が変わらない問題を対処を参考に対処しました。
整形に伴って、TypeKeyサイン･イン前後のメッセージをそれぞれ
TypeKey ID を使ってサイン・インしてください。
↓
TypeKeyサイン・インサイン・インを確認しました、hogehogeさん。コメントしてください。 (サイン・アウト)
↓
hogehogeさんのサイン・インを確認しました(サイン・アウト)に変更してみました（青色はリンクを示しています）。
ということで、ここではTypeKeyサイン・インのメッセージのカスタマイズ方法を載せましたので参考になれば幸いです。なおこのカスタマイズはTypekeyの設定が有効かつ、サイン・インしなくてもコメントが可能になっている状態が前提です。
個別エントリーアーカイブ
個別エントリーアーカイブにあるメッセージを変更する場合、個別エントリーアーカイブの赤色部分を青色に修正します。修正前の状態はデフォルトテンプレートと公開テンプレートの2種類について掲載しておきます（若干違ってましたらお許しを）。
デフォルトテンプレート（抜粋：変更前）
<MTIfRegistrationAllowed>
<script type="text/javascript" src="<MTCGIPath><MTCommentScript>?__mode=cmtr_name_js"></script>
<script language="javascript" type="text/javascript">
<!--
if (commenter_name) {
document.write('サイン・インを確認しました、', commenter_name, 'さんのサイン・インを確認しました (<a href="<$MTRemoteSignOutLink static="1"$>">サイン・アウト</a>)');
} else {
document.write('TypeKey ID を使って <a href="<$MTRemoteSignInLink static="1"$>"> TypeKey サイン・インする</a> ');
}
// -->
</script>
</MTIfRegistrationAllowed>公開テンプレート（抜粋：変更前）
<MTIfRegistrationAllowed>
<script type="text/javascript" src="<MTCGIPath><MTCommentScript>?__mode=cmtr_name_js"></script>
<script language="javascript" type="text/javascript">
<!--
if (commenter_name) {
document.write('サイン・インを確認しました、', commenter_name, 'さん。コメントしてください。 (<a href="<$MTRemoteSignOutLink static="1"$>">サイン・アウト</a>)');
} else {
document.write('TypeKey ID を使って <a href="<$MTRemoteSignInLink static="1"$>"> サイン・イン</a> してください。');
}
// -->
</script>
</MTIfRegistrationAllowed>変更後
<MTIfRegistrationAllowed>
<script type="text/javascript" src="<MTCGIPath><MTCommentScript>?__mode=cmtr_name_js"></script>
<script language="javascript" type="text/javascript">
<!--
if (commenter_name) {
document.write(commenter_name, 'さんのサイン・インを確認しました(<a href="<$MTRemoteSignOutLink static="1" encode_html="1"$>">サイン・アウト</a>)');
} else {
document.write('<a href="<$MTRemoteSignInLink static="1" encode_html="1"$>">TypeKey サイン・イン</a>');
}
// -->
</script>
</MTIfRegistrationAllowed>コメント・プレビュー／コメント・エラー
個別エントリーアーカイブはテンプレートの変更だけで可能ですが、コメント・プレビュー／コメント・エラーにあるメッセージを変更する場合、プログラム（context.pm）と言語変換用のファイル（ja.pm）を修正する必要があります。カスタマイズ前にファイルのバックアップをとるか、エディタで履歴を戻せるようにしておいてください。
まず lib/MT/Template/Context.pm の1335行目辺り（3.171-ja の場合）にある下記のスクリプトの赤色部分を削除します。
if ($rem_auth_token && $registration_allowed) {
$result .= $javascript;
$result .= MT->translate_templatized(<<HTML);
<script language="javascript" type="text/javascript">
<!--
if (getCookie("commenter_name")) {
document.write('<MT_TRANS phrase="Thanks for signing in,"> ', '$commenter_name', '<MT_TRANS phrase=". Now you can comment."> (<a href="$path$comment_script?__mode=handle_sign_in&$static_arg&entry_id=$entry_id&logout=1"><MT_TRANS phrase="sign out"></a>)');
} else {
document.write('<MT_TRANS phrase="If you have a TypeKey identity, you can " escape="singlequotes"><a href="$signon_url$lang$needs_email&t=$rem_auth_token&v=$tk_version&_return=$path$comment_script%3f__mode=handle_sign_in%26$static_arg%26entry_id=$entry_id"> <MT_TRANS phrase="sign in" escape="singlequotes"></a> <MT_TRANS phrase="to use it here." escape="singlequotes">');
}
// -->
</script>
HTML削除したら一旦サイトからコメントの確認を実行してエラーが出ないことを確認してください。もしエラーが出てコメント・プレビュー画面が正常に表示されなくなった場合は削除部分を一旦元に戻します（一番最初の状態に戻せばきちんと表示されます）。そして削除箇所に誤りがないか確認して再度行ってください（「'」の有無に気をつけてください）。
正常に動作するようになったら、次に lib/MT/L10N/ja.pm を編集します。その前に日本語変換の仕組みについて説明します。
例えば「?さん。コメントしてください。」というメッセージは、上のスクリプトの青色
<MT_TRANS phrase=". Now you can comment.">の部分にあたります。"MT_TRANS" は言語変換用のタグです。このタグの phrase 属性に記述された 「. Now you can comment.」をキーにして、ja.pm に記述された
'. Now you can comment.' => 'さん。コメントしてください。',という行を探し、「. Now you can comment.」を「さん。コメントしてください。」に変換し、画面に表示します。
なお Context.pm には日本語を直接記述しないでください（文字化けします）。
さて、Context.pm の編集で最初のメッセージから下記の赤色部分が削除されました。
TypeKey ID を使ってサインインしてください。
サイン・インを確認しました、hogehogeさん。コメントしてください。 (サイン・アウト)後はサイン・イン後のメッセージ「さん。コメントしてください。」を「さんのサイン・インを確認しました」に変更するだけです。これは ja.pm にある
'. Now you can comment.' => 'さん。コメントしてください。',を
'. Now you can comment.' => 'さんのサイン・インを確認しました',に変更すればOKです。なお同じキーが何ヶ所かありますが、変更する文字列の少し上に
## lib/MT/Template/Context.pm
と書かれてありますのでその下にある一番近い該当の文字列を変更してみてください。もし変換されないようでしたら他の箇所も検索して変更してみてください。
以上です。なお、MT_TRANS タグの phrase 属性値、つまりキーとなる英文のメッセージを新しく作ることも可能です。つまり、それに対応する日本語が追加できます。あと ja.pm は行の前にTAB文字が入っていますが、TABがなくても問題ありません。
またコメント・プレビュー／コメント・エラーのコメント欄付近は Context.pm の内容を変更することでレイアウトをやメッセージの追加・変更が可能です。腕に自信のある方はチャレンジしてみてください。変更箇所のポイントは
sub _hdlr_comment_fields {
：
}の中に
：
return MT->translate_templatized(<<HTML);
：
（タグ）
：
HTML
$result .= MT->translate_templatized(<<HTML);
：
（タグ）
：
HTML
：
（略）と、「<<HTML」と「HTML」で括られた部分に、実際に表示されるタグ等が記述されていますので、ここにHTMLタグやメッセージ変換用タグを記述することができます。括られていない他の部分はプログラムですのでご注意ください。
カードの
BlogPeople の「List Me!」を valid にする
Category：[BlogPeople, ウェブスタンダード]
Tag：[BlogPeople, Customize, MovableType, WebStandards, XHTML]
Permalink
BlogPeople の「List Me!」を XHTML valid にするカスタマイズです。
BlogPeople のサービスのひとつに、他のブログピープル会員が簡単にあなたのサイト情報をリンクリストに追加することができる「List Me!（私を登録）」があります。当サイトでは下記のような形式のリンクになっています。
<a href="javascript:void(bloppop=window.open('http://www.blogpeople.net/addlink.jsp?n=1&u=http%3A%2F%2Fwww.koikikukan.com%2F&ti='+escape('<$MTBlogName encode_html="1"$>'),'blop','scrollbars=no,width=475,height=350,left=75,top=175,status=yes,resizable=yes'));">List Me!</a>が、これをページに貼り付けるとThe W3C Markup Validation Serviceで以下のようなエラーと、これと似たようなメッセージが計12個表示されます。つまり「List Me!」を表示することで valid でなくなってしまいます。
Line xxx, column xx: cannot generate system identifier for general entity "u"
...//www.blogpeople.net/addlink.jsp?n=1&u=http%3A%2F%2Fwww.koikikukan.com%2F&ti=これを回避するため、最初に考えたのは、リンクから一旦空のウィンドウを開き、そこから BlogPeople の JavaScript を起動するという案です（=メインページでエラーにならなければ良い）。
最初のリンクを下記のように書き換えてウィンドウ（ここでは bp.html）を開く
<a href="javascript:void(bloppop=window.open('http://www.koikikukan.com/bp.html','blop','scrollbars=no,width=475,height=350,left=75,top=175,status=yes,resizable=yes'));">List Me!</a>
↓
新しいインデックステンプレート（bp.html）を作り、この中で自動的に JavaScript を実行するように記述
<body onload="window.location.href = 'http://www.blogpeople.net/addlink.jsp?n=1&u=http%3A%2F%2Fwww.koikikukan.com%2F&ti='+escape('<$MTBlogName encode_html="1"$>');">こういったテクニックを用いれば valid かつ正常に表示されるようですが、やや面倒です。
さて、The W3C Markup Validation Service のエラーをよくみると、後方に
Line xxx, column xx: entity was defined here
...://www.blogpeople.net/addlink.jsp?n=1&u=http%3A%2F%2Fwww.koikikukan.com%2F&tiとあります。これが本来のエラーで、XHTMLではページ内の "&" を "&" と記述する必要があります。URLでも同様です（HTML 2.0の時からこの点も明記されていましたが、ブラウザは "&" のままでもきちんと処理するように求められていたこともあり、これでも機能していました *1）。
つまり「List Me!」のリンクは下記のように "&" の後ろに青色の "amp;" を追加するだけで valid になります。リンクをクリックした時のページ内容が元の設定の時と同じことも確認しています。
<a href="javascript:void(bloppop=window.open('http://www.blogpeople.net/addlink.jsp?n=1&u=http%3A%2F%2Fwww.koikikukan.com%2F&ti='+escape('<$MTBlogName encode_html="1"$>'),'blop','scrollbars=no,width=475,height=350,left=75,top=175,status=yes,resizable=yes'));">List Me!</a>2005.07.25 追記
コメントでお分かりの通り、Ogawa::Memoranda さんよりアドバイス頂きまして、valid かつ JavaSript がOFFでも使えるスクリプトを提供して頂きました。この場をお借りして改めてお礼申し上げます。
元のスクリプトの代わりに下記のタグを表示したい位置に設定します（「List Me!」の文言以外は教えていただいたものをそのまま掲載させて頂いてます）。nofollow も付与されているというきめ細かさ。
<script type="text/javascript">
function popup_blop(url) {
var c = url.indexOf('ti=');
url = url.substr(0,c+3)+escape(decodeURIComponent(url.substring(c+3,url.length)));
window.open(url,'blop','scrollbars=no,width=475,height=350,left=75,top=175,status=yes,resizable=yes');
}
</script>
<a title="List Me!" href="http://member.blogpeople.net/addlink.jsp?n=1&u=<$MTBlogURL encode_url="1"$>&ti=<$MTBlogName encode_url="1"$>" onclick="popup_blop(this.href);return false;" onkeypress="popup_blog(this.href);return false;" rel="nofollow">List Me!</a>*1：The Web KANZAKI：XHTMLの書き方と留意点より引用
XHTML 1.0 Transitional バナーを表示
The W3C Markup Validation Serviceが配布している「XHTML 1.0 Transitional」であることを示すバナーを右下に表示しました。valid であることを確認できているのは今のところトップページのみですので予めご了承ください。
先日買った Designing with Web Standards をようやく読破しまして、ウェブスタンダードなサイトを作ることの重要性を改めて認識致しました（CSSはハックを利用しているので valid ではありませんが）。ウェブスタンダードのスキルがほとんどない状態から1年余りでそれなりに身につけられたのはラッキーだったと思います。
ダジャレMovable Type のテンプレートやカスタマイズを中心に運営しているサイトですので、今後はできるだけウェブスタンダードに準拠する内容にできればと考えています。またこれまでに公開してきたエントリーでウェブスタンダードに準拠していない（またはそうであることを示唆していない）内容については適宜訂正していきたいと思います。
なお BlogPeople の List Me!! が Validation Service にひっかかっていたのですが、カスタマイズによってクリアできました。これについては追ってエントリーしたいと思います。
BlogPeopleの被リンク数を減らさずにURLを変更する
本日、BlogPeopleのURLを変更しました。こちらで変更する前にURLを手動で変更くださっていたサイトさんがかなり増えてきたのを発見して（ありがとうございます）、あわてて変えました。
さて、BlogPeopleのURLは、メニューにある「サイト情報の設定/変更」で簡単に変更できるのですが、これを行うとこれまでの被リンク情報が消滅してしまいます。被リンク数を維持したままURLを変更するには、メニューの「各種申請」をクリックした次のページにある「サイトURLの変更・追加申請」から申請します。
参考サイトは以下です。ありがとうございました。
昨晩申請して、本日の午前中には作業完了のメールを頂きました。この作業は人手を介して行われているようですが、迅速に対応くださりありがとうございます。
あとは重複リンクを整理したいところです（600より下回らない程度に）。
中継君の使用方法
Category：[blog]
Tag：[BlogPeople, Cache, Customize, jc, Link, MyBlogList, TrackbackPeople]
Permalink
中継君はBlogPeopleリンクリスト等の表示の遅延を避けるため、キャッシュに一旦保存したものを表示するためのツールです。便利そうだと思っていましたが動作や設定方法がいまひとつ分からなかったので（バカ）、BlogPeople を例に Javascript の基本動作から中継君の設定方法まで説明します。
Windows自宅サーバでの利用ですのでパーミッションの設定等もれてましたらお許しください。
2006.10.24 追記：簡単な設定で中継君とほぼ同様の機能を実現する「BlogPeople 等のリンクリストによる表示の遅延を解消する（その1：JavaScript編）」を公開しています。
JavaScript の基本的な動作
BlogPeople のリンクリストを取得するタグは、
<script language="javascript" type="text/javascript" src="http://www.blogpeople.net/display/usr/xxx.js"></script>となっています。当サイトで折りたたみやツリー化等のカスタマイズをされている方には馴染みのあるこの書き方は、<head> ? </head> に挿入している JavaScript 外部ファイルのインクルードと同じで、src 属性に記述されたURLを実行し、その結果を type 属性（MIMEタイプ）に準じた形式で出力します。ここでは "text/javascript" なのでJavaScriptとして認識されます。
つまり、このタグが埋め込まれたページをブラウザで実行すると、
- http://www.blogpeople.net/display/usr/xxx.js
が実行され、結果としてリンクリストを表示するためのJavaScript文
document.write('<div class=\'blogpeople-main\'>');
document.write('<a href=\'http://www.blogpeople.net/cgi-bin/click.cgi?u=http%3A%2F%2Fxxx\' target=\'_blank\' title=\'更新日:05年07月21日(Thu) 12時28分 \' >hogehoge1blog</a><br />');
document.write('<a href=\'http://www.blogpeople.net/cgi-bin/click.cgi?u=http%3A%2F%2Fxxx\' target=\'_blank\' title=\'更新日:05年07月21日(Thu) 12時31分 \' >hogehoge2blog</a><br />');
：を取得・表示します（?）。
このタグを実行して BlogPeople リンクリストとして表示するまでの時間は、ほとんど
- http://www.blogpeople.net/display/usr/xxx.js
の応答時間に依存します。皆さんのページに埋め込まれた同じようなURLを、ブラウザのアドレスに直接入力して実行すれば、応答時間を体感できると思います。
中継君の役割
中継君は CGIスクリプトで、あるURLの実行結果をキャッシュ（一時的なファイル）に保存して、それを表示するという機能をもっています。
中継君を起動するURLのイメージは下記のようになります。
- http://domain/path/to/jc.cgi?<これまでに起動していたURL>
このURLを表示したいページの任意の場所に埋め込みます。
例えば、先の BlogPeople リンクリストの JavaScript のタグであれば、
<script language="javascript" type="text/javascript" src="http://www.blogpeople.net/display/usr/xxx.js"></script>を
<script language="javascript" type="text/javascript" src="http://domain/path/to/jc.cgi?http://www.blogpeople.net/display/usr/xxx.js"></script>と、中継君のCGIスクリプトを実行するURL（青色）を挿入します（他に事前設定がありますがそれは別途）。この設定により、ブラウザがこの行を表示する時、まず
- http://domain/path/to/jc.cgi?http://www.blogpeople.net/display/usr/xxx.js
というURL（=CGI）を実行します。これまで設定されていたURLは "?" の後ろに設定された形になっていまして、中継君のプログラムにパラメータ（query）として渡され、内部で起動されます。
内部起動して取得したデータ（?）をキャッシュに一旦保存し、さらにそれををブラウザに表示します。2回目以降（厳密には指定した周期になるまで）はこのキャッシュにあるデータをブラウザに表示するので、httpアクセスによる表示の遅延を削減することができます
中継君は分単位でキャッシュの取得周期を設定できます。例えば10分に設定していれば、最初にキャッシュを取得してから約10分間はキャッシュのデータを使用しますが、10分後には正規のURLにアクセスして新しいデータを取得し、キャッシュに保存します。なお旧バージョンではキャッシュが複数生成されたようですが、現在はひとつのURLに対して1つしか生成されないようになっています（=常に上書き）。
先の記述で「遅延0」ではなく「遅延を削減」としているのは、次の周期には正規のURLでデータを再び取得するため、たまたまその回に当たると表示が遅くなる時があるためです。
設置方法
１．アーカイブのダウンロード
中継君のページより、最新記事の下にある「ダウンロード」をクリック。次のページで「中継君 Ver.1.4.2（この記事の投稿時点）」のリンクをクリックしてダウンロード。ダウンロードしたらアーカイブを解凍します。下記のファイルがあることを確認してください。
- jc.cgi
- ttl_sample.txt
２．ファイルの修正
Perlのパス
jc.cgi を任意のエディタで開いて、使用しているブログがMovable Type の場合は、1行目の
#!/usr/local/bin/perl -wを
#!/usr/bin/perl -wに変更します。ここを修正せずに実行すると結果が何も返却されません（ブラウザから直接実行すると500 エラーになります）。
ホスト制限
特定のホストからアクセスされた場合だけ中継君を起動したい場合は、次の行の右辺に該当のホストを追加します（追加方法はファイルに記載されています）。
my @url = ("");どこからアクセスされても常に起動する場合はデフォルトの状態でOKです。
この機能の動作は、ここに設定されたデータと HTTP_REFERER と比較して、完全一致または部分一致した場合、フィルタリングします。フィルタ対象のホストであれば何も（キャッシュのデータも）返却せずに処理を終了します。
キャッシュ周期
データがキャッシュされてから次にキャッシュするまでの周期を変更したい場合は次の行の右辺を変更します。
my $cache_ttl = 2 * 60;デフォルトは120分（2*60）でキャッシュを更新する設定になっています。このデータは、キャッシュに対してファイルテスト演算子（-M オプション）を実行し、キャッシュが更新されてからどれだけの時間が経過しているかを調べることで実現しています。
アクセスするURL別に周期を設定したい場合は ttl.txt というファイルを用います。例えば BlogPeople リンクリストと MyBlogList の周期をそれぞれ 3時間・1時間に設定する場合は、ttl.txt に
www.blogpeople.net/display/usr/ 180
list.myblog.jp/list 60と記述します。このファイルの設定は先の $cache_ttl の設定より優先されます。一律同じ周期でよければ ttl.txt の設定は不要です（ファイル自体不要）。
BlogPeople については ttl_sample.txt にデフォルトで設定されていますので、このファイル名を ttl.txt に変更するだけで使えるようになります。
３．ファイルのアップロード
jc.cgi と、必要に応じて ttl.txt を CGI が実行できるパスにアップロードします。ttl.txt は jc.cgi と同じディレクトリにアップロードしてください。jc.cgi のパーミッションは他の CGIファイルと同じように変更してください（755 とか 777 等）。
４．cache ディレクトリの作成
ファイルをアップロードしたディレクトリの直下に cache というディレクトリを作成します。このディレクトリは中継君が最初に起動された時に自動的に作ってくれますが、パーミッションが誤っていると作成されないので予め作っておいた方が無難です（強制している訳ではありません）。
このディレクトリ配下にキャッシュを自動的に作りますので、cache ディレクトリのパーミッションを 755 や 777 等に変更しておきます（中継君による自動生成では 755 にしているようです）。
５．テンプレートの変更
再掲になりますが、各テンプレートにある BlogPeople リンクリスト等を起動するタグに、中継君のURLを挿入します。
<script language="javascript" type="text/javascript" src="http://www.blogpeople.net/display/usr/xxx.js"></script>を
<script language="javascript" type="text/javascript" src="http://domain/path/to/jc.cgi?http://www.blogpeople.net/display/usr/xxx.js"></script>とします。jc.cgi が mt.cgi や mt-comments.cgi と同じディレクトリにあれば、
<script language="javascript" type="text/javascript" src="<$MTCGIPath$>jc.cgi?http://www.blogpeople.net/display/usr/xxx.js"></script>とするのが良いでしょう。
挿入したら、保存・再構築します。
６．中継君の実行
挿入したページをブラウザで表示させます。初回はキャッシュがありませんので、キャッシュを作るために正規のURLにアクセスします。正常に動作すれば設定前と同様にリンクリスト等が表示されます。
心配であれば、URLをブラウザに直接入力して実行してみてください（URLに正規のURLを "?" で付けることもお忘れなく）。
- http://domain/path/to/jc.cgi?http://www.blogpeople.net/display/usr/xxx.js
正常に動作すればリンクリスト等の結果が表示されます。2回目以降はサクッと表示される筈です。
以上です。なお中継君の実行には Perlモジュールの LWP が必要です（多分主要なレンタルサーバでは大丈夫と思います）。
BlogPeople表示しました
リンクのページに移動した BlogPeople のリンクリストを各ページに表示するようにしました。巷で有名な中継君を使っていますが、手を加えてもう少し軽く表示するようにしています。
なおリストの更新は正常にできていない状態ですので、予めご容赦ください（リンクのページのリンクリストは適正に更新されます）。MyBlogListも可能であれば追って追加します。
float 3カラムの折りたたみによるCSSの不具合
リニューアルで Mozzila 系のブラウザに中央カラムのコンテンツ折りたたみを導入しなかった理由です。
Netscape または Firefox で、サイドバー（左右どちらでも良い）の表示が中央カラムより長い状態で、中央カラムの記事の折りたたみ（閉じる→開く）を行うと、開いた分の長さをサイドバーの余白として継承してしまいます。つまり記事を開いた途端にページ全体が下にのびてしまいます。中央カラムがサイドバーより長い状態であれば発生しません。
言葉で説明するのは難しいのでもぬけのからの個別エントリーアーカイブで試して頂けると一目瞭然です。このページでどちらかのサイドバーの長さを中央カラムより長い状態にして「続きを読む」をクリックすると、長いほうのサイドバーの下に余白が生じます。この余白は中央カラムを開いた分の長さと等しくなります。
またその後でサイドバーを折りたたんでも高さは変わりません。
かなり試してみましたが、今のところ解決策はみつかっておりません。そういう訳で継続調査中です。もし解決策をご存知の方がいらっしゃいましたらご教示頂ければ幸いです。
サイトリニューアル
 サイトリニューアルしました。以下主な変更内容です。ブラウザは WindowsXP+IE6.0/Netscape8.0/Firefox1.0/Opera8.0で確認しています。Mac 環境では確認できておりませんので予めご容赦ください。以下、主な変更内容です。 |
- 3カラムスタイルはこれまで通りですが、絶対値指定ではなく float 指定によって可変3カラムを実現しています（IEでは幅を狭くし過ぎると中央のカラムがおちることがありますのでご注意ください）。また左右にマージンをつけ、下部にフッタを与えてコンテンツ全体を括るようにしてみました。随分前からこのスタイルにしてみたかったのですが、スキル不足でできませんでした。そういう意味では目標達成というところです。
- 中央カラムのコンテンツを折りたためるようにしました。タイトルまたは概要後方にあるリンクをクリックすることで切り替えられます。折りたたみ状態も保持します。また折りたたみによって過度なスクロールを避けられるので、カテゴリーアーカイブと月別アーカイブはページ分割をなくしてみました。メインページは逆にページ分割を導入して1ページ毎の件数を減らしてスクロール量をさらに絞ってみました。
なおこの機能はIEのみで、Mozzila系は不具合（またはスキル不足）のため折りたたみできない設定にしています（詳細は別途エントリーします）。 - ページ内の空白を増やしたので左右のサイドバーを折りたためるようにして、コンテンツの情報量を確保できるようにしました。ナビゲーションバーの「«」「»」で切り替わります。これにより3カラムおよび仮想的な2カラム/1カラムを実現しています。状態も保持します。
本当は折りたたんだ場合に反対のカラムへメニューを表示する予定でしたがIE系のブラウザで正常に動作しないことと、ページを切り替えた際に状態を保持する実装が面倒なため、とりあえず隠すだけにしました。 - タイトルバナー下にナビゲーションバーを追加しました。ナビゲーションからのジャンプ時はロールオーバー状態を保持してユーザビリティを向上させています。右サイドバーの「menu」をクリックすると折りたたむこともできます（お遊びレベル）。
- 各アーカイブページにパンくずリスト（らしきもの）を追加して現在位置を把握できるようにしました。
- スタイルシート切り替えにより公開テンプレートのデザインを表示できるようにしています。右サイドバーの「Stylesheets」の "Original" で選択できます。
- トップページは XHTML1.0 valid にしました。
ただしコメントやトラックバックについてはスコープ外ですのでご容赦ください。また過去のエントリーは文法違反のコンテンツが満載なため、これからボチボチ修正していきます。 - BlogPeople/MyBlogList等のリンクは独立したページに移動しました。これは float による3カラムの場合、中央カラムを最後に表示しなければならないため、リンクリストの影響で中央カラムの表示を遅延させないための考慮です。2005.07.23 追記：中継君を使って表示しています。
リンク誤りがありましたらお知らせください。それでは今後ともどうぞよろしくお願い致します。
追記：
リニューアル中に不具合があり、コメント・トラックバック受信を一時停止していました。7/19 2:10頃回復しています。
2005.07.19 追記
不具合の対処後、文法エラーが多発していましたので修正しました。またトップページは valid XML1.0 になりましたので記述の一部を削除しました。
Movable Type 3.171-ja リリース
出遅れましたが14日、Movable Type 3.17-ja がリリースされました。
search_templateで翻訳されていなかった箇所が修正されているようです。他にもいくつか修正されています。
3.17-ja との差分ファイルは下記の通りです。3.17-ja をご利用の方で正規の手順でのアップグレードが面倒な方はファイルの差し替え＆再構築のみで大丈夫と思います。
- docs/known-issues.html
- docs/mtchanges.html
- lib/MT.pm
- lib/MT/Mail.pm
- lib/MT/Util.pm
- lib/MT/App/CMS.pm
- lib/MT/App/Search.pm
- lib/MT/L10N/ja.pm
- php/mt.php
動作を保証するものではありませんが、以前もこれでうまくできました。
3日経っているとさすがに先を越されてました（比較ツールは実行しています）。
++Open My Heart++
突然ですが、本テンプレートご利用サイト「++Open My Heart++」さんのご紹介です。mixi 「小粋なユーザコミュニティ」のイベントの一環です。
管理者のお名前は ralu さん。昨年の10月よりテンプレートを使っていただいておりまして、すっきりとした印象のデザインにバナーのイラストがさわやかな印象です。私は phptpshop や Illustrator を持っている割に全く駆使できておらず、こういう素敵なイラストを描くことができりませんので羨ましい限りです。
記事の方ですが、最初に目に止まったのは数日前の「ThinkPad R31 (ファン･アセンブリー&ヒートシンク編)」です。
ノートPCのファンから異音が聞こえて部品を注文、自力で取替えられています。「R31」は2年半程前のモデルでしょうか。交換はもちろん、分解前に交換部品を特定されていたりするので、PCにかなり明るい方のようです。修理もそうですが、この際自作PCにも一度チャレンジされてみてはいかがでしょうか。私は機会があれば一度作ってみたいと思ってます（今のところ必要性はないのですが）。
なにはともあれ無事に直って良かったです。次は何編か楽しみです。（笑）
もうひとつ取り上げさせて頂いた記事は、昨年のエントリーより「ほぼ日手帳2005注文?」。
ほぼ日手帳は他のサイトでも記事をいくつか見かけてまして、手ごろな値段と豊富な機能がなかなか好評のようです。
私は数年前までバイブルサイズの手帳（filofax）を好んで使っていたのですが、年末にリフィルを買いそびれたとか、携帯にスケジュールが入れられるようになった等の理由で、ある年からぱったり使わなくなりました。が、どうもこの作戦ではスケジュールがきちんと把握できないみたいで、やはりきちんとした手帳が必要かなと思う今日この頃です（一番の問題は書いたスケジュールを確認しないことなんですが…）。
ちなみに以前は1週間1ページのリフィルを使ってました（毎日それほど書くこともないので）。そういう訳で来年はハードウェアに戻ってみてもいいかなと感じました。ネタがないようでしたら使用感想記を書いていただけると、2006年版を注文する判断材料になるかもしれません。（笑）
地下は
言及リンクについて
話題に乗り遅れて「言及リンク」について一言。「言及リンク、つまり『受信したトラックバックの記事にトラックバック先のリンク』がないと Google の PageRank が下がる」という情報については「問題なし」ということで既に収拾がついているようですので、ここではトラックバック先の情報が元記事に記載されていないトラックバックについての考えを述べたいと思います。
現状は、明らかに記事と無関係な内容のトラックバックスパムはプラグインでフィルタリングしていますが、トラックバック先の記事に当サイトの内容が記載されていないトラックバックやアフィリエイト系のトラックバックはそのままにしています。
残している深い理由は特にありません。そのままにしていても問題ないから、という程度です。その状態を、ここに訪れる方の大半が酷く不愉快に感じ、さらにそれが一定期間継続する、あるいはセキュリティ上の問題が発生するのであれば削除することも選択肢のひとつとして考えられますが、今のところその対象は英語でやってくるトラックバックスパムのみという認識です。
トラックバックスパムは特定の文字列でフィルタリングするようにしていますが、先日本当に普通の英文トラックバックを受信しました。Typekey関連のカスタマイズでお役にたてたようです。
もし