技術情報提供ブログ: Movable Type

テンプレート

この例では Movable Type 4 Beta 6 時点でのデフォルトテンプレートを元にサンプルを作成します。

<MTIfNonZero tag="AssetCount">
    <MTAssets type="image" lastn="10">
        <MTAssetsHeader>
    <div class="widget-assets widget">
        <h3 class="widget-header">Photos</h3>
        <div class="widget-content">
            <ul class="widget-list"></MTAssetsHeader>
                <li class="item"><a class="asset-image" href="<$MTAssetURL$>"><img src="<$MTAssetThumbnailURL height="70"$>" class="asset-img-thumb" alt="<$MTAssetLabel$>" title="<$MTAssetLabel$>" /></a></li>
            <MTAssetsFooter></ul>
        </div>
    </div>
        </MTAssetsFooter>
    </MTAssets>
</MTIfNonZero>

テンプレート内の各項目の詳細は以下のようになります。

<MTIfNonZero tag="AssetCount"></MTIfNonZero>

アイテムがまだ無い場合は囲んだ内容を表示しないようにします

<MTAssets type="image" lastn="10"></MTAssets>

Movable Type で管理されているアイテムを表示します。アトリビュート属性で種類を画像に、数を最新10件とするように設定しています

<MTAssetsHeader></MTAssetsHeader>

アイテムリストの最初に表示する項目を囲みます

<a class="asset-image" href="<$MTAssetURL$>" title="<$MTAssetLabel$>"> <img src="<$MTAssetThumbnailURL height="70"$>" class="asset-img-thumb" alt="<$MTAssetLabel$>" title="<$MTAssetLabel$>" /> </a>

オリジナルファイルへのリンクとサムネイル画像を表示する為の img 要素を出力します。サムネイル画像は 70px 辺の正方形で表示させたいので、CSS で見た目を調整しやすいように <$MTAssetThumbnailURL$> ファンクションタグに height アトリビュート属性を設定し、高さのみを決め打ちしておきます

<MTAssetsFooter></MTAssetsFooter>

アイテムリストの最後に表示する項目を囲みます

CSS

div.widget-assets div.widget-content ul.widget-list {
  overflow: auto;
  margin-right: 0;
}

li.item {
  display: table-cell;
  float: left;
  margin: 0pt 5px 8px;
  overflow: hidden;
  width: 70px;
}

CSS はリストの各項目の横幅を設定した画像の高さと同じ 70px にし、横方法に画像がはみだした場合は、はみ出した部分を非表示にするという方法をとっています。サムネイルは幅の決まったブロックの中で float プロパティを利用し通常の流れから外し左に寄せることで、一列に2個ずつ表示するようにしています。

Windows IE 6 には『float した方向と同じ方向に margin を設定すると指定値の倍の値が反映される』というバグがあります。float した要素は無条件に display: block; となり、それ以外の指定を無視しますが、display プロパティに inline 値を設定すると『margin の反映値が倍になるバグ』を回避できる為、display: inline; を設定しています。

<MTAssets></MTAssets>

ブログのアイテム一覧のためのブロックタグです。アトリビュート (属性) を指定することで、特定のアイテムを抜き出すことや、並べ替えなどが行えます。ブロックタグ <MTENtries></MTENtries> が、ブログ記事の一覧を表示するのと同じような役割を持っています

type="file_type"

• image
• file

指定した形式のファイルタイプに属するアイテムのみを出力

file_ext="file_ext"

• jpg
• png
• mp3
• doc
• e.t.c....

指定した拡張子を持つアイテムのみを出力

lastn="n"

指定した数字 n のアイテムを表示します。n は 0 より大きな数字になります

days="n"

指定した n 日数以内に追加されたアイテムをすべて表示します。days は単独で使います。他のアトリビュートと併用すると、days が無視されます

author="author name"

指定したファイル追加ユーザー author name のアイテムをすべて表示します。表示するアイテム数を指定するときは lastn を併用します

offset="n"

指定した n 個のアイテムを除外して表示します。値に 5 を指定すると、最新 5 件のアイテムを除外してリスト表示します。lastn アトリビュートと組み合わせて使います

sort_by="sort_type"

• file_name
• created_by
• created_on

アイテムを並び替える対象を指定します。file_name (名前), created_by (追加ユーザー), created_on (追加日) が指定できます

sort_order="sort_order_type"

• ascend
• descend

アイテムを並べる順序を指定します。ascend を指定すると昇順、descend は降順になります。

<MTAsset></MTAsset>

id アトリビュート (属性) を指定し、特定の ID 番号のアイテムを出力する為のブロックタグ。

id="id"

指定した id 番号を持つアイテムを出力

<MTAssetTags></MTAssetTags>

アイテムに設定したタグを表示するためのブロックタグ。<MTEntryTags></MTEntryTags>と同じように以下のファンクションタグが利用できます

• <$MTTagName$>
• <$MTTagLabel$>
• <$MTTagID$>
• <$MTTagCount$>
• <$MTTagRank$>
• <$MTTagSearchLink$>

<$MTAssetID$>

アイテムの ID 番号を表示するファンクションタグ

3

<$MTAssetFileName$>

アップロードしたアイテムの名前を表示するファンクションタグ

boots.jpg

<$MTAssetURL$>

アップロードしたアイテムの URL を表示するファンクションタグ

http://localhost/mt4/my-third-blog/images/boots.jpg

<$MTAssetType$>

アイテムの種類を表示するファンクションタグ

画像

<$MTAssetMimeType$>

アイテムの MIME Type を表示するファンクションタグ

image/jpeg

<$MTAssetFilePath$>

アイテムまでの相対パスを表示するファンクションタグ

/Library/WebServer/Documents/mt4/my-third-blog/images/boots.jpg

<$MTAssetDateAdded$>

アイテムを Movable Type 4 でアップロードした日時を表示するファンクションタグ

2007年7月 6日 17:17

format="format"

指定した format で日付を出力します。例えば format="%Y-%m-%dT%H:%M:%S" とした場合のサンプルは以下のようになります

2007-07-06T17:17:55

language="language"

