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

「Movable Type テンプレート（XHTML 1.0 Strict 版）」をご利用の方で、サイドメニューの折りたたみやツリー化等、過去のカスタマイズ記事を適用される場合の注意事項です。

XHTML 1.0 Strict 版では、サイドバーのマークアップに定義リスト（di / dt/ dd）を用いています。マークアップは、おおざっぱには次のようになっています。

<dl id="links-left">
<dt class="sidetitle">メニュータイトルA</dt>
<dd class="side">
    <ul>
        <li>メニューリストA1</li>
        <li>メニューリストA2</li>
　　　　　　　　：
        <li>メニューリストAn</li>
    </ul>
</dd>
 
<dt class="sidetitle">メニュータイトルB</dt>
<dd class="side">
    <ul>
        <li>メニューリストB1</li>
        <li>メニューリストB2</li>
　　　　　　　　：
        <li>メニューリストBn</li>
    </ul>
</dd>
　　：
</dl>

例えば、「サイドメニューの折りたたみ」で用いているマークアップは div を用いた、次のようなマークアップになっています。また、script 要素も存在します。

<div class="sidetitle">メニュータイトルA</div>
<div class="side">
    <ul>
        <li>メニューリストA1</li>
        <li>メニューリストA2</li>
　　　　　　　　：
        <li>メニューリストAn</li>
    </ul>
</div>
 
<script type="text/javascript">
<!--
FoldNavigtion(…);
//-->
</script>

dl の子要素として許容されているのは、dt / dd だけなので、「サイドメニューの折りたたみ」のサンプルマークアップをそのまま XHTML 1.0 Strict 版に埋め込んでしまうと、

<dl id="links-left">
<div class="sidetitle">メニュータイトルA</div>
<div class="side">
    <ul>
        <li>メニューリストA1</li>
        <li>メニューリストA2</li>
　　　　　　　　：
        <li>メニューリストAn</li>
    </ul>
</div>
 
<script type="text/javascript">
<!--
FoldNavigtion(…);
//-->
</script>
　　：
</dl>

という風になり、

• dl 要素の子要素に div 要素は許容されない
• dl 要素の子要素に script 要素は許容されない

といったエラーが発生し、結果的に valid な（X）HTML になりません。

このような誤ったマークアップにならないよう、

• div 要素は dt / dd 要素に修正
• script 要素は body 終了タグの直前に移動（どうしてもマークアップの近くに配置したい場合は script 要素を dd 要素で括ってください）

等の書き換えを適宜行ってください。

また、昨日の「Ajax によるモジュール化」では、３項の「テンプレートの内容」、

<div class="sidetitle">
Recent Entries
</div>
 
<div class="side">
<MTEntries lastn="10">
<a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a><br />
</MTEntries>
</div>

を、静的な表示部分（赤色）を削除して

<MTEntries lastn="10">
<a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a><br />
</MTEntries>

に変更し、４項の

<div id="entries"></div>
<script type="text/javascript">
//<![CDATA[
getFile('<$MTBlogURL$>recentEntries.html', 'entries');
//]]>
</script>

に先程削除したマークアップを追加し、要素名を追加・変更して、

<dt class="sidetitle">
Recent Entries
</dt>
 
<dd id="entries"></dd>
<dd>
<script type="text/javascript">
//<![CDATA[
getFile('<$MTBlogURL$>recentEntries.html', 'entries');
//]]>
</script>
</dd>

に変更すると良いでしょう。
ただし、先程と同様、script 要素は dd で括るよりも、body 終了タグの直前に移動した方が良いでしょう。

いずれにしても、カスタマイズを行った後は下記のツールを利用して、適切なマークアップになっていることを確認しましょう。

• The W3C Markup Validation Service
• Another HTML-lint gateway
• XHTML タグ一覧表示ツール

Movable Type のサイドバーの各リストを、Ajax でモジュール化を行う方法を紹介します。

１．PHP モジュール化と Ajax モジュール化の違い

Movable Type における PHP モジュール化には次のようなメリットがあります。

1. 再構築時間の削減
2. アーカイブに依存しないリストの生成（今回はここに言及しません）

ただし PHP モジュール化は、ユーザがブラウザからインクルード元のページにアクセスした時、インクルード元のページはインクルード先の各モジュールを読み込んだコンテンツを生成・返却するため、サイドバーに多くの情報をインクルードしていると、PHP でページを生成する分、表示が遅延します。

本題とはそれますが、WordPress で表示までに若干のタイムラグが生じるのは、この PHP によるページ生成が行われるためです（キャッシュや条件付きGETが機能していればこの限りではありません）。

Ajax モジュール化を利用すれば、サイドバーの情報は非同期で表示させられるので、ユーザはページをストレスなく閲覧することが可能になります。
再構築時間は PHPモジュール化と同じ効果があります。

ただし内部リンク等がインクルード元のページに表れないため、SEO という観点では注意が必要かもしれません。

当サイトでは、数ヶ月前からサイドバーやメインページ上部にある多くのリストを Ajax モジュール化しており、安定して表示されることが確認できたので、本エントリーにて設定方法を説明します。
また、Ajax と JavaScript の併用や関連テクニックについても分かる範囲で解説しています。

以下、当サイトの配布テンプレートをサンプルに、「最近のエントリー」の Ajax モジュール化を例にします。

２．prototype.js のダウンロード・アップロード

Prototype JavaScript Framework

上記のサイトにある Download the latest version のリンクをクリックし、アーカイブをダウンロードします。アーカイブを解凍して、dist フォルダの中にある prototype.js を使用します（他は使いません）。
prototype.js は index.html と同じディレクトリにアップロードしてください。

３．モジュールの作成

MT3.3x の場合、[テンプレート] - [テンプレートを新規作成] で、「最近のエントリー」用のテンプレートを作成。各項目には下記を設定。

テンプレート名：最近のエントリーAjaxモジュール（名前は何でもいいです）

出力ファイル名：recentEntries.html

このテンプレートにリンクするファイル：（設定不要）

再構築オプション：チェックする

テンプレートの内容：下記

<div class="sidetitle">
Recent Entries
</div>
 
<div class="side">
<MTEntries lastn="10">
<a href="<$MTEntryPermalink$>" title="e<$MTEntryID$>"><$MTEntryTitle$></a><br />
</MTEntries>
</div>

４．テンプレートの修正

インデックステンプレートや各アーカイブテンプレートで「最近のエントリー」を表示させているタグを、下記に置き換えます。

<div id="entries"></div>
<script type="text/javascript">
//<![CDATA[
getFile('<MTBlogURL>recentEntries.html', 'entries');
//]]>
</script>

getFile のパラメータには、Ajax で取得したいファイル名（３項のファイル名）と、その id 属性（上記リストの1行目の div の id 属性に設定した属性値）を設定してください。

５．JavaScript の追加

下記のスクリプトを外部ファイル（例えば ajaxUtil.js ）として保存し、index.html と同じディレクトリにアップロードしてください。

function getFile(url, id) {
    url = url + "?" + Math.random();
    new Ajax.Updater({success: id},
                     url, {
                         method: 'get',
                         onComplete: end,
                         onFailure: error
                     });
    return false;
}

getFile の中で prototype.js の Ajax.Updater を呼び出しています。

prototype.js は Ajax.Request が一般的ですが、取得したデータの表示位置をダイナミックに振り分けることができません。Ajax.Updater を用いれば関数起動時に id 属性（=取得データの表示位置）を指定できるので、複数のリストをこのスクリプトひとつで賄うことができます。

Ajax.Updater の解説は下記に詳しく書かれています。

IT戦記：prototype.js 1.4rc4 Part.3

６．script 要素の追加

３のスクリプトを読み込むため、テンプレートに script 要素を </head> の直前に追加。

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

７．モジュールの内容を常に更新する

prototype.js + IE では、モジュールの内容が更新されても、インクルード元のページの更新では最新の内容が反映されない事象が発生します。
その対策として、URL にランダムなクエリーを与えることで（下記）、モジュールの内容を毎回更新するようにしています。

url = url + "?" + Math.random();

参考ページを失念してしまったので、これにつきましては分かり次第掲載します。また他のライブラリであればOKとか、エレガントな実装等、さらに良い方法がありましたらご教示ください。

８．JavaScript を利用する場合のテクニック

「サイドメニューの折りたたみ」や「ツリー化」、あるいは「新着表示」等、リストに対して JavaScript を適用させたい場合、起動用の script 要素の挿入位置に気をつける必要があります。

