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

ファイルの文字コード変更方法をご紹介します。
その前に「文字コード」について簡単に説明したいと思います。認識誤り等ございましたらご指摘ください。

１．文字コードとは

誤解を恐れずに申し上げると、コンピュータは 0 と 1 の組み合わせ（2進数）で、プログラムや音声・画像等、全てのことを認識しなければなりません。文字も同じで、例えば「A」という半角文字は「0100 0001」という2進数（16進数表現では 0x41）をコンピュータが認識し、ディスプレイ上に「A」と表示する訳です。

これらのテキスト文字には必ず「文字コード」という規格・仕様が介在します。日本語の「あ」を例にすると、画面上に表示される文字が同じ「あ」に見えても、規格によっては「あ」の元データである 0 と 1 の組み合わせが異なるため、コンピュータはどの規格に基づいて表示（あるいは認識）するかを必要に応じて事前に知る必要があります。

皆様がよくご存知の文字コードとして、

• EUC-JP
• Shift_JIS
• UTF-8

があります。

EUC は「Extended Unix Code」の略で、文字通り UNIX システムが発祥の、複数バイト文字を扱う文字コードです。「JP」は日本国を表わす国・地域コードのようです。他に「EUC-JIS-2004」「EUC-KR」「EUC-CN」等があります。
Shift_JIS は Microsoft 等、数社によって策定された文字コード。漢字の表示が可能なパソコン上での符号化方式が JIS 規格（JIS X 0201）と異なっている状況の中、エスケープシーケンスなしで「英数字・半角カナ」と「漢字」を混在可能にするため、漢字の符号点を複雑に移動（シフト）させ、符号空間の隙間に押し込んだことからこのような名称になっているようです。
UTF は「Unicode Transformation Format」の略で、コンピュータ上で多言語の文字を一つの文字コードで取り扱うために1980年代に提唱された文字コードで、UTF-8 はその中の符号化方式のひとつ。他の符号化方式として「UTF-7」「UTF-16」等があります。

文字コードの指定例として、HTML 文書の最初の方にある

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

に見覚えがあるのではないでしょうか。

これは「この HTML 文書を UTF-8 で表示してください」という指定です。ブラウザはこの情報を元に文字コードを決定します（XML宣言による指定もありますがここでは省略します）。

２．文字コード変更方法

秀丸等のテキストエディタで変更する手もありますが、ここでは IE6（IE7 も可）を利用して変更する方法をご紹介します。Firefox や Opera では変更できません（間違ってたらすいません）。

おおざっぱな手順は次の通りです。

1. 文字コードを変更したいファイルを IE で表示させる
2. 文字化けしている場合、文字コードを変更して正常に表示させる
3. 表示されたファイルを保存する。この時に変更したい文字コードを指定する

以下、具体的な操作方法です。

1. の表示させる方法は、読み込ませたいファイルをブラウザにドラッグするのが簡単です。
2. の文字コードの変更方法は、ツールバーの[表示]-[エンコード]から選択してください。正常に表示されていればこの項目はスキップしてください。
3. はツールバーの[ファイル]-[名前をつけて保存]を選択します。ファイルを保存するダイアログの一番下に[エンコード]という項目がありますので、ここで希望の文字コードを選択してください。スクリーンショットは Shift_JIS から UTF-8 に変更する例です。

その他の注意点としては、拡張子が .js（JavaScript）等の場合、ファイルを保存するダイアログが表示されてしまうので、予め拡張子を .txt にしておくと良いでしょう。そして文字コードを変更・保存した後で、保存したファイルの拡張子を元に戻します。.html 等も .txt に変更して読み込ませれば生の HTML が参照できます。

３．文字化けを防ぐノウハウ

これまで頂いたご質問で、ブログのカスタマイズで文字化けが発生する原因としてよくみかけたものを紹介しておきます。

• JavaScript 外部ファイルを script 要素で取得する場合、charset 属性の文字コードが外部ファイルの文字コードと異なっていると正常に動作しない可能性があります。
• JavaScript 外部ファイルの文字コードがブログの文字コードと異なっている場合、文字コードを一致させる手もありますが、script 要素の charset 属性に外部ファイルの文字コードを指定すれば正常に動作します。
• 文字コードを指定する meta 要素の前に日本語等が含まれる要素（title 属性等）を記述すると、ページが文字化けする可能性があります。

４．関連リンク

• 文字コードを変換する
• 日本語と文字コード
• テキスト・ファイルの行末コードを変更する
• Unicode

月別アーカイブリストの年別の折りたたみで、年表示に折りたたみ用のリンクを与えるカスタマイズです。

これまで紹介してきた「月別アーカイブリストの年別折りたたみ」では、年表示の横に折りたたみマークを表示していましたが、「年表示にリンクを設定できないでしょうか」というご質問を頂きました。たしかに月別アーカイブでは年表示部分に他のアーカイブにジャンプするリンクがある訳ではないのでごもっとです。
ということで本エントリーにてカスタマイズ方法をご紹介致します。

スクリーンショットは完成例です。ご覧の通り、年表示部分に折りたたみのリンクが表示されます。

１．「月別アーカイブリストの年別の折りたたみ」を行っていない場合

まず、月別アーカイブリストの折りたたみを設定していない方は、「JavaScript 不要な月別アーカイブの年別ツリー化＋折りたたみ」を参照して、カスタマイズを行ってください。
設定後、２項をスキップして３項の設定を行ってください

２．「月別アーカイブリストの年別の折りたたみ」をすでに行っている場合

下記のリンクより menufolder.js（6.03 以上） をダウンロードして、３項に進んでください。

download

３．年表示に折りたたみのリンクを与える

ダウンロードした menufolder.js を任意のエディタで開き、アーカイブリストマーク表示の設定項目にある、下記の赤色部分

　　　　　：
// アーカイブリスト用折りたたみマーク使用
// 折りたたみマークを使用しない場合は年表示にリンクを設定
// 使用する：true
// 使用しない：false
var displayArchivesMark = true;
　　　　　：

を「false」に変更してください。

　　　　　：
// アーカイブリスト用折りたたみマーク使用
// 折りたたみマークを使用しない場合は年表示にリンクを設定
// 使用する：true
// 使用しない：false
var displayArchivesMark = false;
　　　　　：

折りたたみマークを表示したい場合は「true」のままで OK です。

あとは修正した menufolder.js をサーバにアップロードします。これで年表示にリンクが付与されます。

PHP のパフォーマンスを調べる中で「モジュール版」と「CGI版」という言葉をみつけまして、本エントリーではそれぞれの内容、およびパフォーマンス・セキュリティ等の観点で両者を比較してみました。
併せて、PHP プログラムである WordPress を適用した場合について示しています。

Web サーバは Apache を対象にしています。内容について認識誤り等ありましたらご指摘ください。

１．用語

まず最初に「CGI版」と「モジュール版」の意味について記します。

[CGI 版]
「CGI」は「Common Gateway Interface」の略で、サーバが受信したブラウザの要求に応じてプログラムを起動するための仕組みを指します。PHP の場合、ブラウザに

http://～/xxx.php

を URL として指定した場合、Webサーバは xxx.php を実行ファイルと認識してプログラムを起動し、その実行結果を返却します。これを「CGI 版」と言うようです。

[モジュール版]
「モジュール」とは、Apache の機能を拡張するための「部品」（と考えるのが分かりやすそうです）。PHP もこのモジュールを利用することで Apache の一機能として PHP を動作させることができます。
つまり「モジュール版」とは、この Apache の拡張モジュールを利用していることを指すようです。

下記のサイトの「補足2 モジュールとは」にモジュールのイメージが掲載されています。

• Apacheの基本インストール

PHP5 + Apache（Windows）の httpd.conf の設定に着目した場合、下記の違いがあります。

CGI 版として利用する場合の設定

ScriptAlias /php/ "c:/php/"
AddType application/x-httpd-php .php
Action application/x-httpd-php "/php/php-cgi.exe"

モジュール版として利用する場合の設定

LoadModule php5_module "c:/php/php5apache2.dll"
AddType application/x-httpd-php .php
PHPIniDir "C:/php"

• 参考：Apache 2.0.x （Microsoft Windows 用）

PHP の MIME タイプはいずれも AddType ディレクティブで、.php という拡張子を指定されたコンテントタイプ application/x-httpd-php にマップしていますが、CGI 版は Action ディレクティブで CGI を実行するように設定、モジュール版は LoadModule ディレクティブにより、ライブラリ php5apache2.dll を Apache のが利用可能なモジュール php5_module として追加しています。

２．パフォーマンスによる比較

PHP 公式サイトのトップページに次のような記述があります。

日本 PHP ユーザ会：PHPについて

通常のCGIとして使用できますが、PHPモジュールをApacheサーバーに組み込むことにより、 Perl/CGIと比較して処理速度の高速化、サーバー負荷の低減が可能です。

明らかに「CGI 版」より「モジュール版」のパフォーマンスが上回っているようです。

１項の説明で「CGI 版」「モジュール版」いずれも PHP プログラムを起動することには違いないのですが、モジュール版 のパフォーマンスが良いのは下記の違いによるようです。

• CGI 版：PHPプログラムが呼び出されるたびにプロセスが1つ立ち上がる
• モジュール版：Apacheのプロセスの中で実行されるため、余分なプロセスを立ち上げる必要がない

プロセスの説明は省略しますが、下記の記事の「仕組みはどうなっているのか」に分かりやすい説明があります。

• ＠IT：PHP4で作るWeb-DBシステム：第1回 (2/2)

ということで、パフォーマンス面では「モジュール版」が断然有利で、WordPress でもモジュール版の利用がお勧めです。

３．セキュリティによる比較

共有レンタルサーバの PHP モジュール版には「セーフモード」と呼ばれる設定が施されています。
「セーフモード」とは、共有サーバでのセキュリティの問題を解決するための仕組みで、例えば、同一サーバの他のユーザが自ユーザのファイルを参照できないようにすることができます。

• PHP マニュアル：第 42 章セーフモード

この制限により、例えば WordPress では、ブラウザの管理画面でファイル操作を行う場合等に影響があるようです。これはブラウザから実行した時のユーザ ID がサーバ上のユーザ ID と異なるためで、この操作がセーフモードにひっかかってしまうようです。

CGI 版の場合、「suEXEC」という機能を利用します。これは Apache で Web サーバを実行しているユーザ ID とは 異なるユーザ ID（それぞれのコンテンツユーザーの権限）で CGI プログラムや SSI プログラムを実行する機能です。これによりセキュリティを確保しているようです。

• Apache HTTP サーバ バージョン 2.0：suEXEC サポート
• BitArts：Apache 2.0でsuEXECを使う

Xrea（エクスリア） は PHP モジュール版が利用できるレンタルサーバですが、セーフモードが設定されています。上記の影響を回避するには特定の機能を CGI 版として利用します。

不具合を回避する方法の詳細等につきましては下記のリンクを参照ください。

• Numb.：XREA で WordPress のファイルアップロード機能を CGI として動かす
• PHP小屋：PHPスクリプト設置者のための豆知識
• hiromasa.zone :o)：セーフモードの束縛
• Wordpress ME 2.0 - Docs：キャッシュ機能の利用（セーフモードでキャッシュ機能を利用する場合の設定）

４．レンタルサーバで CGI 版が利用される理由

上記までの比較では、ユーザの立場としては「モジュール版」の利用が有利ですが、さくらインターネット等のレンタルサーバで CGI 版が提供されているのは、ひとつには下記の理由があるようです。

DreamHostのカタチ　?良い鯖．com?：PHP について

Apache module版だと、Dreamhost管理人がユーザごとの PHP 負荷を計測するのが不可能なのが原因

つまり、共有レンタルサーバ運営サイドとしては、メンテナンス面でCGI 版が勝っているのではないかと考えます。この辺りは詳細な調査ができておりませんので私の推測が間違っているかもしれませんし、逆に正確な情報を頂ければという思惑も含んでいます。

５．まとめ

項目は色々あると思いますが、とりあえず上記までの内容とその他思いついた項目でまとめてみました。

項目	CGI 版	モジュール版（Apache モジュール）
実行プロセス	PHP のプロセス	Apache のプロセス
レスポンス	遅い	速い
サーバ負荷	多い	少ない
セキュリティ	suExec	セーフモード
ファイルのパーミッション	775/777等	604等
メンテナンス		負荷計測が不可能？
その他		システム系などの一部の関数が使用不可

６．CGI 版からモジュール版に乗り換えた例

最近では、WordPress ユーザの caramel*vanilla さんが、さくらのレンタルサーバ（CGI 版）から XREA+（モジュール版）に乗り換えられました。多発していた 503 エラーが解消され、アクセスも快適になっています。

• caramel*vanilla：XREA+に乗り換えました＋アンケート

７．その他

未整理の関連リンクです。

• XREA SUPPORT BOARD：public_html内のPHPのモジュール化
• PHP5.0/2.Apache2の設定
• MIME Media Types
• Apache 2.0 モジュール一覧
• PHPのインストール(Apache2.0 Linux編)
• PHP マニュアル
• PHP マニュアル：Apache 2.0 (Unixシステム用)

sb（Serene Bach の前身）の記事およびコメント欄に絵文字を入力できるようにするカスタマイズです。

これは現在公開中の「記事（エントリー）に絵文字を使う for Serene Bach」を sb 用に書き直したものです。

理由は、stroll::blog さんの「sb絵文字入力支援スクリプト」で提供されているスクリプト（ファイルではなく URL 配布）が 404 Not Found になってしまったようで、ふと元記事のコメント欄を拝見したところ、sb で困っている方も結構いらっしゃるかもしれないと思ったためです。

このカスタマイズは sb110R ? sb119R が対応可能と思います。設定方法は当サイトで公開しているテンプレートを例にしていますが、一部修正すれば他のテンプレートでも利用可能です。