日付の形式を指定した language のもので出力します。例えば language="en" (英語) とした場合のサンプルは以下のようになります

July  6, 2007  5:17 PM

<$MTAssetAddedBy$>

Melody

アイテムをアップロード (追加) したユーザー名を表示するファンクションタグ

<$MTAssetProperty$>

アイテムの詳細データを表示するファンクションタグ。property アトリビュート (属性) に表示したいデータを設定します

property="file_size"

アイテムのサイズを表示する。format アトリビュートと合わせて、表示形式を選択できます。format を指定しない場合は KB 形式で表示します

240.7 KB

format="0"

単位の無いバイト数をそのまま表示する

246453

format="1"

KB でアイテムのサイズを表示する

240.7 KB

format="k"

キロバイト形式でファイルのサイズを数値のみ表示する

240.7

format="m"

メガバイト形式でアイテムのサイズを数値のみ表示する

0.2

property="image_width"

横幅を表示する (アイテムの種類が画像の場合)

500

property="image_height"

高さを表示する (アイテムの種類が画像の場合)

332

property="label"

アップロード時に設定したアイテムのラベルを表示する

ながぐつにお花

property="description"

アップロード時に設定したアイテムの概要を表示する

長靴の中からお花が！木のまわりを囲んでとってもキャワウィイィです。

<$MTAssetFileExt$>

アイテムの拡張子を表示するファンクションタグ

jpg

<$MTAssetThumbnailURL$>

アイテムの種類が画像の場合、サムネイルの URL を表示する

http://localhost/mt4/my-third-blog/assets_c/17.b983083188bc05bb753163d31fe33de7a32f3692.jpg

<$MTAssetLink$>

アイテムのオリジナルファイルへのリンクを表示するファンクションタグ

<a href="http://localhost/mt4/my-third-blog/images/boots.jpg">boots.jpg</a>

<$MTAssetThumbnailLink$>

アイテムの種類が画像の場合、オリジナルファイルへのリンク付きのサムネイルを表示する XHTML タグを表示するファンクションタグ

<a href="http://localhost/mt4/my-third-blog/images/boots.jpg"><img src="http://localhost/mt4/my-third-blog/assets_c/17.b983083188bc05bb753163d31fe33de7a32f3692.jpg" width="500" height="332"></a>

width="value"

画像のサムネイルの幅を value で出力する。width アトリビュート (属性) のみ指定の場合、高さは比率を保ち自動算出されます (以下は width="150" と指定したサンプル)

<a href="http://localhost/mt4/my-third-blog/images/boots.jpg"><img src="http://localhost/mt4/my-third-blog/assets_c/17.62a6e7e04c74969fdefd18b6e19cf50e71101d02.jpg" width="150" height="99"></a>

height="value"

画像のサムネイルの高さを value で出力する。height アトリビュート (属性) のみ指定の場合、幅は比率を保ち自動算出されます (以下は height="50" と指定したサンプル)

<a href="http://localhost/mt4/my-third-blog/images/boots.jpg"><img src="http://localhost/mt4/my-third-blog/assets_c/17.f3919cb1e62fab6bf2ff88ac996c35c48058333e.jpg" width="75" height="50"></a>

scale="scale"

画像のサムネイルを実際サイズの scale % 縮小して出力します (以下は scale="50" と指定したサンプル)

<a href="http://localhost/mt4/my-third-blog/images/boots.jpg"><img src="http://localhost/mt4/my-third-blog/assets_c/17.04a61a0bd17bb3d85491cc83d4114c4b5deebd93.jpg" width="250" height="166"></a>

ユーザーごとに設定する

管理者が新規作成するユーザーが通常利用するテキストフォーマットを設定することができます。

1. 『システムメニュー』より『ユーザー』を選択
2. 設定したいユーザーを一覧よりクリック
3. ユーザーごとの設定画面に移動するので、設定項目の一覧より『テキスト形式』を設定します

ブログごとに設定する

ユーザーが通常利用するテキストフォーマットの設定の中に『（ブログのデフォルト設定を使用）』という項目があります。これを選択した場合、適用されるテキストフォーマットの設定は、『ブログの設定』の『ブログ記事』項目で設定できます。

プラグインのインストール

Movable Type 4 Beta には extras フォルダが同梱されています。中には OpenID 関係のプラグインやサンプルプラグインなどがあり、編集しやすくなった Movable Type 4 のテンプレート管理・編集画面 でご紹介した Snippet プラグインのサンプルも用意しています。今回はこのサンプルプラグインの中から、reCAPTCHA を Movable Type 4 で利用する為のプラグイン。つまり、CAPTCHA プロバイダを追加するプラグインのサンプルを利用して、紹介します。

さっそくプラグインをインストールしてみましょう。ここでは、mt.cgi のあるディレクトリを [MT] と表記します。

1. [MT]/extras/examples/plugins/reCaptcha/plugins にある、reCaptcha ディレクトリを [MT]/plugins に移動 (もしくはコピー)
2. [MT]/extras/examples/plugins/reCaptcha/php/plugins にある init.reCaptcha.php を [MT]/php/plugins に移動 (もしくはコピー)

以上でインストールは完了です。

reCAPTCHA のアカウントを作成する

• reCAPTCHA: Stop Spam, Read Books

reCAPTCHA のトップページ。真ん中あたりにメニューがあります。

1. reCAPTCHA のトップページに移動し、メニューから GET reCAPTCHA をクリックします
2. 簡単な reCAPTCHA の紹介ページに Sign up Now! というボタンのあるページに移動しますので、Sign up Now! をクリックします
3. ログインフォームに移動しますので、New to reCAPTCHA? となっている部分より、アカウントを作成します
4. ユーザ名やパスワード、メールアドレスなどを入力した後、Are you a human? という問いかけとともに CAPTCHA 認証を行ってアカウントを作成します

アカウント作成後、アカウントメニューから + Add a New Site ボタンをクリックし、reCAPTCHA を導入したい Movable Type 4 がインストールされているサーバのドメインを入力します。

すると、public key と pribate key という2種類のキーが発行されます。キーは2種類とも利用します (キーは reCAPTCHA にログインすれば、いつでも確認できます)。