下は４項のリストに折りたたみのスクリプト（青色）を埋め込んだ失敗例です。

<div id="entries"></div>
<script type="text/javascript">
//<![CDATA[
getFile('recentEntries.html', 'entries');
FoldNavigation('newentry','on',false);
//]]>
</script>

このようにインクルード元にインクルード先を制御するスクリプト（この例では FoldNavigation）を記述しても、 スクリプトが実行されるタイミングでは該当のリストが存在しない（=非同期で取得される）ためエラーになります。
モジュール自体にスクリプトを埋め込んだ場合も、正常に動作しないようです。

これを解決するには、Ajax でモジュールが取得された後にスクリプトを実行するようにします。例えば５項の ajaxUtil.js に下記の関数を追加します。

function end(req) {
  if(req.responseText.match(/id="newentryname"/)){
    FoldNavigation('newentry','on',false);
    return;
  }
}

これは５項の onComplete で起動される関数です。当サイトで公開している Ajax 月送りカレンダーもこの方法で休日表示のスクリプトを起動しています。

2007.08.20
３項に再構築オプションの設定の説明を追加しました。

このエントリーは、先日エントリーした「400万アクセス特別企画」で見事キリ番をゲットされた方のサイト紹介です。

サイト名は「院長室」。当サイトのテンプレートユーザさんで、今回2回目のキリ番ゲットです。管理者は oyaji さん。福岡県の片田舎で細々と医業を営んでいらっしゃるそうです。

上の、ブログとは程遠いように思われるスクリーンショットは、サイトのトップページに表示されている、レトロな雰囲気を醸し出した「グローバルナビゲーション（Flash）」です。黒板を模したナビゲーション右側にある立方体がアーカイブへのリンクになっていて、その下にある矢印をクリックするとメニューが切り替わります。

また黒板上の文字のいくつかもリンクになっていて、探しながら隠された情報を見つけ出すという、かなり凝った構造になっています。色々試してみてください。右側のカレンダーのアイデアは秀逸です。

コンテンツの方は、当サイトのダジャレカテゴリーに負けず劣らずのダジャレフリークです。違うのは、私のように突然何の脈絡もなく追記のくだらない数文字で1エントリーを終えるという、ネタ切れ時のコストパフォーマンスを狙ったものではなく、各エントリーにそれぞれしっかりとしたコンテンツがあり、その内容に絡めたジョークで締めくくられているという知的なものです。

ダジャレ好きな方は RSS 購読されることをお勧めします。

さて、キリ番のサイト紹介では、送って頂いたキリ番画像を公開したことがなかったのですが、今回は掲載してみることにしました。
ここまで揃っていると壮観です。

Web2.0 の波に押されて、こういった Web1.0 カウンターの類は少なくなりつつありますが、個人的には日々のアクセスが一目で分かることと、「キリ番」という、ランキングやブックマーク数にない楽しみもあるので、おそらくこのまま設置され続けることでしょう。

カテゴリー・アーカイブに表示されたカテゴリーリストで、該当カテゴリーのエントリーのみを表示するカスタマイズです。
ご質問を頂きましたので本エントリーにて紹介致します。

以下のサンプルの（X）HTMLは、当サイトの「XHTML 1.0 Strict 版テンプレート」をもとにしたマークアップですので、それ以外の配布テンプレートをご利用の場合は、dt / dd をそれぞれ div に直してください。

また、本カスタマイズは MT4 でも利用可能ですが、MT4 版は別エントリーで投稿したいと思います。

１．PHP 版

カテゴリー・アーカイブテンプレートの任意の位置に、下記のカテゴリーリストを設定してください。
ブログがPHP化されていることが前提です。

<MTIfArchiveTypeEnabled archive_type="Category">
<dt class="sidetitle">
Categories
</dt>
 
<dd class="side">
<?php $category = '<$MTCategoryLabel encode_php="1"$>'; ?>
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><$MTCategoryLabel$></a> [<$MTCategoryCount$>]
<?php if ($category == '<$MTCategoryLabel encode_php="1"$>') { ?>
<ul><MTEntries><li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li></MTEntries></ul>
<?php } ?>
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</dd>
</MTIfArchiveTypeEnabled>

２．JavaScript 版

１項と同様、カテゴリー・アーカイブテンプレートの任意の位置に、下記のカテゴリーリストを設定してください。

<MTIfArchiveTypeEnabled archive_type="Category">
<dt class="sidetitle">
Categories
</dt>
 
<dd class="side">
<script type="text/javascript">
//<![CDATA[
var category = '<$MTCategoryLabel encode_js="1"$>';
//]]>
</script>
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><$MTCategoryLabel$></a> [<$MTCategoryCount$>]
<script type="text/javascript">
//<![CDATA[
if (category == '<$MTCategoryLabel encode_js="1"$>') {
document.write('<ul><MTEntries><li><a href="<$MTEntryPermalink$>"><$MTEntryTitle encode_js="1"$></a></li></MTEntries></ul>');
}
//]]>
</script>
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</dd>
</MTIfArchiveTypeEnabled>

サンフランシスコ一帯の停電によってサーバーがダウンしていたそうで、週一ペースのリリースが遅れていたベータ版ですが、「リリース候補版」として公開されました。

Movable Type 4 最初のリリース候補版を公開

これまでお寄せいただいたたくさんのフィードバックから見つかった不具合等の修正状況は、Movable Type 4.0 Beta Change Log にお礼とともに掲載させていただいています (email アドレスのアカウント名の部分などで掲載させていただいています)。これからベータ版を利用する方も Change Log をぜひチェックしてみてください。

この版では、インストール時のログイン・パスワード設定画面で「表示する名前」の項目が追加されています。

またインストール実行時のDBテーブル作成画面はスクロールに戻されています。

再構築とブログ表示のアイコンも変更されています。

他、多くのバグが改修されているようです。

Movable Type や WordPress などのブログデザイン（テンプレート）を簡単に作成することができる、WYSIWYG型オンラインデザインツール「CSSEZ」を紹介します。

作成者の方よりメールを頂きまして、早速操作してみました。なかなかのスグレモノです。
以下、操作を踏まえながらツールの特長を説明します。

CSSEZにアクセスして、「作成スタート」をクリック（IE6以外で起動してください）。

デザインが全面に表示され、左側に設定メニューが表示されます。以降、この設定メニューだけでデザインを作成することができ、編集はAjaxによりリアルタイムに画面に反映されます。

設定画面からマウスアウトすれば設定メニューは非表示になり、左下のバッジ（下）にマウスをポイントすると表示されます。

メニューはタブで大きく3つに分かれています。下は「レイアウト」メニュー。カラムレイアウトは1カラムから4カラムまで、組み合わせは合計100種類。また、サイドバーのリストとナビゲーションバーのメニュー用にそれぞれ23種類ずつのテンプレートが用意されており、ワンクリックでデザインに適用できます。

「詳細」メニュー。上部タブで配色やフォント等の全体的な設定、右側のタブでパーツ別にカラム幅や余白を設定できます。
背景画像の設定では、画像をローカルからアップロードできるだけでなく、背景画像メーカーを利用してストライプとグラデーションを組み合わせた背景画像をその場で作成することも可能です。

設定が完了したら「保存とダウンロード」タブでダウンロード。
作成したデザインを他人に公開することができ、そのデザインに自分のサイトへのリンクを挿入することができます（無料ユーザー登録が必要）。他のユーザーは公開されたデザインをダウンロードできるだけでなく、それを素材にして新たなデザインを作成することもできます。今後はAPIなども提供していく予定のようです。

テンプレートの形式は、一般サイト向けのサンプル形式の他、Movalbe Type（TypePad）/WordPress/FC2ブログ/livedoorブログが選択できます。近日中にJUGEM、ロリポブログ、Seesaa ブログ、ヤプログ、エキサイトブログ、Blogger に対応予定です。

試しに Movable Type 形式でダウンロードしてみたところ、インデックステンプレートはもちろん、アーカイブテンプレート・システムテンプレートまで全て揃っています。

Movable Type のカテゴリーリストにエントリータイトルを表示するカスタマイズです。

オーソドックスなカスタマイズですが、MT をブログとして用いるのではなく、投稿するエントリー数がある程度決まっていて、それらを更新するというスタイルで使う場合、カテゴリーリストをメニューリストとして代用することができ、非常に有効な方法です。