１．記事投稿画面の修正

sb をインストールしている配下にある、

lib/lang/ja/admin.html

をダウンロードして、任意のエディタで開き、１．１?１．３項の修正を行ないます。
修正する自信のない方は、下記のリンクから修正済の admin.zip（または admin.lzh） をダウンロードして解凍し、２項に進んでください。

admin.zip / admin.lzh

このファイルを利用するとページ上部にある sb のリンクが新しい URL（http://serenebach.net/）になるというおまけつきです。

１．１ script 要素の追加

ファイルの 10 行目に青色の script 要素を追加します。

　　　　　　　　　　　：
<script type="text/javascript" charset="EUC-JP" src="{sb_site_js}"></script>
<script type="text/javascript" src="emoji.js" charset="utf-8"></script>
<title>{sb_site_title}</title>
　　　　　　　　　　　：

１．２ 「本文」への絵文字一覧表示スクリプトの追加

「本文」のテキストエリア上部へ絵文字一覧を表示するタグを追加します。

　　　　　　　　　　　：
<!-- BEGIN sb_entry_toolhig_body -->
<a href="#" onclick="return changeHeight('entry_body',-1);"><img src="{sb_site_parts}_parts/up.gif" width="30" height="20" alt="縮小" title="縮小" /></a>
<a href="#" onclick="return changeHeight('entry_body',1);"><img src="{sb_site_parts}_parts/down.gif" width="30" height="20" alt="拡大" title="拡大" /></a>
<!-- END sb_entry_toolhig_body -->
</div>
<dl><dt style="display:inline;">絵文字</dt><dd style="margin-left: 5.5em;">
<script type="text/javascript">
writeCustmizeEmojiTagList('document.mainform.entry_body');
</script>
</dd></dl>
<textarea name="entry_body" id="entry_body" rows="{sb_entry_body_rows}" cols="40" class="text" tabindex="4">{sb_entry_body}</textarea>
<div class="entry_tool">
<label>イメージ挿入：</label>
<select onchange="addImage('entry_body',this.value);">
<option value="">イメージを選択します</option>
{sb_entry_image}
</select>
<input type="button" value="新規…" onclick="showForm('edit_addfile')" />
</div>
　　　　　　　　　　　：

１．３ 「続き」への絵文字一覧表示スクリプトの追加

「続き」部分も絵文字を使いたい場合は、「続き」のテキストエリア上部へ絵文字一覧を表示するタグを追加します。

　　　　　　　　　　　：
<!-- BEGIN sb_entry_toolhig_more -->
<a href="#" onclick="return changeHeight('entry_more',-1);"><img src="{sb_site_parts}_parts/up.gif" width="30" height="20" alt="縮小" title="縮小" /></a>
<a href="#" onclick="return changeHeight('entry_more',1);"><img src="{sb_site_parts}_parts/down.gif" width="30" height="20" alt="拡大" title="拡大" /></a>
<!-- END sb_entry_toolhig_more -->
</div>
<dl><dt style="display:inline;">絵文字</dt><dd style="margin-left: 8.1em;">
<script type="text/javascript">
writeCustmizeEmojiTagList('document.mainform.entry_more');
</script>
</dd></dl>
<textarea name="entry_more" id="entry_more" rows="15" cols="40" class="text" tabindex="5">{sb_entry_more}</textarea>
<div class="entry_tool">
<label>イメージ挿入：</label>
<select onchange="addImage('entry_more',this.value);">
<option value="">イメージを選択します</option>
{sb_entry_image}
</select>
<input type="button" value="新規…" onclick="showForm('edit_addfile')" />
</div>
　　　　　　　　　　　：

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

修正した admin.html を元のディレクトリにアップロードします。

３．スクリプトのダウンロード

下記のリンクより emoji.js をダウンロードしてください。

emoji.js

４．スクリプトに絵文字URLの追加

emoji.js を任意のエディタで開き、ご自身のお好きな絵文字を下記の青色のように挿入してください。

// コメントにカスタマイズ絵文字入力機能：画像設定
function getCommentEmojiList() {
    var list = new Array();
    // 画像名、画像URLの設定
    list[list.length] = new Array('00a', 'http://yourhost/images/pp_00a.gif');
    list[list.length] = new Array('01a', 'http://yourhost/images/pp_01a.gif');
    list[list.length] = new Array('02a', 'http://yourhost/images/pp_02a.gif');
　　　　　　　　　　　　　　　　　　：
    return list;
}

ちなみに、冒頭のスクリーンショットに表示させている画像は下記のサイトよりお借りしました。ありがとうございました。

.:. PEPPER .:. FREE GRAPHICS FOR WEB SITE

注：この emoji.js のファイルの文字コードは UTF-8 です。EUC-JP で sb をお使いでも、ファイルの文字コードは UTF-8 のままお使いください。

５．スクリプトのアップロード

修正した emoji.js を、index.html と同じディレクトリにアップロードします。

６．テンプレートの修正

</head> の直前に下記のタグを追加します。

<script type="text/javascript" src="{site_top}emoji.js" charset="utf-8"></script>

そして記事関連ブロック終了の直前に、記事に表示された、絵文字に対応する記号を実際の絵文字に変換するためのスクリプト（青色部分）を追加します。

<!-- BEGIN entry -->
<h2 id="entry{entry_id}" class="date">{entry_date}</h2>
<div class="entry">
<h3 class="entry-header">&#9679;<a href="{entry_permalink}">{entry_title}</a></h3>
<div class="entry-content">
<div class="entry_body">{entry_description}</div>
<div class="entry_more">{entry_sequel}</div>
</div>
<div class="entry-footer">
Posted by {user_name} at {entry_time} | Category: {category_name} | {comment_num} | {trackback_num}
</div>
</div>
{trackback_auto_discovery}
<script type="text/javascript">
<!--
changeCustmizeEmojiTag('content', 'div', 'entry_body'); // 本文に絵文字を表示する
changeCustmizeEmojiTag('content', 'div', 'entry_more'); // 続きに絵文字を表示する
// -->
</script>
<!-- END entry -->

赤色部分はご利用のテンプレートによって異なります、それぞれの意味は下記の通りです。

• content：中央カラム全体を括っている div 要素の id 属性（一例として "main" という設定のテンプレートが結構あるようですが、ご利用のテンプレートをよくご確認ください）
• div：記事またはコメント本文全体を括っているタグ
• entry_body / entry_more：記事またはコメント本文全体を括っているタグの class 属性

要するに画像を変換する場所を絞り込んでいる訳です。この部分でつまづく場合が多いようですが、ご利用のテンプレートおよび本エントリーのコメント欄等で不具合をよくご確認の上、どうしても分からない場合のみご質問ください。

changeCustmizeEmojiTag の起動は、「本文「用と「続き」用の2行があります。「続き」に絵文字を使わない場合は

changeCustmizeEmojiTag('content', 'div', 'entry_more'); // 続きに絵文字を表示する

を削除してください。

記事に絵文字を表示するカスタマイズは以上です。

• 管理画面の新規記事および記事編集画面に絵文字が表示されること
• 絵文字をクリックすると、テキストエリアに絵文字に対応した値が設定されること
• 記事を公開すると、ブログの記事部分に絵文字が表示されること

を確認してください。
コメントにも絵文字を利用する場合は次項のカスタマイズを行ってください。

７．コメント部分にも絵文字を利用する場合

まずコメントの form 属性に name 属性を追加してください。

<form name="comform" action="{site_cgi}" method="post">
 
<div class="comments-open" id="comments-open">
<h2 class="comments-open-header">Comment form</h2>
<div class="comments-open-content">
 
<div id="comments-open-data">

次に、テンプレートのコメント部分に絵文字を表示するためのタグを追加します。

<dl>
<dt><label for="name" id="labelname">name:</label></dt>
<dd><input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" size="20" /></dd>
<dt><label for="email" id="labelemail">email:</label></dt>
<dd><input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" size="30" /></dd>
<dt><label for="url" id="labelurl">url:</label></dt>
<dd><input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" size="30" /></dd>
<dt><label id="cookie_label" for="set_cookie">cookie:</label></dt>
<dd><input type="checkbox" tabindex="4" name="set_cookie" value="1" id="set_cookie" /></dd>
<dt>icons:</dt><dd style="margin-left: 5.5em;">
<script type="text/javascript">
<!--
writeCustmizeEmojiTagList('document.comform.description');
// -->
</script>
</dd>
<dt><label for="description" id="labeldescription">comments:</label></dt>
<dd><textarea tabindex="5" id="description" name="description" rows="8" cols="45"></textarea></dd>
</dl>

最後にコメント関連ブロック終了の直前に青色のタグを追加します。

</form>
</div>
<script type="text/javascript">
<!--
changeCustmizeEmojiTag('comments', 'div' ,'comment');
// -->
</script>
<!-- END comment_area -->

Serene Bach のツリー化カスタマイズとして当サイトで紹介している

1. サイドメニューのツリー化スクリプト for Serene Bach
2. JavaScript 不要なサイドメニューのツリー化 for Serene Bach

がありますが、この 2 つを同時に適用すると「ツリーが正常に表示されません」というご質問を頂きました。

原因は 2. のツリーの記事タイトルに ul 要素ではなく、li 要素が使用されているので、それ専用の CSS を設定しているのですが、その設定が 1. の CSS の class 属性名とバッティングしているためです。

解消するひとつの方法として、1. で利用している maketree.js および CSS を修正する方法を紹介します。

１．maketree.js の修正

ご自身で使用されている maketree.js をサーバからダウンロードします。そのファイルを任意のエディタで開き、下記の赤色部分（tree）を検索して、すべて「tree2」に修正してください。計6ヶ所あります。

修正前

nodes[i].setAttribute('class', 'tree');

修正後

nodes[i].setAttribute('class', 'tree2');

修正したら保存して、元のディレクトリにアップロードしてください。

２．CSS 修正

「サイドメニューのツリー化スクリプト for Serene Bach」の記事にある CSS を設定していると思いますので、このセレクタ名 tree を全て tree2 に変更します。

