TopMovable Type > バージョン別 > 4.3 > 2009年7月
2009年7月31日

Movable Type 4.3 でスライドショーを実現する(その1:基本動作)

July 31,2009 12:55 AM
Tag:[, , , ]
Permalink

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

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

サンプル
サンプル

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

1.テンプレートの設定

ブログ管理画面の「デザイン」→「テンプレート」→「ブログ記事」をクリックして、 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 にあるアイテム関連のテンプレートタグで、ブログ記事に関連付けられた画像を読み込み、配列に設定しています。

2.ブログ記事の投稿

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

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

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

設定後

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

Add New

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

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

Add New

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

Comments [2] | Trackbacks [0]
2009年7月30日

Movable Type 4.3 リリース

July 30,2009 12:57 PM
Tag:[, ]
Permalink

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

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

Movable Type 4.3

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

1.ページ分割機能

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

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

2.ブログ記事のアイテム管理

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

3.Summary Object Framework

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

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

4.ドキュメントの改良

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

5.コンテンツなしのブログ複製

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

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

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

Comments [0] | Trackbacks [1]

Movable Type 4.3 の新機能(コンテンツなしのブログ複製)

July 30,2009 1:33 AM
Tag:[, , ]
Permalink

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

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

MovableType.org - Features of 4.3: Smarter Blog Cloning

1.使用方法

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

ブログ一覧画面

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

ブログの複製1

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

ブログの複製2

複製しました。

ブログの複製3

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

ブログの複製4

2.プラグイン

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

BlogSkeletonClonerプラグイン
Comments [0] | Trackbacks [0]
2009年7月29日

Movable Type 4.3 の新機能(スタティックページのページ分割)

July 29,2009 12:55 AM
Tag:[, , ]
Permalink

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

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

1.テンプレートモジュール「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>

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

1項と同様の手順で「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ページに表示する記事数になります。表示記事数を変更したい場合はこの値を書き換えてください。

3.メインページの修正

ブログ記事管理画面の「デザイン」→「テンプレート」→「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」になってますが、テンプレートモジュール名と不一致なため、修正しています。

4.カテゴリーアーカイブの修正

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

ブログ記事管理画面の「デザイン」→「テンプレート」→「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"$>

5.表示件数について

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

ブログ記事の表示数

Comments [3] | Trackbacks [0]
2009年7月10日

Movable Type 4.3 α版レポート

July 10,2009 1:55 AM
Tag:[, ]
Permalink

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

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

1.コメントのページ分割

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

コメントのページ分割

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

「コメント」テンプレートモジュール

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

2.画像挿入時のXHTML変更

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

Movable Type 4.261 の画像挿入時
本文テキストエリア(4.261)

Movable Type 4.3 の画像挿入時
本文テキストエリア(4.3)

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

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

アイテム管理の項目が追加

4.システム管理画面変更

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

全般設定画面

5.ファイル差分

最後に、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
Comments [0] | Trackbacks [0]
2009年7月 9日

Movable Type 4.3 α版リリース

July 9,2009 1:11 AM
Tag:[, ]
Permalink

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

MovableType.org - Looking ahead to MT5

Movable Type 4.3 α版

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

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3