１．デフォルトテンプレートの場合

カテゴリーリストに青色の部分を追加してください。

<MTIfArchiveTypeEnabled archive_type="Category"><div class="module-categories module">
   <h2 class="module-header">カテゴリー</h2>
   <div class="module-content">
   <MTTopLevelCategories>
   <MTSubCatIsFirst><ul class="module-list"></MTSubCatIsFirst>
      <MTIfNonZero tag="MTCategoryCount">
      <li class="module-list-item"><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a>
        <ul class="module-list"><MTEntries><li class="module-list-item"><a href="<$MTEntryPermalink$>"><$MTEntryTitle encode_html="1"$></a></li></MTEntries></ul>
      <MTElse>
      <li class="module-list-item"><MTCategoryLabel>
      </MTElse>
      </MTIfNonZero>
         <MTSubCatsRecurse>
      </li>
   <MTSubCatIsLast></ul></MTSubCatIsLast>
   </MTTopLevelCategories>
   </div>
</div>
</MTIfArchiveTypeEnabled>

２．公開テンプレートの場合

カテゴリーリストに青色の部分を追加してください。サンプルは XHTML 1.0 Strict 版を使っていますが、それ以外のものでも追加位置と追加内容は同じです。

<MTIfArchiveTypeEnabled archive_type="Category">
<dt class="sidetitle">
Categories
</dt>
 
<dd class="side">
<div id="categories">
<MTSubCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]
<ul><MTEntries><li><a href="<$MTEntryPermalink$>"><$MTEntryTitle encode_html="1"$></a></li></MTEntries></ul>
<MTElse>
<li><MTCategoryLabel>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
</dd>
</MTIfArchiveTypeEnabled>

Movable Type 4 で採用されたフォーマットに「Markdown + SmartyPants」というのがあります。

Markdown はある規則にしたがって書いたテキスト文字を（X）HTMLに変換してくれるというものですが、SmartyPants が具体的にどのような変換を行うものか、日本語で解説されているサイトをみつけられなかったので、公式サイトの翻訳（一部）と変換のサンプルを掲載しておきます。

訳に誤り等ありましたらご指摘ください。

SmartyPants

説明

SmartyPants は、Movable Type、Blosxom、および BBEdit のために、ASCII の句読文字を「スマート」な印刷用句読文字の HTML実体参照に変換する、フリーのウェブパブリッシングプラグインです。

SmartyPants は以下の変換を実行することができます:

• 直線状の引用符（"または'）を、「カーリークォート（”または’）」のHTML実体参照に変換
• バッククォート（``）を「カーリークォート（“）」のHTML実体参照に変換
  注：バッククォートは2つ並べる
• ダッシュ（--または---）を、「enダッシュ（―）*」または「emダッシュ（――）*」のHTML実体参照に変換
  *欧文ではダッシュの長さにより呼び方が異なる
• 3つの連続したドット（...）を省略文字（…）のHTML実体参照に変換

あなたの投稿では、ASCII による直線状の引用符やダッシュ、およびドットを書いたり、編集したり、保存することができますが、（X）HTMLの出力は、スマートな引用符・全角ダッシュ、および適切な省略文字として表現されるでしょう。

SmartyPants は、Movable Type、Blosxom、および BBEdit で動作するプラグインファイルを組み合わせたプラグインです。 UNIXスタイルのコマンドラインから使用することもできます。

SmartyPants は、<pre>、<code>、<kbd>、および <script> タグブロック内ではキャラクタを変更しません。 これらのタグは、ソースコードやサンプルのマークアップのような、「スマートな引用符」やその他の「スマートな句読」への変換が適切でないテキストを表示するために用いられるからです。

下は実際に Movable Type 4 で実験した結果です。引用符やダッシュ等が変換されているのがお分かりになると思います。

フォーマット変換なし

Markdown + SmartyPants

Markdown + SmartyPants で出力された （X）HTML

Straight quotes ( ” and ’ ) into “curly” quote HTML entities 
Backticks-style quotes (“like this”) into “curly” quote HTML entities 
Dashes (“—” and “—-“) into en- and em-dash entities 
Three consecutive dots (“…”) into an ellipsis entity

「emダッシュ」が上手く変換されていないようです。

当サイトで利用している、トップページのエントリー概要とエントリー本文の表示を切り替えるカスタマイズです。

注：本カスタマイズは Movable Type 3.x 用です。Movable Type 4 で利用する場合は、「概要と本文を切り替える（Movable Type 4・デフォルトテンプレート版）」をご覧ください。

概要に本文の先頭から指定文字数を表示する設定になっている（=概要フィールドに何も書いていない）場合、デフォルトで概要を表示し、タイトルまたは概要の末尾にあるリンクをクリックすることで、ページ遷移をせずに全文を表示することができます。

サンプル

このエントリーではデフォルトテンプレートのトップページおよびカテゴリーアーカイブ／日付アーカイブに適用する例を紹介します。

１．スクリプトのダウンロード・アップロード

下記のリンクより menufolder.js をダウンロード（本カスタマイズ用に機能追加しています）

download

ダウンロードしたスクリプトは、ブログの index.html と同じディレクトリにアップロードしてください。

２．script 要素の追加

カスタマイズを適用するテンプレートに下記の script 要素を追加。

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

３．エントリータイトルに折りたたみのリンクを与える

エントリータイトルのタグ

<h3 class="entry-header"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>

を下記のように変更します。a 要素を削除して h3 に id 属性を追加しています。

<h3 class="entry-header" id="content<$MTEntryID$>name"><$MTEntryTitle$></h3>

４．概要を追加する

エントリーを表示するタグ

<div class="entry-body">
   <$MTEntryBody$>
   <MTIfNonEmpty tag="EntryMore" convert_breaks="0">
   <p class="entry-more-link">
      <a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>" »</a>
   </p>
   </MTIfNonEmpty>

に対し、青色のタグを追加します。

<div class="entry-body">
   <div id="content<$MTEntryID$>list2">
      <p><$MTEntryExcerpt$> <a class="foldmark" href="./" onclick="FoldNavigation('content<$MTEntryID$>','chng',''); return(false);" onkeypress="FoldNavigation('idName', 'chng',''); return(false);" title="全部読む">[ all ]</a></p>
   </div>
   <div id="content<$MTEntryID$>list">
      <$MTEntryBody$>
      <MTIfNonEmpty tag="EntryMore" convert_breaks="0">
      <p class="entry-more-link">
         <a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>" »</a>
      </p>
      </MTIfNonEmpty>
   </div>

また、MTEntries の終了タグ直前にスクリプト起動用の script 要素を追加します。

<script type="text/javascript">
//<![CDATA[ 
FoldNavigation('content<$MTEntryID$>','off',false);
//]]>
</script>
</MTEntries>

これでテンプレートを再構築すれば、概要と本文の切り替えができるようになります。

５．折りたたみ状態を保持しないようにする

このカスタマイズでは折りたたみ状態がクッキーを利用して保持されます。つまり、ブラウザをリロードした時等、直前の折りたたみ状態でページが表示されます。

折りたたみ状態を保持したくない場合は、ダウンロードした menufolder.js の中間辺りに下記の設定（赤色）

//--------------------------------------------------------
// 状態保持用設定データ
//--------------------------------------------------------
 
// 状態保持フラグ
// 有効にする：true
// 無効にする：false
var holdState = true;

を下のように変更してください。

//--------------------------------------------------------
// 状態保持用設定データ
//--------------------------------------------------------
 
// 状態保持フラグ
// 有効にする：true
// 無効にする：false
var holdState = false;

６．注意事項

概要の表示文字数より本文の文字数が少ないと効果ありません。

2007.07.31
カスタマイズ手順に誤りがありましたので修正しました。

2007.11.25
５項を追加しました。また、MT4 版へのリンクを追加しました。

当サイトで配布中の WordPress テーマ（テンプレート）をバージョンアップしました。新しいテンプレートは下記のリンクよりダウンロードしてご利用ください。

WordPress テーマ（テンプレート）・3カラム版

注：本テンプレートはデフォルト状態で「最近のコメント」「最近のトラックバック」を表示するようにしています。これらのリストを表示するためには「Commented entry list」プラグインが有効になっている必要があります。

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

１．XHTML 1.0 Strict

これまで配布していたテンプレートのXHTML 1.0 文書型は「XHTML 1.0 Transitional」でしたが、今回「XHTML 1.0 Strict」に変更しました。

