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

Movable Type 4.3 ではブログ記事やウェブページでのスライドショーが簡単に実現できるようになりました。

下記の画像をクリックすればサンプルページに移動します。移動先のページの画像のすぐ下にある「Previous」または「Next」のリンクをクリックすれば、画像が切り替わります。

以下、「MovableType.org - Features of 4.3: Entry Asset Manager」にもとづいた設定方法を紹介します。日本語化していない場合は管理画面の項目を適宜読み替えてください。

１．テンプレートの設定

ブログ管理画面の「デザイン」→「テンプレート」→「ブログ記事」をクリックして、 body の終了タグの直前に下記の内容を追加します。

<script type="text/javascript">
//<![CDATA[
var entryAssets = new Array(<mt:EntryAssets>'<mt:AssetThumbnailURL width="500">'<mt:Unless name="__last__">,</mt:Unless></mt:EntryAssets>);
 
if ( entryAssets.length != 0) {
    var entrySlideshow = document.getElementById('entry-gallery');
    var imgIndex = 0
 
    function viewImage(direc) {
        if (direc == 'next') imgIndex++;
        if (direc == 'prev') imgIndex--;
        if (imgIndex >= entryAssets.length) imgIndex = 0;
        if (imgIndex < 0 ) imgIndex = (entryAssets.length - 1);
        slideshowImage.setAttribute('src',entryAssets[imgIndex]);
        return false;
    }
 
    var slideshowImage = document.createElement('img');
    slideshowImage.setAttribute('src',entryAssets[imgIndex]);
    slideshowImage.setAttribute('alt','Slideshow Image');
    entrySlideshow.appendChild(slideshowImage);
 
    var slideshowNav = document.createElement('p');
 
    var slideshowPrev = document.createElement('a');
    slideshowPrev.setAttribute('id','slideshow-prev');
    slideshowPrev.innerHTML = '&laquo; Previous';
    slideshowPrev.setAttribute('href','#');
    slideshowPrev.setAttribute('onclick','viewImage("prev")');
    slideshowNav.appendChild(slideshowPrev);
 
    var slideshowNext = document.createElement('a');
    slideshowNext.setAttribute('id','slideshow-next');
    slideshowNext.setAttribute('href','#');
    slideshowNext.innerHTML = 'Next &raquo;';
    slideshowNext.setAttribute('onclick','viewImage("next")');
    slideshowNav.appendChild(slideshowNext);
 
    entrySlideshow.appendChild(slideshowNav);
}       
//]]>
</script>

この JavaScript にあるアイテム関連のテンプレートタグで、ブログ記事に関連付けられた画像を読み込み、配列に設定しています。

２．ブログ記事の投稿

ブログ記事本文に下記のマークアップを追加します。追加前に、フォーマットは「なし」または「改行を変換」を選択しておきます。

<div id="entry-gallery"></div>

設定後はこんな感じになります。

そして、ブログ編集画面右下のアイテム管理フィールドの「Add New 」をクリックして、好みの画像をアップロード（またはアップロード済の画像をブログ記事に関連付け）します。

設定後はこのようになります。

関連付けた画像をブログ記事本文フィールドに挿入する必要がないのが、このカスタマイズのキモです。サンプルのブログ記事編集画面の設定完了後の状態は次のようになります。

これで元記事のカスタマイズは設定完了ですが、メインページやアーカイブページでは id 属性が重複するので、その点を踏まえたカスタマイズについては別途エントリーしたいと思います。

Movable Type 4.3 がリリースされました。

MovableType.org - MT 4.3: Faster Performance, Powerful Search, More Page Views

本リリースに日本語版は含まれていませんが、日本語化を行えば、一部の管理画面が英語表記されるのみで利用可能です。

１．ページ分割機能

メインページやアーカイブページ（ユーザー・カテゴリー）にページ分割機能が追加されました。

• MovableType.org - Pagination for Static Templates
• Movable Type 4.3 の新機能（スタティックページのページ分割）

また、コメントのページ分割機能も追加されました。この機能追加により、システムテンプレートに「コメント一覧」というテンプレートが追加されています。

• MovableType.org - Comment Pagination
• Movable Type 4.3 α版レポート

２．ブログ記事のアイテム管理

アイテム管理をブログ記事編集画面上で行えるようになりました。これにより、4.2 まで付与されていた、アイテムとブログ記事を関連付けるキー（form 要素）をブログ記事本文に挿入する必要がなくなりました。

• MovableType.org - Features of 4.3: Entry Asset Manager
• Movable Type 4.3 α版レポート

