小粋空間  -  a cheap joke and a play on words site

昨日エントリーしたリアルタイムカレンダー（JavaScript版）ですが、本日の日付がハイパーリンクになっている場合、枠表示の装飾ができないという情けない不具合がありました。この場をお借りしてお詫び申し上げます。
リストは修正致しましたので、2005/11/30 23:50 以前にリストを取得された方はお手数ですが、２項の作業を再度行ってくださいますよう、よろしくお願い致します。

なお <MTCalendar> ? </MTCalendar> の間の改行は変更されないよう、そのままお使いください。改行を変更されると Mozzila系ブラウザで装飾が行われなくなる可能性があります。

公開中のリアルタイムカレンダーの JavaScript 版です。

リアルタイムカレンダーとその経緯について改めて説明しますと、まず Movable Type のカレンダー（*1）には「本日」を判断するためのMTタグ MTCalendarIfToday があります。このタグを利用することで、本日の日付に枠をつけたり色を変更するといった装飾を行うことができます。
ところがこのタグの弱点は、エントリーの投稿やコメント等でページの再構築が発生しないとカレンダーの日付が更新されないということです。例えばエントリーを投稿せず、コメントもない状態が数日間続くと、カレンダーの本日表示は全く更新されません。

そんな中、PHPを利用したリアルタイムカレンダー（と勝手に命名しました）が kamishiro.net さんの記事（*2）で公開されており、当サイトでも若干アレンジして紹介させて頂きました。PHPを利用することにより、ブラウザを開いたり更新するだけで本日の日付が更新されるようになります。

ただしPHP化のカスタマイズ作業でつまづく方が少なくないのも事実で、これに月送り等の機能を組み合わせると結構複雑な作業になってしまうのが難点でした。またファイル名を変更することでデッドリンクになる可能性もあり、それを回避するため、さらに .htaccess というファイルでリダイレクト制御をしたりするとかなり面倒です。

しばらく「カレンダー = PHP」という先入観にとらわれてしまい、カレンダー関係のカスタマイズ記事ではPHP化を併用しておりましたが、よく考えてみると現在の日付は JavaScript でも取得できます。
ということで、JavaScript 版のリアルタイムカレンダーを作りました。まずは1ヶ月表示用を公開します。巷では Kinarie&May さんの flashカレンダーがすっかり有名になりましたが、月送り版等も追々公開する予定です。

また 3.2-ja 以降、ついにカレンダーがデフォルトテンプレートから姿を消し、カレンダーの作り方や存在自体もご存知ない方が増えてくるのも何なので、公開テンプレート用と併せてデフォルトテンプレートでも使えるデザインを用意しました。スクリーンショットはデフォルトテンプレートのサイドメニューへの設定例です。

前置きが長くなりましたが以下、カレンダーの設定方法です。

１．日別アーカイブの有効化

カレンダーは日別アーカイブを有効にしないと表示されないようにしています。カレンダーの日付からのリンクに日別アーカイブを設定しているためです（*3）。
管理画面の「設定」→「公開」→「アーカイブ・マッピング」で「アーカイブ種類」の「日付」のチェックボックスをチェックして、一番下の「変更を保存」をクリックします。

２．テンプレートの設定

管理画面の「テンプレート」から、カレンダーを表示したいテンプレート（メインページ／カテゴリー・アーカイブ／月別アーカイブ／エントリー・アーカイブ等）の編集画面を開きます。そして下記のリストを丸ごとコピーし、表示したい位置にペーストします。

<!-- カレンダー開始 -->
<MTIfArchiveTypeEnabled archive_type="Daily">
<div class="module-calendar module">
<h2 class="module-header"><$MTDate format="%B %Y"$></h2>
<div class="calendar">
<table id="calendarTable" summary="<$MTDate format="%B %Y"$>">
<tr>
<th abbr="Sunday"><span class="calendar"><span class="red">Sun</span></span></th>
<th abbr="Monday"><span class="calendar">Mon</span></th>
<th abbr="Tuesday"><span class="calendar">Tue</span></th>
<th abbr="Wednesday"><span class="calendar">Wed</span></th>
<th abbr="Thursday"><span class="calendar">Thu</span></th>
<th abbr="Friday"><span class="calendar">Fri</span></th>
<th abbr="Saturday"><span class="calendar"><span class="blue">Sat</span></span></th>
</tr>
 
<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><span class="calendar"></MTElse></MTCalendarIfBlank><MTCalendarIfEntries>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a>
</MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> 
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
</div>
</div>
</MTIfArchiveTypeEnabled>
<!-- カレンダー終了 -->
 
<script type="text/javascript">
<!--
data = new Date();
year = data.getYear();
year = (year < 2000) ? year + 1900 : year;
month = data.getMonth() + 1;
date = data.getDate();
table = document.getElementById('calendarTable');
flag = 0;
summary = table.getAttribute('summary');
if (month < 10) {
    month = '0' + month;
}
text = year + '年' + month + '月';
if (summary.indexOf(text) != -1) {
    elements = table.getElementsByTagName('span');
    for(k = 0; k < elements.length; k++) {
        if (elements[k].childNodes){
            if((elements[k].childNodes)[0].nodeName == 'A') {
                if((elements[k].childNodes)[0].innerHTML == date) {
                    elements[k].parentNode.setAttribute('class','today');
                    elements[k].parentNode.setAttribute('className','today');
                }
            } else {
                if (elements[k].innerHTML == date) {
                    elements[k].parentNode.setAttribute('class','today');
                    elements[k].parentNode.setAttribute('className','today');
                }
            }
        }
    }
}
//-->
</script>