Movable Type 4 の設定を行う

reCAPTCHA の設定を行い public, pribate 両方のキーを取得したら、先ほど reCAPTCHA プラグインをインストールした Movable Type 4 の管理画面に移動します。

管理メニューより、 プラグインを選択し、プラグインリストの中から reCAPTCHA プラグインの項目へ移動します。利用可能になっていることを確認し、設定の表示をクリックすると、public key と pribate key を入力するフォームが現れますので、両方のキーを入力し、変更を保存ボタンをクリックします。

取得したキーを入力する

同じく管理メニューから設定を選択し、コミュニケーションの設定に移動します。CAPTCHA プロバイダ設定のセレクトメニューに reCaptcha という項目があるのを確認し、選択します (Beta 4 よりこの設定はブログ単位で行えるようになる予定です)。

reCaptcha という項目を選択

そのまま、管理画面の Movable Type ロゴの下にあるブログ選択メニューよりブログごとのコメント設定画面へ移動します。CAPTCHA 認証機能も簡単設定可能に で行ったのと同じように、認証無しコメントを受け付けるように設定します。メールアドレスの入力を必須にしたい場合は、該当の項目もチェックしてください。

認証無しコメントの投稿を許可

最後にテンプレートの変更を行います。モジュール Comment Form テンプレートの以下の部分を修正します。

<MTIfNonEmpty tag="MTCaptchaFields">
<MTIfCommentsAccepted><MTIfRegistrationAllowed><MTElse><$MTCaptchaFields$></MTIfRegistrationAllowed></MTIfCommentsAccepted>
<div id="comments-open-captcha">
</div>
</MTIfNonEmpty>

となっている部分を

<MTIfNonEmpty tag="MTCaptchaFields">
<div id="comments-open-captcha">
<$MTCaptchaFields$>
</div>
</MTIfNonEmpty>

のように変更します。さらに Javascript テンプレートの以下の部分を削除 (もしくはコメントアウト)します。

<MTIfNonEmpty tag="MTCaptchaFields">
captcha_timer = setInterval('delayShowCaptcha()', 1000);
</MTIfNonEmpty>

変更後、静的生成の場合は再構築して確認します。全てもしくはエントリーアーカイブのみをダイナミックパブリッシング (動的生成) するように設定している場合は、再構築の必要はありません。

Movable Type はこんな風につくられています

まず意外かもしれませんが、「 Movable Type 日本語版 」 というソフトウェアは存在しません。Movable Type はソフトウェア自体が完全に国際化されていて、ソースコードも一つのブランチで管理されています。ただ、実際にインストールして利用する際には、自分の国の言語がデフォルトで選択されているほうが便利なので、コンパイルオプションとして、デフォルトの言語設定を選べるようになっています。

そして開発チームという意味でも、米国、日本という区別があるわけではなく、ワールドワイドで一つのチームとして開発をおこなっています。これにはプロダクトの企画段階も含まれていて、今後のプロダクトの方向性なども、米国、日本の区別無く、チームのメンバー全員が積極的に検討プロセスに参加することが求められます。日本に常駐しているメンバーも、ワールドワイドで共通の開発環境や社内システムにアクセスして、wiki上での企画提案、コードのレポジトリへのチェックイン、バグトラッキングシステムへの報告とバグ修正などをおこないます。 またIRCやチャット、定期的なビデオ会議などで頻繁にコミュニケーションしています。

今回の新バージョン Movable Type 4 の開発にあたっても、開発のタスクは順次、各メンバーにアサインされ、日本に常駐しているメンバーも、Movable Type 4 のコア部分の多くを開発しています。そのなかには、Movable Type を国際化する実装も含まれます。つまり、Movable Type の英語版を、日本語にローカライゼーションするわけではなく、国際化されたソフトウェアを、ワールドワイドで同時に開発しています。

しかし、世界中のチームメンバーで共有されている最大のモノが何かと言えば、それは間違いなく「さらに素晴らしいブログ・ソフトを作りたい」という気持ちです。現在のMovable Type の開発チームに参加しているメンバーは、ほぼ全員が個人ブロガーでもあります。「より便利なツールを使いたい」、「自分が理想とするブログツールをつくりたい」、各メンバーが並々ならぬ思い入れを持っていることもあり、たった一つの文言を決めるだけでも、「そこに、そこまでこだわりますか！」と思わずツッコミたくなるほどアツい議論が交わされることもあります。Movable Type 4 は、まさにそのような議論の中で形作られているソフトウェアなのです。

ベータ・リリースについて

このようなグローバルな開発チーム体制は、迅速な開発と、フィードバックの素早い反映に活かされており、Movable Type のベータ版公開も米国と日本で同時期に開始することが可能となりました。日本の皆様からいただきましたベータ版へのフィードバックも、バグ修正などで対応できるのもは、毎週のベータリリースに盛り込めるように、開発タスクにリアルタイムに反映されています。特に今週リリースされた最新ベータ版では、日本語化ファイルも含まれていますので、ぜひ積極的にベータ・テストにご参加いただければと思います！

Movable Type 4 ベータリリースについて

バグのなかでも、特に日本語環境や、特定のレンタルサーバーの環境などでおきる問題などは、コードの品質を高める上で非常に参考になりますのでレポートをお待ちしております。また、バグ報告以外のフィードバックや機能要望なども、こちらはすぐに反映することは難しいかもしれませんが、今後の開発の参考とさせていただいています。

オープンソース・プロジェクトについて

現在ベータテスト中の Movable Type 4 は、基本アーキテクチャやユーザーインターフェースが新たに刷新されたメジャー・バージョンアップになります。このような大きなバージョンアップを、ベンチャーという限られたリソースの中で実現するには、チームメンバー個々人の積極的なコミットが必要になります。それぞれのブログへの想いをモチベーションに、まずはこのMT4を、プロダクトとして正式にリリースすることが最大の目標となっていますが、同時にもう一つのプロジェクトが現在準備中です。それがオープンソース版のMovable Typeの公開です。