３．Summary Object Framework

性能向上の新しいフレームワークが導入されるようです。

（以下、適当な訳なので間違ってたらすいません）このフレームワークは、MTのコアコードベースとプラグインがデータベースに任意の概要情報を保持することを許可し、高価な計算クエリーを概要テーブルに対する主キーによるルックアップに入れ替えます。フレームワークは、概要オブジェクトに依存する情報が変更されたときに概要オブジェクトを無効にし、キューイングされたワーカークラスが無効となった概要を非同期に作り直すといった、フレキシブルなメカニズムを含んでいます。

４．ドキュメントの改良

英語版のみですが、ドキュメンテーションを書き直しています。

• MovableType.org - Documentation Update

５．コンテンツなしのブログ複製

ブログの複製機能で、ブログ記事・ウェブページ・コメント・トラックバック・カテゴリーの除外をすることができるようになりました。これにより、デザインだけを他のブログに流用することができます。

• MovableType.org - Features of 4.3: Smarter Blog Cloning
• Movable Type 4.3 の新機能（コンテンツなしのブログ複製）

６．アプリケーションのパフォーマンスと開発者向けツール

アプリケーション内でのブログ・エントリー・ユーザーの検索性能が向上しました。また、システム管理画面の「設定」→「全般」にパフォーマンスログとデバグモードの設定項目を追加しました。

• Movable Type 4.3 α版レポート

Movable Type 4.3b より、コンテンツなしのブログ複製機能が追加されました。これにより、あるブログのデザイン（テンプレート）だけを他のブログに利用することができるようになります。

と、このエントリーを書きためていたところ、下記の記事が出ました。

MovableType.org - Features of 4.3: Smarter Blog Cloning

１．使用方法

システム管理画面の「新規作成」→「ブログ」をクリックし、ブログ一覧画面から複製したいブログを選択して、さらにプルダウンメニューから「ブログの複製」を選択して「Go」をクリック。

Movable Type 4.3 では、「複製の設定」で除外する項目を選択できるようになっています。ここでは表示されているすべての項目を除外します。「ブログ記事/ウェブページ」をチェックすると、「コメント」「トラックバック」は自動的にチェックが入ります。

選択した除外項目を表示します。設定に問題がなければ右下の「複製」をクリック。

複製しました。

複製したブログには、ブログ記事やコメントは引き継がれていないことがわかります。

２．プラグイン

4.0～4.2 をご利用の方は、小川宏高さん作成の「BlogSkeletonCloner」を利用すれば、この機能とほぼ同じことが実現できます。

BlogSkeletonClonerプラグイン

Movable Type 4.3b より、スタティックページのページ分割機能が追加されました。

具体的には、メインページやカテゴリアーカイブページの1ページ目はスタティックパブリッシングで出力するとともに、下の画像のようにページナビゲーションを表示し、2ページ目以降については、mt-search.cgi を使って表示します。

以下、下記の記事を元に、メインページとカテゴリアーカイブページのページ分割の設定方法について紹介します。

MovableType.org - Pagination for Static Templates

Movable Type 4.3b は以下のリンクからダウンロードできます。

MovableType.org - Movable Type 4.3 Beta

以下の説明は、インストール時に言語から「日本語」を選択した状態で解説しています。英語版のまま使っている場合、画面の項目名は適宜読み直してください。

１．テンプレートモジュール「Search Pagination」の追加

ブログ記事の「デザイン」→「テンプレート」→「テンプレートモジュールを作成」をクリックして、「Search Pagination」という新しいテンプレートモジュールを作成します。テンプレートには以下の内容をペーストしてください。

<mt:If name="search_results">
<div class="content-nav">
    <mt:IfPreviousResults><a href="<$mt:PreviousLink$>" rel="prev" onclick="return swapContent(-1);">&lt; Previous</a>&nbsp;&nbsp;</mt:IfPreviousResults><mt:PagerBlock><mt:IfCurrentPage><$mt:Var name="__value__"$><mt:Else><a href="<$mt:PagerLink$>"><$mt:Var name="__value__"$></a></mt:IfCurrentPage><mt:Unless name="__last__">&nbsp;</mt:Unless></mt:PagerBlock><mt:IfMoreResults>&nbsp;&nbsp;<a href="<$mt:NextLink$>" rel="next" onclick="return swapContent();">Next &gt;</a></mt:IfMoreResults>