公開テンプレートの場合は、上記リストの3-6行目（赤色部分）を

<div class="side">
<div class="calendar">
<table id="calendarTable" summary="<$MTDate format="%B %Y"$>">
<caption class="calendarhead"><$MTDate format="%B %Y"$></caption>

に変更してください。

デフォルトテンプレートで挿入位置が分からない方は、下記の位置に挿入すればページ右上に表示されます。

<div id="beta-inner" class="pkg">
 
　　　　　　ここにリストを挿入
 
  <div class="module-search module">

３．スタイルシートの設定（デフォルトテンプレートの場合のみ）

管理画面の「テンプレート」から「スタイルシート」を選択し、下記のリストをコピー＆ペーストしてください。公開テンプレートでは設定済なのでこの項はスキップしてください。

/* カレンダー */
.calendarhead {
    padding-bottom: 5px;
    text-align: center;
    color: #444444;
    font-size: 9px;
    background: none;
    letter-spacing: 0.2em;
}
.calendar {
    margin: 5px 0;
    text-align: center;
    color: #444444;
    background: none;
}
.calendar table {
    text-align: center;
    padding: 0px;
    border-collapse: collapse;
}
.calendar th {
    padding-bottom: 3px;
    font-size: 8px;
    width: 23px;
}
.calendar td {
    padding: 2px 0;
    font-size: 9px;
    line-height: 120%;
}
.today {
    display: block;
    text-align: center;
    color: #444444;
    border: 1px solid #444444;
}
.red {
    color: #e50003;
}
.blue {
    color: blue;
}

設定が全て完了したら再構築して動作を確認してみてください。Windows自宅サーバで運用されている方は、「日付と時刻」の変更に連動して本日の日付表示が変化することを確認できます。

以上です。
日付取得のコードは下記のサイトを参考にさせて頂きました。ありがとうございました。

イヌでもわかるJavaScript講座：日付や時間を取得／表示します

---

*1：3.2-ja 以降はデフォルトテンプレートから外されました。
*2：元記事は 404 File Not Found です。
*3：リンク先にエントリー・アーカイブを設定すればこの項は不要です。その代わり上記リストから

<MTIfArchiveTypeEnabled archive_type="Daily">

と

</MTIfArchiveTypeEnabled>

の2行を削除し、リスト内にある archive_type="Daily" を archive_type="Monthly" に変更します。

2005.11.30 追記
本日の日付がリンクになっている場合、日付を装飾できないという不具合がありましたので修正しました。

2005.12.04 追記
本日の日付がリンクでない場合、日付を装飾できないという不具合がありましたので修正しました。

2006.03.27 追記
当月が1?9月の場合の考慮がもれてましたのでスクリプトを修正しました。

以前記したアーカイブの設定についての 3.2-ja 版で、管理画面の「設定」→「公開」→「アーカイブ・マッピング」の内容についての説明です。

以下、それぞれの項目について説明します。

マッピングを新規作成
これは右肩にあるリンクを指しています。マッピングとは「関連付け」や「対応」を意味します。
テンプレートを新しく作成する時、テンプレートは何らかのアーカイブの種類（エントリー／日別／週別／月別／カテゴリー）と関連付ける必要があります。テンプレートにアーカイブの種類を関連付けることで、その中で使用するMTタグの意味が決まります。

例えば新しく作ったテンプレートの中で <$MTArchiveTitle$> というタグを使用している場合、「カテゴリー」というアーカイブに関連付けをすればカテゴリー名に、「エントリー」アーカイブに関連付けすればエントリーのタイトルに変換されます。

この項目（フォーム）で新たに作成したアーカイブ・マッピングは、その下にある一覧に追加されます。例えばカレンダー用テンプレート「カレンダー」を新たに作り、それを月別アーカイブとして関連付けを行えば、月別欄の「テンプレート」部分に「カレンダー」テンプレートが追加されます。

この設定項目をわざわざ隠しているのは、3.1x までこの項目は常に表示されており、誤って（追加）操作を行ってしまうことで、アーカイブ・マッピングに不要なテンプレートが追加されてしまい、それが元で再構築後のページ（のハイパーリンク）に不具合が発生したためと思われます。

アーカイブの種類
チェックボックスで使用するアーカイブを決定します。チェックされているアーカイブが再構築の対象になります。他のアーカイブページからリンクされているにもかかわらずチェックされていないと、再構築エラーになります。
アーカイブの種類を増減することはできません。

種類	説明
エントリー	エントリー別のページを作成します。デフォルトテンプレートや公開テンプレートではコメント入力フォームはこのアーカイブに属します。
日別	日別のページを作成します。カレンダーからリンクされたページとして使われます。
週別	ある週に属するエントリーを一括表示するページを作成します。
月別	ある月に属するエントリーを一括表示するページを作成します。カレンダー自体はこのアーカイブを使用します。
カテゴリー	あるカテゴリーに属するエントリーを一括表示するページを作成します。

テンプレート
アーカイブに関連付けられたテンプレートを表示します。

