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

当ブログでの配布テンプレートのカラムレイアウトサイズを簡単に変更するためのツール「ColumnResizer」をリニューアルしました。このツールは3年ほど前に公開していたものです。タイトルのWeb2.0風のロゴも懐かしい感じです。

ツールの上半分に表示されている操作パネルからカラムレイアウトを選択し、表示されたスライドバーを操作すると、下半分に表示されているブログのカラムレイアウトをダイナミックに変更するというものです。利用方法の詳細は下半分のブログ本文に記載しています。

リニューアルのきっかけは、8月に行ったサーバ移転で、トップページに表示しているColumnResizerのリンク切れになったのを発見し、リンクを直したときにツールの動作もあわせて確認し、「（手前味噌ですが）意外によくできていたなぁ」と感心したためです。

スライドバーの部分は、以前のままWebFX：Slider（参考記事）を使っています。

リニューアルによる主な修正箇所は次の通りです。

• フォントサイズの変更
• フッタの追加
• prototype.js→jQueryへの変更

Firebugなどを利用すれば、カラムサイズの変更はそれほど難しくない時代になったのですが、こういったツールもまだまだ捨てたものではないと思います。

ということで、当ブログのテンプレートをご利用の方、お試しください。

「Movable Type 5.03へのアップグレードで再構築時に「Script Error」が発生する件について」の問題について、シックスアパートのサポートより連絡を頂き、解消しました。

2010.10.06追記 本問題はMovable Type 5.031で解消されました。

対処前

対処後

対処方法は、lib/MT/PublishOption.pmを任意のエディタで開いて、下の赤色で示す1行をコメントアウトまたは削除します。

変更前

sub archive_build_is_enable {
    my ( $blog_id, $at ) = @_;
    require MT::TemplateMap;
    local $Data::ObjectDriver::DEBUG = 1;
    my $map = MT::TemplateMap->load({
        blog_id => $blog_id,
        archive_type => $at,
        build_type => { 'not' => DISABLED() },
    });
    $map ? 1 : 0;
}

変更後

sub archive_build_is_enable {
    my ( $blog_id, $at ) = @_;
    require MT::TemplateMap;
    my $map = MT::TemplateMap->load({
        blog_id => $blog_id,
        archive_type => $at,
        build_type => { 'not' => DISABLED() },
    });
    $map ? 1 : 0;
}

保存後、ファイルを元のディレクトリにアップロードすれば正常に再構築が行えるようになります。

当ブログのサイドバーなどに表示している「最近のコメント」は、「「最近のコメント」をネイティブタグのみで適正に表示する」で紹介している方法で、

• 新着コメントがあるエントリーを降順に表示
• エントリー内のコメントを昇順に表示

としているのですが、Movable Type 5にバージョンアップしてから上記の規則にしたがった表示にならなくなりました。

１．問題

下の画像は、バージョンアップ後の「最新コメント500」のページのコメント表示です。一番下のコメント（9月26日投稿）よりも、それ以前に投稿されたコメントがあるエントリーが上に表示されています。

２．原因

ソースコードを確認したところ、Movable Type 5でのMTCommentsタグの動作が変更されていました。Movable Type 4では、MTCommentsタグにsort_orderモディファイアを設定していない場合、sort_orderモディファイアは「descend」がデフォルト値となりますが、Movable Type 5では「ascend」がデフォルト値となるようです。

例えば、以下のサブテンプレートは、Movable Type 4ではコメントが降順に出力されますが、Movable Type 5では昇順に出力されます。

<mt:Comments lastn="10">
・・・
</mt:Comments>

Movable Type 4でこのようなサブテンプレートを利用している場合、Movable Type 5にバージョンアップした後、異なる出力になる可能性があります。

冒頭の「最近のコメント500」のサブテンプレートにはsort_orderモディファイアを設定していなかったため、適正に表示されていませんでした。

３．対処方法

コメントを降順に出力する必要がある場合、次のように、MTCommentsタグに「sort_order="descend"」を付与してください。

<mt:Comments lastn="10" sort_order="descend">
・・・
</mt:Comments>

テンプレート修正後の表示は次の通りです。

XREA/CORESERVERで、Movable TypeのCaptchaが表示されない不具合があります。Movable Type 4.x/5.xで発生するようです。

当ブログのコメントでやりとりがありましたので本エントリーで情報展開致します。

１．問題点

XREA/CORESERVERで、Movable Typeのコメント投稿にCaptchaを設定しても、Captcha画像が表示されません。

問題発生時のコメント投稿部分のCaptcha

本来のコメント投稿部分のCaptcha

事象を確認できたのはXREA+です。また頂いたコメントからCORE-MINIも発生するようです。CORE-Aでは不具合は確認できませんでした。

なお、Captchaの設定は、管理画面の「設定」→「コミュニケーション」でCAPTCHAプロバイダから「Movable Type既定」を選択して、インデックステンプレートを再構築します。

この作業を完了して、XREA/CORESERVERでCaptchaが表示されない場合は本エントリーの事象に遭遇している可能性があります。

２．原因

ネットで調べたところ、XREA/CORESERVERではImageMagickのmontageコマンドが動作しないようです。Movable TypeのCaptcha表示の内部処理では、montageコマンドを実行するためにPerlMagick APIのMontageを使用しているので、その部分でエラーになっているようです。

３．修正内容

lib/MT/Util/Captcha.pmを任意のエディタで開き、以下の部分を修正します（赤色部分を削除して、青色部分を追加）。

修正前

sub _generate_captcha {
    …中略…
    # Combine all the individual tiles into one block
    my $tile_geom    = join('x', $len, 1);
    my $geometry_str = join('x', WIDTH(), HEIGHT());
    my $im = $imbase->Montage(geometry => $geometry_str,
                              tile     => $tile_geom);
    $im->Blur();
    …中略…
}

修正後

sub _generate_captcha {
    …中略…
    # Combine all the individual tiles into one block
    my $tile_geom    = join('x', $len, 1);
    my $geometry_str = join('x', WIDTH(), HEIGHT());
    my $im = $imbase->Append(stack=>'false');
    $im->Blur();
    …中略…
}

Appendは画像を結合するAPIです。stackの値に「false」を設定すると横並び（左から右）に結合します。「false」はデフォルト値なので、「stack=>''」としても同様の効果があります。「true」を設定するか、stackを記述しないと縦方向（上から下）に結合します。

参考：縦方向に結合したCaptcha

３．参考情報

参考情報は以下です。ありがとうございました。

• chiffon.さんのコメント
• XREA&CORE SUPPORT BOARD - ImageMagickのmontageコマンドにてエラー
• 楓 software: ボタン絵結合ツール

Movable Type 5.03へのアップグレード後（または5.03を新規インストール後）、管理画面右上の再構築ボタンをクリックすると、表示された再構築画面に「Script Error」のエラーメッセージが表示される事象が、特定のサーバで発生するようです。ウェブサイト・ブログいずれの再構築も同様です。

2010.10.06追記 本問題はMovable Type 5.031で解消されました。

「エラーが発生します」というコメントを頂いて確認したところ、利用しているCORESERVERで同様の事象が発生しました。

今のところ発生が確認されているサーバは、XREA・CORESERVERです。ブログ記事一覧やテンプレート編集画面からの再構築は正常に行えます。

ということで、現在サポートに問い合わせ中です。解消しました。対処方法については「Movable Type 5.03へのアップグレードで再構築時に「Script Error」が発生する件について（つづき）」を参照してください。