XHTML 1.0 Strict では XHTML のお作法が XHTML 1.0 Transitional より少し厳しくなります。例えば引用を示す blockquote 要素では、その直下にインライン要素・テキストを記述するのではなく、ブロックレベル要素（p 要素など）を記述することになります。ブラウザではブロックレベル要素が欠落しても問題なく表示されますが、XHTML 1.0 Strict のお作法に少しずつ慣れていくと良いでしょう（このサイトは XHTML 1.0 Transitional ですが）。

この変更に伴って下記の修正も実施しました。

• form 要素に fieldset 要素追加
• textarea 要素に初期値設定（記事ページ）

２．フォントサイズ変更

やや大きめのフォントサイズにしました。項番５と関連しています。

３．各アーカイブページの title 要素を「記事名+ブログ名」に変更

これまで各アーカイブページの title 要素は「ブログ名+記事（アーカイブ）名」で表示されるようにしていましたが、SEO を考慮して「記事名」が先頭に表示されるよう変更しました。タイトルやアーカイブ名に検索キーワードが含まれていると有利です。
なお、アーカイブページはまだ不具合が残っていますので追って修正したいと思います。

４．float 解除を after 擬似要素に変更

これまで固定レイアウトの float による流し込み解除は br 要素に clear プロパティを与えておりましたが、適切なマークアップではありませんでしたので、after 擬似要素による float 解除に修正しました。

関連記事：CSS の after 擬似要素で回り込みを解除する

５．フォントサイズを % 指定に変更

px 指定だったため、IE6 での文字サイズ変更が有効にならなかったのですが、% 指定に変更することで有効になります。参考サイトは下記です。ありがとうございました。

• NOTE：フォントサイズ指定手法 / 続フォントサイズ指定手法

また JavaScript によるフォントサイズ変更が多少簡単に設定できるようになります。

関連記事：Slider によるフォントサイズ変更でアクセシビリティを向上させる

この変更により、デフォルトのフォントサイズはこれまでよりかなり大きくなっています。これまでのフォントサイズを再現するには IE6 で「小」にしてください。デフォルトのフォントサイズを変更したい場合は、スタイルシート冒頭の

body {
    font-size: 100%;
}
html>body {
    font-size: 12pt;
}

の赤色部分を変更してください。他で指定している部分はこの値の相対値として変動します。ちなみにこれまでのテンプレートと近いデフォルト表示をするには、

body {
    font-size: 83.3%;
}
html>body {
    font-size: 11pt;
}

にしてみてください。

６．line-height の単位を削除

line-height は行間を指定するプロパティです。これまでは % 指定を行っていましたが、このプロパティに単位を与えると、子孫要素のフォントサイズを変更すると、期待する行ボックスにならないとのことです。
良い例が「タグクラウド」で、line-height に単位を与えていると、大きな文字が現われた時、フォントサイズによっては小さな文字に重なり、小さな文字のリンクが有効にならない可能性があります。

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

• Lucky bag::blog：line-height の値には単位なしが良いとされる理由

７．pre 要素用 CSS 追加

プログラムコード等を表示する場合を考慮して、pre 要素用の CSS を追加しました。

８．ヘッダの ID 属性値変更

ヘッダの ID 属性値を「banner」から「header」に変更しました。

９．画像用CSS設定削除

本文に画像の挿入を想定して CSS を設定していましたが、左上に表示する場合しか対応していなかったので削除しました。

１０．その他

大がかりな変更を行うと、これまでのカスタマイズ記事も大幅に修正しないといけなくなるため、例えばSEO的に有利な、3カラム固定レイアウトで中央カラムを XHTML 文書の先頭にする、というような変更は行っておりません。
また、左右サイドバーのスタイルに対応する links-left / links-right といった属性名も、同様の理由によりそのままの名称にしています（文書構造にデザインを示す単語を用いるのが適切でないことは理解しています）。

漢字で書けますか？

現在発売中の「Web Designing (ウェブデザイニング) 2007年 08月号」に Movable Type 4 の記事が掲載されています。

Web Designing (ウェブデザイニング) 2007年 08月号 [雑誌] 毎日コミュニケーションズ 2007-07-18 売り上げランキング : Amazonで詳しく見る by G-Tools

特集ではありませんが、田口和裕さん連載の「Movable Type Step by Step」で、

「Movable Type 3」と「Movable Type 4」、どこが変わった？

というタイトルで、Movable Type 4 の新機能と、動作環境・ライセンス体系等を含めた Movable Type 3 との違いが掲載されています。

また、同時に WD Reviews（新製品紹介）でも Movable Type 4 が取り上げられており、どのようなバージョンアップが行われたかが一目で分かります。

余談ですが、Movable Type が当初の予定通り7月18日に正式リリースされていれば、本誌（18日発売）はまさにどんぴしゃりのタイミングでの発売だった訳です。本誌関係者の方は結構悔しがっているのでは？と察します。

なお「Movable Type Step by Step」の最後に私のサイトがちょこっと紹介されてます（これを書きたかった）。

Movable Type 4 Beta 7 が公開されました。

Movable Type 4 ベータ 7を公開

Movable Type 4 ベータ 7 よりデフォルトテーマとして Vox のテーマがいくつか同梱されており、スタイルメニューからテーマを選択することがでるようになりました。正式版ではこれらのテーマ全てが製品に同梱されるというわけではなく、別の方法での提供になる可能性があります。

いつものように Beta 6 との見た目の差分をお知らせします。ちなみにアーカイブのファイルサイズが 6.8MB に増えています（Beta 6 と比較して +2.3MB）。

日本語表示の場合、「Write Entry」が「ブログを書く」に変わりました。

各フォームボタンも、デフォルトのスタイルから画像に変わっています。

メニューの「ファイル」が「アイテム」に変わっています。また「設定」のサブメニューにあった「メンバー」がこの一番下の「ユーザー」に移動しています。細かいですが、「デザイン」サブメニューの「テンプレート」と「スタイル」の位置も入れ替わっています。

StyleCatcher に Vox のテーマが同梱されました。「テーマ/リポジトリへのURL:」は左上の小さな + マークで隠されています。

カラムレイアウトも選択できるようになっています。

また、インストール時にスタティック・ディレクトリ（mt-static）がアプリケーション・ディレクトリと同じディレクトリに存在しない場合、mt-static のURLまたはパスを指定するのですが、指定誤りの場合はインストールに進まないのですが、サーバの環境によっては指定誤りでもインストール続行可能となるケースがあり、フィードバックしていました。Beta 7 で解消くださっています（52727）。

指定したパスがみつからない場合はエラー画面が表示されます。

XREA を無料で利用する場合、表示が義務付けられている広告をヘッダ（タイトルバナー）にきれいに埋め込んで表示する方法です。質問を頂きましたので本エントリーにてカスタマイズを紹介します。

リキッドレイアウトであれば position プロパティを利用した絶対配置で比較的簡単に設定できますが、固定レイアウトでも position プロパティを組み合わせることで、決まった位置に表示させるテクニックがあります。

ここでは公開テンプレートを例に設定していますが、テンプレートに関係なく適用可能です。

１．（X）HTMLマークアップ

広告表示用の script 要素を追加し、script 要素を div と p で括ります（青色）。div に任意の class 属性、または ID 属性を設定します。

<div id="header">
<h1 id="blog-name"><a href="" accesskey="1">First Weblog</a></h1>
<p class="blog-description">test</p>
<div class="ad">
<p>
<script type="text/javascript" src="http://..."></script>
<noscript><iframe height="60" width="468" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" allowtransparency="true" src="http://..."><a href="http://..." target="_blank"><img src="http://..." border="0" alt="xreaad"></a></iframe></noscript>
</p>
</div>
</div>

ちなみにこのまま表示すると、下記のようになります。

２．CSS

スタイルシートに下記の設定を追加します。

div.ad {
    position: relative;
    margin: 0;
}
div.ad p {
    position: absolute;
    top: -56px;
    right: 15px;
}
html > body div.ad p {
    top: -58px;
    right: 0;
}

仕組みは、親要素の div に position: relative; を設定し、div を相対配置にします。そしてその子要素の p に position: absolute; を設定することで、子要素の position プロパティの基点は、親要素（div）が配置されるべき位置となります。あとは子要素の p に対して、表示させたい位置に top や right プロパティ等で移動させます。