出力フォーマット
出力ファイルのフォーマットを決定します。3.1x 以前ではMTタグをここに設定していましたが、3.2-ja では新しいフォーマットが適用されています（MTタグも使えます）。
具体的なフォーマットについては下記のサイトで詳しく解説されています。

• Movable Type 4989：エントリｰアーカイブ出力フォーマットを考える（頭の整理おさらい編）
• Movable Type 4989：エントリｰアーカイブ出力フォーマットを考える（アーカイブファイルパス書式指定編）

優先
前述の通り、一つのアーカイブは複数のテンプレートを持つことができます。その場合、それぞれのテンプレートを使ったアーカイブファイルが生成されますが、別のページからそのアーカイブファイルへリンクを生成する場合、archive_type 属性を使うことでリンクを簡単に作ることができます。
例えばメインページから月別アーカイブリストへのリンクを作る場合、

<MTArchiveList "archive_type="Monthly">
<a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a><br />
</MTArchiveList>

と赤色の archive_type 属性を Monthly とすることで青色の部分には月別アーカイブのリンクが設定されるわけです。Monthly を Categoly に変更すればカテゴリーリストができ、Daily にすれば日別のリストができるという仕組みです。

ただし、月別アーカイブに二つ以上のテンプレートが関連付けされている?仮に日付アーカイブテンプレートと新しく作ったカレンダー用のテンプレートが存在する?場合、archive_type 属性ではどちらか一方のリンクしか作ることができません。
それを決定するのがこの「優先」です。デフォルトの状態では何も表示されていませんが、ひとつのアーカイブに複数のテンプレートを関連つけた場合、ここにラジオボタンが現れます。そしてラジオボタンで選択した方が archive_type 属性の対象となります。

ちなみに、1つのアーカイブに複数のテンプレートを関連付けた場合は、それぞれのテンプレートの出力フォーマッをは異なるものにする必要があります（同じフォーマットにした場合、後から再構築されたテンプレートのファイルで上書きされてしまいます）。

楽だった

Apache の再起動を周期的に行うことでメモリリークを回避する設定にしていますが、その2でお伝えした通り、再起動が正常に行われなかった場合、エラーが発生します。さらに Apache のプロセスが残る場合もあるようで（しかもそのプロセスが数十MBのメモリを喰ったまま）、あまりいい按配ではありません。

ということで Apache の方は現在の設定にして、Windows の再起動を行う方法を追加することにしました。Windows のタスクスケジューラで再起動できるようですが、Dice にプログラムスケジューラー機能があり、この中にシャットダウンや再起動も組み込まれていることを知りましたので、これを使って1日1回再起動を行ってみることにしました。以下 Windows XP での設定方法です。

Dice の設定は「イベント」→「追加」で開いたダイアログをスクリーンショットのように設定します。 具体的には、メイン画面のメニューバーから「イベント」→「追加」を選択すると左のダイアログが開きます。ダイアログの「イベントタイプ」で「コマンド実行」を選択すると、その下のタブが切り替わるので、その中にある「シャットダウン」を選択。さらにプルダウンで「再起動」を選択して、右側のスケジュールを設定します。ここでは「1日に1回」で 5:00 に実行するようにスケジューリングしました。「イベントを有効」もチェックしておきます。

これだけでは再起動時のログインパスワード入力で止まってしますので Windows 再起動時にパスワード入力を不要にする設定を実施します。
「スタート」→「ファイル名を指定して実行」を選択して、

control userpasswords2

を入力して実行します。ユーザーアカウント画面が開くので「ユーザーがこのコンピュータを使うには、ユーザー名とパスワードの入力が必要」のチェックを外して「OK」をクリックします。その後自動ログオンの設定画面が開くので、ログオンする時のユーザー名とパスワードを設定して「OK」をクリックします。

参考サイトは下記です。ありがとうございました。

Dream Seed：Windowsの定期再起動

ナビゲーションバーにある「Customize（カスタマイズについて）」のページに、カスタマイズ記事へのリンクを掲載しました。
これまでは、人気のあるカスタマイズの紹介と検索方法の説明に留めるという手抜きな内容でしたが、初心者等の慣れない方への配慮と、過去の記事で役に立つと思われるものをこのまま埋もらせてしまうのも何なので、恒常的に使用可能と思われるカスタマイズを抜き出して列挙してみました（下記）。

3.1x の記事が多く残っているので、サンプルリストのタグ等については 3.2 と若干相違があるかも知れません。予めご了承ください。
また掲載しているカスタマイズの適用範囲について「MT（Movable Type）「SB（Serene Bach」「その他」に分けて○×もつけてみようと思います。とりあえず欄だけは作りましたのでこれから少しずつ加えていきたいと思います。

備忘録です。PowerPoint で表を作成すると、下のように表の線がすべて矢印になってしまう場合があります。

普通の線に戻すには、オートシェイプで直線「／」を選んでとりあえず適当な場所に描画します。その後、描画した直線の上で右クリックをして、「オートシェイプの規定値に設定」を選択します。これで不具合が解消されます。

Amazon 等の商品リンクをランダムに切り替えて表示する方法です。具体的な動作は、JavaScript の乱数を利用して、ページを表示する毎に乱数に対応する id 属性で括られたHTML（=商品リンク）を表示するという方法です。当サイトのエントリー・アーカイブで試しに使っています。
以下、設定方法です。