Movable Type のオープンソース版は、これまでMovable Typeとは異なる領域への、新たな挑戦となります。まず、誤解のないように定義しますと、Movable Type 4 と Movable Type オープンソースは、別のプロダクトとなります。もちろん多くの部分は共有されることになるかと思いますが、それぞれのプロダクトは、異なる目標をもっています。

Movable Type 4 は、すでにベータ版に搭載されているように、ブログ記事以外のWEBページ全体を管理する機能や、複数ブログのアグリゲーション、高度なユーザ管理など、様々なビジネスシーンやエンタープライズ用途をサポートするために、大幅な機能強化を実現しています。今後のベータや、あるいは4.0リリース後の継続的なバージョンアップによって、これらの機能をさらに拡充していきます。また、そのなかの大きな柱として、これまでMovable Typeをビジネス・シーンで活用いただいているProNet を始めとする、多くのWEBディベロッパー様が、より効率的に自社ソリューションを開発できるように、機能パックなどの新たなシステムを導入していきます。

Movable Type を導入することで、新しいビジネスやコミュニケーションが生まれる、あるいはこれまで大きな手間がかかっていた企業サイトの管理の手間を大幅に改善する、などなど、商用プロダクトとしての価値を認めていただけるように、開発の手を緩めることはありません。また、すべてのブロガーの皆様に最先端のツールを使っていただきたいという、これまでと変わらないポリシーのもと、個人無償ライセンスを提供させていただくことで、個人ブロガーをサポートしていきます。なぜなら、Movable Typeの開発メンバーが、それをもっとも必要としているブロガーでもあるからです。

Movable Type は、ブログの可能性を信じる多くの人々によって支えられてきたソフトウェアです。沢山のフィードバック、多様なプラグイン、多くのブログや書籍で公開されているインストールやカスタマイズの解説、無償で提供されているブログのデザインなど、Movable Type を囲むエコシステムこそが、Movable Type を Movable Type たらしめているエネルギー源です。

その中で、Movable Typeのオープンソース版は、新たな領域へのチャレンジとなります。Movable Type のオープンソース版ではGPLライセンスが採用される予定です。GPLライセンスのもとでは、すべての開発成果は、参加する全員でシェアされます。Movable Type のオープンソース版の詳細や、具体的な公開次期（3Qを予定）はまだ決定していませんが、オープンソース版の方向性に関しても、コミュニティーの皆様のフィードバックを受けつつ検討していきたいと思います。現在のMovable Type の開発チームと同じく、そこでは国境も言語も、グループや部署も関係ありません。よりよいブログ・ソフトウェアをつくりあげたいというモチベーションに共感していただける開発者の皆様の参加をお待ちしています。

movabletype.org: Welcome to MTOS: the Movable Type Open Source Project

また、この技術情報提供ブログでは、MT4の進捗状況や、新機能の紹介など、Movable Type に関する様々な情報をアップデートしていく予定です。今後ともご期待ください。

技術情報提供ブログの RSS Feed

ブログ記事データのインポート

まずブログ記事データのインポートですが、これまでの Movable Type 形式のフォーマットでのインポートだけでなく、Wordpress eXtended RSS 形式のファイルもインポートできるようになりました。

1. ブログ管理画面のダッシュボード、もしくはフッタの部分にあるショートカットメニューからツールを選択
2. ツール画面のコンテンツナビゲーションよりインポートを選択

インポート元セレクトメニューをクリックすると、Wordpress eXtended RSS 形式が選択できるようになっています。

バックアップ機能

ブログ記事データのエクスポートだけでなく、ブログの環境、もしくは Movable Type 全体のバックアップができるようになりました。ブログ記事のデータはもちろん、ファイル管理機能で管理しているファイルや、設定されたタグなど、環境の再構築に必要なデータをごっそりとバックアップできます

ブログごとのバックアップを行うには、ブログ管理画面のダッシュボード、もしくはフッタの部分にあるショートカットメニューからツールを選択し、さらにツール画面のコンテンツナビゲーションよりバックアップを選択します。

また、Movable Type 全体のバックアップを行うには、管理メニューからツールを選択し、コンテンツメニューよりバックアップを選択します。

Movable Type 4 Beta 3 現在、それぞれの背景の色が違うので、どちらのバックアップをおこなうのか、認識できるようになっています。また、Movable Type 全体のバックアップ画面では、バックアップするブログを選択することもできるようになっています。各メニューの詳細を見てみましょう。

バックアップを選択全体の (バックアップ画面のみ)

バックアップするブログを選択できます。初期値はすべてのブログとなります

フォーマットの種類

必要な Perl モジュールがインストールされている場合、.zip または .tar.gz フォーマットで圧縮して出力することができます。必要な perl モジュールは以下になります。

• Archive::Tar
• Archive::Zip
• IO::Compress::Gzip
• IO::Uncompress::Gunzip

ファイルごとのサイズ

たくさんのブログやブログ記事、ファイルを管理している環境をバックアップするとなると、そのバックアップファイルの容量も大きくなります。その場合、バックアップファイルの上限を設定し、分割できるオプションです。

バックアップファイルから復元

ブログ、もしくは Movable Type 全体のバックアップファイルを利用して環境の復元を行うには、管理メニューからツールを選択し、コンテンツメニューから復元を選択します。

復元するバックアップファイルを選択し (圧縮したものもそのまま) 復元ボタンをクリックします。

ブログのサイトパスと URL を設定します。変更があれば新しいパスと URL を。同じ場合はその内容を入力して次へボタンをクリックします。

この数ステップで、環境の再構築や移動が可能になります。定期的にバックアップを用意しておくと、大切なデータを消してしまったりした時なども、すぐ復旧できる仕組みが備わっています。

CAPTCHA 認証の設定

CAPTCHA 認証の設定は Admin (管理) メニューの Setting (設定) にある、Feedback (コミュニケーション) の設定画面で可能です。

インストール直後では、CAPTCHA を提供は Movable Type default のみが選択可能です。こちらもプラグインでプロバイダを追加できるような仕組みになっています。

Anonymous Comments を許可する