</div>
<mt:Else>
    <mt:If name="main_index">
        <mt:BlogEntryCount setvar="total_entries">
    <mt:Else>
        <mt:ArchiveCount setvar="total_entries">
    </mt:If>
    <mt:If name="total_entries" gt="$entries_per_page">
        <mt:Ignore>Set the total number of entries to iterate through the pages</mt:Ignore>
        <mt:If name="total_entries" op="%" value="$entries_per_page" eq="0">
            <mt:Var name="total_entries" op="/" value="$entries_per_page" setvar="total_pages">
        <mt:Else>
            <mt:Var name="total_entries" op="%" value="$entries_per_page" setvar="remainder">
            <mt:Var name="total_entries" op="-" value="$remainder" setvar="total_pages">
            <mt:SetVar name="total_pages" op="/" value="$entries_per_page">
            <mt:SetVar name="total_pages" op="++">
        </mt:If>
 
        <div class="content-nav">
            <mt:For from="1" to="$total_pages" step="1">
            <mt:If name="__first__">
                <$mt:Var name="__index__"$>
            <mt:Else>
                <a href="<mt:Var name="search_link" strip_linefeeds="1" trim="1"><$mt:Var name="__index__"$>"><$mt:Var name="__index__"$></a>
            </mt:If> 
            </mt:For>
            <a href="<mt:Var name="search_link" strip_linefeeds="1" trim="1">2" rel="next">Next &raquo;</a>
        </div>
    </mt:If>
</mt:If>

２．テンプレートモジュール「Search Header Data」の追加

１項と同様の手順で「Search Header Data」という新しいテンプレートモジュールを作成します。テンプレートには以下の内容をペーストしてください。

<mt:Ignore>Use the entries_per_page variable to set the number of entries per page</mt:Ignore>
<mt:Var name="entries_per_page" value="10">
<mt:SetVarBlock name="search_link">
    <mt:If name="main_index">
        <mt:SetVarBlock name="index_string">&archive_type=Index</mt:SetVarBlock>
    </mt:If>
    <mt:If name="archive_template">
        <mt:SetVarBlock name="archive_string">&archive_type=<mt:ArchiveType></mt:SetVarBlock>
        <mt:If name="datebased_archive">
            <mt:SetVarBlock name="date_string">&year=<mt:ArchiveDate format='%Y'>&month=<mt:ArchiveDate format='%m'>&day=<mt:ArchiveDate format='%d'></mt:SetVarBlock>
        </mt:If>
        <mt:If name="category_archive">
            <mt:SetVarBlock name="category_string">&category=<mt:CategoryID></mt:SetVarBlock>
        </mt:If>
        <mt:If name="author_archive">
            <mt:SetVarBlock name="author_string">&author=<mt:AuthorID></mt:SetVarBlock>
        </mt:If>
    </mt:If>
    <mt:CGIPath><mt:SearchScript>?IncludeBlogs=<mt:BlogID>&template_id=<mt:Var name="template_id">&limit=<mt:Var name="entries_per_page"><mt:Var name="index_string"><mt:Var name="date_string"><mt:Var name="category_string"><mt:Var name="author_string"><mt:Var name="archive_string">&page=
</mt:SetVarBlock>

赤色の「10」が、1ページに表示する記事数になります。表示記事数を変更したい場合はこの値を書き換えてください。

３．メインページの修正

ブログ記事管理画面の「デザイン」→「テンプレート」→「Main Index（メインページ）」をクリックし、まず、

<$mt:Include module="HTML Head"$>

のすぐ下に、下記のサブテンプレートを追加します。

<mt:BuildTemplateID setvar="template_id">
<$mt:Include module="Search Header Data"$>

また、

<mt:Entries>
    <mt:Ignore><!-- Use the Entry Summary module for each entry published on this page --></mt:Ignore>
    <$mt:Include module="Entry Summary"$>
</mt:Entries>

を、次のサブテンプレートに書き換えてください。

<mt:Entries limit="$entries_per_page">
    <mt:Ignore><!-- Use the Entry Summary module for each entry published on this page --></mt:Ignore>
    <$mt:Include module="Entry Summary"$>
</mt:Entries>
<$mt:Include module="Search Pagination"$>

注：元記事は「Search Pagination」が「Search Navigation」になってますが、テンプレートモジュール名と不一致なため、修正しています。

４．カテゴリーアーカイブの修正

変更内容はメインページと同じです。

ブログ記事管理画面の「デザイン」→「テンプレート」→「Category Entry Listing（カテゴリ別ブログ記事リスト）」をクリックし、まず、

<$mt:Include module="HTML Head"$>

のすぐ下に、下記のサブテンプレートを追加します。