まず表示したい商品のリンクを、テンプレートの任意の位置に並べて記述します。その際、リストのように id 属性を付与してください。ここでは amazon0、amazon1、amazon2 という名称にしています。属性名につけられた数字は必須で、0 から開始させてください。ここではリンクを3つにしていますが、いくつ作って構いません。

<div id="amazon0">
商品Aのリンク
</div>
<div id="amazon1">
商品Bのリンク
</div>
<div id="amazon2">
商品Cのリンク
</div>

次に、商品リンクの下に下記の JavaScript を追加してください。赤色部分に商品リンクの合計数を設定します。サンプルでは3つの商品を記述していますので、「3」を設定します。

<script type="text/javascript">
n = Math.floor(Math.random() * 3);
for(i = 0; i < 3; i++){
    document.getElementById('amazon'+i).style.display = 'none';
}
document.getElementById('amazon'+n).style.display = 'block';
</script>

保存・再構築すれば完成です。設定したページをリロードして、商品リンクが切り替わることを確認してください。
なお id 属性名を hogehoge0、hogehoge1… という風に設定したい場合は、リスト内の amazon という文字を

    document.getElementById('amazonhogehoge'+i).style.display = 'none';
}
document.getElementById('amazonhogehoge'+n).style.display = 'block';

と変更してください。

Serene Bach 管理画面にある、新規記事・テンプレート編集画面のテキストエリアの幅および高さを変更するカスタマイズです。

これはカスタマイズ前のテンプレート編集画面のスクリーンショットです。

こちらがカスタマイズ後のスクリーンショットです。ごらんの通りテキストエリアの縦および横幅がひろがりました。行の折り返しが減り、情報量が増えることで編集作業が楽になります。

Movable Type では、

• Movable Type の編集画面をひろげる
• Movable Type の編集画面を横にひろげる

ですでに紹介していますが、Serene Bach でもやってみました。

１．記事編集テキストエリアの高さを変更する

新規記事および記事リストのテキストエリアの高さを変更します。ここでは2種類の方法を説明します。

１．１ Entry.pm を変更する

ひとつめはライブラリの内容を変更する方法です。下記のファイルをダウンロードし、任意のエディタで開きます。念のためファイルのバックアップはとっておきましょう。

lib/sb/Admin/Entry.pm

このファイルに記述されている下記の部分を検索し（BODYROW_STD で検索するとよいでしょう）、赤色を青色の値に変更します。2.03R では54行目にあります。
リストは 15 から 30 に変更する例を示しています。

sub BODYROW_STD  (){ 1530 };

変更したら保存して、ダウンロードした時と同じディレクトリにアップロードして新規記事画面を開いてみてください。

１．２ entry.html を変更する

もうひとつの方法は管理ページの html （のテンプレート）を変更する方法です。下記のファイルをダウンロードし、任意のエディタで開きます。念のためファイルのバックアップはとっておきましょう。

lib/resource/ja/entry.html

このファイルに記述されている下記の部分を検索し（sb_entry_body_rows で検索するとよいでしょう）、赤色を青色の値に変更します。2.03R では93行目にあります。
リストは 30 に変更する例を示しています。

<textarea name="entry_body" id="entry_body" rows="{sb_entry_body_rows}30" cols="40" class="text">{sb_entry_body}</textarea>

変更したら保存して、ダウンロードした時と同じディレクトリにアップロードして新規記事画面を開いてみてください。

２．テンプレート編集画面の高さを変更する

テンプレート編集画面のテキストエリアの高さを変更します。下記のファイルをダウンロードし、任意のエディタで開きます。

lib/resource/ja/template.html

このファイルに記述されている下記の部分を検索し、赤色を青色の値に変更します。2.03R では 78?122行目にあります。
リストは 20 から 30 に変更する例を示しています。

<dt class="note"><label accesskey="m" for="template_main">ベースHTMLテンプレート<span>[M]</span></label></dt>
<dd><textarea name="template_main" id="template_main" rows="2030" cols="40" class="text">{sb_temp_main}</textarea></dd>
　　　　　　　　　　　　　　　　　　：
<dt class="note"><label accesskey="s" for="template_css">CSSテンプレート<span>[S]</span></label></dt>
<dd><textarea name="template_css" id="template_css" rows="2030" cols="40" class="text">{sb_temp_css}</textarea></dd>
　　　　　　　　　　　　　　　　　　：
<dt class="note"><label accesskey="e" for="template_entry">個別エントリー用HTMLテンプレート<span>[E]</span></label></dt>
<dd><textarea name="template_entry" id="template_entry" rows="2030" cols="40" class="text">{sb_temp_entry}</textarea></dd>

変更したら保存して、ダウンロードした時と同じディレクトリにアップロードして新規記事画面を開いてみてください。
横幅を広げる時の cols 属性も指定されていますが、スタイルシートの設定が優先されるため、ここを変更しても効果はありません（横幅の変更方法は後述します）。また個別エントリー用HTMLを使用していない場合は一番下の変更は不要です。

３．横幅をひろげる（記事・テンプレート共通）

記事編集画面およびテンプレート編集画面の横幅をひろげます。この変更を行うと管理ページすべてのヘッダの横幅が広くなりますが、テキストエリア部分のみ横幅を広げているので、他のページのテーブル等はひろがりません。