ul.tree2 {
　　：
ul.tree2 ul {
　　：
ul.tree2 li {
　　：
ul.tree2 li.end {
　　：

以上です。

Windows XP 自宅サーバへの FastCGI モジュールのインストールおよび、Movable Type 3.34 を FastCGI アプリケーションとして利用する方法をご紹介します。

Movable Type に FastCGI を適用する記事「Running Movable Type Under FastCGI」には、サーバへの FastCGI モジュールのインストール手順が掲載されておらず、Windows + FastCGI の設定方法についても（日本の）ウェブ上で詳細に解説された記事が少ないようです。

ということで、アプリケーションの実装やサーバのチューニング等、記述不足な部分もありますが、Apache HTTP サーバへの FastCGI インストール手順、および Movable Type 3.34 を FastCGI を利用して動作させる手順を本エントリーでまとめてみました。
久しぶりの自宅サーバネタです。

なお、Linux（Fedora Core 6）版での FastCGI + Movable Type 3.34 導入手順が「The blog of H.Fujimoto：Movable Type 3.34をFastCGIで動作させる手順」で紹介されています。

Windows XP での動作確認環境は下記の通りです。

• Apache 2.0
• Active Perl 5.8.8
• MySQL 5.0

以下設定手順です。通常の自宅サーバの設定がすでに行われていることを前提に書いてます。
ちなみに試してみたところ、Movable Type の管理画面の操作が体感で 3 倍以上早くなりました。是非通常の運用環境でも使ってみたいところです。

１．FastCGI モジュールのダウンロード

HTTP サーバで FastCGI を利用可能にするため、Apache HTTP サーバに読み込ませるためのモジュールをダウンロードします。

FastCGI のトップページすぐ下にある Servers という項目の Apache の current: download のリンク（ここに最新版がある）をクリックします（下）。

そして投稿時点では最新の、

mod_fastcgi-2.4.2-AP20.dll

のリンクをクリックして FastCGI モジュールをダウンロードします。

この mod_fastcgi-2.4.2-AP20.dll というファイル名は、前半の数字が mod_fast 自体のバージョン、後半の数字が Apache のバージョンみたいですので、Apache 1.3 系を使用している場合は同じページの mod_fastcgi-2.4.2-AP13.dll を使用すると思います。
また過去のモジュールは、同じページの old/ をクリックしたところにあります。

ダウンロードした mod_fastcgi-2.4.2-AP20.dll を mod_fastcgi.dll にリネームし、Apache の modules フォルダに移動します。リネームしない場合は、次項の httpd.conf の LoadModule ディレクティブでファイル名を合わせてください。

参考：

• Ruby on Rails：Fast CGI and Apache2 for Windows XP
• Ruby on Rails：Fast CGI and Apache2 for Windows without VirtualHosts

２．httpd.conf 修正

次に、ダウンロードした FastCGI モジュールを Apache で読み込む設定と .fcgi という拡張子のファイルで FastCGI を利用する設定を行います。

httpd.conf を任意のエディタで開き、下記の

#LoadModule rewrite_module modules/mod_rewrite.so

のコメント文字を削除して、

LoadModule rewrite_module modules/mod_rewrite.so

にします。

また、その下辺りに

LoadModule fastcgi_module modules/mod_fastcgi.dll

を新しく追加します。

さらに

AddHandler fastcgi-script .fcgi

を <Directory "[ドキュメントルート]">～</Directory> の中、あるいは他の AddHandler ディレクティブの設定と同じ辺りに追加します。
なお、通常の CGI が実行できる状態（Options ディレクティブに ExecCGI の追加）を前提に話を進めておりますので、その辺りの設定は他のサイトを参考に設定してください。

動作確認するのであれば、最低限この設定で良いみたいですが、実際に運用する場合は FastCgiConfig ディレクティブ等を追加してチューニングする必要があります。そうしないと（多分） FastCGI で Apache のメモリ（プロセス）が大量に消費される可能性があります。

参考：

• Module mod_fastcgi
• mod_fastcgi

３．Perl モジュールをインストールする

ここでは Perl プログラム（ここでは Movable Type）から FastCGI を利用するための環境を作ります。

Perl で FastCGI を利用するには、FCGI と CGI::Fast というモジュールが必要です。
説明は省略しますが、ActivePerl 5.8.8 の PPM version 4 から GUI がデフォルトで起動されます。下の説明ではコマンドラインから直接ダウンロードしていますが、GUI の場合は下記の記事を参考に予め修正した方がいいでしょう（Perl のバージョンが低ければ問題ないかもしれません）。

参考：

• hail2u.net：PPM version 4はGUIアプリケーション
• T::Yok.....：PPM4(Perl Package Manager)を起動する時に異常に時間がかかる件

MS-DOS 画面より下記のコマンドを入力します。単に ppm と入力すれば GUI を利用してダウンロードできます。

C:¥>ppm install FCGI
Downloading ActiveState Package Repository packlist...done
Downloading ActiveState Package Repository ABI PPD...not modified
Downloading ActiveState Package Repository ACH-Builder PPD...not modified
Downloading ActiveState Package Repository ACH-Generator PPD...not modified
　　　：
（延々と続く）
　　　：
Downloading ActiveState Package Repository xmlrpc-pureperl PPD...not modified
Downloading ActiveState Package Repository xslt-parser PPD...not modified
Downloading ActiveState Package Repository your PPD...not modified
Downloading FCGI-0.67...done
Unpacking FCGI-0.67...done
Generating HTML for FCGI-0.67...done
Installing to site area...done
   6 files installed

参考までに、perl 5.8.7.815 では下記のようになりました。

C:¥>ppm install FCGI
====================
Install 'FCGI' version 0.67 in ActivePerl 5.8.7.815.
====================
Installing C:\usr\site\lib\FCGI.pm
Installing C:\usr\site\lib\auto\FCGI\FCGI.bs
Installing C:\usr\site\lib\auto\FCGI\FCGI.dll
Installing C:\usr\site\lib\auto\FCGI\FCGI.exp
Installing C:\usr\site\lib\auto\FCGI\FCGI.lib
Installing C:\usr\html\arch\FCGI.html
Installing C:\usr\html\site\lib\FCGI.html
Files found in blib\arch: installing files in blib\lib into architecture dependent library tree
Successfully installed FCGI version 0.67 in ActivePerl 5.8.7.815.

CGI:Fast はデフォルトでインストールされている（多分 ¥usr¥lib¥CGI¥Fast.pm）ので、インストール不要です。というか、ppm コマンドでは取得できません。

４．Movable Type の FastCGI 用ファイル作成

ここからは FastCGI アプリケーション側の設定です。
Movable Type インストールディレクトリにある下記の CGI ファイルをコピーして、.fcgi にリネームします（単にリネームでもOK）。

• mt.cgi → mt.fcgi
• mt-comments.cgi → mt-comments.fcgi
• mt-tb.cgi → mt-tb.fcgi
• mt-view.cgi → mt-view.fcgi
• mt-search.cgi → mt-search.fcgi

５．Movable Type 設定ファイル修正

mt-config.cgi を任意のエディタで開き、下記を追加します。

AdminScript mt.fcgi
CommentScript mt-comments.fcgi
TrackbackScript mt-tb.fcgi
SearchScript mt-search.fcgi
ViewScript mt-view.fcgi

以上です。
Apache を再起動し、正常に立ち上がれば OK です。そしてブラウザから mt.fcgi にアクセスしてみてください。

参考：

• Ogawa::Memoranda：MT 3.2 on Apache + FastCGI
• akiyan.com：Apache2.2.3(FreeBSD ports)環境でMT3.2-ja-2をFastCGI化する

ブラウザでサイト閲覧時にスクロールする時にスペースキー（Space）を利用すると1ページ分スクロールしますが、

Shift + Space

で逆スクロールします。
ふと思いついて試したら動いたのですが、ご存知の方も多いと思います。私は知らずに PageUp 使ってました…。

あとで調べてみたところ、Firefox では日本語入力が有効になっていると、スペースキーによるスクロールができないようです（Shift + Space は OK らしいですが微妙？）。

とりあえずご紹介まで。

関連・参考リンク：

• Going My Way：Firefox利用時のスペースキーによるスクロールは、IMEをオフにした状態で使おう
• スペースキーでページのスクロールができない
• 日本語入力が有効になっていると、スペースキーによるスクロールができない
• Scroll With IME ver.1.3

Six Apart より Movable Type 3.34 日本語版がリリースされました。

Movable Type 3.34日本語版の提供を開始

本日より、Movable Type 3.34日本語版 (以下3.34-ja) の提供を開始いたします。

3.34-jaの主な修正点は、3.33以降に発見されたセキュリティ上の不具合への対策と、FastCGIサポートの向上です。

下記の通り、不具合の修正およびパフォーマンスが改善されています。

• index.htmlのヘルプリンクが誤っている
• FastCGIサポートの向上
• スキーマバージョンの訂正
• 不正なHTMLタグによるスクリプト実行の可能性
• MTCommentPreviewIsStaticテンプレートタグの機能を利用したスクリプト実行の可能性
• NoFollowプラグインの無効化またはアンインストールに伴うサニタイズ処理の不具合
• 再構築オプションの表示
• プラグインのアップグレード機能の修正

マイナーバージョンアップなので、一部のファイルのみを上書きアップロードしたいという方も結構いらっしゃると思います。ということで GNU diffutils 2.7.2 (Win32 版) を使って 3.33-ja と 3.34-ja を比較しました。ご参考まで。

単純な内容の比較ではかなりの差分がありますが、著作権表示の西暦修正および履歴管理ツールのリビジョンやタイムスタンプのみの変更が相当含まれておりますので、差分内容について下記の通りマーキングしました（間違っていたらすいません）。

• ●：差分あり（要上書き）
• ▲：差分ありですが日本語で使用する場合不要（上書きは任意）
• 他：機能的な差分なし（上書き不要）

要するに（日本語環境であれば）●印のみ上書きすればアップグレード可能と思われます。

extras/examples/plugins/l10nsample/l10nsample.cgi
●extras/examples/plugins/l10nsample/l10nsample.pl
extras/examples/plugins/l10nsample/lib/l10nsample/L10N.pm
extras/examples/plugins/l10nsample/lib/l10nsample.pm
extras/examples/plugins/mirror/lib/Mirror.pm
●index.html
lib/MT/App/CMS.pm
●lib/MT/App/Comments.pm
lib/MT/App/NotifyList.pm
lib/MT/App/Search.pm
●lib/MT/App/Trackback.pm
lib/MT/App/Upgrader.pm
lib/MT/App/Viewer.pm
lib/MT/App/Wizard.pm
●lib/MT/App.pm
lib/MT/Atom.pm
●lib/MT/AtomServer.pm
lib/MT/Author.pm
lib/MT/Blocklist.pm
lib/MT/Blog.pm
●lib/MT/Bootstrap.pm
lib/MT/Builder.pm
lib/MT/Callback.pm
lib/MT/Category.pm
lib/MT/Comment.pm
lib/MT/Config.pm
●lib/MT/ConfigMgr.pm
lib/MT/DateTime.pm
lib/MT/default-templates.pl
lib/MT/DefaultTemplates.pm
lib/MT/Entry.pm
lib/MT/ErrorHandler.pm
lib/MT/FileInfo.pm
lib/MT/FileMgr/Local.pm
lib/MT/FileMgr.pm
lib/MT/I18N/default.pm
lib/MT/I18N/en_us.pm
lib/MT/I18N/ja.pm
●lib/MT/I18N.pm
lib/MT/Image.pm
lib/MT/ImportExport.pm
lib/MT/IPBanList.pm
lib/MT/JunkFilter.pm
▲lib/MT/L10N/de.pm
lib/MT/L10N/en_us.pm
▲lib/MT/L10N/es.pm
▲lib/MT/L10N/fr.pm
●lib/MT/L10N/ja.pm
▲lib/MT/L10N/nl.pm
lib/MT/L10N.pm
lib/MT/Log.pm
lib/MT/Mail.pm
lib/MT/Notification.pm
lib/MT/Object.pm
lib/MT/ObjectDriver/DBI/mysql.pm
lib/MT/ObjectDriver/DBI/postgres.pm
lib/MT/ObjectDriver/DBI/sqlite.pm
lib/MT/ObjectDriver/DBI.pm
lib/MT/ObjectDriver/DBM.pm
lib/MT/ObjectDriver.pm
lib/MT/Permission.pm
lib/MT/Placement.pm
lib/MT/Plugin/JunkFilter.pm
lib/MT/Plugin/L10N.pm
lib/MT/Plugin.pm
lib/MT/PluginData.pm
lib/MT/Promise.pm
lib/MT/Request.pm
●lib/MT/Sanitize.pm
lib/MT/Serialize.pm
lib/MT/Session.pm
lib/MT/Tag.pm
lib/MT/TaskMgr.pm
lib/MT/TBPing.pm
●lib/MT/Template/Context.pm
●lib/MT/Template/ContextHandlers.pm
lib/MT/Template.pm
lib/MT/TemplateMap.pm
lib/MT/Trackback.pm
lib/MT/Upgrade.pm
lib/MT/Util.pm
lib/MT/WeblogPublisher.pm
lib/MT/XMLRPC.pm
●lib/MT/XMLRPCServer.pm
●lib/MT.pm
mt-add-notify.cgi
mt-atom.cgi
mt-check.cgi
mt-comments.cgi
mt-config.cgi-original
mt-db2sql.cgi
mt-feed.cgi
mt-search.cgi
mt-static/js/tc/client.js
mt-static/js/tc/json.js
mt-static/mt.js
▲mt-static/mt_de.js
▲mt-static/mt_es.js
▲mt-static/mt_fr.js
●mt-static/mt_ja.js
▲mt-static/mt_nl.js
mt-tb.cgi
mt-testbg.cgi
mt-upgrade.cgi
mt-view.cgi
mt-wizard.cgi
mt-xmlrpc.cgi
mt.cgi
php/lib/mtdb_base.php
php/lib/mtdb_mysql.php
php/lib/mtdb_postgres.php
php/lib/mtdb_sqlite.php
php/lib/MTSerialize.php
php/lib/MTUtil.php
php/lib/MTViewer.php
●php/lib/sanitize_lib.php
●php/mt.php
●plugins/nofollow/nofollow.pl
plugins/spamlookup/lib/spamlookup.pm
plugins/spamlookup/spamlookup.pl
plugins/spamlookup/spamlookup_urls.pl
plugins/spamlookup/spamlookup_words.pl
plugins/StyleCatcher/lib/StyleCatcher/L10N.pm
plugins/StyleCatcher/lib/StyleCatcher.pm
plugins/StyleCatcher/stylecatcher.cgi
plugins/StyleCatcher/stylecatcher.pl
●plugins/StyleCatcher/tmpl/header.tmpl
●tmpl/cms/copyright.tmpl
●tmpl/cms/footer.tmpl
●tmpl/cms/rebuild_confirm.tmpl
●tmpl/wizard/footer.tmpl
tools/run-periodic-tasks

ところで、ページ右下に表示されるクレジットバナーに "-ja" がついていないようです。ダウンロードアーカイブは 「MT-3_34-ja」となっているのですが、どちらが正解でしょう？→問題ありません。詳細はDakinyさんからのコメント[5]をご覧ください。

関連記事：
Movable Type 3.34（英語版）リリース

2007.01.24 追記
機能差分があるファイルに印をつけました。またバージョン標記について本文を一部修正しました。

Movable Type を初めてご利用になる方のために、「これだけは最初に設定しておきたい」という 10 項目を挙げてみました。１項から８項は設定の流れを考えて順序づけをしました。最後の2項目の優先度は低いですが、「そういう機能もあります」という意味で掲載しています。

「全てが必須」という意味ではありません。不要と思われる項目はスキップしてください。

2008.10.01 「Movable Type 4 を始める前に設定しておきたい 10 の項目」を公開しました。

１．管理画面を「詳細モード」に切り替える

Movable Type の管理画面は「基本モード」と「詳細モード」の2種類があり、デフォルトは「基本モード」になっています。この状態では基本設定とプラグインの一覧しか表示されないため、コメント・トラックバックの受信設定や後に述べるアーカイブページのパス等や拡張子が変更できません。

ということで、管理画面左の「設定」をクリックし、次のページ右上にある、「基本モード」のリンクをクリックして「詳細モード」に切り替えておきましょう。

２．アーカイブ用ディレクトリを作成する

Movable Type では再構築（ページの生成）を実行すると、メインページの他、各アーカイブページ（カテゴリー・アーカイブ／月別アーカイブ／エントリー・アーカイブ等）が生成されます。これらのページはメインページのあるディレクトリ直下に作られます。例えば 2007年1月の月別アーカイブは 2007/01/index.html となります。

月別アーカイブだけなら良いですが、カテゴリー・アーカイブはカテゴリー別にディレクトリが生成されるため、デフォルト状態で再構築すると、メインページのあるディレクトリがアーカイブページ用のディレクトリだらけになります。
ということで、アーカイブ用ディレクトリ archives を作成することをお勧めします。

１項で新しく表示されたメニューより「公開」をクリック

次のページで「アーカイブの設定」のチェックボックスをチェックして、その下に表示された「アーカイブURL」「アーカイブ・パス」を設定。設定内容は、そのすぐ上に表示されている「サイトURL」「サイト・パス」に任意のディレクトリ名（ここでは archives）を末尾に加えます。

設定したらページ一番下にある「変更を保存」をクリック。

３．拡張子を .php にする

Movable Type では、PHP が利用できることを前提としたユーザ独自のカスタマイズ（モジュール化、ページ分割やパンくずリスト等）がいくつかあります。

Movable Type をある程度使いこなし、これらのカスタマイズを利用する段階になってファイルの 拡張子を .html から .php に変更すると、あるページが他のサイトからリンクされている場合、その URL はデッドリンクとなります。また Google 検索結果にも影響があると思われます。

インストールして、使い始めたばかりの状態では PHP は無関係かもしれませんが、いずれ利用する可能性があることを考え、拡張子を php にしておくことをお勧めします。*1

メインページの拡張子を変更する場合は、管理画面左の「テンプレート」をクリック。次のページで「メインページ」のリンクをクリック。

テンプレート編集画面上にある「出力ファイル名」を index.html から index.php に変更し、「保存と再構築」をクリックします。

インデックス・テンプレートにある「アーカイブページ」も同じ要領で変更してください。

アーカイブページの拡張子を変更するには、管理画面左の「設定」をクリックし、次のページ上にあるメニューより「公開」のリンクをクリックし、次のページで「アーカイブの拡張子」を html から php に変更します。

なお、PHP ファイルを実行させるためには、もう少し設定が必要な場合があります。詳細は「Movable Type の PHP化（その1）」を参照願います。

また PHP化した場合は、「HTTP/1.1 の「条件付きGET」を利用して PHP ファイルアクセスによるサーバ負荷を削減する」の設定を併せて行うことを強く推奨します。

４．エントリー・アーカイブのパス・ファイル名を変更する

エントリー・アーカイブは、「パーマリンク」と呼ばれる、個別記事に紐づけられた URL が割り当てられるページです。このエントリー・アーカイブの URL はできる限り永続的である（=URLが変わらない）ことが望ましい訳です。

ところが、デフォルトの状態でエントリーを投稿した場合、ファイルの URL はパーマリンクとするにはあまり相応しいものではありません（関連記事「エントリー・アーカイブファイル名の不具合を解消する」）。

ということで、エントリー・アーカイブのファイル名にはエントリー作成年月日時分（秒）がよく使われています。いわゆる「
タイムスタンプ」をファイル名に利用することで、バックアップからブログを作り直した時も同じ URL を再生することができます。

変更方法は、管理画面左の「設定」をクリックし、次のページ上にある「公開」をクリック。

ページ一番下にある、「アーカイブ・マッピング」の「エントリー」欄の「出力フォーマット」のプルダウンメニューを開いて、一番したの「カスタマイズする」を選択。

出力フォーマット欄が手入力できるようになるので、下記を設定。

%y/%m/%d%h%n%s%x

設定後、「変更を保存」をクリックします。

５．更新Pingを設定する

更新 Ping は、エントリーを新たに投稿した時に「ブログを更新しましたよ」というお知らせを外部に通知するための仕組みです。
Google 等の検索でもサイトを訪問される方はいますが、検索結果に反映されるまでにはタイムラグがあります。この更新 Ping を使った通知を行うことで、より迅速にあなたのブログの更新が外部に知らされ、他の方の目に触れる機会が増えることでしょう。

設定方法は、まず管理画面左の「設定」をクリックし、次のページ上にある「新規投稿」をクリック。

「更新を自動通知する先」のチェックボックスをすべてクリックし、さらにその下のテキストエリアに更新 Ping 送信先の URL（後述） を設定します。URL を複数設定する場合は改行をいれてください。

更新 Ping 送信先については、例えば下記が参考になるでしょう。

Ping送信先一覧（国内）

その他、Google 検索等で「更新 ping 一覧」で検索すれば色々みつかると思います。

６．スタイルシートの自動再構築を無効にする

インデックス・テンプレート（メインページ等）には、それらの再構築を行った時、同時に他のインデックス・テンプレート、例えば RSS 2.0（index.xml）の再構築をする・しないというオプションがテンプレート毎にあります。つまり、エントリー投稿等で Movable Type が自動的にメインページやエントリー・アーカイブ等を更新した時に「何を自動生成しますか？」という制御ができます。
インデックス・テンプレートについては、デフォルト状態では全て自動生成対象になります。

このインデックス・テンプレートの中には「スタイルシート」もありますが、スタイルシートはインデックス・テンプレートの再構築と連動して再構築される必要はありません。静的な情報しかないためです（ただし1度は必ず再構築し、物理的なファイルを生成してください）。
自動生成を無効にすることで Movable Type の再構築処理を僅かながら減らすことができます。

無効にするには、管理画面左の「テンプレート」をクリックし、次のページにある「スタイルシート」をクリック。

次の編集ページ右上にある「再構築オプション」のチェックをはずし、一番下の「保存」をクリックします。

７．コメント/トラックバックを無条件に受信する

Movable Type の機能のひとつに、コメント・トラックバックがありますが、Movable Type をインストールした直後は、投稿したコメント・受信したトラックバックは、管理者が承認しないと公開されない状態になってしまいます。したがって、とりあえず動作確認したいという場合は、一旦無条件に受信できる設定にするといいでしょう。

ちなみに、デフォルト状態でコメントを投稿すると、承認待ち画面にジャンプします。そして管理者はそのコメントを公開する場合、承認作業が必要になります。またデフォルト状態でテンプレートを入れ替え、コメント投稿すると同様に承認待ち画面にジャンプしますが、テンプレートを一気に入れ替えないと承認待ち画面のスタイルが崩れ、戸惑うおそれがあります。
ということでデフォルト状態では色々面倒なので、個人的には承認機能については後で設定して少しずつ覚えていけば良いと思います。

変更方法は、まず管理画面左の「設定」をクリックし、次のページ上にある「コメント・トラックバック」をクリック。

コメントについては、「投稿を受け付ける条件」で「すべて」を選択（デフォルトでそうなっていると思います）、

また、「即時に公開するコメント」で「すべて」を選択、

トラックバックについては、「トラックバックを受信」をチェック（デフォルトでそうなっていると思います）、そして「事前確認」のチェックを外してください。

すべて設定したら一番下の「変更を保存」をクリックしてください。

８．エントリー投稿画面をカスタマイズする

デフォルトのエントリー投稿（および編集）画面では、タイトルと本文、そして公開する・しないの3種類の設定しかなく、

• カテゴリー
• 概要
• 追記
• タグ
• コメント・トラックバックの受信設定

等の制御ができません。特にカテゴリーやタグはエントリーを公開する時に同時に設定しておきたい項目です。

これらを表示させるには、管理画面左の「新規エントリー」をクリックし、エントリー投稿画面下にある「画面の表示設定を変更」のリンクをクリック

表示されたポップアップ画面で、表示させたい項目を選択・保存します。「カスタム」を選択すると、項目毎に表示・非表示を設定できます。

あと、ポップアップ画面下にある「アクション・バー」は「両方」を選択しておくと、エントリー編集画面のフォームボタンがテキストエリアの上下に表示されて便利です。

９．コメントに TypeKey を利用する

TypeKey はコメント投稿におけるオンライン認証システムです。Movable Type のコメント投稿でこのオンライン認証を有効にして、コメント投稿者をTypeLey 認証者だけに制限すれば、スパムコメントを防ぐことも可能です。

TypeKey 認証サービス 概要

詳細な説明は省略しますが、この機能は早めに設定しておいた方がいいでしょう。

まず、TypeKey アカウント新規作成のページで TypeKey のアカウントを取得します。

その後、管理画面左の「設定」をクリックし、次のページ上にある「コメント・トラックバック」をクリック。

「認証サービスの設定」をクリック。

TypeKeyのログイン画面が表示されるのでログイン（この画面はスキップされるかもしれません）。

次の画面で「return to Movable Type」のリンクをクリック。

元の画面のテキストエリアに認証用トークン（乱数）が入力されていればOKです。

この後、「変更を保存」をクリックし、ページ上に表示された「インデックス・テンプレートの再構築」を必ず行ってください。

１０．クリエイティブ・コモンズ ライセンスを設定する

著作権表示をするのもいいですが、他での著作物の利用を明示的に認めたい場合は「クリエイティブ・コモンズ ライセンス」が有効です。

クリエイティブ・コモンズ・ジャパン

これを設定するとサイドバー下にクリエイティブ・コモンズのバナーが表示され、それをクリックするとサイトの著作物に関する利用条件が表示されます。

設定方法は管理画面左の「設定」をクリックして、次のページ一番下にある「クリエイティブ・コモンズ・ライセンス」の「ライセンスを設定する」のリンクをクリック。

ポップアップウィンドウが表示されるので、利用条件とライセンスの管轄地を選択して、「ライセンスを選ぶ」をクリック。

ライセンスが適用された旨の表示がされるので、一番下の「proceed」をクリック。

元の設定画面に設定されたライセンスが表示されます。

「変更を保存」をクリックするとバナーも表示されます。バナー画像は利用条件によって異なります。
設定した後で利用条件を変更したい・ライセンスを削除したい場合は、管理画面に表示されたバナー下にあるリンクをクリックしてください。

以上です。
その他、「テンプレートをファイルで保存する」というのも候補に挙げてましたが、カスタマイズ前の状態ということで除外しました。

2007.05.23
３項について、設定不足のケースがあるため、「Movable Type の PHP化（その1）」へのリンクを追加しました。

---

*1：お使いのレンタルサーバ等で PHP が利用できることが前提です。なお運用途中で拡張子を変更する場合はリダイレクトという手があります。

月別アーカイブを年別にリスト表示する場合に利用する ArchiveDateFooter プラグインですが、MTArchiveDateFooter をラップするコンテナタグ MTArchiveList タグで sort_order 属性に acend を設定された場合に正常に表示されないという不具合を修正しました。

この修正により昇順で表示する場合でも、スクリーンショットのように正常に動作するようになります。

この不具合は昨年にご質問を頂いておりました。公開が遅くなり申し訳ございませんでした。

なおバージョンアップしたプラグインは元記事「ArchiveDateFooter プラグイン」よりダウンロードしてください。ご利用方法についても元記事をアップデートしましたのでそちらを参照ください。

米 Six Apart より Movable Type 3.34（英語版）がリリースされました。

Announcing Movable Type 3.34

Last night we released version 3.34 of the Movable Type Publishing Platform.

• Fixes important potential XSS vulnerabilities
• Is a free and recommended update for all Movable Type users
• Enables simple use of FastCGI which yields a 15x performance increase

XSSは「クロスサイトスクリプティング」の略で、ソフトウェアのセキュリティホールの一種です。これらに関するバグが修正が施されています。

FastCGI は、プログラムのパフォーマンスを向上させる CGI のための拡張（仕様）で、プロセスをメモリ上に常駐させることで、プロセス起動や終了のオーバーヘッドを削減しているようです。
公式サイトで各サーバ対応のモジュールおよび、各種言語用ライブラリが用意されています。

これまで Movable Type を FastCGI で使用するには多くのパッチが必要でしたが、その手間がなくなります（若干の設定変更は要）。
FastCGI と組み合わせて利用することで、Movable Type のパフォーマンスが向上します。公式サイトのベンチマークテストでは「性能が15倍向上した」という報告が書かれています。
レンタルサーバで FastCGI を利用する場合は、サポート状況の確認が必要です。

Movable Type 3.34 英語版を入手するには、同記事本文の中央辺りにある「Sign in to your Movable Type account …」のリンクをクリックしてください。あとは画面にしたがって TypeKey のサインインを行えばダウンロードのページに進みます。

英語版は日本語版としても利用可能です。日本語版として利用するには、下記の記事の手順にしたがって修正を行ってください。

Movable Type 3.31英語版を日本語環境で利用する

3.34 の管理画面等、すべて日本語で表示されることを確認しています。問題ないと思いますが、修正はご自身の責任で行ってください。

参考記事：
The blog of H.Fujimoto：Movable Type 3.34英語版リリース

サムネイル画像をクールに拡大表示する Highslide JS を利用する方法を紹介します。内容は Movable Type をサンプルにしていますが、他のブログ等でも応用できると思います。
WordPress ではプラグイン WPJ-Highslide 0.2 が利用できるみたいです。

とりあえず下記のサンプル画像をクリックしてください。拡大表示された画像の上でクリックすると元に戻ります。

拡大ツールでは、当サイトでも紹介している Lightbox JS が有名ですが、この Highslide JS は下記の特徴があります。

• 拡大画像の下にキャプション（タイトル）の挿入が可能
• ウィンドウサイズに収まるように拡大（右下のアイコンをクリックすると 100% 表示）
• 拡大画像のドラッグが可能

以下、カスタマイズ方法です。ここではダウンロード時のバージョン 2.2.74.0.6 で話を進めます。

１．ダウンロード

Highslide JS の「Download」のリンクをクリック

バージョンを選択して「Download Now!」をクリック

商用の場合は購入、非商用の場合はドネーションの有無を選択して、「Highslide Download」の Yes をクリック。

２．アップロード

解凍した中にある、highslide フォルダを丸ごとアップロードします。Movable Type の場合はブログディレクトリ（ブログのトップページとなる index.html が出力されるディレクトリ）にアップロードした手順で説明します。

highslide フォルダと同じ階層にある images / example-xx.html 等はアップロード不要ですが、サンプルの動作確認を行いたい場合はアップロードしてください（詳細は７項参照）。

３．スクリプトのインクルード設定

次の script 要素を </head> の直前に設定します。Movable Type 3 の場合は head 要素が記述されている各テンプレートに設定してください。Movable Type 4 では、head 要素部分がモジュール化（部品化）されているため、次のテンプレートに設定してください。

• MT4.0～4.1x のデフォルトテンプレート：「ヘッダー」テンプレートモジュール
• MT4.2x のデフォルトテンプレート：「HTMLヘッダー」テンプレートモジュール（テンプレート内に head 要素はありませんが問題ありません）
• MT4.x の小粋空間テンプレート：「ヘッダー」テンプレートモジュール

<script type="text/javascript" src="http://user-domain/highslide/highslide.js"></script>

赤色部分はアップロード先のドメインを指定してください。Movable Type の場合は、次のようにテンプレートタグを利用すると良いでしょう。

<script type="text/javascript" src="<$MTBlogURL$>highslide/highslide.js"></script>

４．ポップアップ用空要素設定

Highslide JS でポップアップする画像を表示させるための div 空要素を設定します。そして div 要素の id 属性に "highslide-container" を設定します。

注：HighSlide の最新バージョンではこの設定は不要です。

<div id="highslide-container"></div>

サンプルの説明では「このタグは body 要素の後に直接設定してください」と書かれています。

ちなみに、この div 要素は id 属性つきですので、HTML ページに一つ以上の記述があってはいけません。Movable Type でエントリーにこのタグを記述すると、トップページやアーカイブページで同じ id 属性値が複数存在する可能性があるため、各テンプレートに直接記述してください。

５．タグ設定

５．１ 基本

記事本文中に、次のように （X）HTML 要素を記述することで、Highslide JS の機能が有効になります。

まず、サムネイル画像表示用の img 要素を書き、それを a 要素で括ります。a 要素の href 属性には元画像の URL を設定してください。
そして a 要素に class 属性 "highslide" と、onclick 属性を追加します。

<a href="画像ファイルのURL" class="highslide" onclick="return hs.expand(this)">
<img src="サムネイル画像のURL" alt="..." />
</a> 

設定した class 属性はサムネイル画像用のスタイル設定に利用するためのものです。
なお、ユーザビリティを考慮して onkeypress 属性も追加しておくと良いでしょう。

<a href="画像ファイルのURL" class="highslide" onclick="return hs.expand(this)" onkeypress="return hs.expand(this)">
<img src="サムネイル画像のURL" alt="..." />
</a> 

５．２ キャプション（画像のタイトル）を表示する場合

下のリストのように、青色部分を追加すればキャプションが表示されます。

<a href="画像ファイルのURL" class="highslide" onclick="return hs.expand(this)">
<img src="サムネイル画像のURL" alt="..." id="image" />
</a> 
<div class="highslide-caption"><p>タイトル</p></div>

キャプションは a 要素の直後に記述し、キャプションを括る要素に class="highslide-caption" を追加してください（div 要素でなくても大丈夫です）。
また、1ページに複数の画像がある場合でも、追加したキャプションは直前の画像に対応づけられます。

５．３ キャプションにコントローラーを追加する場合

複数の画面を制御する場合にコントローラーを追加します。これはキャプション部分に追加する場合です。

<div class='highslide-caption' id='the-caption'>
<a href="javascript:void(0)" onclick="return hs.previous(this)" class="control" style="float:left; display: block">
Previous<br/>
<small style="font-weight: normal; text-transform: none">left arrow key</small></a>
<a href="javascript:void(0)" onclick="return hs.next(this)" class="control" style="float:left; display: block; text-align: right; margin-left: 50px">Next<br/>
<small style="font-weight: normal; text-transform: none">right arrow key</small></a>
<a href="javascript:void(0)" onclick="hs.close(this)" class="control">Close</a>
<a href="javascript:void(0)" class="highslide-move control">Move</a>
<div style="clear:both"></div>
</div>

５．２項同様、画像の下に追加してください。

５．４ 画像内にコントローラーを追加する場合

注：この項目は過去の Highslide バージョンのものです

次のリストは画像内にコントローラーを追加する場合の設定です。

<div id="controlbar" class="highslide-overlay controlbar">
<a href="javascript:void(0)" onclick="return hs.previous(this)" title="Previous (left arrow key)"></a>
<a href="javascript:void(0)" onclick="return hs.next(this)" title="Next (right arrow key)"></a>
<a href="javascript:void(0)" class="highslide-move" title="Click and drag to move" style="margin-left: 10px"></a>
<a href="javascript:void(0)" onclick="hs.close(this)" title="Close"></a>
</div>

６．script 要素と CSS の設定

最後に、デザインを設定するための script 要素と CSS を設定します。script 要素は３項で設定した script 要素の直後に、CSS はスタイルシートにそれぞれ追加してください。

設定前の予備知識として、HighSlide JS には何パターンかのサンプルが提供されています。サンプルは上記のキャプションやコントローラーの有無に加え、ズームインしたときの様々なデザインが用意されています。
ここでは、それらの中からとりあえずひとつを選んで設定してみてください。

ということで、やや長くなりますが、HighSlide JS のサンプルで利用されている CSS を全て掲載しておきます。太字タイトルは、７項に記してあるサンプルの各メニュー名に対応しています（間違ってたらすいません）。

注：script 要素内の hs.graphicsDir および CSS の cusor プロパティの URL には ご自身のドメイン（http://～）を追加してください。サンプルでは highslide ディレクトリからパスが開始しているので、このままの状態では highslide ディレクトリと異なるパスにあるページで正常に動作しません。

最低限必要な設定（MT4の設定例）

ズームを全ページで有効にするためのパスの設定と、画像のローディング画像、ズームイン時、および画像を最大化するとき（ブラウザの幅が画像の最大幅より小さい時に表示）のポインタを表示します。

script 要素（３項の直後に追加）

<script type="text/javascript">    
    hs.graphicsDir = '<$MTBlogURL$>highslide/graphics/';
</script>

CSS

.highslide {
    cursor: url(<$MTBlogURL$>highslide/graphics/zoomin.cur), pointer;
}
.highslide-loading {
    display: block;
    color: black;
    font-size: 8pt;
    font-family: sans-serif;
    font-weight: bold;
    text-decoration: none;
    padding: 2px;
    border: 1px solid black;
    background-color: white;
    padding-left: 22px;
    background-image: url(<$MTBlogURL$>highslide/graphics/loader.white.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;
}
a.highslide-full-expand {
    background: url(<$MTBlogURL$>highslide/graphics/fullexpand.gif) no-repeat;
    display: block;
    margin: 0 10px 10px 0;
    width: 34px;
    height: 34px;
}

White 10px border and drop shadow（ボーダー・角・影つき）

script 要素（３項の直後に追加）

<script type="text/javascript">    
    hs.graphicsDir = 'highslide/graphics/';
</script>

CSS

.highslide-wrapper div {
    font-family: Verdana, Helvetica;
    font-size: 10pt;
}
.highslide {
    cursor: url(highslide/graphics/zoomin.cur), pointer;
    outline: none;
    text-decoration: none;
}
.highslide-active-anchor img {
    visibility: hidden;
}
.highslide-wrapper, .drop-shadow {
    background: white;
}
.highslide img {
    border: 2px solid gray;
}
.highslide:hover img {
    border: 2px solid white;
}
.highslide-wrapper {
    background: white;
}
.highslide-image {
    border: 10px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
    display: none;
    border: 5px solid white;
    border-top: none;
    padding: 5px;
    background-color: white;
}
.highslide-loading {
    display: block;
    color: black;
    font-size: 8pt;
    font-family: sans-serif;
    font-weight: bold;
    text-decoration: none;
    padding: 2px;
    border: 1px solid black;
    background-color: white;
    padding-left: 22px;
    background-image: url(highslide/graphics/loader.white.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;
}
a.highslide-credits,
a.highslide-credits i {
    padding: 2px;
    color: silver;
    text-decoration: none;
    font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
    color: white;
    background-color: gray;
}
a.highslide-full-expand {
    background: url(highslide/graphics/fullexpand.gif) no-repeat;
    display: block;
    margin: 0 10px 10px 0;
    width: 34px;
    height: 34px;
}

Drop shadow and no border（ボーダーなし・影つき）

script 要素（３項の直後に追加）

<script type="text/javascript">    
hs.graphicsDir = 'highslide/graphics/';
</script>

CSS

.highslide-wrapper div {
    font-family: Verdana, Helvetica;
    font-size: 10pt;
}
.highslide {
    cursor: url(highslide/graphics/zoomin.cur), pointer;
    outline: none;
    text-decoration: none;
}
.highslide-active-anchor img {
    visibility: hidden;
}
.highslide img {
    border: 2px solid gray;
}
.highslide:hover img {
    border-color: silver;
}
.highslide-wrapper, .drop-shadow {
    background: white;
}
.highslide-image {
    border-bottom: 1px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
    display: none;
    border-bottom: 1px solid white;
    font-family: Verdana, Helvetica;
    font-size: 10pt;
    padding: 5px;
    background-color: silver;
}
.highslide-loading {
    display: block;
    color: black;
    font-size: 8pt;
    font-family: sans-serif;
    font-weight: bold;
    text-decoration: none;
    padding: 2px;
    border: 1px solid black;
    background-color: white;
    padding-left: 22px;
    background-image: url(highslide/graphics/loader.white.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;
}
a.highslide-credits,
a.highslide-credits i {
    padding: 2px;
    color: silver;
    text-decoration: none;
    font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
    color: white;
    background-color: gray;
}
a.highslide-full-expand {
    background: url(highslide/graphics/fullexpand.gif) no-repeat;
    display: block;
    margin: 0 10px 10px 0;
    width: 34px;
    height: 34px;
}
.highslide-overlay {
    display: none;
}

White outline with rounded corners（角丸ボーダー・ドロップシャドウ）

script 要素（３項の直後に追加）

<script type="text/javascript">    
    hs.graphicsDir = 'highslide/graphics/';
    hs.outlineType = 'rounded-white';
</script>

CSS

.highslide-wrapper div {
    font-family: Verdana, Helvetica;
    font-size: 10pt;
}
.highslide {
    cursor: url(highslide/graphics/zoomin.cur), pointer;
    outline: none;
    text-decoration: none;
}
.highslide-active-anchor img {
    visibility: hidden;
}
.highslide img {
    border: 2px solid gray;
}
.highslide:hover img {
    border: 2px solid white;
}
.highslide-wrapper, .rounded-white {
    background: white;
}
.highslide-image {
    border: 2px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
    display: none;
    border: 2px solid white;
    border-top: none;
    font-family: Verdana, Helvetica;
    font-size: 10pt;
    padding: 5px;
    background-color: white;
}
.highslide-loading {
    display: block;
    color: black;
    font-size: 8pt;
    font-family: sans-serif;
    font-weight: bold;
    text-decoration: none;
    padding: 2px;
    border: 1px solid black;
    background-color: white;
    padding-left: 22px;
    background-image: url(highslide/graphics/loader.white.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;
}
a.highslide-credits,
a.highslide-credits i {
    padding: 2px;
    color: silver;
    text-decoration: none;
    font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
    color: white;
    background-color: gray;
}
a.highslide-full-expand {
    background: url(highslide/graphics/fullexpand.gif) no-repeat;
    display: block;
    margin: 0 10px 10px 0;
    width: 34px;
    height: 34px;
}

Dark design with outer glow（ダーク系・ボーダー・ドロップシャドウ）

script 要素（３項の直後に追加）

<script type="text/javascript">    
    hs.graphicsDir = 'highslide/graphics/';
    hs.outlineType = 'outer-glow';
</script>

CSS

.highslide-wrapper div {
    font-family: Verdana, Helvetica;
    font-size: 10pt;
}
.highslide {
    cursor: url(highslide/graphics/zoomin.cur), pointer;
    outline: none;
    text-decoration: none;
}
.highslide img {
    border: 2px solid gray;
}
.highslide-active-anchor img {
    visibility: hidden;
}
.highslide:hover img {
    border: 2px solid white;
}
.highslide-wrapper, .outer-glow {
    background: #444;
}
.highslide-image {
    border: 5px solid #444444;
}
.highslide-image-blur {
}
.highslide-caption {
    display: none;
    font-family: Verdana, Helvetica;
    font-size: 10pt;
    border: 5px solid #444444;
    border-top: none;
    padding: 5px;
    background-color: gray;
}
.highslide-loading {
    display: block;
    color: white;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    padding: 3px;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    background-color: black;
    padding-left: 22px;
    background-image: url(highslide/graphics/loader.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;
}
a.highslide-credits,
a.highslide-credits i {
    padding: 2px;
    color: silver;
    text-decoration: none;
    font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
    color: white;
    background-color: gray;
}
a.highslide-full-expand {
    background: url(highslide/graphics/fullexpand.gif) no-repeat;
    display: block;
    margin: 0 10px 10px 0;
    width: 34px;
    height: 34px;
}

No graphic outline（アウトラインなし）

script 要素（３項の直後に追加）

<script type="text/javascript">    
    hs.graphicsDir = 'highslide/graphics/';
    hs.outlineType = null;
</script>

CSS

.highslide {
    cursor: url(highslide/graphics/zoomin.cur), pointer;
    outline: none;
    text-decoration: none;
}
.highslide-active-anchor img {
    visibility: hidden;
}
.highslide img {
    border: 2px solid gray;
}
.highslide:hover img {
    border: 2px solid white;
}
.highslide-wrapper {
    background: white;
}
.highslide-image {
    border: 2px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
    display: none;
    border: 2px solid white;
    border-top: none;
    font-family: Verdana, Helvetica;
    font-size: 10pt;
    padding: 5px;
    background-color: white;
}
.highslide-loading {
    display: block;
    color: black;
    font-size: 8pt;
    font-family: sans-serif;
    font-weight: bold;
    text-decoration: none;
    padding: 2px;
    border: 1px solid black;
    background-color: white;
    padding-left: 22px;
    background-image: url(highslide/graphics/loader.white.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;
}
a.highslide-credits,
a.highslide-credits i {
    padding: 2px;
    color: silver;
    text-decoration: none;
    font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
    color: white;
    background-color: gray;
}
a.highslide-full-expand {
    background: url(highslide/graphics/fullexpand.gif) no-repeat;
    display: block;
    margin: 0 10px 10px 0;
    width: 34px;
    height: 34px;
}

７．サンプル

ダウンロードしたアーカイブの中にサンプルファイル（下記）があります。

• example-white-10px.html （White 10px border and drop shadow）
• example-no-border.html （Drop shadow and no border）
• example-white-rounded-outline.html （White outline with rounded corners）
• example-outer-glow.html （Dark design with outer glow）
• example-no-outline.html （No graphic outline）

まずはこれらを一緒にアップロードしてお気に入りの動作・スタイルを探しましょう。同じフォルダにある index.htm、image フォルダも忘れずにアップロードしてください。

アップロードした index.htm にアクセスすると、各サンプルのメニューが表示されます（カッコ内がメニュー名）。
また各 html ファイルをエディタで開けば中に設定方法が書かれています。色々お試しください。

2007.01.24
３項の説明を修正しました。

2007.03.18
５．１項の説明を修正しました。

2007.11.13
５．２項に、1ページに複数のキャプション画像を表示する場合の説明を追加しました。

2008.10.09
HIghSlide 4.0.6 を元にデータを修正しました。また、Movable Type 4 に適用する場合の記述を追加しました。

2010.03.28
説明を一部修正しました。

WordPress 用のテーマ（テンプレート）を作りました。サンプルのスクリーンショットは2カラム（右サイドバー）ですが、左サイドバーも用意しております。レイアウトの変更方法につきましては本エントリー本文を参照ください。

WordPress テーマ（テンプレート）・3カラム版も用意していますのでご利用ください。

１．動作確認環境

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

• OS：Windows2000/XP
• ブラウザ：IE6.0/IE7.0/Firefox 2.0/Opera 9
• WordPress ME：2.0.5～2.0.7（以降のバージョンでもOKのようです）

２．利用規定

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

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

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

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

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

カラムレイアウトは、HTMLテンプレートの body 要素の class 属性を書き換えることで変更することができます。例えば、2カラムの右サイドバーから2カラム（左サイドバー）に変更したい場合は、header.php の

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

の赤色部分を

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

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

以下にそれぞれのレイアウトに対する class 属性値を示します。

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

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

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

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

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

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

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

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

配布時は一番上の2カラム・固定レイアウト（右サイドバー）で配布しております。

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

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

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

を削除してください。

６．XHTML1.0 Transitional valid

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

７．その他

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

８．ダウンロード

下のリンクからテーマ（テンプレート）をダウンロードしてください。

2007.01.17 初版 2007.01.24 コメントエリアの横幅を修正 2007.02.11 クレジットバナーにアンカーを追加 2007.02.11 サイドバーのアンカーのない文字への color プロパティ追加 2007.02.24 リキッドレイアウトのサイドバーの垂直開始位置修正

• ZIP形式
• LZH形式

テーマの設定方法は、ダウンロードしたファイルを解凍し、中にある koikikukan というフォルダを、wp-content/themes 配下にアップロードしてください。そのあと管理画面の [表示] をクリックすると「利用できるテーマ」にアップロードしたテーマが表示されますので、クリックしてください。

2007.02.04 追記
カラムレイアウト変更内容に誤記がありましたので修正しました。

先週末に行う予定のサーバ移転は延期することに致しました。

理由は、昨日エントリーした「HTTP/1.1 の「条件付きGET」を利用して PHP ファイルアクセスによるサーバ負荷を削減する」の対策を行い、また他にもいくつか対処を行ったので、その結果を確認したいためです。

場合によってはこのまましばらく様子を見るかもしれません。また、ちょうど同時期にエントリーされていた、callmel vanilla さんの「レンタルサーバーを乗り換えたい!＋アンケート（特にコメント欄）」が大変勉強になりました。ありがとうございました。

以下、対処内容です。

１．各ページで「条件付きGET」の実行

トップページやアーカイブページ等、全ての PHP ファイルで、冒頭の「条件付きGET」が行えるように変更しました。これでページの更新がない場合は 302 Not Modified を返却するので、サーバ負荷軽減やトラフィックの改善につながると思います。

２．PHP モジュール化の削減

当サイトではサイドバーのメニュー類を PHP によるモジュール化を行っていますが、スタティックな内容のモジュールは PHP モジュール化から MTInclude に変更しました（モジュール化の割合を減らすことでどの程度の改善が見込まれるか不明ですが）。

３．カレンダーの .html 化

現在使用しているカレンダーが、過去に公開した 「PHP スクリプトを利用したリアルタイムカレンダー」、つまり .php ファイルでしたので、JavaScript によるリアルタイムカレンダーに変更し、拡張子を .html に変更することで 302 Not Modified を返却できるようにしました。
ちなみにページ表示時だけでなく、月送りのリンククリック時も、一回表示されたカレンダーの再表示が早くなってます（内容の更新がない限り）。

４．CGI の取り外し

さくらレンタルサーバ標準のアクセスログを参照すると、月別の解析ページに「トップ 10 of xxxxx Total Exit Pages」という項目があります。Movable Type で利用している CGI や自前の CGI が軒並み上位に並んでいます。
その中でもダントツでトップだったカウンタ（前日・本日）をとりあえず外しました。

５．Ajax 化

中央カラムのお知らせや右サイドバーの Amazon や バナー類を Ajax にしました。Ajax 化はサーバ負荷と深い関係はないのですが、これらの情報は HTML ページ後方に記述してあるものを JavaScript で表示位置を変更させてました。が、Firefox で閲覧した時に、 JavaScript をページ後方で動作させていると「すぐにスクロールができない」というコメントがありましたので、このような変更を行いました。

以上です。
これらの変更で、先週まで鬼のように発生していた 503 エラーはかなり減った気がしますが、ゼロにはなっていないようです。
先週までと比較して「あまり変化ない」「良くなった」「ページ表示が速くなった」等のご連絡を頂ければ幸いです。

Movable Type 等で PHP 化や PHP モジュール化によりファイルの拡張子を .php で運用している場合の、サーバ負荷・ネットワークトラフィックを削減する方法をご紹介します。

１．問題点

HTML ファイルの拡張子を .php にしている場合、HTTP/1.1 で規定されている「条件付き GET」が行われません。ブラウザはこのようなサイトに対し無条件に GET を行ってしまうため、サーバ負荷やネットワークトラフィック増加の要因の一つになっています。

２．条件付き GET とは

「条件つき GET」は RFC2616（HTTP/1.1） 9.3 で定義されています。以下和訳を引用します。

RFC2068 9.3 GET（RFC2616は更新版）

GET メソッドは Request-URI で識別される (エンティティの形式においての)情報ならなんでも回収する事を意味する。もし Request-URI が data-producing プロセスを参照しているなら、それはリソースのエンティティとして返されるであろう作られたデータである。これはもしそのテキストがプロセスの出力で生じるのでなければ、プロセスのソーステキストではない。

もし If-Modified-Since, If-Unmodified-Since, If-Match, If-None-Matchや If-Range ヘッダフィールドをリクエストメッセージが含んでいるなら、GET メソッドのセマンティクスは "条件付き GET" に変わる。条件付き GETメソッドはエンティティがその条件付きヘッダフィールドによって表される状況の元でのみ転送される事をリクエストする。条件付き GET メソッドはキャッシュされるエンティティに複数のリクエストを必要としたりクライアントによってすでに保持されたデータを転送する事なしに再び新しくされる事を可能にする事により、ネットワークの不必要な使用を減少する目的を持つ。

要するに、「前回アクセス以降からページの更新が行われていない場合はサーバから改めてデータを送信しない仕組みがある」というようなことが書かれています。

３．条件付き GET の振る舞い

２項の説明だけでは良く分からないので、Firefox 2.0 の Live HTTP Headers で、当サイトのトップページにアクセスした時の HTTP ヘッダを例に、具体的な動作を説明します。

３．１ 条件付きGETなしの場合

GET / HTTP/1.1
Host: www.koikikukan.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; ja; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1
Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
Accept-Language: ja,en-us;q=0.7,en;q=0.3
Accept-Encoding: gzip,deflate
Accept-Charset: Shift_JIS,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Cookie: 略
Cache-Control: max-age=0

リスト3.1.1　リクエストヘッダ（条件付きGETなし）

HTTP/1.x 200 OK
Date: Sun, 14 Jan 2007 14:21:19 GMT
Server: Apache/1.3.37 (Unix)
X-Powered-By: PHP/4.4.4
Keep-Alive: timeout=3, max=8
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: text/html; charset=utf-8

リスト3.1.2　レスポンスヘッダ（条件付きGETなし）

条件付き GET が行われていない状態では、リクエスト・レスポンスは上記のようなヘッダになります。この状態ではアクセスする度に 200 OK を返却、つまりページが更新・未更新に関わらず、サーバは常にデータ（リクエストボディ）を返却します。

３．２ 条件付きGETあり（ブラウザで初回アクセス時）

GET / HTTP/1.1
Host: www.koikikukan.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; ja; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1
Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
Accept-Language: ja,en-us;q=0.7,en;q=0.3
Accept-Encoding: gzip,deflate
Accept-Charset: Shift_JIS,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Cookie: 略
Cache-Control: max-age=0

リスト3.2.1　リクエストヘッダ（条件付きGETあり：初回アクセス）

HTTP/1.x 200 OK
Date: Sun, 14 Jan 2007 14:22:45 GMT
Server: Apache/1.3.37 (Unix)
Etag: "cc8929434ffafd940e5956b71a0be1f5"
X-Powered-By: PHP/4.4.4
Last-Modified: Sun, 14 Jan 2007 14:22:32 GMT
Keep-Alive: timeout=3, max=8
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: text/html; charset=utf-8

リスト3.2.2　レスポンスヘッダ（条件付きGETあり：初回アクセス）

条件付き GET（というか今回のカスタマイズ）が行われている場合、HTTP レスポンスに Etag / Last-Modified フィールドを付与して返却します。Etag は更新時刻などから生成されたハッシュ値、Last-Modified は更新時刻です。
リクエストを送信したブラウザはこの情報をページ単位に保持します（200 OK なのでこの時はリクエストボディも同時に返却します）。

３．３ 条件付き GET あり（2回目以降のアクセス）

GET / HTTP/1.1
Host: www.koikikukan.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; ja; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1
Accept: text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
Accept-Language: ja,en-us;q=0.7,en;q=0.3
Accept-Encoding: gzip,deflate
Accept-Charset: Shift_JIS,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Cookie: 略
If-Modified-Since: Sun, 14 Jan 2007 14:22:32 GMT
If-None-Match: "cc8929434ffafd940e5956b71a0be1f5"
Cache-Control: max-age=0

リスト3.3.1　リクエストヘッダ（条件付きGETあり：2回目以降）

HTTP/1.x 304 OK
Date: Sun, 14 Jan 2007 14:23:07 GMT
Server: Apache/1.3.37 (Unix)
Etag: "cc8929434ffafd940e5956b71a0be1f5"
X-Powered-By: PHP/4.4.4
Last-Modified: Sun, 14 Jan 2007 14:22:32 GMT
Keep-Alive: timeout=3, max=8
Connection: Keep-Alive
Content-Type: text/html; charset=utf-8

リスト3.3.2　レスポンスヘッダ（条件付きGETあり：2回目以降）

2回目以降のアクセスでは、前回アクセスしたレスポンスヘッダに含まれる Etag / Last-Modified フィールドの値を、今回のリクエストヘッダの If-Modified-Since / If-None-Match フィールドに設定して送信します。

リクエストを受信した HTTP/1.1 サーバでは、サーバ自身が保持するページ情報と比較して、ページの更新・未更新を判断します（この辺りは推測で書いてます。間違っていたらすいません）。

「304 Not Modified」はページが更新されていない時に返却するレスポンスコードです（304 にレスポンスボディは含まない仕様です）。304 レスポンスを受信したブラウザはサーバからデータをダウンロードせず、ローカルキャッシュを表示します。

つまり、PHP ファイルで「条件付き GET」を有効にし、304 Not Modified を返却できるようにすれば、結果的にサーバ・ネットワークの負荷を削減することができる、という訳です。

４．対処方法

対処方法は下記のサイトで紹介されています。当サイトでも利用させて頂きました。ありがとうございました。

Ogawa::Memoranda：「条件付きGET」のススメ

上記は Movable Type 利用で

• スタティックページ生成
• ページを PHP モジュール化
• サイドバーの部品を PHP を利用したインクルード

を前提にされています。

ダイナミックパブリッシングを利用している場合はデフォルト機能として、条件付き GET が利用できます（関連記事「Movable Type の再構築を不要にする「ダイナミック・パブリッシング」（その2：設定方法）」）。

５．その他のページについて

該当ページに含まれる外部ファイルは全て HTTP によって取得されますが、

• CSS（.css）
• JavaScript（.js）
• 画像（.jpg / .gif / .png 等）

は HTTP/1.1 サーバで 304 を返却しています。例えば CSS を修正すると、スタイルシートファイルだけが新たに読み込まれます。この仕組みのお陰で、当サイトのように外部ファイルを大量に読み込んでいるページでも、タイムラグの少ない表示ができるという訳です。

６．参考

• [Studying HTTP] HTTP Method
• Rhongomyniad.org：更新日時とETagによる条件付きGET
• Rhongomyniad.org：条件付きGETを導入
• Supporting Conditional GET in PHP
• Movable Type 3.3 マニュアル：ダイナミック・パブリッシング

公開テンプレートの固定レイアウトで、サイドバータイトル部分の背景をカラム幅に合わせて表示する方法ごを紹介します。
本カスタマイズはテンプレート配布のブログをお使いでしたらどれでも（多分）適用可能と思われます。また公開テンプレートでない場合も基本的な考え方は大体同じと思われます。色々試してみてください。

下記のリンクにサンプルを用意しましたので完成例をご覧ください。効果が分かりやすいよう、ブログ左右の背景は白にしています。

• 変更前
• 変更後

１．背景画像を設定する

公開テンプレートでサイドバータイトルをカラム幅に合わせて表示する場合、大きな変更点があります。それは中央カラム両サイドにある罫線を画像を用いて表示することです。

背景画像を用いる目的は、背景画像を用いない場合、中央カラム両サイドの罫線が中央カラムの内容分しか表示されません。
もしサイドバーが中央カラムの長さを超えて表示され、さらにサイドバータイトルが中央カラムの罫線がない位置に表示されると、スクリーンショットのような期待外れの結果になってしまいます。

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

１．１ テンプレートの修正

テンプレートに下記の div 要素を追加し、そこに id 属性 inner を与えてください。

<body class="layout-three-column">
<div id="box">
<div id="inner">
　　　：
   （中略）
　　　：
</div>
</div>
</body>

１．２ 画像のダウンロード・アップロード

下記のリンクを右クリックして[対象をファイルに保存]を選択します。

• 背景画像

ダウンロードした背景画像をトップページのあるディレクトリにアップロードしてください。

この背景画像は当サイトで配布しているテンプレートの3カラム固定レイアウトの幅に大体合わせています。

１．３ スタイルシート修正

スタイルシート後方にある、下記の部分の赤色を削除し、青色を追加してください。

/* タイトルバナー */
#banner {
    padding: 15px;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    color: #999999;
    background: #8fabbe;
/*    background-position: right top;
    background-repeat: no-repeat;
    background-image: url(".gif");*/
    text-align: left;
}
　　　　　：
　　　（かなり略）
　　　　　：
/* 3カラム用 */
body.layout-three-column,
body.layout-two-column-left,
body.layout-two-column-right,
body.layout-one-column {
    margin-bottom: 20px;
    text-align: center;
    background: #8fabbe;
}
　　　　　：
　　　　（略）
　　　　　：
.layout-three-column #box {
    width: 850px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    border-bottom: 1px solid #666699;
    text-align: left;
    background-color: #ffffff;
}
.layout-three-column #inner {
    _height:100%;
    background: url("back.gif") repeat-y top center;
}
　　　　　：
　　　　（略）
　　　　　：
/* 3カラム */
.layout-three-column #content {
    float: left;
    width: 478px;
    width: 476px;
    margin: 0 0 10px 0;
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
}

これで中央カラムに適用した背景画像の罫線が一番下まで表示されればOKです。なお上記のリストは、背景画像（back.gif）がスタイルシートと同じディレクトリにあることを想定しています。また、#inner の _height プロパティがないと、IE6 では背景が最後まで表示されないようです。
下記のリンクに、ここまでの変更が反映されたページのサンプルを示します。

• 背景画像を適用した状態

サンプルのようになっていない状態で作業を続行すると混乱をきたす原因となりますので、必ず同じ状態にしてから次の作業に進んでください。

２．サイドバータイトルの幅を変更する

続いてサイドバータイトルの幅を変更します。変更の目的を説明しながらスタイルシートの変更箇所を表示します。

２．１ 左右サイドバー全体の padding 変更

左右サイドバー全体の width および padding を変更します。

.layout-three-column #links-left-box,
.layout-three-column #links-right-box {
    float: left;
    width: 185px;
    width: 187px;
}
.layout-three-column #links-left,
.layout-three-column #links-right {
    padding: 15px 15px 0 15px;
    padding: 15px 0 20px 0;
    color: #ffffff;
}

width を 2px 増加させるのは、サイドバータイトルの左右の罫線をなくす分（計 2px）を増やしています。また padding はサイドバーの表示領域を制限していますが、左右の padding をなくすことで、サイドバータイトルおよびサイドバーの内容がサイドバー横一杯に広がります。下記の修正を行った時点でページをご覧頂ければお分かりになると思います。

なお、下の padding（20px）はサイドバーの内容が中央カラムより長くなった場合の、一番下の罫線との空白です。これはお好みの値に変更してもらって構いません。

２．２ サイドメニュータイトルの罫線削除

サイドメニュータイトルの border を上下のみに修正します。

/* サイドメニュータイトル */
.sidetitle {
    margin-top: 3px;
    padding: 2px 0 1px;
    _padding: 1px 0 2px;
    border: 1px solid  #666666;
    border-top: 1px solid  #666666;
    border-bottom: 1px solid  #666666;
    text-align: center;
    color: #444444;
    background: #f6f6f6;
    font-size: 10px;
    line-height: 140%;
}

２．３ サイドメニューの位置微調整

サイドメニュー本体の位置を若干修正します。

/* サイドメニュー */
.side {
    margin: 3px 0 20px;
    margin: 10px 15px 20px;
    background: none;
    color: #444444;
    font-size: 10px;
    _font-size: 9px;
    line-height: 150%;
}

お好みに応じて値を変更してください。

３．カレンダーの位置を修正する

上記の .side を修正するとカレンダーの位置に影響が生じます（当方のスタイル設定ミスです、すいません）。カレンダーをそのまま使用されている場合は、

<!-- カレンダー開始 -->
<div class="side">

を

<!-- カレンダー開始 -->
<div class="sideCalendar">

に変更して、

.sideCalendar{
    margin: 0 0 15px 13px;
    _margin: 0 0 15px 5px;
}

をスタイルシートに追加してください。

以上で完成です。

先日「サーバ移転します」でお知らせした通り、可能であればアクセスが若干少なくなる今週末を狙ってサーバを移転したいと思います。

作業状況は、新しいサーバに Movable Type 3.33-ja を新規インストールし、現在使用中のテンプレートを一通り移動し、あとはバックアップのエクスポート＆インポート、そして DNS を切り替える（旧サーバのドメインを削除し、新サーバ側に現在のドメインを設定）だけです。検索結果テンプレートは全く手をつけていない等、完璧ではありません。

「だけ」とはいっても、バックアップファイルサイズは現在 12M あり、試しに新サーバにインストールした Movable Type に読み込ませてみたところ相当時間がかかりました（3.33 新規インストールなので DB のバックアップは利用せず）。

なお、旧ドメインから新ドメインへの DNS 切り替え中（厳密には、バックアップ取得後から新サーバへドメインが切り替わるまで）、コメント・トラックバックは一時的に受け付けを停止しますので、エラーになっても慌てないでください。切り替え直前に頂いたコメント（簡単に回答可能なもの）は新サーバ側で回答致します。
またアクセスされたページがどちらのサーバであるかも、表示しておきます。

以上です。
それではよろしくお願い致します。

公開中の「休日表示付リアルタイムカレンダー for livedoor ブログ」に不具合がありましたのでお知らせ致します。
具体的には、カレンダー表示月が1月の場合、休日や本日表示が正常にできなくなります。

この不具合を修正するには、カスタマイズに用いるスクリプト（リスト1：抜粋）に示した赤色部分、

function setWeekendAndHoliday() {
  var year = 0;
  var month = 0;
  var elements = document.getElementsByTagName("div");
  for (i = 0; i < elements.length; i++) {
    if(elements[i].getAttribute("className") == 'calendarhead' ||
      elements[i].getAttribute("class") == 'calendarhead') {
      var href = elements[i].childNodes[0].getAttribute('href');
      year = href.replace(/^.*(\d\d\d\d)-\d\d.html$/gi, "\$1");
      month = href.replace(/^.*\d\d\d\d-(\d\d).html$/gi, "\$1");
      month = parseInt(month,10) + 1;
      if (month == 1) {year = parseInt(year,10) + 1;}
    }
  }

リスト1　修正箇所（変更前）

をリスト2の青色の内容（計4行）に修正してください。

function setWeekendAndHoliday() {
  var year = 0;
  var month = 0;
  var elements = document.getElementsByTagName("div");
  for (i = 0; i < elements.length; i++) {
    if(elements[i].getAttribute("className") == 'calendarhead' ||
      elements[i].getAttribute("class") == 'calendarhead') {
      var href = elements[i].childNodes[0].getAttribute('href');
      year = href.replace(/^.*(\d\d\d\d)-\d\d.html$/gi, "\$1");
      month = href.replace(/^.*\d\d\d\d-(\d\d).html$/gi, "\$1");
      month = parseInt(month,10) + 1;
      if (month == 13) {
        year = parseInt(year,10) + 1;
        month = 1;
      }
    }
  }

リスト2　修正箇所（変更後）

以上です。
ご迷惑をおかけして申し訳ございませんがよろしくお願い致します。

これまでに使ってみた、Movable Type / Serene Bach / WordPress の比較を行ってみました。評価項目は色々あると思いますがかなり主観的です。その分評価自体に主観的な要素はできるだけ含まないようにしています。
ここでは 3 種類しか取り上げていませんが、どれを利用すれば良いか悩んでいる方の参考になれば幸いです。

Movable Type 以外のツールは実際に運用していないため、実験サイトやウェブの情報をもとにしています。認識誤り等ありましたらご指摘ください。

◎：対応（特に良い）／○：対応／△：一部対応／×：未対応／－：なし

評価項目	Movable Type	Serene Bach	WordPress
データベース	BerkeleyDB MySQL PostgreSQL SQLite	－	MySQL
ページ（アーカイブ）の種類	◎	○	○
テーマ数	未調査
テーマ切替	○ *1	◎	◎
プラグイン数	◎	○	◎
アクセス制限	×	×	◎ *2
ページ分割	○ *3	○	○
カテゴリーリスト並べ替え	○ *4	◎	△ *5
プロフィールページ作成	○ *6	○	○
その他のページ作成	○	×	○
ページ静的生成	○ *7	○ *8	× *9
ページ動的生成	○ *7 *10	○ *8	○
動的生成時のキャッシュ	○	×	○ *11
データのインポート カッコはフォーマット数	○（1）	○（3）	◎（6） *12
データのエクスポート カッコはフォーマット数	○（1）	○（2） *13	○ *14
複数ユーザ対応	◎	○	◎ *15
複数ブログ対応	◎ *16	○ *17	○ *18

*1：デフォルトプラグイン（StyleCatcher）利用。ただし CSS が入れ替えられない制限あり
*2：記事単位に制御可能
*3：プラグイン（MTPaginate）利用
*4：プラグイン利用（参考記事）
*5：テンプレートタグで「カテゴリーID順」「カテゴリー名順」選択可
*6：テンプレート作成要
*7：テンプレート単位に静的・動的の設定が可能
*8：トップページとRSSが静的生成。他、個別記事・月別アーカイブは選択で静的生成可。カスタマイズで全ページ動的生成も可。
*9：プラグインで可能？（http://bmky.net/product/script/petit.html）
*10：デフォルトは PHP 版。Perl 版プラグインもあり
*11：プラグイン（WP-Cache）利用
*12：重複書き込みされない
*13：月またはカテゴリー指定が可能
*14：デフォルトプラグイン（WordPress Database Backup）利用
*15：プラグイン（Role Manager）利用でさらに詳細設定可能
*16：1インストールで複数ブログ作成可（上限はライセンスに依存）。またプラグイン（Global Listings）利用でブログを跨った情報表示可。
*17：ブログ単位にインストールすれば同一サーバで利用可
*18：ブログ単位にインストールし、データベースの接頭辞を変更すれば同一サーバで利用可

以下、除外した評価項目について一言（主観です）。

「インストール」は、「簡単さ」という観点では Serene Bach が1番（DB の設定が不要であるため）。2番目は感覚的に WordPress ですが、Movable Type はインストールウィザードを利用（「Movable Type インストール方法」参照）すれば、WordPress との差はそれほどないと思います。

「テンプレートタグ」は粒度、つまりどれだけきめ細かい情報をユーザが自由に設定できるか、という観点では、Movable Type が 1 番で、Serene Bach と WordPress は粒度が似ています。
Movable Type はタグ（変数タグ）と情報が 1:1 でマッピングされているので、設定が面倒な分、フォーマットの自由度は高いです。Serene Bach や WordPress は、タグと情報が 1:n でマッピングされている場合があります。例えばリスト類はひとつ（あるいは少ない）タグで表示することが可能な反面、フォーマットに制限があります。
したがって「設定の簡単さ」という観点では順位は入れ替わります。

「パフォーマンス」は記事数やテンプレートに含まれる情報量、またサーバのパフォーマンスやページビュー等に依存します。
記事数が 1000 を超え、そこそこのアクセスがあれば、どのツールもプログラム起動が伴う処理においては、サーバに相応の負荷がかかります（「エラーが出る」という意味ではありません）。静的生成をすれば再構築処理に負荷がかかりますし、動的生成ではページビューで負荷がかかります。それぞれのツール（サーバ環境含む）の最適化を行ってもエラーが解消しない場合、最終的にはパフォーマンスの高いサーバ、あるいはプランを選択せざるを得ない、というのが現在の個人的な見解です。
ちなみに、よく話題にあがる Movable Type の再構築エラー（500 エラー）は当サイトでは今のところ発生しておりません（さくらのレンタルサーバ+スタンダードプラン）。

ただし、全く同じ条件で同じ情報量を流し込んだ場合、エラーが発生する臨界点はツールによって異なると思います。

WordPress 版「休日表示付きリアルタイムカレンダー」を紹介致します。
このカスタマイズは、Movable Type 等で提供中の JavaScript による「休日表示付きリアルタイムカレンダー」を WordPress 用にアレンジしたものです。WordPress は PHP で書かれているので、PHP で制御するという手もありましたが、サーバへの負荷を考慮し、JavaScript 版にしています。

このカスタマイズは、テーマ内でテンプレートタグ

<?php get_calendar(); ?>

リスト1　テンプレートタグ

によるカレンダー表示をしている場合に有効です。

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

下記のいずれかのリンクをクリックし、プラグインアーカイブをダウンロードしてください。

realtime-calendar.zip

修正履歴

2007.11.05 v1.2 11月のカレンダーで土日休日が正常に表示されない不具合を修正

2007.12.13 v1.3 link 要素、script 要素のプラグインパスを修正

2009.04.19 v1.6 シルバーウィーク対応

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

ダウンロードしたアーカイブを解凍し、realtime_calendar フォルダごと、wp-content/plugins 配下にアップロードしてください。アップロード後、リスト 2 のようなディレクトリ・ファイル構成になっていればOKです。

wp-content/
　　　plugins/
　　　　　realtime-calendar/
　　　　　　　　　　dayChecker.js
　　　　　　　　　　realtime-calendar.php
　　　　　　　　　　calendar.css

リスト2　ディレクトリ・ファイル構成

３．プラグインを有効にする

WordPress の管理画面より「Realtime Calendar」の有効化のリンクをクリックします。

以上です。
なお、カレンダー先頭の「xxxx年xx月」という表示より当月を割り出していますので、この部分の表示が異なっていると正常に動作しません（=多言語対応はしていません）。

その他、プラグインに不具合等ございましたらご連絡ください。

2007.07.11
JavaScript で動作に必要な関数が欠落していましたので修正しました。

2007.12.13
プラグインファイルに含まれるプラグインのパスを修正しました。

以前、クールに画像を表示するツール Litebox 1.0 をご紹介しました。この Litebox を起動するためには、a 要素の rel 属性に "lightbox" を付与しなければならないという条件があり、これを手動で付与するのは結構面倒です。

ということで「自動付与できないでしょうか」というご質問を頂きました。大変遅くなりましたが、rel 属性を自動付与する方法を本エントリーにてご紹介致します。

rel 属性を自動付与するには、Litebox 1.0 のパッケージ内にある、js/litebox-1.0.js を任意のエディタで開き、130 行目辺り（リスト 1）に青色のコードを追加します。

　　　　　：
// loop through all anchor tags
for (var i=0; i<anchors.length; i++){
    var anchor = anchors[i];
    if (anchor.getAttribute('href') && anchor.getAttribute('href').match(/jpg$|gif$|png$/) && !anchor.getAttribute('rel')) {
        anchor.setAttribute('rel', 'lightbox');
    }
    var relAttribute = String(anchor.getAttribute('rel'));
    
    // use the string.match() method to catch 'lightbox' references in the rel attribute
    if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
        anchor.onclick = function () {myLightbox.start(this); return false;}
    }
}
　　　　　：

リスト1　litebox-10.js 変更箇所

この変更は、ページ内にある a 属性に rel="lightbox" を付与します。ただし、rel 属性が予め設定されている場合は処理を行ないません。したがって画像をグループ表示する場合は手動で rel 属性を付与すれば、お互いの処理が干渉しません。

ただしページ全体の a 要素をチェックするため、サイドバー等の予期しない箇所に Litebox が設定される可能性があります。記事本文内だけにとどめたい場合は、122行目辺りの処理（リスト2）

　　　　　：
initialize: function() {
    if (!document.getElementsByTagName){ return; }
    var anchors = document.getElementsByTagName('a');
　　　　　：

リスト2　litebox-10.js 変更箇所2（変更前）

を、リスト3のように青色部分を追加すると良いでしょう。

　　　　　：
initialize: function() {
    if (!document.getElementsByTagName){ return; }
    var anchors = document.getElementById('content').getElementsByTagName('a');
　　　　　：

リスト3　litebox-10.js 変更箇所2（変更後）

赤色の content は、記事部分全体を括っている div 要素の id 属性を設定しています。

また、前バージョンの Lightbox JS でも「Lightbox JS の rel 属性を自動付与する」という記事を挙げてますので、参考になれば幸いです。

2007.03.01 追記
スクリプトでエラーチェックができていなかったので修正しました。

当サイトで利用しているレンタルサーバは「さくらのレンタルサーバ」ですが、近日中に移転、というかプラン変更します。プランは、現在利用中の「スタンダード」から「プレミアム」になります。他のレンタルサーバを探すという手もありましたが、価格（1500円/月）と容量（3GB）に加え、telnet/SSH が使える環境ということでプラン変更にしました。

移転の理由は、昨年後半より多発し始めた 503 エラー解消のためです（下は関連記事）。

• サーバ不具合について
• サーバ不具合について（その後）

503 はサーバの負荷が高い場合に HTTP リクエストを一時的に受け付けられなくするというエラーです。
一時解消したように思われましたが、その後も間欠的に発生する状態が続いています。ページ閲覧で 503 エラーに遭遇される方も少なくないと思います。
で、これを解消するにはサーバを移転するしかないと判断しました。

プレミアムプランは年初めに契約済で、1 サーバあたりのユーザ数は 30 ユーザ前後です。telnet で自分のサーバにログインして確認すると、利用中の「スタンダードプラン」は、1 サーバに 100 ユーザが共有していることが分かります。さくら非公式 FAQ では、ライトプランは 300 ユーザであることも分かります。

下記にさくらのレンタルサーバで提供されているアクセスログからの、2006年2月から12月の月別の全ヒット数・転送量・503エラー数をまとめてみました（利用開始は2005年12月中旬）。
「全ヒット数」というのはブラウザからのページビューではなく、ページ内に記述された「http://～（外部ファイルとしている CSSや JavaScript 、画像等）」がすべてカウントされていると思われます。

2006年2-12月のアクセスと 503 エラー

月	全ヒット数	全KByte数	503エラー
2月	7192763	118242602	115
3月	8621547	126672372	620
4月	9105343	125960436	165
5月	9271022	132107925	2699
6月	9394583	127333283	69017
7月	9070111	96843197	20244
8月	8222717	88949690	22943
9月	7751255	94971213	21811
10月	7481400	99800354	31330
11月	8932872	115270783	53432
12月	8401269	121587596	62590

ご覧の通り、6月から 503 エラーが激増しました。5月までは、全 KByte 数と 503 エラーには関連がないように見えますが、6月以降はなんとなく比例しているような気が。

上の表とは別に、個人的にはプログラム負荷が多分に影響しているのではないかと推測します。

Windows 2000 で USB メモリ等の外付けデバイスを取り外す時、タスクバーに表示された「安全な取り外し」をクリックし、デバイスの停止をするという手順を踏まなければなりませんでした（それを行わずにデバイスを抜くと、システムの動作がおかしくなります）。

そういう訳で XP でも同じ手順を踏んでいたのですが、XP はドライブ単位に「クイック削除」という、「安全な取り外し」をクリックする作業を省略できる機能が追加されているみたいで、デフォルトが「クイック削除」の設定になっているようです。

注：外付けデバイスにインストールしたアプリケーションを実行している状態で外すと、PCが重くなったりフリーズする可能性があります。どの状態で安全に外せるかは、事前に「安全な取り外し」でご確認ください。

どちらの設定になっているかを確認するには、外付けデバイスを挿入した状態で下記の操作を実行しましょう。

具体的には、「マイコンピュータ」を右クリックして「管理」を選択。

「コンピュータの管理」画面が開くので、左側ペインにあるツリーの「記憶域」配下にある「ディスクの管理」をクリック。

右ペインに表示される該当デバイスの「ディスクx」の部分を右クリックして「プロパティ」を選択。

表示されたダイアログの「ポリシー」タブをクリック。

「クイック削除のために最適化する」のラジオボタンが選択状態になっていれば、タスクバーの「安全な取り外し」をクリックする必要はありません。

---

このエントリーは「XPで外付けデバイスを簡単に取り外す方法」の認識が誤っていたのでその修正と、スクリーンショットを加えてリファクタリングしたものです。

2007.03.06 追記
注意事項を追加しました。

YouTube で公開されている、ブログ等へ貼り付ける Embed タグには embed 要素が含まれています。この embed 要素は XHTML では定義されていないため、このタグを貼り付けると XHTML valid なページになりません。

2009.08.13 変換ツール作りました。下記のリンクからどうぞ。
Youtube の貼り付け用 HTML を valid にするスクリプト

ということで、下記のサイトを参考にタグを修正してみました。

cyano：FlashをXHTMLで表示させるには（embedタグを使わずに表示させるには）

変更前（赤色を削除）

<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/gMHQ2a9VTyo"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/gMHQ2a9VTyo" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object>

変更後（青色を追加）

<object data="http://www.youtube.com/v/gMHQ2a9VTyo" type="application/x-shockwave-flash" width="425" height="350"><param name="movie" value="http://www.youtube.com/v/gMHQ2a9VTyo" /><param name="wmode" value="transparent" /></object>

変更点は下記の通りです。

• object 要素に data 属性を追加し、属性値に embed 要素の src 属性値を記述
• object 要素に type 属性を追加し、属性値に embed 要素の type 属性値（application/x-shockwave-flash）を記述
• param 要素の終了タグを削除し、開始タグを空要素タグ（末尾に " /" を付与）に変更

と、調べきったところでネットを検索したら既出でありました。

• YouTube の Embed タグを Valid にするにはどう改変すればいいですか？
• Bernie Zimmermann：Embedding YouTube Videos as Valid XHTML 1.0

ともあれ、これで XHTML valid になります。data 属性値にはファイル名が設定されているサンプルはよくみかけますが、仕様上、URI を設定するのは適正なようです。*1

書き換えが面倒な方は、下記の「YouTubeの動画埋め込みタグをValidにするツール」をご利用ください。

YouTube -> Valid

2007.03.14 追記
YouTube -> Valid を追記しました。

---

*1：XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition) 等

以前はてなブックマークで人気のあった「Web2.0 Logo Creator by Alex P」を使ってみようと思ってアクセスしたみたところ、404 エラーに。Google で検索しても、同じ URL が紹介されたサイトばかりヒットするので「サービス終了か？」と思いましたが、新しい URL がみつかりました。

ということで下記に掲載しておきます。

• 旧：http://msig.info/web2.php
• 新：http://h-master.net/web2.0/
• 新：http://creatr.cc/creatr/

こういう場合、はてなブックマーク数はどのように変化するのでしょうか（2007.01.02 時点で旧：667／新：11）。

覚え書きで利用方法も掲載しておきます。既出ですが、配布元の FAQ にある、異なる色およびグラデーションにする方法も記しておきます。

１．ロゴを生成する

下記を設定して Generate ボタンをクリックします。

• Text to make Web 2.0：ロゴにしたいテキスト（半角）を入力
• Add Reflection?：移り込みの有無を選択
• Add BETA tag?：「BETA」バッジの表示有無を選択

生成された Image Link / HTML Code / BB Code のいずれかをマウスコピーして利用します。

完成例：

２．特定のテキストの配色を変更する

「Text to make Web 2.0」に青色のフォーマットを追加した形で設定します。

[c=配色]テキスト[/c]

例：「text!」という文字列を ff0000（赤）にする場合

[c=ff0000]text![/c]

完成例：

３．特定のテキストにグラデーションを与える

「Text to make Web 2.0」に青色のフォーマットを追加した形で設定します。

[c=配色]テキスト[/c=配色]

例：「text!」という文字列を ff0000（赤）から 0000ff（青）のグラデーションを与える場合

[c=ff0000]text![/c=0000ff]

完成例：

上記を組み合わせればさらにカラフルなロゴが出来上がります。

2009.02.15
URLを変更しました。

Serene Bach ver 2.09R がリリースされました。当サイトのテンプレートも問題なく動作する模様です。

Serene Bach ver 2.09R

Serene Bach 2.09Rでは、2.05Rから主に以下の仕様が変更になりました。

• スパムコメント・トラックバック対応強化
• コメント拒否時のヘッダ出力を変更するように
• 時刻表記設定に html タグを利用できるように
• 時刻表記設定のセットにカスタム設定を追加できるように
• コメント・トラックバックの受付設定を記事リストから変更できるように
• データ読み込み・書き込みルーチンを若干変更
• カテゴリーの保存先・カテゴリーインデックスを保存形式に関わりなく選択できるように
• カテゴリーインデックスの保存先が重複している場合、警告メッセージを表示するように
• sb::Data / sb::App ロード処理を若干変更
• {amazon_htmlcomment} を追加

また「Serene Bach 2.08D以前のバージョンには、クロスサイトスクリプティングの脆弱性が存在します。Serene Bach 2.09Rをご利用頂くことを強く推奨いたします」とのことです。
1.19R も同時にリリースされています。

自宅サーバにインストールして、にテンプレートをインポートしようとしたら、ログイン画面に戻るという事象が発生しましたが、これはセキュリティソフト（私の場合 Norton Internet Security）を無効にすれば問題ありませんでした。覚え書きということで。

あけましておめでとうございます。本年もどうぞよろしくお願い致します。

すでにお気づきの方もいらっしゃると思いますが、以前からやってみたかったサイドメニュータイトル部分の背景画像を変更しました。具体的には、これまで滑らかなグラデーションをあしらった画像から、濃淡がはっきり分かれたグラデーションの画像になっています（作り方はまた改めて）。またタイトル全体の上下幅をやや広げました。
ナビゲーションバーにも同じ背景画像を使ったところ、タイトルバナーとのバランスがちょっと悪くなったので、いずれどちらかを修正します。

また、左サイドバーの「Introduction」「Recent Entries」に表示されていたリストマークも、黒丸の画像から矢印に変更し、リストにわずかながら幅をもたせました。この画像は stylegala.com：Bullet Madness から拝借致しました。月送りカレンダーの前月・次月のリンクも変更しています（クロスブラウザになっていないかも）。

部分的ながら Web2.0 っぽい雰囲気が出てきた気がします。が、全体的な雰囲気は変わってないので、他も手を加えながらイメージを少しずつ変えていきたいと思います。