米ビデオエッグ社が米シックス・アパート社と合併し、米SAYメディア社を設立することになり、一昨日・昨日のTwitterでSix ApartやMovable Typeに関する大量のツイートが流れてました。

シックス・アパート日本法人による、米SAYメディア社のプレスリリースの抄訳は以下です。

米ビデオエッグ社が米シックス・アパート社と合併し、米SAYメディア社を設立へ

米SAYメディア社の原文は以下です。

VideoEgg to Acquire Six Apart and Create SAY Media

シックス・アパート日本法人はSAYメディア社の100％子会社になりますが、社名や既存事業はそのままのようです。

米シックス・アパート社は、年内をメドに米ビデオエッグ社と合併し、新会社SAYメディア社として新しいスタートを切ります。合併後は、シックス・アパート日本法人はSAYメディア社の100％子会社になりますが、社名は「シックス・アパート株式会社」のまま継続し、当面の間、社名変更の予定はありません。

シックス・アパート日本法人は既存事業を継続、社名もそのままに

関連記事は以下です。

• ブログヘラルド - Six Apartが吸収合併され、Movable Typeの運営者が変わる
• TechCrunch Japan - 広告ネットワークのVideoEggがSix Apartを買収―新会社SAY Media、明日立ち上げへ
• CNET Japan - 広告配信のVideoEgg、Six Apartを買収--日本法人は存続
• ITmedia News - Six Apartを米広告企業が買収　新会社「SAY Media」に　日本法人は社名変更せず、MT開発継続
• サーチナ - 米広告会社ＶｉｄｅｏＥｇｇ、Ｓｉｘ　Ａｐａｒｔを買収・新会社ＳＡＹ　Ｍｅｄｉａを設立・日本法人は開発ラインも含め現状維持

Windows Mobileで画面キャプチャができる「KTCapt」の紹介です。このツールを利用すれば、ビットマップかJPEG形式でWindows Mobileの画面をキャプチャできます。

１．インストール

KTCaptのページにアクセスして、KTCapt.arm.CABまたはKTCaptSP.arm.CABをクリックすれば実行ファイルをダウンロードできます。

あとはダウンロードしたファイルをスマートフォンから実行してインストールすれば完了です。

インストール後、プログラム一覧に「KTCapt」と「KTCapt（Option）」が表示されます。

２．キャプチャ

キャプチャするには、先程のプログラム一覧画面に表示されている「KTCapt」をタップするだけです。キャプチャ実行までの時間はオプションで設定します。左上のメニューからも起動することができます。

「KTCapt（Option）」をタップすれば、主に次のオプションが設定できます。

• 保存先フォルダ
• 保存形式（ビットマップ・JPEG）
• JPEG品質
• キャプチャ実行までの秒数

他にも色々とキャプチャツールはあるかもしれませんが、とりあえずご紹介まで。

Windows Mobile デバイスセンターのインストール方法の紹介です。

Windows Mobile デバイスセンターをインストールすることになったきっかけは、そもそも現在使用中のスマートフォン「T-01A」をPCと接続する際に利用する「Active Sync」をインストールしようとしたのですが、Windows VistaではActive Syncが利用できないことが判明し、ネットで調べていったところ、「Windows Mobile デバイスセンター」がその後継であることが分かったためです。

で、「Windows Mobile デバイスセンター」は簡単にインストールできるかと思ったら、ウェブサイトの説明が分かりにくく、また途中で躓いたりしたので、本エントリーで手順を紹介したいと思います。

まず、「Windows Mobile デバイスセンター」のページにアクセスして、「続行」をクリック。

「Windows Genuine Advantage プラグインのインストール」のページに遷移するので、「プラグインのダウンロード」をクリック。

「WGAPluginInstall.exe」がダウンロードされるので、任意のフォルダに保存した後、実行します。インストールはすぐに完了します。

インストールすると「正規 Windows の確認」という画面に遷移するので、「続行」をクリックします。

「GenuineCheck.exe」がダウンロードされるので、任意のフォルダに保存した後、実行します。実行すると次のような画面が表示されるので、表示された「確認コード」をコピーします。

前の画面に確認コードを入力して「確認」をクリックします。

これで「Windows Mobile デバイスセンター」をダウンロードするための実行ファイルをダウンロードする画面に遷移します。

言語を「日本語」のままにして「ダウンロード」をクリックすると、次のような「ご指定の画面が見つかりませんでした」というエラー画面が表示されてしまいます。

ということで、言語から「英語」を選択して「変更」をクリックします。

英語版のページに遷移するので、ページ中ほどにある「Continue」をクリック。

「Genuine Windows Validation」というページに移動します。ここで「2.Enter your validation code. 」に、さきほどの「確認キー」を入力して、「Validate」をクリックします。「1.Run the validation tool.」を実行しても前述の「GenuineCheck.exe」がダウンロードされるだけなので、実行する必要はありません。

これでダウンロード画面に遷移するので、ページ中ほどにある「Download」をクリック。試しに「Change Language：」で「Japanese」を選択してみましたが、さきほどのエラー画面に辿り着いてしまったので、デフォルトの「English」のまま、ダウンロードを実行してください。

「drvupdate-x86.exe」がダウンロードされるので、任意のフォルダに保存した後、実行します。

実行すると、インストールが開始します。次の画面が表示されたあと、インストールはバックグラウンドで実行されます。

インストールが完了するとプログラムメニューに「Windows Mobile Device Center」が表示されるので、クリックします。

ライセンス条項が表示されるので、「同意する」をクリック。

「Windows Mobile Device Center」が起動されました。

WordPressの記事に挿入した画像のサムネイルを表示する「QF-GetThumb プラグイン」について紹介します。

１．プラグインの機能

プラグインを適用することで、記事に挿入した画像から自動的にサムネイル（キャッシュ）を生成します。

1つの記事に対して作成するサムネイルは1つだけです。記事中に複数の画像がある場合、何番目の画像をサムネイルにするか、指定することもできます。

２．ダウンロード・インストール

QF-GetThumbのページ右にある「Download Version 1.1.3（2010年9月現在のバージョン）」をクリック。

ダウンロードしたアーカイブを展開して、中にある「qf-getthumb」フォルダをwp-content/pluginsディレクトリにアップロードします。

管理画面左メニューの「プラグイン」をクリックして、次の画面で「QF-GetThumb」の「有効化」をクリックすればインストール完了です。

別の手順として、次のようにプラグイン検索によるインストールもあります。

まず、管理画面左メニューの「プラグイン」をクリックして、次の画面で「新規追加」をクリック。

キーワードに「QF-GetThumb」を入力して「プラグインの検索」をクリック。

QF-GetThumbの「いますぐインストール」をクリック。

接続情報を設定して開始をクリック。

インストールが完了したら「プラグインの有効化」をクリック。

３．設定画面

有効化すると管理画面左の「設定」メニューに「QF-GetThumb」が表示されるので、クリック。

次の各オプションを設定します。なおオプションの値はデフォルトで設定されるようなので変更する必要がなければそのままでいいと思います。

• ドメイン名：ドメインを設定。「www」などのサブドメインは設定しません。
• フルドメイン名：サブドメインを含めたドメインをURL形式で記述。末尾にスラッシュを設定します。
• ドキュメントルート：サーバのドキュメントルート（ブラウザに上記の「フルドメイン名」を入力したときにアクセスされるパス）を設定します。
• デフォルト画像：画像がない場合の代替画像。デフォルトはプラグインで用意されている画像のパスが設定されます。
• 保存フォルダ名：サムネイルを保存するフォルダ名を設定します。
• 接頭句：サムネイルファイル名の先頭に付与する文字列を設定します。