下記のファイルをダウンロードし、任意のエディタで開きます。念のためファイルのバックアップはとっておきましょう。

lib/resource/ja/styles.css

このファイルに記述されている下記の部分を検索し、赤色を青色の値に変更します。2.03R では 177行目辺りおよび 273行目にあります。
リストは横幅を 200px ひろげる例を示しています。

div.body {
/* except MacIE \*/
    clear: both;
/* end for MacIE */
    width: 700px900px;
    margin: 5px 0px 0px 0px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    background-repeat: repeat-y;
}
　　　　　　　　：
　　　　　　（中略）
　　　　　　　　：
dl.mainform dd textarea.text {
    width: 520px720px;
    margin: 0px;
    padding: 0px;
    border-style: solid;
    border-width: 1px;
}

変更したら保存して、ダウンロードした時と同じディレクトリにアップロードして新規記事画面を開いてみてください。 変更が反映されない場合は、キャッシュにデータが残っている可能性がありますので、２項で変更した

lib/resource/ja/template.html

の cols 属性（例えばベースHTMLの部分）の値を一旦変更してみてください（スタイルシートの変更が反映されたら元に戻してください）。

４．フォントサイズを変更する

フォントの関係でテンプレート編集画面等は改行が結構頻繁に入ります。先のスタイルシートに青色の

dl.mainform dd textarea.text {
    width: 520px;
    margin: 0px;
    padding: 0px;
    border-style: solid;
    border-width: 1px;
    font-size: 12px;
}

を追加すればフォントがやや小さくなり、改行が減るので見やすくなるかもしれません（画面の大きさもあるので一概には言えませんが）。

どのカスタマイズも値を色々試してみて、ご自身が使いやすいものを設定しましょう。

先日、その1で MaxRequestsPerChild でリクエスト数の上限を設定し、子プロセスを再起動するようにしましたが、下記のエラーが時々発生しています。

[crit] [Mon Nov dd hh:mm:ss 2005] file .\\server\\mpm\\winnt\\child.c, line 1060, assertion "(rv >= 0) && (rv < threads_created)" failed

ネットで同様の事象を検索したところ、下記の1件しかヒットしませんでした。

Another Apache error

対処は「バージョンを 2.1.8 にアップグレードする」と書かれています。Apache HTTP Server は現在 2.1.9-beta がリリースされていますが、Windows 版は 2.0.55 が最新のため、残念ながらこのエラーは回避できないようです。

ページ分割シリーズの締めくくりは「検索ページのページ分割」です。
このカスタマイズを行うことで通常の検索エンジンのように一定件数毎にページを分割することができます。

この技は自分で発見したのではなく、かなり以前に caramell*vnilla さんと Document_Not_Bound さんのコメントのやりとりでみつけましたので、ご紹介まで（カスタマイズ方法は掲載されていないようです）。

以下、カスタマイズ方法です。

１．プラグインファイルのダウンロード

MT Extensions より MTPaginate をダウンロード（ページ上の方にある「Download」をクリック）。ファイルは任意のフォルダ（デスクトップ等）に保存します。古いバージョン（1.24）では2ページ目以降の表示ができなかったため、既にお使いの方も最新版をダウンロードされることをお勧めします。1.26では正常に動作しました。

２．プラグインファイルのアップロード

ダウンロードしたファイルを解凍し、その中の MTPaginate.pl を plugins ディレクトリにアップロードします。

注：この情報はバージョン1.28のものです。
ダウンロードしたファイルを解凍し、その中の MTPaginate ディレクトリを下記のディレクトリ構成になるように plugins ディレクトリに丸ごとアップロードします。

plugins/MTPaginate/lib/MTPaginate.pm
plugins/MTPaginate/MTPaginate.pl

３．検索用テンプレートの修正

検索用テンプレートは管理画面から編集できないため、ファイルを直接編集します。なお元のファイルはバックアップ（同じ内容のものを別のファイル名で保存）しておきましょう。

search_templates/default.tmpl

をダウンロード、任意のエディタで開き、検索結果テンプレートの MTSearchResults タグの前後に、下記のリストのように青色部分のタグを追加します。

<MTPaginate mode="cgi">
    <MTPaginateIfMultiplePages>
    <div class="paginate">
    <MTPaginateIfPreviousPage_>
    <a href="<$MTPaginatePreviousPageLink$>" title="previous page link">&#65308;</a>
    </MTPaginateIfPreviousPage_>
    <$MTPaginateNavigator format_all="All Pages" place_all="after"$>
    <MTPaginateIfNextPage_>
    <a href="<$MTPaginateNextPageLink$>" title="next page link">&#65310;</a>
    </MTPaginateIfNextPage_>
    </div>
    </MTPaginateIfMultiplePages>
    <MTPaginateContent max_sections="10">
 
    <MTSearchResults>
 
    <MTBlogResultHeader>
    <h2><MT_TRANS phrase="Search Results from"> <$MTBlogName$></h2>
    </MTBlogResultHeader>
 
    <h3><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>
    <p><$MTEntryExcerpt$> <$MTEntryEditLink$></p>
    <p class="posted"><MT_TRANS phrase="Posted in"> <$MTBlogName$> <MT_TRANS phrase="on"> <$MTEntryDate$></p>
 
    <$MTPaginateSectionBreak$>
 
    </MTSearchResults>
 
    </MTPaginateContent>
 