当サイトのテンプレートでは、IE6とそれ以外のブラウザで広告表示位置が若干異なるので、子セレクタ（>）を使って異なる値を設定しています。
また、div のマージンを0にして不要な空白が表示されないようにしています。

広告以外に、検索フォーム等を埋め込む時にも有効ですので、お試しください。

このサイトの右下に表示しているカウンタがまもなく 4000000 に到達します。現在のアクセスからするとあと3日ほどで超えそうです。7/20に超えました。

300万アクセス特別企画で超えたのが今年の3月3日でしたので、約4ヶ月半で100万アクセスという計算になります。Google Analytics で確認すると、3/3～7/15 の PV は 1,193,882 でした。
ということで、このサイトを訪問くださっている皆様には大変感謝しております。

このカウンタはサイト開設当初の2004年5月から設置しているもので、その値はいわゆる「ページビュー」と、隣りに設置している「ビジット」カウンタの中間くらいの粒度で更新されているようです（IPチェックは行っている筈なのでやや閾値が低いビジットと言えるでしょう）。

ということで、4000000 のキリ番、あるいは惜しくも 3999999 をゲットされた方は、カウンタおよびブラウザ内の他の部分を含んだキャプチャ画面をメールでお送り頂ければ、貴サイトを当サイトのエントリーにて紹介させて頂きます。*1

*1：サイト内容によってはお断りする場合があります。予めご了承ください。

先日公開した、WordPress の「dTree プラグイン」をバージョンアップしました。

バージョンアップ内容は次の通りです。

• dTreeスクリプトの同梱（著作権表示）
• プラグインのオプション画面よりコンフィグレーションが可能
• 定義リストのマークアップに（多分）対応

プラグインのダウンロードは「dTree プラグイン for WordPress」よりお願い致します。

バージョンアップしたプラグインをアップロード・有効化すると下記のリンクが表示されるのでクリック。

クリックすると下記のオプション画面が表示されます（日本語化はしていません）。

各オプションの意味は次の通りです。

また、定義リストによるマークアップは、下記であれば動作するようにしました。

<dt>Categories</dt>
<dd>
  <ul>
    <?php wp_list_cats('sort_column=name&optioncount=1&hide_empty=0'); ?>
  </ul>
</dd>

また、定義リストによるマークアップに適用する場合は、dtreehandler.js の末尾の部分

function dtreeMaker(searchName) {
  var idName = searchName.replace(' ','');
  idName = 'dtree_' + idName;
  addTagForTree(searchName, idName);
//  addTagForTree2(searchName, idName);
}

を

function dtreeMaker(searchName) {
  var idName = searchName.replace(' ','');
  idName = 'dtree_' + idName;
//  addTagForTree(searchName, idName);
  addTagForTree2(searchName, idName);
}

に修正してください。

定義リストによるマークアップの wp.vicuna であれば下記のようになります。

現在、トップページと各エントリーページに掲載している動画ですが、「ディック」でおなじみのCFJ株式会社がサポートしている、ワクワクウォッチング（音声つきですので閲覧時はご注意ください）で公開されるアニメーションの中の1話です。

ワクワクウォッチング（WorkWorkWatching）とは、色々なお仕事の舞台裏を観察する教養ドキュメンタリー番組です。

掲載している動画は、全7回（番外編を含め全8回）にわたり公開されるアニメの第3話「洋子、スカウトにて」で、通訳の洋子が見知らぬ外人に「ヤンキー役」で映画に出演する交渉をし、交渉に成功するまでのシーンをポップな動画でお送りします。
外人が「ヤンキーって何？」と聞いた後の洋子のヤンキーが見ものです。

音声つきですので、閲覧時はご注意ください

動画の真ん中にある再生ボタンをクリック（場合によっては2回クリック）すれば動画が開始します。停止する場合は左下に表示された停止ボタンをクリックしてください。

広告として掲載を依頼されたもので、都合10日ほど掲載する予定です。

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

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

下記のリンクより dTreeHandler プラグインをダウンロード。

dTreeHandler.zip

2007.07.13 v0.1 初版
2007.07.16 v0.2 dTree を同梱。オプション画面追加。定義リストのマークアップに対応
2007.09.11 v0.3 リストタイトル・定義リストのマークアップ対応を管理画面で制御。定義リストのマークアップで正常に表示されない不具合修正。
2007.10.10 v0.4 クッキーによる折りたたみ状態を保持しない場合の折りたたみ初期状態を設定可能

解凍した中にある dtreehandler フォルダを plugins ディレクトリにアップロード。

２．プラグイン設定

WordPress の管理画面より「dTree Handler」を有効にしてください。

これでサブカテゴリーにツリーが表示されればOKです。

３．コンフィグレーション

プラグインを有効化すると下記のリンクが表示されるのでクリック。

クリックすると下記のオプション画面が表示されます（日本語化はしていません）。

各オプションの意味は次の通りです。

４．注意事項

デフォルトでは、テンプレートタグが「h2 + 順不同リスト」になっている場合に動作します。また h2要素の内容は "Categories" です。

<li><h2>Categories</h2>
    <ul>
    <?php wp_list_cats('sort_column=name&optioncount=1&hide_empty=0'); ?>
    </ul>
</li>

定義リストによるマークアップについては、下記の構造であれば動作するように改修致しました。

<dt>Categories</dt>
<dd>
  <ul>
    <?php wp_list_cats('sort_column=name&optioncount=1&hide_empty=0'); ?>
  </ul>
</dd>

５．既知の問題

• カテゴリー数は表示されません
• 記事が0件のカテゴリーもリンクが設定されます

2007.07.16
0.2 をリリース、それに併せて内容を更新しました。

2007.09.11
0.3 をリリース、それに併せて内容を更新しました。

2007.10.09
冗長な記述を削除しました。

Movable Type 4 の出荷が延期になりました。

Movable Type 4 出荷延期のお知らせ

出荷延期の原因といたしましては、ベータ版をご利用いただいている皆様から、ソフトウェアのバグだけでなくユーザーインターフェース改善に対する要望を多数いただいていること、またベータ版利用者の数が増えたためご要望の数も増えたこと、が挙げられます。

シックス・アパートでは、皆様からのご要望に十分お応えするため、ベータテスト期間を延長し、あわせて出荷時期を延期することを決定いたしました。

ということで、8月8日に出荷される予定です。無償バージョンアップキャンペーンの期限も8月7日までに延期になっています。

私も要望を出しているので早くとも言えないのですが、できればテンプレート編集画面の遷移で、右カラムに常に全てのテンプレートが（折りたたみがいいと思いますが）常に表示されていることを望みます。

「Movable Type 4 Beta 4 公開 & テンプレート編集画面レイアウト変更」でも記した通り、MT3からの要望に加え、管理画面のページ遷移が全体的に遅くなっているというのもあります。

なお、昨日エントリーした「Movable Type 4 Beta 6 公開」には、エントリー後にみつけた変更点のキャプチャ画面を数枚追加していますので、よろしければご覧ください。

Movable Type 4 Beta 6 が公開されました。
「Download」のページよりダウンロードできます。

Beta6 の内容は別途追記します。とりあえず6Aより先に情報を流してみました。

追記：Six Apart ニュースが公開されました。

Movable Type 4 ベータ 6を公開

これまでお寄せいただいたたくさんのフィードバックから見つかった不具合等の修正状況は、Movable Type 4.0 Beta Change Log にお礼とともに掲載させていただいています (email アドレスのアカウント名の部分などで掲載させていただいています)。これからベータ版を利用する方も Change Log をぜひチェックしてみてください。

追記：「再構築」が戻ってきました。

3カラム用サイドバーのテンプレートモジュールが増えました。

コメントエラーテンプレートがなくなりました。エラー時はコメント完了画面がハンドリングされるようで、その中で処理が振り分けられています。

デフォルトプラグインに「MultiBlog」が追加されています。MultiBlogを使うと、他のブログにあるテンプレートコンテンツあるいは通常のコンテンツを公開することができます。再構築時の依存関係やアクセス制御を設定することもできます。

コメントポリシーで、認証なしコメントをチェックしてもメールアドレス要求が表示されませんが、これは単なるバグのようです。

下は Beta5 の画面です。

その他、ブログ記事の一覧にあるセレクトボックスから「ブログ記事の公開」「ブログ記事の公開の取り消し」が削除されていました。

出遅れましたが、インプレスより XHTML+CSS 本が出版されています。

Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。 加藤 善規/平澤 隆/両見 英世 インプレスジャパン 2007-07-03 売り上げランキング : 512 Amazonで詳しく見る by G-Tools