安心かつ手軽にコメントができるようになった Movable Type 4 でもご紹介しましたが、Movable Type 4 ではコメントするユーザの認証等の設定をブログごとの Preferences (設定) の Blog Setting (ブログの設定) にある Comments (コメント) 項目で設定可能です。

Commenting Policy (コメントポリシー) の設定で Anonymous Comments のチェックボックスをチェックし、必要があれば E-mail アドレスの入力を必須にするオプションを選択します。

大文字と小文字を区別しません

Movable Type 4 のテンプレートタグは、大文字と小文字を区別をしません。つまり <MTEntries> と <MtEntries> また <mtentries> は同じ Movable Type タグとして認識されます。<MTSubCategories> のようなタグもどの文字が大文字になるのか迷わずに書るようになりました。

Movable Type タグ内で区切り文字が利用可能に

ちいさな変更ですが、Movable Type 4 のテンプレートタグは XML の表記のような区切り文字が利用できます。つまり <MT:Entries> や <mt:entries> のような記述が可能になります。

ダイナミックパブリッシングを利用する

Movable Type 4 よりダイナミックパブリッシングの設定がより簡単になりました。設定方法を見てみましょう。

1. Blog Setting 画面に移動し、左のメニューから Publishing を選択
2. Publishing Options メニューの Dynamic Publishing という項目でダイナミックパブリッシングを利用する範囲を選択します

各メニューの詳細は以下のようになります。

Build all templates statically

すべてのテンプレートを静的生成します (初期状態)。

Build only Archive Templates dynamically

アーカイブテンプレートとして生成されるページを動的生成します。

Set each template's Build Option dynamically

選択するとテンプレート各々の編集画面に Build Option メニューが追加され、静的生成か動的生成を選択できます。

Build all templates dynamically

すべてのテンプレートを動的生成します。Movable Type 4 より追加された機能です。

Build all templates statically (全て静的生成する) 以外を選択したばあい、さらに Enable Dynamic Cache と Enable Conditional Retrieval オプションが表示されます。一度表示したページに変更がなければ、ブラウザのキャッシュを利用してページを表示できるようになりますので、表示が早く、サーバへの負荷を軽減できます。

これらを設定し、保存・再構築します。するとこれまで静的生成されていたファイルは index.xml.static といったファイル名でバックアップされます (特に必要なければ削除してかまいません)。また、以下のファイルが作成されます。

• template_c ディレクトリと
• .htaccess ファイル
• mtview.php ファイル

オプションで Dynamic Cache を利用する設定をしている場合、cache という名前のディレクトリも作成されますので確認してください。あとはページがきちんと表示されるか確認してみましょう。

返信コメントが入れ子になるようなサンプル

タグの仕様を理解したところで、返信コメントが入れ子構造になっていくサンプルを作成してみました。サンプルということで、投稿者などの情報は表示せず、コメントの本文のみとしています。また class 属性による分類もどのコメントが返信なのかわかりやすいように設定しています。

<MTComments>
<MTIfCommentParent><MTElse><div class="root">
<$MTComment$>
<MTCommentReplies><div class="reply">
<$MTCommentBody$>
<$MTCommentRepliesRecurse$>
</div></MTCommentReplies>
</div></MTElse></MTIfCommentParent>
</MTComments>

MTComments コンテナタグは Entry アーカイブで利用する場合はそのエントリーに対するコメントの一覧を表示するためのコンテナタグです。

MTComments でコンテナした内容は を利用してまず『コメントが子 (返信) コメントかどうか』の判別をします。そして 条件分岐タグで『コメントが親だった場合』に表示する内容をコンテナしています。つまり、ルートとして表示されるコメントは、返信コメントではないコメントだけにするということになります。この部分だけを抜き出してみると以下のようになります。

<MTIfCommentParent>返信コメントの場合はこの中の内容を<MTElse>返信コメントではない場合はこの中の内容を</MTElse></MTIfCommentParent>

ルートコメントの内容 <$MTComment$> の後には、<MTCommentReplies></MTCommentReplies> コンテナタグを利用して『返信がある場合のみ、返信コメントの情報』を表示するようにします。

返信コメントに返信があった場合も入れ子構造になっていくように <$MTCommentRepliesRecurse$> を利用して <MTCommentReplies></MTCommentReplies> でコンテナした内容を繰り返すようにしています。

出力結果の例は以下のようになります。

<div class="comment">
  <p>コメント1</p>
  <div class="reply">
    <p>コメント1に対するコメント1</p>
    <div class="reply">
      <p>コメント1に対するコメント1に対するコメント1</p>
    </div>
  </div>
  <div class="reply">
    <p>コメント1に対するコメント2</p>
  </div>
</div>
<div class="comment">
  <p>コメント2</p>
</div>

入れ子になる様子を解りやすくするために div 要素を利用しましたが、リスト要素でもコメントツリーを表現できたりできそうです。例の出力結果にあわせて、以下のような CSS を用意すると、入れ子になっている構造がわかりやすくなりますね。

div.reply {
  margin-left: 1.5em;
}

テンプレート管理画面

Movable Type 4 からはテンプレートの種類を切り替えるメニューは画面の左側に移動しました。これまでと同じ分類の他に Widgets が追加されています。私自身がグッときた機能としては、テンプレート一覧の各項目が、キーボードの K と J で上下に移動、X で選択・選択解除できるようになっているところ。Vim などのエディタを利用している人にとってはおなじみのキーバインドですね。

デザインももちろん新しくなり、とても見やすくなりました。カスタマイズするとなればいちばんよく見る画面でもあるのでアイコンなどの細かい部分にちょっとした気遣いが見られると嬉しくなります。

テンプレート編集画面

がっちりとした本格的な編集はまだまだテキストエディタに軍配が上がりますが、Movable Type 4 のテンプレート編集画面は、基本的な編集作業や、お気に入りのエディタが使えない状況であってもしっかり作業を手助けしてくれます。エントリー編集画面と同じように、自動保存エキストエリアはマウスで広げることができますし、デザインもすっきりしました。

すっきりとして編集しやすくなった編集画面 (クリックで拡大)

使用しているテンプレートモジュールの編集画面にもすばやくアクセス