</MTPaginate>

検索用テンプレートはCGIとして動作するため、上記リスト1行目の

mode="cgi"

は必須です。この設定を行っていない状態で検索を実行すると、検索結果画面で

というメッセージが表示されます。

赤色で示している div 要素はページ分割機能とは直接関係ありませんが、ページリンク用のスタイルを指定する場合を考慮して設定しています。必要に応じて下記のようなCSSをスタイルシート（styles-site.css）に追加してください。

.paginate {
    text-align: center;
    font-size: 9px;
}

編集が完了したら元のディレクトリにアップロードします。これで各ページから検索を実行してみてください。

４．日本語を利用する場合

このテンプレートに日本語を直接記述すると正常に動作しなくなる可能性があります。
日本語を表示したい場合、例えばページリンクの title 属性で日本語を表示したい場合は

<a href="<$MTPaginatePreviousPageLink$>" title="previous page link">&#65308;</a>
　　　　　　　　　　　　　　　　　：
<a href="<$MTPaginateNextPageLink$>" title="next page link">&#65310;</a>

の赤色部分を青色の

<a href="<$MTPaginatePreviousPageLink$>" title="<MT_TRANS phrase="Previous Page Link">">&#65308;</a>
　　　　　　　　　　　　　　　　　：
<a href="<$MTPaginateNextPageLink$>" title="<MT_TRANS phrase="Next Page Link">">&#65310;</a>

に変更します。
そして

lib/MT/L10N/ja.pm

を任意のエディタで開いて下記を追加します。

'Next Page Link' => '次のページへ',
'Previous Page Link' => '前のページへ',

「Previous Page Link」「Next Page Link」という文字列やそれに対応する日本語名ですが、MT_TRANS タグの phrase 属性の内容と
ja.pm の '' で括った英語が一致すればOKですので、お好きな内容を設定してください。
ただし ja.pm 内ですでに使われている phrase 属性と重複しないように気をつけてください。

また上記2行を挿入する位置はどこでも構いませんが、全体を括っている

%Lexicon = (
　　　　：
);

の間に挿入してください。他と同じような設定があるので、それに並べて挿入すれば大丈夫でしょう。最初から設定されているものは行頭にタブがありますが、なくても問題ありません。

５．注意事項

当サイトで動作確認したところ、ページリンクの表示で若干不具合（"All Pages" 横のセパレータ位置が妙）があるようです。
またページ遷移の度にCGIが起動されるため、サーバに若干負荷がかかりますのでご注意ください。

2007.05.04 追記
プラグインのバージョンアップに伴い、アップロード方法を修正しました。また 3.3 よりテンプレート化されたので、本文の一部を修正しました。

ストーンヘンジ

Serene Bach 用のテンプレートを作りました。サンプルのスクリーンショットは3カラムですが、2カラム・1カラムも用意しております。カラムレイアウトの設定方法につきましては本エントリーを参照ください。

１．動作確認環境

動作確認は下記の環境で行っています。

• OS：Windows2000/XP
• ブラウザ：IE6.0/Firefox1.0.7/Netscape7.1/Netscape8.0.4/Opera8.5
• Serene Bach：2.00R?2.09R

Serene Bach は独自タグを除去すれば旧バージョンでも使用可能のようですが、情報が整理できていませんのでとりあえず 2.03R 用としています。

２．利用規定

ご利用の前にテンプレートのページを必ずご覧くださいますよう、よろしくお願い致します。

３．カラムレイアウト変更方法

このテンプレートではカラムレイアウトのバリエーションとして、

• 3カラム（カラム幅固定）
• 3カラムリキッドレイアウト（中央カラム幅可変）
• 2カラム（右サイドバー：カラム幅固定）
• 2カラム（左サイドバー：カラム幅固定）
• 2カラムリキッドレイアウト（右サイドバー：左カラム幅可変）
• 2カラムリキッドレイアウト（左サイドバー：右カラム幅可変）
• 1カラム（カラム幅固定）
• 1カラムリキッドレイアウト（カラム幅可変）

の計8種類を用意しています（それぞれのサンプルはちょっと下にある画像をご覧ください）。

カラムレイアウトは、HTMLテンプレートの body 要素の class 属性を書き換えることで変更することができます（カラム数を変更する場合はHTMLテンプレートの修正が必要ですがこれについては後述します）。例えば、3カラムレイアウトから2カラム・リキッドレイアウト（右サイドバー）に変更したい場合は、HTMLテンプレートの

<body class="layout-three-column">

の赤色部分を

<body class="layout-two-column-liquid-right">

と、青色の内容に変更します。このテクニックは Designing with Web Standards でも紹介されています。

個別エントリー用HTMLありのテンプレートをお使いの場合、ベースHTMLと個別エントリー用HTMLで異なるレイアウトを設定することができます。例えばベースHTMLで3カラム、個別エントリー用HTMLで1カラムという設定も可能です。

以下にそれぞれのレイアウトに対する class 属性値を示します。なおサンプル画像は Movable Type のものを流用しておりますので予めご了承ください。

<body class="layout-three-column">

3カラム

<body class="layout-three-column-liquid">

3カラム・リキッドレイアウト

<body class="layout-two-column-left">