ブログでも活躍されているお三方、加藤善規さん、平澤隆さん、両見英世さんの共著です。下のサイトを見て頂ければどなたかお分かりになると思います。

• WWW Watch
• CSS HappyLife
• ネットのサラダボウル

内容はタイトルの通り、100の法則が下記の6つの章に配されています。

第1章 (X)HTML の基本法則

第2章 CSS の基本法則

第3章 用途と目的に合わせたレイアウトの法則

第4章 ユーザビリティを向上させる CSS デザインの法則

第5章 実践的な CSS デザインの法則

第6章 プロを感じさせるデザインの法則

フルカラーで、各法則のタイトルにはポイントがずばりと記され、読み切り形式になっています。順番に読むのも、拾い読みするのも、どちらもいい感じです。
また巻末には用語集と豊富な索引が用意されていますので、初心者の方にもお勧めです。

シリーズ本で「Webユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。」も発売されています。

Webユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。 石田優子/有限会社アルファサラボ インプレスジャパン 2007-07-03 売り上げランキング : 1070 Amazonで詳しく見る by G-Tools

当サイトの Movable Type 配布テンプレートで検索結果画面のカラムレイアウト変更方法についてご質問を頂きましたので紹介します。

サンプルとして、検索結果画面の2カラム固定レイアウト（右サイドバー）から3カラムレイアウトに変更します。

１．カラムレイアウト指定

検索結果画面にある body 要素の class 属性値（赤色部分）

<body class="<MTNoSearch>layout-one-column<MTElse>layout-two-column-right</MTElse></MTNoSearch>">

を下記のように変更します。

<body class="<MTNoSearch>layout-three-column<MTElse>layout-three-column</MTElse></MTNoSearch>">

上記はMTNoSearchタグとMTElseタグのいずれの場合も3カラムにしていますので、どのような検索結果でも3カラムで表示されます。

というか、振り分ける必要がなければ

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

でなんら問題はありません。

２．左サイドバー追加

下記に示す位置に左サイドバーを追加します。

　　：
<div id="header">
<h1 id="blog-name"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<MTIfNonEmpty tag="BlogDescription"><p class="blog-description"><$MTBlogDescription encode_html="1"$></p></MTIfNonEmpty>
</div>
 
[ここに左サイドバーの（X）HTMLを追加]
 
<div id="content">
<div class="blog">
　　：

「追加」という部分には、左サイドバー自体（id 属性値が links-left-box の div要素と id 属性値が links-left の div要素または dl 要素）を設定してから、各種リストを追加してください。

３．右サイドバー変更

右サイドバーの内容を変更したい場合は、下記に示す部分を適宜修正してください。

　　：
<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
 
[ここに右サイドバーの（X）HTMLを追加または修正]
 
</div><!-- links-right -->
</div><!-- /links-right-box -->
　　：

４．検索関連タグについて

検索結果画面はかなりごちゃごちゃしていて分かりにくいので、指標となるタグを説明しておきます。

<MTSearchResults>～</MTSearchResults>

検索がヒットした場合にこのタグで括られた内容が実行される

<MTNoSearchResults>～</MTNoSearchResults>

検索がヒットしなかった場合にこのタグで括られた内容が実行される

<MTNoSearch>～</MTNoSearch>

検索文字列が入力されなかった場合にこのタグで括られた内容が実行される

<MTIfStraightSearch>～</MTIfStraightSearch>

サイト検索時にこのタグで括られた内容が実行される

<MTIfTagSearch>～</MTIfTagSearch>

タグ検索時にこのタグで括られた内容が実行される

<MTBlogResultHeader>～</MTBlogResultHeader>

検索結果画面のヘッダ

<MTBlogResultFooter>～</MTBlogResultFooter>

検索結果画面のフッタ

<MTIgnore>～</MTIgnore>

このタグで括られた内容は無視される

<MTSetVar>～</MTSetVar>

変数の設定

<MTSetVarBlock>～</MTSetVarBlock>

変数の設定

<MTGetVar>～</MTGetVar>

変数の取得

MTSetVar/MTSetVarBlock/MTGetVar については「Movable Type 4 のテンプレート構造」を参照ください。

検索結果画面のカスタマイズについては、下記の雑誌に寄稿したものもあります（宣伝）。

Web Designing (ウェブデザイニング) 2007年 05月号 [雑誌] 毎日コミュニケーションズ 2007-04-18 売り上げランキング : Amazonで詳しく見る by G-Tools

私事ですが、Movable Type カスタマイズ書籍を出版させて頂くことになりました。

タイトル（仮）：「Webデザインの新しいルール Movable Type 4.x」
出版社：翔泳社
ページ：256ページ
刊行予定：9月

書籍の内容は Movable Type の導入から基本操作、テンプレートやデザインの変更と各種カスタマイズ、といった感じです。
タイトルの通りシリーズ本です。また共著ということで、もうお一方は「絵文禄ことのは」の松永さんです。

4月中旬に執筆のオファーを頂き、提示された構成案を見直しながら執筆。私の担当分は感覚的に5～6割程度書き終わったところです。

本来はもっと順調に進む予定でしたが、ご存知の通り Movable Type 4 ベータ版がリリースされ、出版される時期には製品版もリリースされているため、急遽 MT4 向けの内容に書き直しています（管理画面の部分は書き終わっていたのですが、最初から見直し）。

そういう訳で、現在 MT4 の管理画面と睨めっこしながら日夜執筆作業に没頭しております。だんだんスケジュールが厳しくなってきており、ブログに頂いたコメントの回答には対応できないかもしれません。このブログのエントリーも執筆途中でふと気がついて慌てて書く日が続いてます。予めご容赦ください。

この本に関するエントリーは宣伝も兼ねて何回か投稿する予定です。

ArchiveDateFooter プラグイン が Movable Type 4.x 版で動作しなかったので、修正致しました。下のスクリーンショットは MT4 で月別アーカイブリストに ArchiveDateHeader + ArchiveDateFooter を利用して年別表示させたものです。

MT4 対応のプラグインは「ArchiveDateFooter プラグイン」のエントリーからダウンロードできます。

修正箇所は、アーカイブタイプ別のデータを取得する仕組みが変更されていたので、その部分を修正しました。とりあえず月別アーカイブでは昇順・降順ともに動作するようになってます。

その他、「The blog of H.Fujimoto：Movable Type 4のエントリーの日付の管理方法」の内容にしたがい、エントリーをインポートするケースを考慮して、プラグインで利用している created_on の指定を authored_on に変更しました。

ArchiveDateHeader は下記のプラグインを用いればOKです。

• mt-archive-dateheader

実は、ArchiveDateHeader プラグインは上記の他にもうひとつありまして、それが当サイトで紹介している Adam Kalsey 氏の ArchiveDateHeader 1.0 です。
こちらは再構築で下記のエラーが発生します。

mt-archive-dateheader や、MT4 で正常に動作する（または拡張タグが認識できる）プラグインと比較したところ、どうやらプラグインファイルの初期設定処理が実装されていないのが原因のようです。

ということで、ArchiveDateHeader 1.0 を MT4 で動作させたい場合は、下記のコード（青色部分）を追加すると良いでしょう。

　　　：
use strict;
use MT::Template::Context;
 
MT::Template::Context->add_container_tag(ArchiveDateHeader => \&ArchiveDateHeader);
 
use MT::Plugin;
my $plugin = MT::Plugin->new({ name => 'MTArchiveDateHeader' });
MT->add_plugin($plugin);
 