右側の Includes and Widgets の項目も必見です。この項目では、編集中のテンプレートで、どのテンプレートモジュールが仕様されているかの一覧だけでなく、そのテンプレートモジュールの編集画面へのリンクも用意されています。Movable Type 4 のデフォルトテンプレートにだけ対応しているというわけではなありません。

<$MTInclude module="xxx"$>

という風にテンプレートモジュールを読み込んでいればオリジナルのテンプレートでも、仕様中のテンプレートモジュールを一覧できます。たくさんのテンプレートで共通利用できる部分をテンプレートモジュールとして管理しても、テンプレートモジュール各々の編集画面にも素早くアクセスできるので、とっても便利です。

良く使うものは Snippet (スニペット) として

テンプレートの編集時に良く利用するものは Snippet として登録しておくことができます。登録した Snippet はテンプレート編集画面のテンプレートタイトル下、Insert... となっているセレクトメニューで選択・挿入できます。

リストから選択したスニペットが挿入される

テンプレートで良く利用するコードやテキストを スニペットに追加してみましょう。スニペットは以下のようなフォーマットで一組となります。

include_module:
  label: MTInclude module
  content: <$MTInclude module=""$>

CSS のように読みやすく簡単なフォーマットですね。インデントはタブ文字ではなく、半角スペースで行います。各項目の詳細も書いておきます。

スニペットの名前:
  label: セレクトメニューに表示する名前
  content: 挿入する内容

いくつもある場合もまとめて書けます。Movable Type のテンプレートタグやアトリビュートだけでなく、日付フォーマットや (X)HTML の要素や micoroformats などを登録しておくと便利です。

include_module:
  label: MTInclude module
  content: <$MTInclude module=""$>
isodate:
  label: MTEntryDate (ISO 8601)
  content: <$MTEntryDate format="%Y-%m-%dT%H:%M:%S"$><$MTBlogTimezone$>

あとはこの塊がテンプレート編集で追加できるスニペットである事を書きます。

template_snippets:
  include_module:
    label: MTInclude module
    content: <$MTInclude module=""$>
  isodate:
    label: MTEntryDate (ISO 8601)
    content: <$MTEntryDate format="%Y-%m-%dT%H:%M:%S"$><$MTBlogTimezone$>

こうしてできたファイルは YAML ファイルといいます。YAML とは構造データの表現フォーマット。インデントを利用してデータの構造を表現しています。詳細は以下などを参考にしてください。

• YAML - Wikipedia

YAML ファイルができあがったら、config.yaml というファイル名で保存します。わかりやすいように Template_Snippet なんて名前のフォルダを作成して、その中に config.yaml を入れておきましょう。

ここまでの作業が終わったら、スニペットを追加したい Movable Type 4 の plugins フォルダにさきほどの Template_Snippet フォルダをアップロードします。え？これってプラグインなの？と思うかもしれませんが、実はそうなんです。Movable Type 4 ではスニペットを追加するような事をするくらいのプラグインなら YAML ファイルだけでプラグインが書けます。ちょっとドキドキしちゃいますね。

アップロードが終わったら、テンプレートの編集画面に戻って Insert... となっているセレクトメニューを選択してみましょう。先ほど作成したプラグインが読み込まれ、スニペットが追加されています。

プラグインで追加したスニペットが使えるようになった

コメント認証の設定

これらの認証のオン・オフは、ブログごとの設定で可能になります。

1. Movable Type 4 にログインしたら、Config メニューから Blog Setting を選択します
2. 今度は画面左側のメニューから Comments を選択します
3. Commenting Policy という項目で、認証に利用するアカウントを選んでチェックし保存。初めての設定であれば全体の再構築も行っておきます (既にいづれかのコメント認証を利用する設定を行っている場合、全体の再構築の必要はありません)

設定はこれで完了です。

コメントしてみる

設定が済んだら実際にコメントしてみましょう。事前に投稿してあった記事のページに移動し、コメントの項目を見てみると、サイン・インできるようになっています。

1. Sign in をクリックします
2. どのアカウントで認証するか、を右側のメニューから選びクリックします

Vox のアカウントを利用する

例えば私、上ノ郷谷の Vox アカウントは nipeke ですので、メニューから Vox を選択し、表示された入力フォームに nipeke と入力し、Sign in ボタンをクリックします。

少し前まで同じブラウザで Vox を利用していたなど、Vox にログインしている状況である場合は、サイン・インが完了し、コメント入力に移動します。もし、そうでない場合は、Vox にログインするフォームが表示されますので、Vox にログインするとコメント入力に移動します。サイン・インしたアカウント名が表示されるとともに、コメント入力フォームが現れるでしょう。

名前やメールアドレスといった入力項目が無いのは、利用するアカウントで設定されたものが自動的に使われるからです。

mt-wizard.cgi を利用した Movable Type 3.33-ja のインストール

mt-wizard.cgi を利用した Movable Type 3.33-ja のインストールを Movable Type は既にダウンロードされ、必要な Perl モジュールが揃った環境、使用するデータベースは、SQLiteと想定してまとめてみます。実際に mt-wizard.cgi にアクセスしてから、最初にログインするまでのムービーも用意しておりますので、実際の手順をご確認しつつご覧ください。

1. サーバーに Movable Type をアップロード
2. .cgi のファイルのパーミッションを 755 に変更
3. mt.cgi のあるディレクトリ内に db という名前のディレクトリを作成
4. 作成した db ディレクトリのパーミッションを 777 に変更
5. ブラウザで mt-wizard.cgi で設定
   1. インストールされていない perl モジュールの確認
   2. 使用するデータベースの選択 (今回は SQLite もしくは、SQLite2 を選択)
   3. 先ほど作成した db ディレクトリの後に、mt.db といった名前のデータベースファイルの名前を入力
   4. db ディレクトリへの接続の確認 (うまくいかない場合は、db ディレクトリのパーミッションを確認し、指定をフルパス /home/user/mt/db/mt.db での指定に変更してみてください)
   5. メールの設定 (ほとんどの場合、sendmail を選択すれば問題ありません。必要な場合、テストメールの送信で確認を行ってください。)
   6. 作成された mt-config.cgi の内容を確認後、『インストールボタン』をクリック