2カラム（左サイドバー）

<body class="layout-two-column-liquid-left">

2カラム・リキッドレイアウト（左サイドバー）

<body class="layout-two-column-right">

2カラム（右サイドバー）

<body class="layout-two-column-liquid-right">

2カラム・リキッドレイアウト（右サイドバー）

<body class="layout-one-column">

1カラム

<body class="layout-one-column-liquid">

1カラム・リキッドレイアウト注：左右のマージンをなくすことも可能です。

公開テンプレートは一番上の3カラムレイアウトで配布しております。

次にカラム数を変更する場合の修正方法です。例えば3カラムから2カラム（左サイドバー）に変更する場合は、右カラムを表示する

<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
　　　　　　　　　：
　（ここに書かれているものをコピー）
　　　　　　　　　：
</div><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->

の間に書かれている必要なメニュー（検索・カテゴリー・バナー等）をコピーし、左カラム

<!-- 左カラム開始 -->
<div id="links-left-box">
<div id="links-left">
　　　　　　　　：
　　　　（ここにペースト）
　　　　　　　　：
</div><!-- /links-left -->
</div><!-- /links-left-box -->
<!-- 左カラム終了 -->

にペーストしてください。そのあと

<!-- 右カラム開始 -->
　　　　　　　：
<!-- 右カラム終了 -->

を丸ごと削除します。1カラムに変更される場合は左右両方のカラムをごっそり削除してください。

４．1カラムレイアウトについて

1カラムレイアウトはポータル的な要素を排除して、個人の日記サイトとして気軽に書けるデザインにしています（言い換えると単にサイドバーをとっぱらっただけです）。個別エントリーとコメント・トラックバックは機能しますので、サイトを初めて訪れる方でも戸惑わずに閲覧することが可能です。

1カラムでご利用になる際は前項での左右カラムの削除および、テンプレート内に設定されている

<!-- for one column
<!-- BEGIN archives -->
<div id="archive">{archives_list}</div>
<!-- END archives -->
 
<div id="footer-one">
Powered by <a href="{script_webpage}"><strong>{script_name} {script_version}</strong></a><br />
<a href="http://www.koikikukan.com/"><img src="{site_parts}koikikukan.gif" alt="小粋空間" width="128" height="22" /></a>
</div>
/for one column -->

の赤色部分を削除してください（これで月別アーカイブリストとクレジットバナーがページの一番下に表示されます）。
またアーカイブリストはプルダウンメニューで表示することを想定していますので、上記の設定の後、

JUGEMカスタマイズ講座：リストのプルダウンメニュー化

を実施して、スクリプトをページの最後の方に設定してください。なお　ListSelector の起動パラメータは

ListSelector('archive',1,'月別アーカイブ');

としてください。

５．記事の日付表示について

Serene Bach では投稿日の日付が記事単位に付与されますが、本テンプレートでは JavaScript を用いてページの前方に同一日付の記事がある場合、日付を重複して表示しないようにしています。なおデフォルトの環境設定でのみ動作確認していますので不具合ございましたらご連絡ください。
この機能を無効にする場合はベースHTMLテンプレート下にある

<script type="text/javascript">
<!--
var elements = document.getElementsByTagName('h2');
var work;
var work_old = '';
for (i=0; i<elements.length; i++) {
    work = elements[i].innerHTML;
    if(work == work_old){
        elements[i].style.display = 'none';
    }
    work_old = work;
}
//-->
</script>

を削除してください。

６．XHTML1.0 Transitional valid

当サイトではWeb標準を推奨しています。テンプレートを設定した状態で W3C Markup Validation Service での XHTML1.0 Transitional valid および、Another HTML-lint gateway で高得点になるようにしています。

７．その他

基本的な動作は確認したつもりですが、Serene Bach の確認を全て理解できていない状態ですので、不具合等ございましたらご連絡ください。

８．ダウンロード

下のリンクからテンプレートをダウンロードできますのでご利用ください。「個別エントリー用HTMLあり」はテンプレートの個別エントリー用HTMLテンプレートにも反映されます。

• ZIP形式
• ZIP形式：個別エントリー用HTMLあり
• LZH形式
• LZH形式：個別エントリー用HTMLあり

ダウンロードしたファイルを解凍し、中にある txt 形式のファイルを任意のディレクトリにアップロードしてください。そのあと管理画面の「テンプレート」→「インポート」のページで指定して「読込み」をクリックすればインポートされます。
「個別エントリー用HTMLあり」をダウンロードすると、個別エントリーページをインデックスや他のアーカイブページと異なるカラムレイアウトにすることが可能です。

2005.11.18 追記
個別エントリーのトラックバック表示に不具合があったためテンプレートを修正しました。

2005.12.01 追記
動作確認ができましたのでタイトルおよび対応バージョンを変更しました。

2006.02.26 追記
スタイルシートの全称セレクタから font-weight プロパティを削除し、見出し用のタイプセレクタを追加しました。またエントリー日付・コメントタイトル・トラックバックタイトルの配色用セレクタをまとめました。

2007.01.02 追記
動作可能バージョンを 2.09R までに変更しました。

話題になってすでに一週間ほど経ちますがご紹介まで。

tech.nitoyon.com：Google Maps でレーシング：Google Mapsで鈴鹿サーキット試走