<mt:BuildTemplateID setvar="template_id">
<$mt:Include module="Search Header Data"$>

また、

<mt:Ignore><!-- Limit number of entries to the number set in Blog Entry Settings --></mt:Ignore>
<mt:Unless name="datebased_archive"><$mt:Var name="limit" value="auto"$></mt:Unless>
<mt:Entries limit="$limit">
    <mt:Ignore><!-- Use the Entry Summary module for each entry published on this page --></mt:Ignore>
    <$mt:Include module="Entry Summary"$>
</mt:Entries>

を、次のサブテンプレートに書き換えてください。

<mt:Entries limit="$entries_per_page">
    <mt:Ignore><!-- Use the Entry Summary module for each entry published on this page --></mt:Ignore>
    <$mt:Include module="Entry Summary"$>
</mt:Entries>
<$mt:Include module="Search Navigation"$>

５．表示件数について

分割したページも含めた件数の設定は、これまで同様、ブログ記事管理画面の「設定」→「ブログ記事」の「ブログ記事の表示数」で行ないます。

Movable Type 4.3（MTOS 4.3）と思われるリポジトリを TortoiseSVN でチェックアウトして、ローカルPCにインストールしてみました。

ということでややフライング気味ですが、Movable Type 4.261 との差分を、気がついた部分についてレポートします。

１．コメントのページ分割

ダウンロードしたバージョンではまだ動作しませんでしたが、コメントのページ分割が行なえるようです。

コメントのページ分割はテンプレートタグではなく、JavaScript で制御するようで、「コメント」テンプレートモジュールの赤枠の部分が該当します。

これに伴い、JavaScript（mt.js）にも大幅な追加が行なわれています。

２．画像挿入時のXHTML変更

ブログ記事・ウェブページの画像挿入時に付与される form 要素が外されました。

Movable Type 4.261 の画像挿入時

Movable Type 4.3 の画像挿入時

３．ブログ記事編集画面でのアイテム管理

ブログ記事編集画面の右下にアイテム管理の項目が追加されました。リンクをポイントすると図のようにサムネイルも表示されます。

４．システム管理画面変更

システム管理画面の「全般設定」が、ご覧のように変わりました。デバグモードの設定パフォーマンスロギングの設定、テストメール送信フィールドが追加されています。

５．ファイル差分

最後に、Movable Type 4.261 と Movable Type 4.3 の差分を掲載します（2009年7月10日時点：Revision 4001 なので、まだまだ変更になると思います）。

• default_templates/comments.mtml
• default_templates/entry.mtml
• default_templates/javascript.mtml
• extlib/SOAP/Transport/HTTP.pm
• lib/MT/App/Comments.pm
• lib/MT/App/CMS.pm
• lib/MT/App/Search.pm
• lib/MT/App/Wizard.pm
• lib/MT/Asset.pm
• lib/MT/CMS/Asset.pm
• lib/MT/CMS/Comment.pm
• lib/MT/CMS/Dashboard.pm
• lib/MT/CMS/Entry.pm
• lib/MT/CMS/Search.pm
• lib/MT/CMS/Template.pm
• lib/MT/CMS/Tools.pm
• lib/MT/Core.pm
• lib/MT/DefaultTemplates.pm
• lib/MT/Entry.pm
• lib/MT/ObjectDriver/DDL/Pg.pm
• lib/MT/ObjectDriver/Driver/DBI.pm
• lib/MT/ObjectDriverFactory.pm
• lib/MT/Template/ContextHandlers.pm
• lib/MT/Util/ReqTimer.pm
• lib/MT.pm
• mt-check.cgi
• mt-static/css/main.css
• mt-static/css/simple.css
• mt-static/css/structure.css
• mt-static/js/mt_core_compact.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-static/themes-base/blog.css
• php/lib/mtdb_base.php
• php/lib/mtdb_mysql.php
• php/mt.php
• tmpl/cms/cfg_system_general.tmpl
• tmpl/cms/dialog/asset_insert.tmpl
• tmpl/cms/dialog/asset_list.tmpl
• tmpl/cms/dialog/asset_replace.tmpl
• tmpl/cms/include/asset_upload.tmpl

巷の MT ファンは Movable Type 5 で盛り上がってますが、以下の記事によると、Movable Type 4.3 が 7月29日にリリースされます。α版は明日公開されるようです。

MovableType.org - Looking ahead to MT5

Movable Type 4.3 では、さまざまなバグフィックス、パフォーマンスおよびスケーラビリティに関する改修が行なわれるようです。