sub ArchiveDateHeader {
　　　：

関連記事

• MovableType備忘録: MovableType 4 beta5 レビュー

Amazon 検索サービスはネット上に数多く存在しますが、この「amaztype」は秀逸ですね。

季節柄、SEARCH WORDに「七夕」と入力して、START SEARCH をクリックしてみて下さい。

Via：センスの良い商品の紹介と感想とよた話：amaztypeが格好良すぎてヤバい件

2年ほど前からあるサイトですが知りませんでした。

今月末、第14回WebSig会議で　Movable Type 4 GPL ライセンスについてのセミナーが開催されます。

タイトル：

Movable Type 4のポテンシャルを探る～GPLライセンス版登場でMTはどう変貌するか？

日時：

7月28日（土）13:30～17:00（12:30受付開始）

場所：

デジタルハリウッド大学2号館7階（東京都千代田区外神田3-1-16ダイドーリミテッドビル）

参加費：

2,000円

WebSig24/7（ウェブシグ・トゥウェンティーフォー・セブン）は、「Webに関連するマーケットが健全に発展していく為に、Webに携わる方々が幅広く一同に会し、オープンかつ活発に共有する課題について協議・検討していくことを目的とした任意団体」だそうです。

以下、開催趣旨の引用です。

第14回WebSig会議は7月18日に正式リリースされる、Movabe Type 4および、近々リリースされるであろう、Movable Type GPLライセンス版をテーマに取り扱います。

MT4ベータ版から取り組まれ、またプラグイン作者として著名な４名をお招きし、今までのMovable Typeとは、どのように変わったのかはもちろん、MT4でサイト構築する上でのTIPS等もお伝えできればと考えています。

討論会ではGPLライセンスになればどうなるかを推測し、シックス・アパート株式会社に対する要望・提案などもあげてみたいと思います。

質問コーナーも充分に時間をとりますので、Web制作者の方にとって、明日から使える情報も得られることでしょう。

また当日のスピーカーとして、下記の4名が出席される予定です。いずれも Movable Type ユーザの方には馴染み深い方々で、これだけのメンバーが一同に揃う機会はないのではないでしょうか。

• テクニカルライター・藤本壱氏（The blog of H.Fujimoto）
• エムロジック株式会社・取締役：関根元和氏（MovableTypeで行こう！）
• アルファサード有限会社・代表取締役　野田純生氏（Junnama Online (Mirror)）
• 産業技術総合研究所・小川宏高氏（Ogawa::Memoranda）

私も、WebSig24/7 のモデレータである「世界中の１％の人々へ」の蒲生さんよりスピーカーとしてお声をかけて頂いたのですが、全く次元の異なる所用のため、残念ながら出席できません。すいません。

80名ほどの会場で、昨日時点ですでに参加者が50名を超えているようです。参加申し込みにつきましては下記のページをご覧ください。

• 【第14回】WebSig会議受付開始　「Movable Type 4のポテンシャルを探る～GPLライセンス版登場でMTはどう変貌するか？」

今後の Movable Type の動向を知りたい方は是非ご参加ください。

関連記事

• 今日の研究：Movable Type 4 Beta 5リリース
• 今日のコラム：7月28日都内でWebSig24/7のイベント開催

Movable Type 4 Beta 5 が公開されました。

Movable Type 4 ベータ 5 を公開

国内のベータテスターよりフィードバックをたくさんいただいていた特定のバージョンの SQLite で動作しない問題、およびMySQL 4.0で動作しない問題が解決されました。

ということで、SQLite の問題がようやく解消されたようです。他のバグ修正の詳細は Movable Type 4.0 Beta Change Log をご覧ください。

今回もパッと見で気づいた違いを紹介しておきます。

インストール最初の画面がまたまた変わっていました。

インデックステンプレートのCSSファイル名が変更されています。

名称だけでなく、構成も変更されています。下は styles.css の内容です。

テンプレートモジュールでは「ウェブページの詳細」が追加されました。

また、最近盛り上がっている再構築の話題に水を差すかのように、再構築画面の「再構築」という文字が「公開」に置き換えられています。

下は Beta 4 の再構築画面です。

が、全く使われなくなった訳でもないようです（というか修正漏れ？）。

再構築完了画面です。上記の流れでいくと、「すべてのファイルが公開されました」が適切かもしれません。
フォームボタンの「再構築しなおす」が可愛いです。

下は Beta 4 の完了画面です。

「再構築」もそうですが、「エントリー」が「ブログ記事」に置き代わっていることについては違和感が拭えません。

慣れ親しんできたネーミングはよほど不適切でなければ受け継いで欲しいところです。「エントリー」という言葉は免疫ができてしまっているのですが、意外に分かりにくいのでしょうか？
が、MTタグは MTEntryXX のままですし、はてなキーワードの「エントリー」でも定着している感があります。

とりあえずダメモトでフィードバックさせて頂きました。

MT4 専用の最初のプラグインがリリースされたというアナウンスがありましたので、便乗して紹介します。

First Movable Type 4 Plugin released

This weekend, Kevin Shay, the developer behind several of Movable Type's most popular plugins, release the first Movable Type 4 plugin.

Bookmarks プラグインは、管理ページの任意のページ（例えばテンプレートのインデックスページ編集画面）をブックマークすることで、ページにダイレクトに遷移できるようにするためのものです。

以下設定と操作方法です。

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

下記のサイトよりプラグインをダウンロード（スクリーンショット下の「here」をクリック）。

New Plugin for MT 4: Bookmarks

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

解凍した中にある Bookmarks フォルダを丸ごと plugins ディレクトリにアップロードします。下のような構成になっていればOKです（1.0b2 現在。プラグインのバージョンアップで構成が変わる可能性があります）。

/Bookmarks
　/lib
　　/Bookmarks
　　　App.pm
　　　Util.pm
　　/MT
　　　Bookmark.pm
　/tmpl
　　/dialog
　　　edit_label.tmpl
　　　list_bookmark.tmpl
　Bookmarks.pl

３．インストール

管理ページにアクセスするとアップグレード開始画面になりますので、「アップグレード開始」をクリック。

サインインします。

アップグレードが開始され、データベースに Bookmark プラグインに必要な情報が生成されます。完了したら「MOvable Type に戻る」をクリック。

管理画面に「Bookmarks」というメニューが追加されました。

４．利用方法

例として、インデックスページのテンプレート編集画面をブックマークします。
インデックスページのテンプレート編集画面に遷移したところで Bookmarks のメニューより「Bookmark "My First Blog: Edit Template 3"」を選択。この名称はブログ名＋画面名です。

ブックマーク画面が表示されるので「Done」をクリック。

これで Bookmarks メニューの一番下に「My First Blog: Edit Template 3」が追加されました。このメニューを選択すると、どのページにいても、インデックステンプレート編集画面に直接ジャンプすることができます。

メニューの「Manage Bookmarks」を選択するとブックマーク管理画面に遷移します。

タイトルをクリックするとタイトル名を変更することが出来ます。

日本語も利用することができるので、ここでは「インデックスページ編集」に変更し、右下の「Save Changes」をクリック。

ブックマークメニューが日本語になりました。

カスタマイズされる方は下のように各テンプレート編集画面をブックマークしておくと便利でしょう。

お分かりと思いますが、追加したブックマークに「My Firlst Blog」というブログ名を残しているのは、このブックマークがシステムでひとつだからです。
言い換えると、あるブログから他のブログの特定の画面に直接ジャンプすることもできます。

Movable Type が国内で使われ始めてから数年が経ち、このブログツールが普及・浸透するとともに利用者のエントリーも次第に増加し、ネット上で Movable Type 関連記事を俯瞰すると、単純な「カスタマイズ」から「パフォーマンス」という新たなフェーズに関心が向かっているように感じる今日この頃です。

そういう中、「The blog of H.Fujimoto」でおなじみの藤本壱さんが、Movable Type への Ajax 適用によるリアルタイム情報表示と、PHP 適用による再構築の軽量化を目指した書籍を執筆されました。

AjaxとPHPによる MovableType高速&最強システム構築法 藤本 壱 技術評論社 2007-07-04 売り上げランキング : 34039 Amazonで詳しく見る by G-Tools

再構築短縮についてはダイナミックパブリッシングを用いた動的生成がしばしば取り上げられますが、本書ではダイナミックパブリッシングを用いず、新たな観点による Movable Type の高速化を図っています。ご自身のサイトもそのようにされていると思われます。

以下、勝手ながら書籍の目次を掲載させて頂きます。

第1章 Movable Type を Ajax と組み合わせるための準備

1-1 Movable Type を Ajax と組み合わせる意味

1-2 prototype.js のダウンロードとインストール

1-3 リアルタイム再構築プラグインのダウンロードとインストール

1-4 Ajax とリアルタイム再構築を組み合わせる

第2章 Movable Type を Ajax でカスタマイズする

2-1 過去のエントリーをランダムに表示する

2-2 エントリー内の画像をランダムに表示する

2-3 アクセスカウンターを設置する

2-4 カレンダーの月送り

2-5 メインページ/カテゴリーアーカイブページ/月別アーカイブページを Ajax でページ分割する

2-6 コメント投稿を Ajax 化する

2-7 複数の部分を一括してリアルタイム再構築する

第3章 Ajax を使って外部のサービスと連携する

3-1 Google PageRank を表示する

3-2 Google Maps の地図を Blog に表示する

3-3 各種のフィードの情報を Blog に表示する

3-4 はてなブックマーク/del.icio.us/Livedoor clip の被ブックマーク数を表示する

3-5 エントリーの内容に応じた Amazon の広告を表示する

第4章 Blog の PHP 化とモジュール化

4-1 PHP の概要

4-2 Blog を PHP 化する

4-3 テンプレートに PHP のプログラムを入れる

4-4 共通部分のモジュール化

第5章 PHP で再構築を大幅に軽量化する

5-1 再構築軽量化の仕組み

5-2 エントリー・アーカイブ・ページの再構築を軽量化する

5-3 メインページ/カテゴリー・アーカイブ・ページ/日付アーカイブ・ページの再構築を軽量化する

5-4 再構築軽量化テンプレートの仕組み

5-5 再構築軽量化テンプレートのカスタマイズ

5-6 従来のテンプレートから再構築軽量化テンプレートに移行する

第6章 Ajax と PHP を組み合わせたカスタマイズ

6-1 Ajax とリアルタイム再構築を再構築軽量化テンプレートで利用する

6-2 リアルタイム再構築の結果をキャッシュする・その（1）

6-3 リアルタイム再構築の結果をキャッシュする・その（2）

6-4 ページ分割を再構築軽量化テンプレートで利用する

6-5 PHP と Ajax を組み合わせて Yahoo で検索する

付録 Movable Type 4 への対応について

なお、サンプルにはデフォルトテンプレートの他、当サイトの配布テンプレートをサンプルとして取り上げてくださっています。この場をお借りしてお礼申し上げます。

Movable Type で MTPaginate を利用したページ分割の Ajax 化です。

このカスタマイズは1年以上前に作ったもので、実装がいまひとつなため公開していなかったのですが、「こういうやり方もあります」という、案レベルの位置づけで公開します。

サンプルを用意しましたのでお試しください（ファイルサイズが小さいため効果が分かりにくいです）。

• MTPaginate の Ajax 化サンプル

仕組みは、ページナビゲーションのリンクをクリックした時、リンク先のページを Ajax 経由で呼び出し、取得したファイルから必要な部分だけを切り出して、ページに表示させるというものです。

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

ページ分割用プラグインは MTPaginate バージョン 1.28 を利用しています。プラグインは「MT Extensions: MTPaginate」よりダウンロードし、Movable Type に予めインストールし、ページ分割の設定まで行っておいてください。ページ分割の方法については「ページ分割」のカテゴリーを参照願います。

本エントリーのカスタマイズはトップページまたはエントリー・アーカイブ以外のアーカイブページでのみ有効です。またブログの文字コードが UTF-8 のみ適用可能です。

１．prototype.js のダウンロード・アップロード

Prototype JavaScript Framework

上記のサイトにある Download the latest version のリンクをクリックし、アーカイブをダウンロードします。アーカイブを解凍して、dist フォルダの中にある prototype.js を使用します（他は使いません）。
prototype.js は index.php と同じディレクトリにアップロードしてください。

２．paginate.js のダウンロード・アップロード

下記の paginate.js をダウンロードし、index.php と同じディレクトリにアップロードしてください。

paginate.js

３．プラグインファイル修正

MTPaginate/lib/MTPaginate.pm

を任意のエディタで開き、下記の赤色部分を青色の内容に書き換えます。

sub PaginateNavigator {
　　　　：
　　（中略）
　　　　：
    } else {
        my $target = $args->{target} || "";
        if($pg->{mode} eq 'cgi') {
            $target = " target=\"$target\"" if $target;
            if ($format_all && $place_all ne 'after') {
                my $title = "";
                $title =  sprintf(" title=\"$format_all_title\"", $num_pages) if $format_all_title;
                if($pg->{current_page} eq 'all') {
                    $res .= "$all_current$separator";
                } else {
                    $res .= "<a href=\"" . $pg->{paginate_self} . "=all$anchor\"$title$target>$all</a>$separator";
                    $res .= "<a href=\"\#\" onclick=\"changePage('" . $pg->{paginate_self} . "=all$anchor')\"$title$target>$all</a>$separator";
                }
            }
 
            $start = ($list_pages eq 'after') ? $pg->{current_page}+1 : 1;
            $end = ($list_pages eq 'before') ? $pg->{current_page}-1 : $num_pages;
            $format_title = " title=\"$format_title\"" if $format_title;
            for(my $i = $start; $i <= $end; $i++) {
                $res .= $separator if($i > $start);
                if($i eq $pg->{current_page}) {
                    $res .= sprintf("$format_current", $i);
                } else {
                    $res .= "<a href=\"" . $pg->{paginate_self} . "=$i$anchor\"$target" .  sprintf($format_title, $i) .  sprintf(">$format", $i) . '</a>';
                    $res .= "<a href=\"\#\" onclick=\"changePage('" . $pg->{paginate_self} . "=$i$anchor')\"$target" .  sprintf($format_title, $i) .  sprintf(">$format", $i) . '</a>';
                }
            }
 
            if ($format_all && $place_all eq 'after') {
                my $title = "";
                $title =  sprintf(" title=\"$format_all_title\"", $num_pages) if $format_all_title;
                if($pg->{current_page} eq 'all') {
                    $res .="$all_current$separator";
                } else {
                    $res .= "<a href=\"" . $pg->{paginate_self} . "=all$anchor\"$title$target>$all</a>$separator";
                    $res .= "<a href=\"\#\" onclick=\"changePage('" . $pg->{paginate_self} . "=all$anchor')\"$title$target>$all</a>$separator";
                }
            }
        } else {
            $target = " target=\\\"$target\\\"" if $target;
            $res = "<?php\n";
            if ($format_all && $place_all ne 'after') {
                my $title = "";
                $title =  sprintf(" title=\\\"$format_all_title\\\"", $num_pages) if $format_all_title;
                $res .=<<PHP
    if(\$paginate_current_page == 'all') {
        echo '$all_current$separator';
    } else {
        echo "<a href=\\\"\$paginate_self=all$anchor\\\"$title$target>$all</a>$separator";
        echo "<a href=\\\"\#\\\" onclick=\\\"changePage('\$paginate_self=all$anchor')\\\"$title$target>$all</a>$separator";
    }
PHP
            }
            
            $format_title = " . sprintf(' title=\"$format_title\"', \$i)" if $format_title;
            $res .=<<PHP;
for(\$i = $start; \$i <= $end; \$i++) {
    if(\$i > $start)
        echo '$separator';
    if(\$i == \$paginate_current_page) {
        echo sprintf("$format_current", \$i);
    } else {
        echo "<a href=\\\"\$paginate_self=\$i$anchor\\\"$target" $format_title .  sprintf('>$format', \$i) . '</a>';
        echo "<a href=\\\"\#\\\" onclick=\\\"changePage('\$paginate_self=\$i$anchor')\\\"$target" $format_title .  sprintf('>$format', \$i) . '</a>';
    }
}
PHP
            if ($format_all && $place_all eq 'after') {
                my $title = "";
                $title =  sprintf(" title=\\\"$format_all_title\\\"", $num_pages) if $format_all_title;
                $res .=<<PHP
    if(\$paginate_current_page == 'all') {
        echo '$separator$all_current';
    } else {
        echo "$separator<a href=\\\"\$paginate_self=all$anchor\\\"$title$target>$all</a>";
        echo "$separator<a href=\\\"\#\\\" onclick=\\\"changePage('\$paginate_self=all$anchor')\\\"$title$target>$all</a>";
    }
PHP
            }
            $res .=<<PHP;
?>
PHP
        }
    }
    return $res;
}

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

４．テンプレートに script 要素追加

ページ分割を行いたいテンプレートに、下記の script 要素を追加します。

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

５．Ajax 対象部分にHTMLコメント追加

Ajax 化を行ないたい部分に、下の HTML コメント（青色）を追加します。ここでは当サイトの配布テンプレートを使用しているので、中央カラム全体を括っている div 要素（id 属性 content）のすぐ内側に設定します。

　　　　　：
<div id="content">
<!-- AjaxStart -->
　　　　　：
　　　（中略）
　　　　　：
<!-- AjaxEnd -->
</div>
　　　　　：

2007.12.06
最後のリストより、<!-- /content --> を削除（MT4でコメントタグを削除したため）