6. admin ユーザーの情報を入力し、『インストールを続行』ボタンをクリック
7. インストール完了後、ログインして終了

MTIfNonEmpty

MTIfNonEmpty とは、tag アトリビュートで指定したタグになにか値がある場合のみ、タグで囲まれたコンテンツを表示するというタグです。実際にテンプレートには以下のようにマークアップされます。

<MTIfNonEmpty tag="値の有る無しを設定できる変数タグ">
  tagアトリビュートで指定したタグに値がある時のみ、表示するコンテンツ
</MTIfNonEmpty>

このままでは、tag アトリビュートで指定したタグに値が無い場合は、何も表示されません。ですので、MTElse タグと併用し tag アトリビュートで指定したタグに値が無い場合にも、なにかしらのコンテンツを表示するようにします。

<MTIfNonEmpty tag="値の有る無しを設定できる変数タグ">
  tagアトリビュートで指定したタグに値がある時のみ表示するコンテンツ
  <MTElse>tagアトリビュートで指定したタグに値が無い時のみ表示するコンテンツ</MTElse>
</MTIfNonEmpty>

この MTIfNonEmpty タグをうまく利用すると、様々なケースに対応できるようになります。MTIfNonEmpty タグは様々なタグに値があるのか無いのかを判別して働くので、ほぼすべてのタグが対象です。いくつか利用例を示してみます。

<MTEntries>
  <MTIfNonEmpty tag="MTEntryCategory">
    <$MTEntryCategory$>
    <MTElse>カテゴリーなし</MTElse>
  </MTIfNonEmpty>
</MTEntries>

<MTEntries lastn="10">
  <MTIfNonEmpty tag="MTEntryKeywords"><li class="new"><MTElse><li></MTElse></MTIfNonEmpty><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>"><$MTEntryTitle$></a></li>
</MTEntries></ul>

li.new {
  padding-left: 20px;
  background: transparent url(new-icon.gif) no-repeat left center;
}

今回の例では、MTEntryKeywords の値を利用しましたが、MTEntryExcerpt でも同様の事が可能です。MTIfNonEmpty で値の有無を条件判定する対象がエントリーの概要の場合、ブログの基本設定で『概要にいれる文字数』を『0』に設定する必要があります。これはエントリー投稿時に概要を空白にしていても、エントリーの本文から指定文字数自動挿入される為です。

一件のエントリーで同内容のページを3種作成する

アーカイブテンプレートを追加し、各々を個別エントリーアーカイブに関連づけ、任意のマッピングを設定すれば一件のエントリーの投稿で生成されるページを増やすことができます。例えば、一件は普通の HTML ファイルに、もう一件はエントリー本文の内容のみが書かれたテキストファイル。として構築することも可能です。サンプルを示してみます。

<$MTEntryBody$>

アーカイブマッピングの設定

設定から『公開』タブを選択し、公開設定画面に移動します。アーカイブマッピングの設定は、画面の一番下のセクションで設定可能です。『マッピングを新規作成』をクリックし、以下のように設定します。

アーカイブの種類

エントリー

テンプレート

エントリー本文テキスト

つづいてスタイルシートアーカイブテンプレートで生成したファイルの出力フォーマットを設定します。出力フォーマットの変更は、セレクトメニューから『カスタマイズする』を選択し、テキストフィールドに直接記入します。今回は、通常の個別エントリーアーカイブと同じ場所に.txtファイルとして生成するように設定しますので、以下のように出力フォーマットを設定します。ここで利用する、アーカイブ・ファイル名定義の詳細はマニュアルにも記載されておりますので、是非参考にしてください。

• Movable Type 3.3 マニュアル - アーカイブ・ファイル名定義

%y/%m/%F.txt

この例では、個別エントリーアーカイブを使用しましたが、以上のようにすると、アーカイブごとに複数のテンプレートを設定できることが解ります。

利用する主な MT タグ

今回のカスタマイズで利用する主な Movable Type タグは以下のようになります。

• <MTArchiveList></MTArchiveList>
• <MTEntries></MTEntries>
• <$MTEntryBasename$>
• <$MTEntryKeywords$>
• <$MTEntryMore$>

利用する主なテンプレート

• メインページテンプレート
• スタイルシートアーカイブテンプレート (新規作成)

エントリー投稿の仕組み

テーマスタイル紹介記事のエントリーの投稿がスタイルライブラリへのテーマ追加になるような仕組みを構築する為に、どのフィールドにどういった内容を入力するかといった、エントリーを投稿する際のルールを作成します。テンプレートの参考になるだけでなく、後にこのルールをまとめたガイドラインを作成しておくのも良いですね。

• 投稿画面サンプルイメージ(幅: 765px, 高さ: 1489px)

エントリーのタイトル

テーマの名前を入力

エントリーの本文

thumbnail.gif を表示する為の img 要素を含むテーマ紹介コンテンツ

追記

スタイルシートファイルの内容

概要

テーマの概要

キーワード

テーマのディレクトリ名を (入力例: path/)

エントリー・ファイル名

エントリーのファイル名, CSS のファイル名 (拡張子除く 例: theme_nema)

ファイルのアップロード機能

テーマのサムネイルに利用する画像や CSS ファイルで利用する画像は、ファイルのアップロード機能を利用してアップロードします。アップロード先は、キーワードに入力するテーマのディレクトリ名（例: path/）と同じです。

アーカイブテンプレートを利用する

エントリー投稿の仕組みでも書きましたが、 CSS ファイルの内容は追記のフィールドに入力します。ですので、テーマで利用する CSS ファイルの作成には新たにテンプレートを用意します。また、.css というファイル形式にする為にアーカイブマッピング機能を利用します。

<$MTEntryKeywords$><$MTEntryBasename$>.css

CSS ファイルの URL を明示する為の link 要素を追加する

スタイルライブラリとして読み込むページの HTML ファイルには テーマの CSS ファイルを示す link 要素をエントリー投稿時に構築するようにします。