４．テンプレートタグ

テンプレートタグ「the_qf_get_thumb_one」をテンプレートに記述することで、冒頭のようなサムネイルが表示されます。

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permalink a <?php the_title_attribute(); ?>"><?php echo the_qf_get_thumb_one('num=0&width=75','/wp-content/plugins/qf-getthumb/default_image.png'); ?></a>

the_qf_get_thumb_oneの形式と各パラメータの意味は次の通りです。

関数の形式

function the_qf_get_thumb_one($gt_settings = "", $default_image = "", $source = Null) {...}

パラメータの意味

• $gt_settings（設定値は&で区切ります）：
  • num：何番目の画像を取り出すかを指定。省略可。デフォルトは「0」
  • width：サムネイルの幅を指定。デフォルトは「0」
  • height：サムネイルの高さを指定。デフォルトは「0」
  • tag：「1」を設定すればimg要素を出力。「0」を設定すれば画像のURLを出力。デフォルトは「1」
  • global：「0」を設定すれば、画像を同一サーバ内のデータに限定。「1」を設定すれば限定しない。場合デフォルトは「0」
  • crop_w：クロップ時の横幅を指定。デフォルトは「0」
  • crop_h：クロップ時の縦幅を指定。デフォルトは「0」
  • find=string：検索文字列を指定（全文検索一致データの画像指定）
• $default_image：画像がない場合は、ここに指定された値を返却します（それもなければfalseを返却）
• $source：ソース取得先の指定（なければ the_content を参照）

５．正方形のサムネイルを表示する場合

このプラグインはデフォルトの状態では正方形のサムネイルを出力することができません。正方形のサムネイルを表示するには、以下の記事を参考に、ソースコードを修正してください。

around design - サムネイルを自動で作成して表示するプラグイン「QF-GetThumb」

ソースコード修正後、正方形で出力するには、次のようなパラメータを設定します。

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permalink a <?php the_title_attribute(); ?>"><?php echo the_qf_get_thumb_one('width=75&crop_h=75&height=75&crop_w=75','/wp-content/plugins/qf-getthumb/default_image.png'); ?></a>

６．その他

サムネイルを作成するプラグインとして、「Post Thumbs plugin」もあります

Post Thumbs plugin（参考記事）

Windows Vistaのエクスプローラーでグループ表示をやめるtipsです。

エクスプローラーの「グループ表示」とは、「名前」や「サイズ」などでファイルを分けて表示する機能を指します。下の画像は、ファイルの種類「アプリケーション」「テキストドキュメント」「ファイルフォルダ」でグループ表示を行っている例です。

グループ表示をやめるには、「表示」→「グループで表示」→「（なし）」を選択するだけです。

これでグループ表示が解除されます。

消費量が多い

Movable Typeで、デーtベースに定義されているテーブルのフィールド（オブジェクトデータ）をそのまま取得する方法です。

Movable Typeのブログ記事やブログなど、各オブジェクトのデータをPerlで取得するには、次のように記述します。下はブログ記事ID「1」のブログ記事タイトルを取得する例です。

use MT::Entry;
my $entry_id = '1';
my $entry = MT::Entry->load( $entry_id );
my $title = $entry->title;

ところで、Movable Type 5における、ブログのサイトURLやサイトパスは、ウェブサイトのサイトURLとサイトパスと結合するため、データベースには「/::/＋サブディレクトリ」という形式で保存されています。

以下は、phpMyAdminで参照したmt_blogのサイトURL（blog_site_url）です。一番上がウェブサイトURLで、その下の2つは、ウェブサイトに属するブログのブログURLです。真ん中のブログのブログURLは「http://user-domain/1/」、一番下のブログのブログURLは「http://user-domain/2/」となります。

サブドメインの場合は「サブドメイン＋/::/」となります。

このブログURLのデータを、「/::/」が付与されたまま取得したい場合、

use MT::Blog;
my $blog_id = '2';
my $blog = MT::Blog->load( $blog_id );
my $site_url = $blog->site_url;

と記述しても取得することができず、通常のURLとなります。

これは、ブログのサイトパスを取得する際に使う、MT::Blog::site_url内で親ウェブサイトのパスと結合する処理になっているためです（下）。