操作はスペースキーが前進、離すと減速、矢印の左右キーがハンドルです。操作すると真ん中にある勝手口のドア（失言）のような車がいい感じで動き出します。また走っているように見える仕組みの解説の通り、サーバ負荷も考慮されており、車が回転する24枚の画像を縦に並べて1枚の画像にし、JavaScript の style.top プロパティで表示を制御しています。

電車でGO！（やったことありませんが）のように、リアルな空間を手軽に擬似体験できる醍醐味が愉快です。

先日より続いているアクセス不具合についてチューニング（というほどのものではありませんが）を実施しました。何回か報告する機会がありそうなのでとりあえず「その1」に。

不具合に関連する事象で把握できているのは次の3点です。

• Apache プロセスのメモリが増加し続け（メモリリーク）、1日で数百MBに膨れ上がる
• 何らかの契機にレスポンスが突然遅くなる（お昼休み等、アクセスが集中すると×？）
• Apache を再起動すればアクセスは正常になる

チューニング関連の記事を調べた結果、下記の2つのディレクティブについて httpd.conf に設定することにしました。

MaxRequestsPerChild

これは個々の子サーバが稼働中に扱うリクエスト数の上限で、このディレクティブに設定された値を超えると子プロセスは終了（再起動）します。デフォルトは 0（=子プロセスを終了しない）ですが、現在は 5000 に設定しています。記事によっては2桁?3桁で書かれているものもあり、どの程度の値にすればよいか悩みましたが、やや大きめの値にしています。

この設定で1日稼動させてみたところ、レスポンスが遅くなるという事象は収まったようです。ただログを確認するとプロセス再起動の周期がやや短いようなので、値の調節はもう少し必要かもしれません。

参考記事は下記です。

• MaxRequestsPerChild ディレクティブ
• PHP-users：Apacheのメモリー使用量について
• @IT：Apacheパフォーマンス・チューニングの実践
• CGI Laboratory：WindowsでApacheを使うには？

Win32DisableAcceptEx

もうひとつのディレクティブ Win32DisableAcceptEx は上記の検索をしている時にたまたまみつけたもので、Windows の winsock が原因で AcceptEx のエラー

指定されたネットワーク名は利用できません。  : winnt_accept: Asynchronous AcceptEx failed.
セマフォがタイムアウトしました。  : winnt_accept: Asynchronous AcceptEx failed.

が頻繁に発生するようです。VirtualHost 別のエラーログばかり見ていたので気がつかなかったのですが全体のエラーログに上記のエラーがかなり大量に頻繁に発生していました。

アクセス不具合との関連がないにしてもこれは回避しておきたいので、MPM_WinNT モジュール部分に Win32DisableAcceptEx を追加。これで上記のメッセージは止まりました。

参考記事は下記です。

• Win32DisableAcceptEx ディレクティブ
• Firewall&Forest：ホームサーバの構成

まとめ

現在の httpd.conf の（該当箇所の）設定は次のようになっています。

<IfModule mpm_winnt.c>
ThreadsPerChild 250
MaxRequestsPerChild 05000
Win32DisableAcceptEx
</IfModule>

MaxRequestsPerChild はデフォルト値 0 を書き換え、Win32DisableAcceptEx は1行追加。ThreadsPerChild はデフォルトで設定された値をそのまま利用しています。

また上記と併せてPHPやCGIエラー等もエラーログを参照しながら除去しました。

MTPaginate プラグインを利用したページ分割はかなり普及していますが、このプラグインはひとつのエントリーをさらにページ分割することも可能です。

ということで、エントリーアーカイブ（個別エントリーアーカイブ）のページ分割をご紹介します。エントリーが長文になる場合の分割はもちろん、例えばアフィリエイトで Movable Type を利用している場合、カテゴリーアーカイブに複数の商品を紹介してエントリーアーカイブではひとつの商品を表示するというのが一般的と思われますが、エントリーアーカイブで複数の商品をすっきりと表示することも可能になります。

まず画像を使って完成イメージをご説明します。 左のサンプルはデフォルトテンプレートを使ったページ分割イメージです。上がタイトル、その下にカスタマイズで追加された分割ページのリンクがあり、その下が本文です。サンプルでは計3ページ（3段落）に分割されており、1ページ目の「段落1」という本文を表示している状態です。

「2」という2ページ目のリンクをクリックすると、分割された「段落2」という本文に切り替わります。

「All Pages」をクリックすると全ての段落が表示されます。この状態が通常の1エントリー表示と同じです。

このエントリーも実験台としてページ分割を施しています。ページリンクはエントリーの上下に設置しています。エントリー先頭がナビゲーションだらけになってるとかいうツッコミはおいといて、エントリーのページ分割を体感頂ければ幸いです。

次にカスタマイズ方法です。

１．プラグインファイルのダウンロード

MT Extensions より MTPaginate をダウンロード（ページ上の方にある「Download」をクリック）。ファイルは任意のフォルダ（デスクトップ等）に保存します。

２．プラグインファイルのアップロード

ダウンロードしたファイルを解凍し、その中の MTPaginate.pl を plugins ディレクトリにアップロードします。

注：この情報はバージョン1.28のものです。
ダウンロードしたファイルを解凍し、その中の MTPaginate ディレクトリを下記のディレクトリ構成になるように plugins ディレクトリ