スタイルライブラリとして読み込むページとは、StyleCatcher の管理画面でテーマ/リポジトリへの URLに入力する URL の参照するページの事です。今回は一つのブログでテーマスタイルの紹介と、スタイルライブラリを兼ねたページを作成するので、作成するブログのトップページに link 要素を追加します。変更するテンプレートは、メインページテンプレートです。

テンプレートに追加するのは、MTArchiveList を利用して、全てのエントリーを表示するようにし、CSS ファイルの URL は作成したまとめで設定したようにキーワードの値を反映するようにしています。<$MTBlogURL$> 以下は、さきほど設定した出力フォーマットと同じです。

<MTArchiveList>
<MTEntries>
  <link rel="theme" type="text/x-theme" href="<$MTBlogURL$><$MTEntryKeywords$><$MTEntryBasename$>.css" />
</MTEntries>
</MTArchiveList>

サンプルテンプレート

今回変更・追加した2点のテンプレートサンプルを用意致しました。参考にしてください。

仕様をまとめる

こういった利用法の場合、仕様をまとめる作業を事前に行うと後々の作業を効率化できますので、まずエントリー投稿時の仕様をまとめます。また、生成するページの書き出し先を自由にカスタマイズできるようにアーカイブマッピング (公開設定) の仕様もまとめます。

<$MTEntryKeywords$><$MTEntryBaseName$>.html

作成した仕様を元にテンプレートを作成する

作成した仕様を元に作成するエントリーアーカイブテンプレートのサンプルは以下のようになります。

<?xml version="1.0" encoding="<$MTPublishCharset$>"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head profile="http://www.w3.org/2003/g/data-view">
    <meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <MTIfNonEmpty tag="MTEntryExcerpt">
      <meta name="description" content="<$MTEntryExcerpt encode_html="1"$>" />
    </MTIfNonEmpty>
    <title><$MTEntryTitle$></title>
    <link rel="home" title="" href="/" />
    <link rel="stylesheet" media="screen" href="<$MTBlogURL$>styles-site.css" type="text/css" />
    <link rev="made" href="mailto:mail@foo.com" title="お問い合わせメールアドレス" />
  </head>
  <body>
    <div class="section" id="container">
      <h1><$MTBlogName$> - <$MTEntryTitle$></h1>
      <div class="section" id="content">
        <$MTEntryBody$>
      </div>
    </div>
    <address>Copyright &copy; <$MTBlogName$>.</address>
  </body>
</html>

仕様を明示する

ブログの概要には、どんな目的のブログなのか書いておくと、管理が非常に楽になります。また、エントリーのルールは、各ブログ管理画面のスタートページ（トップページからブログの名前をクリックして最初に表示されるページ）に書いておくと投稿者が迷う事なく、更新を行えます。

メインのブログリストに

ブログの概略ページに

スタイルライブラリの作成に必要なファイル

スタイルライブラリを作成するにあたり、必要なファイルは以下になります。

• テーマスタイルシートファイル
• テーマのプレビュー画像 (2点)
• スタイルライブラリとして読み込むページの HTML ファイル

公開テーマのディレクトリ構成

公開するテーマは以下のようなディレクトリ構成で配布する必要があります。

ひとつのテーマは一つのディレクトリにまとめられ、テーマで使用される（CSS ファイル内で指定される）画像は、テーマプレビューの画像ファイルとともに、テーマディレクトリの中に含まれます。

テーマで使用される画像の形式は指定されません。またファイル名も統一する必要はありません。CSS ファイルと同じディレクトリに格納されるので、基本的に指定のサンプルは以下のようになります (background-image の場合)。

background-image: url(theme-style-image01.gif);

作成したテーマのプレビュー画像を用意する

StyleCatcher プラグインでテーマを参照した際に表示されるプレビュー画像を用意します。画像は2種類必要で、ルールに基づいた作成が必要になります。各々の概要は以下のようになります。どの画像が StyleCatcher 管理画面でどのように使用されるかは画像を参照してください。 (クリックで拡大します)

thumbnail.gif (サンプル画像)

スタイルライブラリを読み込んだ際に表示されるテーマ一覧、これまでキャッチしたテーマ一覧に使用される小さいサイズのテーマプレビュー画像です。gif 形式で、サイズは 120px*84px である必要があります。また、ファイル名も thumbnail.gif でなければなりません。

thumbnail-large.gif (サンプル画像)

テーマ一覧から、ひとつのテーマを選択し詳細を表示した際に使用される大きいサイズのテーマプレビュー画像です。.gif 形式で、サイズは 280px*210px である必要があります。また、ファイル名は thumbnail-large.gif でなければなりません。

スタイルライブラリページの作成

スタイルシートとプレビュー用画像の準備ができたら、今度はスタイルライブラリとなるページの XHTMLファイルを作成します。ページの内容は自由に作成していただいて問題ありませんが、link 要素でテーマスタイルシートの URL を指定する必要があります。以下にサンプルを示します。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head profile="http://www.w3.org/2003/g/data-view">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="StyleCatcher プラグインで利用できるスタイルライブラリ" />
    <meta name="dc.title" content="Style Library" />
    <title>Style Library</title>
    <link rev="made" href="mailto:admin@mail.address" title="管理者 メールアドレス" />
    <link rel="theme" type="text/x-theme" href="http://www.sixapart.com/movabletype/styles/bold_palettes/theme-beckett/theme-beckett.css" />
    <link rel="theme" type="text/x-theme" href="http://www.sixapart.com/movabletype/styles/classic/theme-earth/theme-earth.css" />
    <link rel="theme" type="text/x-theme" href="http://www.sixapart.com/movabletype/styles/classic/theme-green_grass/theme-green_grass.css" />
  </head>
  <body>
    ...
  </body>
</html>

サンプルのような HTML を用意し、link 要素で各テーマの CSS ファイルの URL へリンクします。この作業はスタイルライブラリを公開するにあたり、とても重要になります。link 要素一つではエラーになってしまう可能性がありますので、複数用意する事をお勧めします。ページの内容（<body></body> にコンテナされるコンテンツ）は無くても基本的にスタイルライブラリとしては機能します。