sub site_url {
    my $blog = shift;
 
    if (@_) {
        return $blog->SUPER::site_url(@_);
    } elsif ( $blog->is_dynamic ) {
        my $cfg = MT->config;
        my $path = $cfg->CGIPath;
        if ($path =~ m!^/!) {
            # relative path, prepend blog domain
            my ($blog_domain) = $blog->archive_url =~ m|(.+://[^/]+)|;
            $path = $blog_domain . $path;
        }
        $path .= '/' unless $path =~ m{/$};
        return $path;
    } else {
        my $url = '';
        if ($blog->is_blog()) {
            if (my $website = $blog->website()) {
                $url = $website->SUPER::site_url;
            }
            else {
                # FIXME: there are a few occasions where
                # a blog does not have its parent, like (bugid:102749)
                return $blog->SUPER::site_url;
            }
            my @paths = $blog->raw_site_url;
            if ( 2 == @paths ) {
                if ( $paths[0] ) {
                    $url =~ s!^(https?)://(.+)/$!$1://$paths[0]$2/!;
                }
                if ( $paths[1] ) {
                    $url = MT::Util::caturl( $url, $paths[1] );
                }
            }
            else {
                $url = MT::Util::caturl( $url, $paths[0] );
            }
        }
        else {
            $url = $blog->SUPER::site_url;
        }
 
        return $url;
    }
}

前置きが長くなりましたが、データベース上のデータをそのまま取得するには、Data::ObjectDriver::BaseObject::columnを利用し、columnのパラメータに、取得したいフィールドのフィールド名を指定します。

use MT::Blog;
my $blog_id = '2';
my $blog = MT::Blog->load( $blog_id );
my $site_url = $blog->column('site_url');

Data::ObjectDriver::BaseObjectは、MT::Objectが継承しているので、ソースコード内で意識する必要はありません。

すでにご存知の方も多いと思いますが、シックスアパートが提供する「Vox」サービスが、2010年10月1日で終了することになりました。

【Voxサービス終了のお知らせ】 Voxは2010年10月1日早朝にサービスを終了いたします

※クリックすると画像を拡大します。元サイトへのリンクは行っていません。

Voxは2006年秋にリリースされ、約4年間のサービス提供でした。サービス終了は大変残念ですが、これも時代の流れでしょうか。

サービス終了までの流れは次の通りです。記事投稿が可能なのは本日早朝までです。

• 2010年9月3日早朝：Voxの新規ユーザ登録機能を停止
• 2010年9月16日早朝：記事の投稿ならびにフォト・ムービーの新規投稿機能を停止
• 2010年10月1日早朝：Voxサービスの提供を全て終了

サービス終了に伴い、Voxブログの記事等を個人向けTypePad Proに移行できるツール（「Voxインポートツール」）が提供されています。

TypePadの「Voxインポートツール」について

TypePad Proにインポートしたデータをさらにエクスポートすれば、Movable Typeへのインポートも可能のようです。

Voxのキャプチャも記念に残しておきます。

先日、講師として出演させて頂いた、MT DDC Tokyoで使ったテーマ機能の発表スライドが英語に翻訳され、MovableType.orgのドキュメントに登録されました。

MovableType.org - Create a Theme for a Blog or Website from Scratch

スライドの翻訳はにっくさんとシックスアパート・金子さんによるものです。大半の翻訳はにっくさんです。翻訳も大変だったと思いますが、それよりも画面のキャプチャが相当大変だったようです。

小さな世界 - MTDDC TOKYOのスライドを英訳しました。

ということで、英語版のスライドを是非ご覧ください。

まさか私のスライドが翻訳されるなどとは思っていなかったので、にっくさん・金子さんのお二方には本当に感謝致します。ありがとうございました。

Twitterの公式ツイートボタンをWordPressやMovable Typeに設置する方法を紹介します。当サイトでも次のように設置してみることにしました。

公式ツイートボタンは、ブログなどの記事に生成したコードを貼り付けることで、記事のツイートなどが簡単に行えるようにするためのものです。

数字の部分をクリックすると、該当記事の検索結果画面を表示します。また、「ツイートする」をクリックすれば、ポストに記事タイトルとユーザー名が埋め込まれたツイート画面が表示されます。

ということで今更な感がありますが、設置方法を紹介します。ツイートボタンは公式ツイートボタンのページで作成します。

公式ツイートボタンのページ

１．ボタンの形式選択

まず、ボタンの形式を選択します。

選択した形式は、ブログにコードに含まれるa要素のクラス属性「data-count」の値となります。それぞれの値は次の通りです。

• 垂直方向にカウント数を表示 ：vertical
• 水平方向にカウント数を表示：horizontal
• カウント数の表示なし：none

２．ツイート内テキストの形式選択

ツイートボタンを押してツイートするときに、ポストに埋め込みたいテキストを設定します。通常は、ツイートボタンを設置した記事の記事タイトルなどを表示するようにします。

メインページや月別ページ、カテゴリページなど、1つのページに複数記事が表示されているページにツイートボタンを（記事毎に）貼り付ける場合は、テキストフィールドに次の内容を設定します。

WordPressの場合、<?php the_title(); ?>を設定します。

Movable Typeの場合、<$mt:EntryTitle$>を設定します。

記事ページなど、1つのページに1つの記事しか表示されないページには、「ボタンが表示されるページのタイトル。」を選択すれば、ツイート時にtitle要素の内容をそのまま埋め込みます。title要素の内容を使いたくない場合は前述のテンプレートタグを設定しても構いません。

設定した内容は、テンプレートタグのまま、クラス属性「data-text」の値となります。「ボタンが表示されるページのタイトル。」を選択したときは、クラス属性「data-text」は設定されません。

４．URLの設定

ツイートボタンを押してツイートするときに、ポストに埋め込みたいURLを設定します。通常は、ツイートボタンを設置した記事のURLを表示するようにします。URLは、TwitterのURL短縮サービスt.coによって自動的に短縮表示されます。

３項と同様、メインページや月別ページ、カテゴリページなど、1つのページに複数記事が表示されているページにツイートボタンを（記事毎に）貼り付ける場合は、テキストフィールドに次の内容を設定します。

WordPressの場合、<?php the_permalink(); ?>を設定します。

Movable Typeの場合、<$mt:EntryPermalink$>を設定します。

記事ページなど、1つのページに1つの記事しか表示されないページには、「ボタンが表示されるページのURL」を選択すれば、ツイート時にページのURLをそのまま埋め込みます。前述のテンプレートタグを設定しても構いません。

選択した形式は、コードに含まれるa要素のクラス属性「data-url」の値となります。「ボタンが表示されるページのURL」を選択したときは、クラス属性「data-url」は設定されません。

５．言語選択

表示するツイートボタンの言語を選択します。

選択言語によってツイートボタンの表示が変わります。選択した形式は、コードに含まれるa要素のクラス属性「data-lang」の値となります。それぞれの値は次の通りです。

• 日本語：ja
• フランス：fr
• ドイツ：de
• スペイン：es

「英語」を選択した場合は、クラス属性「data-lang」は設定されません。

６．フォローユーザーの設定

ポストに、フォローを促すユーザー名を設定します。設定したユーザー名は「via @ユーザー名」と表示されます。

例えば、次のように設定しておけば、

ツイート後の画面で次のようなフォローを促すメッセージが表示されます。

1に設定したデータは、コードに含まれるa要素のクラス属性「data-via」の値となります。2の「関連アカウント」に設定したデータは、クラス属性「data-related」の値となります（関連アカウントと関連アカウントの説明はコロンで区切られます）。

７．コード

１～６項までを設定すれば、画面の一番下にツイートボタン生成用のコードが表示されるので、ブログの任意の位置に埋め込みます。

WordPressの場合、生成コード例は次のようになります。

<a href="http://twitter.com/share"
  class="twitter-share-button"
  data-url="<?php the_permalink(); ?>"
  data-text="<?php the_title(); ?>"
  data-count="vertical"
  data-via="foo"
  data-lang="ja">
    Tweet
</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Movable Typeの場合、生成コード例は次のようになります。

<a href="http://twitter.com/share"
  class="twitter-share-button"
  data-url="<$mt:EntryPermalink$>"
  data-text="<$mt:EntryTitle$>"
  data-count="vertical"
  data-via="foo"
  data-lang="ja">
    Tweet
</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Windows+ActivePerl 5.10でImageMagickをインストールしたときにImageMagickが正常に動作しない不具合の対処方法をまとめました。

このエントリーは、「Movable Type 5で「サーバーに Image::Magickか、Image::Magickの動作に必要な他のモジュールがインストールされていません。」となる事象について」から、さらに追跡調査したものです。

実験環境は次の通りです。

• Windows XP Professional Service Pack 3（2台）
• ActivePerl 5.10.1 Build 1006
• ImageMagick 6.5.5-5 Q8/ImageMagick 6.5.6-10 Q8/ImageMagick 6.5.9-1 Q8（5.10.1 Build 1006に対応する最初のバージョン・途中のバージョン・最後のバージョンで実験）
• Movable Type 5.02

PerlMagickは、前回はppmコマンドでインストールしましたが、今回はImageMagickに同梱されているものをそのまま使用しました。

ImageMagickの過去バージョンは以下のリンクからダウンロードできます。

Main Site » Mirror » image_magick

１．問題点

ImageMagickをインストールしているにもかかわらず、次のようにダッシュボードに「Image::Magickが設定されていません。」というメッセージが表示されます。

この状態でアイテムをアップロードしてもサムネイルが作成されず、真っ黒な表示になります。

サムネイルが作成されていれば、５項のキャプチャ画像のように表示されます。

２．問題の解析

詳細は割愛しますが、サムネイルが作成されない原因は、前エントリーでも記した通り、プログラム内の「require Image::Magick」というところでエラーになっているためです。

今回は、エラーの詳細を知るために、次のサンプルプログラムをコマンドプロンプトから実行しました。「1.png」はサンプルプログラムと同じフォルダに配置している、任意の画像ファイルです。

#!/usr/bin/perl
 
eval { require Image::Magick };
if (my $err = $@) {
   die $err;
}
 
my $file = '1.png';
(my $ext = $file) =~ s/.*\.//;
my %arg = (magick => lc($ext));
my $magick = Image::Magick->new(%arg);
$magick->Read($file);
my ($width, $height) = $magick->Get('width', 'height');
print $width."x".$height;

NGを確認するのであれば、最初の5行だけあればいいです。

#!/usr/bin/perl
 
eval { require Image::Magick };
if (my $err = $@) {
   die $err;
}

ImageMagick 6.5.7-9 Q8のインストール直後にサンプルプログラムを実行すると、次のように「CORE_RL_magick.dllが見つからなかったため、このアプリケーションを開始できませんでした。アプリケーションをインストールし直すとこの問題は解決される場合があります。」というエラーが表示されました。

実行後、コマンドプロンプトには次のように「指定されたモジュールが見つかりません。」というエラーが表示されました。

Can't load 'C:/usr/site/lib/auto/Image/Magick/Magick.dll' for module Image::Magick: load_file:指定されたモジュールが見つかりません。 at C:/usr/lib/DynaLoader.pm line 201.
 at test.pl line 3
Compilation failed in require at test.pl line 3.
&Image::Magick::constant not defined. The required ImageMagick libraries are not installed or not installed properly.
END failed--call queue aborted at test.pl line 5.

別のPCで、ImageMagick 6.5.7-9 Q8インストール直後にサンプルプログラムを実行すると、こちらは「再帰が深すぎます。スタックがオーバーフローしました。」というエラーが表示されました。

Can't load 'C:/usr/site/lib/auto/Image/Magick/Magick.dll' for module Image::Magick: load_file:再帰が深すぎます。スタックがオーバーフローしました。 at C:/usr/lib/DynaLoader.pm line 201.
 at test2.pl line 3
Compilation failed in require at test2.pl line 3.
&Image::Magick::constant not defined. The required ImageMagick libraries are not installed or not installed properly.
END failed--call queue aborted at test2.pl line 5.

なお、サンプルプログラムではなく、コマンドプロンプトからImageMagickの動作を確認する方法は以下です。すべて正常に動作すれば、imdisplayコマンド実行後にImageMagickのロゴが表示されます。ただし、Perlのrequire文は実行しないので、これが正常に実行されても、Perlを使っているツールの不具合が解消されているとは限らないようです。

ImageMagick - Install from Binary Distribution

C:¥>convert logo: logo.gif
C:¥>identify logo.gif
C:¥>imdisplay logo.gif

４．原因

「CORE_RL_magick.dll」はImageMagickのインストールフォルダ直下にあるライブラリなのですが、このライブラリが正常に参照できていないのが真の原因と推測されます。コマンドプロンプトに表示されたメッセージは、「CORE_RL_magick.dll」がみつからないことによる、二次的なエラーと思われます。

「CORE_RL_magick.dll」を正しく参照できるようにするには、環境変数が設定されていればよいと思います。ImageMagickのインストール直後は、環境変数「Path」にImageMagickのインストールフォルダが設定されていますが、インストール直後はPathが効いておらず、「CORE_RL_magick.dll」が参照できないようです。

なお、ImageMagickのインストールとアンインストールを何回か繰り返して試したところ、「CORE_RL_magick.dllが見つからなかったため～」というダイアログは表示されず、コマンドプロンプト上のエラーメッセージのみが表示されるケースもありました。

５．対処1

ImageMagick 6.5.6-10 Q8/ImageMagick 6.5.9-1 Q8については、WIndowsを再起動することで、コマンドプロンプトから利用可能になり、Movable Typeでもサムネイルが表示されました。ImageMagick 6.5.5-5 Q8では再起動してもNGのままでした。

また、ImageMagickのインストールとアンインストールを何回か繰り返して試したところ、再起動せずにコマンドプロンプトからは動作OKとなり、Movable Typeでは再起動しないとサムネイルが表示されないというケースがありました。

６．対処2

ImageMagick 6.5.6-10 Q8については、再起動を行う前に、「Movable Type 5で「サーバーに Image::Magickか、Image::Magickの動作に必要な他のモジュールがインストールされていません。」となる事象について」に記したとおり、環境変数MAGICK_HOMEを追加することで、次のようにコマンドプロンプトから動作可能になるケースがありました。

７．対処3

今回は実施していませんが、ネット上ではppmコマンドでPerlMagickをインストールすることで解決しているという情報があります。

８．まとめ

ActivePerl 5.10.1 build 1006であればImageMagick 6.5.9-1との組み合わせが良好と思われます。

現在の最新バージョンであるActivePerl 5.10.1 build 1007は試していませんが、ImageMagickが正常に動作しない場合、次の順番で対処を行ってみてください。

1. ImageMagickのバージョンは、ImageMagickに同梱されているPerlMagickのバージョンをActivePerlのバージョンに合わせ、かつ新しいものを選択（参考：ImageMagick と Image::Magick（PerlMagick） のバージョン対応）
2. ImageMagickインストール後にPC再起動
3. MAGICK_HOMEの設定＋PC再起動
4. ImageMagickでPerlMagickを同時にインストールせずに、ppmでインストール＋PC再起動

今回の実施環境では、解決できない事象には遭遇しませんでしたが、ActivePerlやImageMagickのバージョンによっては解決しない場合があるかもしれません。

最後に、今回の実施結果を簡単にまとめておきます。

短く

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

MovableType.jp - Movable Type 5.03 の提供を開始

Movable Type 5.02 で確認された問題の修正バージョンとして、Movable Type 5.03 の提供を開始します。本リリースには、セキュリティに関する修正は含まれません。

具体的な修正内容については「5.03 リリースノート」を参照願います。Movable Type 5.02に対する公開キュー修正用のパッチも、Movable Type 5.03に含まれています。

MT-5.02との差分は以下の通りです。

• /addons/Commercial.pack/config.yaml
• /addons/Commercial.pack/lib/CustomFields/App/CMS.pm
• /addons/Commercial.pack/lib/CustomFields/Upgrade.pm
• /addons/Commercial.pack/lib/CustomFields/Util.pm
• /addons/Commercial.pack/lib/MT/Commercial/L10N/ja.pm
• /lib/MT/App/Comments.pm
• /lib/MT/Auth/TypeKey.pm
• /lib/MT/CMS/Asset.pm
• /lib/MT/CMS/Blog.pm
• /lib/MT/PublishOption.pm
• /lib/MT/Template/Context.pm
• /lib/MT/Util.pm
• /lib/MT/WeblogPublisher.pm
• /lib/MT.pm
• /mt-check.cgi
• /php/mt.php
• /tmpl/comment/signup_thanks.tmpl

Movable Type フォトログテーマ（Photolog Theme：ブログ用）を公開します。

数年前から「フォトログ用のテーマ（テンプレートセット）を作ろう」と思っていて、なかなか手につかないままでしたが、ようやく陽の目をみることになりました。

テンプレートセットやテーマとしては、2004年に公開したものを、MTのバージョンアップにあわせてメンテナンスするという形をとってきましたので、6年ぶりの2作目となります。

今回は、MT5のテーマ機能とスタイル機能、およびテンプレートタグをフルに活用しています。MTOSでも利用可能です。

１．サンプル（Sample）

サンプルサイトを用意しましたので動作をご確認ください（冒頭の画像リンクでもジャンプできます）。サンプルで利用している画像は「EyesPic」を使わせて頂きました。ありがとうございました。

サンプルサイト（Sample）

各ページの特徴については３項をご覧ください。

２．ダウンロードとインストール（Download and Install）

以下のリンクからダウンロードできます。

photolog_0_80.zip

photolog_0_80_en.zip(English version)

修正履歴

2010.09.09 初版
2010.09.09 v0.2 トップページで、非拡大画像から拡大画像の切り替え時の不具合を対処
2010.09.09 v0.3 2カラムレイアウトでブログ記事リストのサムネイルがはみ出す不具合を対処／他のデザインの配色の不具合を対処
2010.09.10 v0.4 スタイルに「White」を追加／ウィジェットを整理／アーカイブページのタイトルを全アーカイブリストに対応できるよう修正
2010.09.10 v0.5 コメント・トラックバックを受け付けない場合の表示制御を追加
2010.09.11 v0.51 メインページの画像切り替えを改善
2010.09.11 v0.52 jQueryによる画像表示を改善とそれに伴うクラス名の追加
2010.09.11 v0.53 コメントプレビュー／コメント完了のレイアウト修正
2010.09.11 v0.54 アーカイブページでの画像表示用スタイル改善
2010.09.12 v0.55 IEでメインページのフォントにCSSが適用されない不具合を修正
2010.09.13 v0.56 メインページで、リンクありの画像からリンクなしの画像に切り替えたときの表示を改善
2010.09.14 v0.57 jquery.lightboxプラグイン関連の設定を改善
2010.09.16 v0.60 国際化対応と検索結果ページの改善
2010.09.17 v0.61 アーカイブにl10n_ja.yamlが含まれていなかった不具合の修正と、検索文字列が入力されていない場合の検索結果ページの表示改善
2010.11.16 v0.70 コメントテキストエリアに文字が表示されない不具合を修正／コメントプレビューが3カラムレイアウトになる不具合を修正
2011.12.17 v0.80 画像最大化時の制限機能を追加

インストール方法は、ダウンロードしたアーカイブを展開して、中にある「photolog」ディレクトリを、themesディレクトリにアップロードしてください。アップロード後、ブログ管理画面の「デザイン」→「テーマ」をクリックすれば次のように表示されるので、「適用」をクリックしてください。テーマが切り替わればインストール完了です。

３．特徴

トップページはjQueryを利用して、表示されているサムネイルをクリックすると、中央に表示されている画像やタイトルが切り替わるようになっています。ブログ記事ページにジャンプするには、中央上部に表示されているタイトルをクリックします。

中央の画像は、表示サイズ以上であれば、さらにlightboxで拡大表示するようにしています。ブログ記事ページも同様です。

ブログ記事の投稿日やカテゴリ・タグは、画像幅を計算して、ちょうど画像の右下に表示されるようにしています。

また、ブログを始めたばかりの状態や、各アーカイブの投稿数が少ない場合を考慮して、投稿されている画像枚数に応じてサムネイルをセンタリングして表示するようにしています。月別アーカイブやカテゴリアーカイブ、検索結果も同様です。

サムネイルが8枚以下の表示

サムネイルが8枚以上の表示

1カラムレイアウトではサムネイルは8枚ずつ並べるようにしています。表示枚数を変更したい場合は、メインページやブログ記事リストの先頭に、変数として保持しているので、その部分を変更してください。

あと、フィードでもサムネイルを表示するようにしています。

４．ブログ記事の投稿方法（How to post entry）

名前の通り、画像の投稿が主体であることを想定します。画像は1ブログ記事につき1枚としてください。アップロードする画像は本文エリアに挿入せず、ブログ記事投稿画面の「ブログ記事アイテム」エリアの「追加」から行ってください。

あとはブログ記事タイトルを書いて投稿すれば、記事として成立します。大きい画像も、ブログ記事ページでは一定サイズの大きさに縮小するので、サムネイルの作成も不要です。

５．デザインとレイアウトの切り替え（How to change style and layout）

ブログ管理画面の「デザイン」→「スタイル」をクリックし、「Photolog Styles」をクリックすれば、テーマのデザイン一覧が表示されます。

デザインを選択すると右側に大きなサムネイルが表示されます。レイアウトの切り替えはその下にあるプルダウンメニューで行い、「デザインを適用」をクリックすれば完了です。切り替え後は再構築を行ってください。

６．レイアウトの種類（Variation of layout）

カラムレイアウトは5種類用意しました。デフォルトは冒頭の1カラムです。

3カラムレイアウト

3カラムレイアウト（右サイドバー）

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

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

1カラムレイアウト

７．デザインの変更（How to edit stylesheet）

スタイルシートはインデックステンプレートとして直接編集できないため、デザインを変更する場合、

• theme_static/photolog/style_library/base.css
• mt-static/support/themes/デザイン名/デザイン名.css

配下に配置されるものを編集してください。

８．ライセンス（License）

無償（Free）です。ご自由にご利用ください。ただし、当サイトのバナーは表示してやってください（Display credit banner）。

９．制限事項

ImageMagickなど、画像処理ができないライブラリが使えない環境では、サムネイル画像が表示されないので、このテーマを利用することはできません。テーマが利用可能かどうかを見分けるには、ブログ管理画面でアイテムの一覧を表示したときに（少なくも1つ以上の画像を予めアップロードしておいてください）、アイテムのサムネイルが表示されていれば大丈夫です。

また基本的に、各カラムやオブジェクトにはCSSで角丸をつけていますが、IEではコメント投稿のサインイン後にレイアウトが崩れる（サインイン後に表示されたテキストエリアがボックスレイアウトからはみ出す）不具合が発生したため、IEのみ角丸の設定を行っていません（正確に言うと、「-webkit-border-radius」を使用していません）。

2010.09.14
ダウンロード先をgithubに変更しました。

Movable Type コンテストの応募が 9月9日で締め切りです。

まだ応募されていない方（といっても間に合わないかもしれませんが・・・）、この機会に是非ご応募ください。

私も駆け込みで何か応募します。ということでそちらの作業に追われてます。

Movable Type 5.0x のブログ記事一括編集画面に複数のフィールドを表示する PowerEdit プラグインをカスタマイズして、カスタムフィールドを表示する方法を紹介します。

変更前

変更後

以前、「PowerEdit プラグインでカスタムフィールドを表示する（テキスト編）」でMT4版でのカスタマイズ方法をエントリーしていましたが、MT5でプラグインの実装や代替テンプレートの記載内容が変わったため、改めてエントリー致します。

１．カスタムフィールドを作成する

次のような「テキスト」カスタムフィールドを作成します。

ベースネームはシステムで生成した「cf」という値を用います（ベースネームがプラグインカスタマイズのキモになります）。

以下、この設定を例に説明します。

２．entry_table.tmpl の編集

alt-tmpl/include/entry_table.tmpl の 245 行目あたりに青色のサブテンプレートを追加します。

...前略...
<mt:ignore>===================================</mt:ignore>
        <mt:if name="is_power_edit">
            <tr class="<mt:if name="__odd__">odd<mt:else>even</mt:if>">
                <th><__trans phrase="Text"></th>
                <td colspan="9"><textarea style="width:630px;height:200px" type="text" name="text_<$mt:var name="id"$>"><mt:PowerEditEntries class_type="$object_type" id="$id"><mt:entryBody no_asset_cleanup="1" convert_breaks="0" escape="html" /></mt:PowerEditEntries></textarea></td>
            </tr>
            <tr class="<mt:if name="__odd__">odd<mt:else>even</mt:if>">
                <th><__trans phrase="Extended"></th>
                <td colspan="9"><textarea style="width:630px;height:80px" type="text" name="text_more_<$mt:var name="id"$>"><mt:PowerEditEntries class_type="$object_type" id="$id"><mt:entryMore no_asset_cleanup="1" convert_breaks="0" escape="html" /></mt:PowerEditEntries></textarea></td>
            </tr>
<mt:ignore>
            <tr class="<mt:if name="__odd__">odd<mt:else>even</mt:if>">
                <th><__trans phrase="Excerpt"></th>
                <td colspan="9"><textarea style="width:630px;height:80px" type="text" name="excerpt_<$mt:var name="id"$>"><mt:PowerEditEntries class_type="$object_type" id="$id"><mt:entryExcerpt convert_breaks="0" no_generate="1" escape="html" /></mt:PowerEditEntries></textarea></td>
            </tr>
</mt:ignore>
            <tr class="<mt:if name="__odd__">odd<mt:else>even</mt:if>">
                <th><__trans_section component="PowerEdit"><__trans phrase="EntryProductName"></__trans_section></th>
                <td colspan="9"><input style="width:630px" type="text" name="customfield_cf_<$mt:var name="id"$>" value="<mt:PowerEditEntries class_type="$object_type" id="$id"><mt:EntryProductName /></mt:PowerEditEntries>" /></td>
            </tr>
        </mt:if>
...後略...

追加したタグの意味は次の通りです。

• <__trans phrase="EntryProductName">：見出しになります。phrase 属性の値はなんでもかまいません。見出しの日本語ローカライズを行なう場合は４項を参照してください。
• input 要素の name 属性：値に「customfield_cf_<$mt:var name="id"$>"」を設定します。「cf」の部分がベースネームに対応します。作成したカスタムフィールドのベースネームに適宜書き換えてください。その他の部分は固定です。
• input 要素の value 属性：カスタムフィールドのテンプレートタグ、MTEntryProductName タグを記述して、MTPowerEditEntriesタグで括ります。

３．CMS.pm の修正1

plugins/PowerEdit/lib/PowerEdit/CMS.pm の 5行目あたりに、青色のコードを追加します。

...前略...
package PowerEdit::CMS;
 
use strict;
use warnings;
use CustomFields::Util qw( save_meta ); 
 
sub _power_edit_entries {
...後略...

４．CMS.pm の修正2

plugins/PowerEdit/lib/PowerEdit/CMS.pm の 81 行目（save_power_edit 関数の中）あたりに、青色のコードを追加します。

...前略...
sub save_power_edit {
    my ($cb, $app, $entry, $org) = @_;
    my $q = $app->param;
    my $id = $entry->id;
    if ($id) {
...中略...
        unless ($q->param('allow_pings')) {
            if ($q->param('allow_pings_' . $id )) {
                $entry->allow_pings(1);
            } else {
                $entry->allow_pings(0);
            }
        }
        unless ($q->param('customfield_cf')) {
            my $meta;
            if ($q->param('customfield_cf_' . $id )) {
                $meta->{cf} = $q->param('customfield_cf_' . $id );
            } else {
                $meta->{cf} = '';
            }
            &save_meta($entry, $meta);
        }
    }
    return 1;
}
...後略...

赤色で示す部分がベースネームに対応します。ベースネームはご自身のカスタムフィールドのベースネームに適宜書き換えてください。

５．見出しのローカライズ

この作業は必須ではありませんが、見出しを日本語で表示したい場合、plugins/PowerEdit/config.yaml に、青色の1行を追加してください。

...前略...
l10n_lexicon:
    ja:
        Power Edit.: 拡張した一括編集画面の保存を有効にします。
        Extended entry: 続き
        EntryProductName: 商品名
...後略...

「EntryProductName」は、２項で追加したth要素にある、「phrase="EntryProductName"」に対応しています。英語表記を変更したい場合は、config.yamlのハッシュキー（EntryProductName）と「phrase="EntryProductName"」の2箇所を変更してください。

６．テキストのカスタムフィールドを複数表示する場合

２項と４項の内容を、必要なカスタムフィールド分、追加してください（ベースネームはそれぞれ異なります）。

Movable Typeでサムネイルリストを横並びに表示する際、(X)HTMLマークアップに順不同リストを使って、次のようにサムネイルとサムネイルの間に余白を設定することがあると思います。

余白を設定する方法のひとつとして、スタイルシートのliセレクタに右マージンの設定を行います。

ul {
    list-style: none;
}
li {
    margin-right: 10px;
    float: left;
}

ただし、この設定だけでは、一番最後のサムネイルの右側にもマージンが設定されてしまいます。

ということで、本エントリーでは一番最後のサムネイルの右側にマージンを設定しないカスタマイズを紹介します。CSSやjQueryでも実現可能かもしれませんが、テンプレートタグを駆使します。

サムネイルを5つ並べるサブテンプレートは、ブログ記事に追加したサムネイルを5つ並べるケースを想定しています。

<mt:SetVar name="counter" value="1" />
<mt:Entries>
  <mt:EntriesHeader>
<ul>
  </mt:EntriesHeader>
  <mt:EntryAssets type="image"> 
<mt:if name="counter" le="5">
<li><a href="<mt:AssetURL />"><img src="<mt:AssetThumbnailURL width="75" square="1" />" alt="<mt:AssetLabel />" title="<mt:AssetLabel />" /></a></li>
  <mt:SetVar name="counter" op="++" />
</mt:if>
  </mt:EntryAssets>
  <mt:EntriesFooter>
<ul>
  </mt:EntriesFooter
</mt:Entries>

修正方法は簡単で、まずサブテンプレートのli要素部分に、青色で示すMTIfタグを追加します。

<mt:SetVar name="counter" value="1" />
<mt:Entries>
  <mt:EntriesHeader>
<ul>
  </mt:EntriesHeader>
  <mt:EntryAssets type="image"> 
<mt:if name="counter" le="5">
<li<mt:if name="counter" eq="5"> class="end"</mt:if>><a href="<mt:AssetURL />"><img src="<mt:AssetThumbnailURL width="75" square="1" />" alt="<mt:AssetLabel />" title="<mt:AssetLabel />" /></a></li>
  <mt:SetVar name="counter" op="++" />
</mt:if>
  </mt:EntryAssets>
  <mt:EntriesFooter>
<ul>
  </mt:EntriesFooter
</mt:Entries>

そして、スタイルシートに次のセレクタを追加します。

li.end {
    margin-right: 0;
}

全体のソースコードは次のようになります。

<html>
<head>
<style type="text/css">
ul {
    list-style: none;
}
li {
    margin-right: 10px;
    float: left;
}
li.end {
    margin-right: 0;
}
</style>
</head>
<body>
<mt:SetVar name="counter" value="1" />
<mt:Entries>
  <mt:EntriesHeader>
<ul>
  </mt:EntriesHeader>
  <mt:EntryAssets type="image">
    <mt:if name="counter" le="5">
  <li<mt:if name="counter" eq="5"> class="end"</mt:if>><a href="<mt:AssetURL />"><img src="<mt:AssetThumbnailURL width="75" square="1" />" alt="<mt:AssetLabel />" title="<mt:AssetLabel />" /></a></li>
    <mt:SetVar name="counter" op="++" />
    </mt:if>
  </mt:EntryAssets>
  <mt:EntriesFooter>
</ul>
  </mt:EntriesFooter>
</mt:Entries>
</body>
</html>

Movable Type 5の記事編集画面に任意のボタンを追加するプラグインをまとめて紹介します。

これらのプラグインを利用すれば、デフォルトのエディタで記事を作成する際の編集効率が格段にアップします。

１．EntityRefButtonプラグイン

「EntityRefButtonプラグイン」は、記事編集画面に実体参照用のボタンを追加します。

このプラグインは、オリジナルはMT4.2xまでしか対応していません（2010年9月現在）が、oscarさんが改修してMT5対応のプラグインをリリースされました。

• エムロジック放課後プロジェクト - EntityRefButtonプラグイン
• github：naoaki011 - mt-plugin-entryref-button（MT5対応版）

２．CustomEditorButton2プラグイン

「CustomEditorButton2プラグイン」は、Movable Type 5の記事編集画面に任意のボタンを追加するプラグインです。

デフォルトでは、「ins」「del」「pre」「code」の挿入ボタンと、ボタンの表示位置の並べ替えや、不要なボタンを隠す機能が用意されています。

このプラグインは、オリジナルはMT4.2xまでしか対応していません（2010年9月現在）が、oscarさんが改修してMT5対応のプラグインをリリースされました。

• blog.aklaswad.com - CustomEditorButton2プラグイン
• github：naoaki011 - mt-plugin-custom-editor-button-2（MT5対応版）

３．CEB2_plusUtilityプラグイン

「CEB2_plusUtilityプラグイン」は、「CustomEditorButton2プラグイン」と組み合わせて、任意の機能を持ったボタンを追加できるプラグインです。

MT5用のCustomEditorButton2プラグインを使えば、配布サイトのものをMT5で利用できます。

• かたつむりくんのWWW - CEB2_plusUtilityプラグイン

PHPのmktime()関数を使ったカスタマイズで躓いたので情報展開しておきます。動作確認したPHPのバージョンは5.2.13です。

１．問題

次のコードは、指定した日付のエポック秒（1970年1月1日0時0分0秒から、指定した時刻までの通算秒）を取得し、それを年月日時分秒に変換して表示する簡単なサンプルです。

<?php
    $date = mktime(01,23,45,08,01,2010);
    echo date('Y.m.d A H:i.s',$date);
?>

mktimeの引数は左から順番に、「時・分・秒・月・日・年」となります。このコードを実行すると、

2010.08.01 AM 01:23.45

という結果になるはずですが、実行すると、

2009.12.01 AM 01:23.45

となり、指定したタイムスタンプよりも8ヶ月前になってしまいます。

２．原因と対処

PHPでは、整数に「0」を付与すると8進数として扱われ、「08」は「0」として扱われることが原因です。つまり、指定した値「08月」をmktimeで評価すると「0月」となり、さらに「0月」は前年の12月として評価されるため、１項に記した動作となります。

月の「08」を1桁の「8」に変更することで、この問題は解消します。

<?php
    $date = mktime(01,23,45,8,01,2010);
    echo date('Y.m.d A H:i.s',$date);
?>

この事象は、月に「08」と「09」を設定した場合に発生します。

３．その他

この事象をみつけた経緯は、Movable Typeのテンプレートタグと組み合わせて、

$entry_date = mktime(<mt:EntryDate format="%H,%M,%S,%m,%d,%Y" />);

ということを行ったためです。この場合、「%m」を「%B」にすることで解消します。

$entry_date = mktime(<mt:EntryDate format="%H,%M,%S,%B,%d,%Y" />);

2010.09.02
をかもとさんからのコメントを受けて、２項を修正しました。

画像を鮮明に拡大するように見せてくれるフリーソフト、「SmillaEnlarger」と、その使い方を紹介します。

拡大画像（処理前）

拡大画像（処理後）

SmillaEnlargerは、1年前の2009年8月頃にライフハッカーで話題になったのですが、2010年4月にバージョンアップされて0.9.0になり、画面の構成や操作方法が旧バージョンよりかなり変わったようなので、改めて紹介したいと思います。

ここではWindows Vista を利用した方法が解説しますが、Macやlinuxでも利用可能です。

１．ダウンロード

SourceForge.JPのSmillaEnlargerのページにある「ダウンロード」をクリック。

ダウンロードページに進むので、Windows用のダウンロードリンクをクリック。

なお、SourceForgeの本家のダウンロードページは以下です。

SmillaEnlarger

２．インストールと実行

Windowsの場合、ダウンロードしたアーカイブを展開すれば完了です。

展開したフォルダの中にある、SmillaEnlarger.exe（拡張子を表示していない場合はSmillaEnlarger）をダブルクリック。

これで起動します。起動時は冒頭に示した犬の画像がサンプルで表示されるようです。

３．基本操作

拡大する画像を指定するには、メニューバーの「File」→「Open」で指定します。

ここでは当サイトの猫の画像を使ってみます。画像を開いた直後は次のような状態になります。右上のタブは「Cropping」を選択しておいてください。

右の画像上でマウスをドラッグすれば、拡大したい範囲を選択できます。ここでは猫の顔の部分を選択します。選択範囲は太い罫線で区切られ、未選択部分と区別しやすくなっています。さらに、

• 罫線の上でマウスをポイントして左クリックすれば選択範囲を変更可能
• 選択範囲上で左クリックすれば、選択した矩形の移動が可能

という機能があります。

矩形のスタイルは、右画面の下にある「Cropping Format:」のプルダウンメニューで変更できます。「free」を選択すれば、選択範囲を自由に変更できます。

選択範囲は左側の「Thumbnail Preview:」にサムネイルとして反映されます（実サイズでのプレビューについては後述）。

選択範囲が決まったら、右上の「Parameter」タブをクリックします。これで選択範囲の実サイズでのプレビューが表示されます。プレビュー画面に選択範囲がすべて表示されていない場合は、右クリックで表示内容をスライドすることができます。

ウィンドウ左にある「Enlarger Parameter」、または「Parameter」タブ右下にあるプルダウンメニューで、拡大する際のおおざっぱなスタイルを決めることができます。

スタイルを変更すれば、「Parameter」タブの右下の各パラメータが自動的に変わります。

defaultの場合

sharp & noisy の場合

さらにパラメータをカスタマイズしたい場合は、「Allow Changes」をチェックします。

出力するファイルサイズはウィンドウ左上の「Output Dimensions:」で設定します。まず、値を設定する対象（画像の幅・高さなど）をプルダウンで選択します。

選択した後、値を設定します。

値を変更すると、プレビュー画面に表示されている画像のサイズも変更されます。

ウィンドウの左にある「Parameter!」、または「Parameter」タブ右下にある「Preview」をクリックすれば、拡大画像のプレビューが行なえます。ちなみに、キャプチャ画像の元画像サイズは122px × 128px で、その一部分を350pxに拡大しているので、結構なめらかになっていると思います。

パラメータを変更して「Preview」をクリックすれば何度でもやり直しが可能です。

ファイルに保存するには、ウィンドウ左下にある「Enlarge & Save」をクリックします。

ファイル名は「Write Result to:」に表示されます。

デフォルトの設定では、開いた画像ファイルと同じフォルダに出力します。フォルダを変更する場合は、「Use Source Folder」のチェックをはずして、「Change Folder」をクリックして任意のフォルダを選択します。

出力状況は、「Enlarge & Save」の左側にある緑色のプログレスバーなどで表示されます。

それぞれの実行は「キュー」として登録されます。キューが完了すれば出力完了です。「Jobs:」タブをクリックすればキューの実行状況が分かります。キューに「finished」が表示されていれば出力完了です。右側の「clear queue」をクリックすればキューをクリアできます。

右下にある「remove Job」や「clean up」も、同様の操作が行なえます。

４．その他

「File」→「Preferences...」でオプションを表示します。0.90では、出力ファイル形式の選択とファイル品質の選択のみです。

「File」→「Mini Mode」を選択すれば、ウィンドウを縮小表示します。