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

MTDDC Tokyoのテーマ編が7月31日に開催されます。

MovableType.jp - MT DDC Tokyo テーマ編 開催のお知らせ

2010年7月31日(土)にマイクロソフト株式会社 新宿本社にて、MT5の新機能、テーマ機能にフォーカスした、MTDDC Tokyo テーマ編 (Movable Type Developer & Designer Conference)を開催します。MTDDC は昨年12月と今年2月に開催し好評いただいた、無料で参加いただけるシックス・アパート主催のカンファレンスです。今回のMTDDCでは講師に外部の方を招き、テーマに機能にフォーカスしたカンファレンスとなります。

日程・会場等は次の通りです。私も16:15～17:00の45分を頂いて、MT5のテーマ機能についてお話しさせて頂く予定です。

• 日時：2010年7月 31日 (土) 12:30 ～ 18:30（予定）
• 会場：東京・マイクロソフト株式会社 新宿本社 5階セミナールーム A・B
• 定員：100名（応募者多数の場合抽選）
• 参加費：無料（※懇親会参加費は別途4000円程度）

当日のプログラム（予定）は次の通りです。私の他には、シックスアパートの金子順さん、また外部講師として森和恵さん、蒲生 トシヒロさん、藤本壱さん、金尾卓文さんが登壇されるようです。

• 12:30 開会
• 12:40～ - Movable Type 5 成長するプラットフォーム : 金子順（シックス・アパート株式会社 執行役員 製品企画担当）
• 13:10～13:55 テーマ機能を使って、便利にテンプレートを管理しよう！ : 森和恵（r360studio）
• 14:05～14:55 ウェブサイト／ブログを組み合わせたサイトのテーマ化 : 藤本壱
• 14:55～15:35 仕事に役立てるテーマ : 蒲生 トシヒロ（有限会社ITプロフェッショナル）
• 15:45～16:15 Web 制作・開発者の方々を対象としたマイクロソフトの支援施策 : 金尾卓文(マイクロソフト株式会社 デベロッパー&プラットフォーム統括本部)
• 16:15～17:00 テーマを使った手間いらずなサイト制作 : 荒木勇次郎
• 17:15 - Lightning Talks
• 18:30 閉会
• 19:00 懇親会（希望者のみ）

参加を希望される方は、以下の申し込みフォームからどうぞ。

MTDDC Tokyo テーマ編申し込みフォーム

WordPress 2.xから3.0で廃止された非推奨グローバル変数一覧です。

赤色が非推奨グローバル変数で、青色は非推奨変数に代わる、本来のデータ取得方法です。過去のプラグインで正常に動作しないものがある場合、この変数を利用していないか確認するとよいでしょう。

先日エントリーした「WordPress 3.0 で「Commented entry list」プラグインが正常に動作しない不具合の対処」もこれに該当しました。

/**
 * The name of the Posts table
 * @global string $tableposts
 * @deprecated Use $wpdb->posts
 */
$tableposts = $wpdb->posts;
 
/**
 * The name of the Users table
 * @global string $tableusers
 * @deprecated Use $wpdb->users
 */
$tableusers = $wpdb->users;
 
/**
 * The name of the Categories table
 * @global string $tablecategories
 * @deprecated Use $wpdb->categories
 */
$tablecategories = $wpdb->categories;
 
/**
 * The name of the post to category table
 * @global string $tablepost2cat
 * @deprecated Use $wpdb->post2cat;
 */
$tablepost2cat = $wpdb->post2cat;
 
/**
 * The name of the comments table
 * @global string $tablecomments
 * @deprecated Use $wpdb->comments;
 */
$tablecomments = $wpdb->comments;
 
/**
 * The name of the links table
 * @global string $tablelinks
 * @deprecated Use $wpdb->links;
 */
$tablelinks = $wpdb->links;
 
/**
 * @global string $tablelinkcategories
 * @deprecated Not used anymore;
 */
$tablelinkcategories = 'linkcategories_is_gone';
 
/**
 * The name of the options table
 * @global string $tableoptions
 * @deprecated Use $wpdb->options;
 */
$tableoptions = $wpdb->options;
 
/**
 * The name of the postmeta table
 * @global string $tablepostmeta
 * @deprecated Use $wpdb->postmeta;
 */
$tablepostmeta = $wpdb->postmeta;

これらのグローバル変数は、2.xのwp-includes/deprecated.phpにあったものです。このファイルには非推奨の関数も掲載されています。3.xでも非推奨となっている関数があります。

現在配布中の、Movable Typeの管理画面にブログIDを表示する「BlogIDViewer プラグイン」をバージョンアップしました。

１．変更点

このプラグインはMT4対応のみでしたが、MT5の管理画面にも対応しました。次のように、各画面のウェブサイト名・ブログ名の左側にブログIDを表示します。

ウェブサイト・ブログの表示

ウェブサイト・ブログ選択メニュー

ブログ一覧画面

ウェブサイト一覧画面

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

最新版のプラグインは下記のページよりダウンロードできます。

BlogIDViewerプラグイン

WordPress 3.0 で「Commented entry list」プラグイン（commented-entry-list.php）が正常に動作しない不具合が発生しており、本エントリーで対象方法を紹介します。「freezing-point」のNIMITZさんよりコメントで情報頂きました。ありがとうございました。

このプラグインは当ブログで配布しているWordPressテーマでも利用しているので、不具合が発生している場合は以下の対処を行ってください。

2011.01.13 配布元がデッドリンクになったため、以下の記事で対処済みのプラグインを配布しています。

WordPressでコメント一覧を表示するCommented entry listプラグイン

１．問題点

2010年6月時点で配布されている「Hirobee’s Trail」さんの「Commented entry list」プラグインを、WordPress 3.0に適用すると、コメントが投稿されていても「No Response.」という表示になります（下）。プラグインバージョンが1.2の場合は何も表示されません。

２．対処方法

commented-entry-list.phpを任意のエディタで開き、以下のように修正します。赤色部分を削除して青色部分を追加してください。

11行目あたり

…前略…
function get_recently_commented($limit = 10) {
        global $wpdb, $tablecomments, $tableposts;
        global $wpdb;
        $tablecomments = $wpdb->comments;
        $tableposts = $wpdb->posts;
…後略…

51行目あたり

…前略…
function get_recently_trackbacked($limit = 10) {
        global $wpdb, $tablecomments, $tableposts;
        global $wpdb;
        $tablecomments = $wpdb->comments;
        $tableposts = $wpdb->posts;
…後略…

修正後は次のように正常に表示されるようになります。

補足ですが、プラグインで利用している$tablecomments、$tablepostsという変数はWordPress 3.0では使用されなくなったので、修正後のように値を設定することで利用できるようになります。

３．参考サイト

修正方法を掲載されているサイトは以下です。ありがとうございました。

REIMA's Blog - WordPress 3.0 RC1 日本語版 リリース

2010.06.27
配布元のリンクを、最新バージョンが配布されているページに変更しました。

日本の決勝トーナメント進出が決まりました！
決勝トーナメント出場国の皆さん、

先日公開した、Movable Typeのウェブページの出力を制御する「PagePublishController プラグイン」をバージョンアップしました。

１．変更点

ブログ記事編集画面のカテゴリエリアに「ページを出力しない」のチェックボックスが表示される不具合を対処しました（ボケボケですいません・・・）。

適用前のカテゴリエリア

適用後のカテゴリエリア

なお、ブログ記事編集画面に表示されたチェックボックスは機能自体は無効なので、チェックしてもブログ記事では何も制御は行われません。

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

最新版のプラグインは下記のページよりダウンロードできます。

PagePublishControllerプラグイン

WordPress 3.0がリリースされました。本エントリーではWordPress 3.0の主な新機能について簡単に紹介します。MT5書籍の執筆に追われて、WordPressからかなり遠ざかってしまっていたので分かる範囲で。

１．デフォルトテーマ「Twenty Ten」

デフォルトテーマが「Twenty Ten」に変わりました。

「Twenty Ten」テーマではヘッダー画像や背景画像の切り替えが行なえます。また、テンプレートの種類もいくつか増えています。

２．マルチサイト対応

WordPress MUの機能が統合されてマルチサイトに対応しました。これにより、複数のウェブサイトを、ひとつのWordPress（＝ひとつのDB）で管理できるようになります。

この機能を利用するためには、wp-config.phpに「WP_ALLOW_MULTISITE」を定義します。

define('WP_ALLOW_MULTISITE', true);

追加すると、「ツール」メニューに「ネットワーク」が表示されます。

力尽きたので、以降は以下の記事を参照願います。

参考：WordPress 3.0で複数ブログを使う設定

３．カスタム投稿タイプ

デフォルトの投稿タイプは「投稿 (post) 」「ページ (page) 」「添付ファイル (attachment)」「リビジョン (revision) 」「ナビゲーションメニュー (nav_menu) 」があり、さらに任意の投稿タイプを追加できるようになります。

WordPress Codex 日本語版 - カスタム投稿タイプ

WordPress はたくさんのタイプのコンテンツを保存して表示できます。内部ではこれらはすべて同じ場所、wp_posts テーブルに保存されてます。これらの異なるタイプのコンテンツは "post_type" というカラムによって区別されています。 WordPress 3.0 以降では、任意の投稿コンテンツを追加したり使用できる機能があります。

カスタム投稿タイプを利用するには、register_post_type 関数（下）を利用テーマのfunction.phpに追加します。ソースコードはWordPress Codex 日本語版からの引用です。

add_action( 'init', 'create_post_type' );
function create_post_type() {
  register_post_type( 'super',
    array(
      'labels' => array(
        'name' => __( 'Supers' ),
        'singular_name' => __( 'Super' )
      ),
      'public' => true,
    )
  );
}

「カスタム投稿タイプ」は、Movable Typeで言えば、ブログ記事／ウェブページの他、アイテム／記事の履歴／テンプレートモジュール／ウィジェットが投稿タイプに該当するようです。

４．カスタムタクソノミー

デフォルトのタクソノミー（分類）は「カテゴリー」「タグ」「リンクカテゴリー」があり、さらに任意のタクソノミーを追加できるようになります。追加したタクソノミーはカテゴリーのように親子関係を作ることができます。

WordPress Codex 日本語版 - カスタム分類

カスタムタクソノミーを利用するには、register_taxonomy関数（下）を利用テーマのfunction.phpに追加します。ソースコードはWordPress Codex 日本語版からの引用です。

function people_init() {
  // 新規分類を作成
  register_taxonomy(
    'people',
    'post',
    array(
      'label' => __('People'),
      'sort' => true,
      'args' => array('orderby' => 'term_order'),
      'rewrite' => array('slug' => 'person'),
    )
  );
}
add_action( 'init', 'people_init' );

あるいは、Custom Post Type UI プラグインを利用するようです。

カスタムタクソノミーの表示は、ループ内（テーマのloop.php）で分類名を get_the_term_list 関数に渡すようです。ソースコードはWordPress Codex 日本語版からの引用です。

echo get_the_term_list( $post->ID, 'people', 'People: ', ', ',  );

作成すると、ナビゲーションメニューに追加されます。下は「WordPress Version」というカスタムタクソノミーを追加した例です。

５．カスタムメニュー

投稿・ページ・カテゴリー・タグ・リンクを元にしたカスタムメニューを管理画面から作成し、テーマ内のメニューエリアやウィジェットエリアに挿入できるようになります。

カスタムメニューは、「外観」→「メニュー」から作成できます。

Movable Type（MT）でウェブページの出力を抑止する「PagePublishControllerプラグイン」を公開します。

MTQでの、CSS HappyLifeの平澤さんのコメントが発端です。

MT5 要望：ページ（html）を生成しないオプション

ウェブページ（エントリーでも良いですが）を使ってサイトのトップページに「特別なお知らせ」として表示させたりするような場合に、ウェブページのテンプレートを別で普通に使っていると、本来ならばページとして不要な「特別なお知らせ」のページも生成されてしまいます。 そのページに特にリンクさせる訳ではないので、あまり閲覧される訳では有りませんが、状況によっては検索時にヒットしてしまったり、不要なhtml が生成されるのは美しくないので、htmlファイル自体を生成しないオプションみたいなモノが有ると嬉しいなーと思っています。

１．機能

このプラグインは、ウェブページのスタティックパブリッシングをページ単位に抑止します。下の画面のチェックボックスをチェックしておけば、ウェブページの保存時やアーカイブの再構築時に出力を抑止します。

「お知らせ」などで、ウェブページの本文のみをメインページなどに表示するために利用し、ウェブページ自体を出力したくない場合に便利です。

このプラグインは、Movable Type 4.x / 5.x で動作します。

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

下記の PagePublishController_0_01.zip をクリックして、プラグインアーカイブをダウンロードします。

2010.06.23 初版
2010.06.25 v0.02 ブログ記事編集画面に表示される不具合を対処

PagePublishController_0_02.zip

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

プラグインアーカイブを展開し、中にある PagePublishController フォルダごと、Movable Type のアプリケーションディレクトリの plugins ディレクトリにアップロードします。

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

サインインします。

これでアップグレード完了です。「Movable Typeに戻る」をクリックすれば管理画面に戻ります。

システム管理画面のプラグイン一覧で、「PagePublishController～」が表示されればインストール完了です。

４．利用方法

冒頭の画面のように、ウェブページ作成・編集画面の右側に「ページを出力しない」というチェックボックスが表示されます。チェックすればウェブページは出力されません。

５．注意事項

複数のウェブページアーカイブがある場合、一律出力されません。ダイナミックパブリッシングには対応していません。一度出力したウェブページを削除する機能はないため、誤って出力した場合は一旦下書きに戻して、チェックボックスをチェックした状態で再度公開してください。

ウェブページへのリンクを生成しない機能は用意していません。したがって、MTPagesタグなどでウェブページへのリンクを作成したくない場合は、プライベートタグなどを用いてリンクを生成しないようにしてください。

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

１．変更点

デフォルの文字トエンコーディング（UTF-8）で本プラグインをインストールしている場合、システムログにプラグインエラーが出力されてしまう不具合を対処しました。

適用前のシステムログに表示されるプラグインのエラー

バージョンアップ後、UTF-8で運用しているブログに対してエラーログが出力されなくなります。プラグインの設定を行う必要はありません。

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

最新版のプラグインは下記のページよりダウンロードできます。

CharsetEncoder プラグイン

Movable Type 5でテーマを切り替えるときに確認のダイアログを表示する「ThemeConfirmerプラグイン」を公開します。

oscarさんの「MT5.1 の要望が始まってるようですが」の記事の中にある一文を読んで思いついて作りました。

「MT underHat テーマ - チワーマ - MT underHat」を見てて「テーマは適用ボタンを押すと何のアラートも無しに適用されてしまう」の記述について気になりました。確かにテーマの適用について、確認ダイアログの表示があっても良いのではないかと。

ちなみに、うっかり適用してしまっても、適用前のテーマは自動的にバックアップされています。

１．機能

テーマの「適用」をクリックしたときに、確認のダイアログを表示します。ダイアログにはテーマ名を表示します。

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

下記の ThemeConfirmer_0_01.zip をクリックして、プラグインアーカイブをダウンロードします。

2010.06.21 初版

ThemeConfirmer_0_01.zip

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

プラグインアーカイブを展開し、中にある ThemeConfirmer フォルダごと、Movable Type のアプリケーションディレクトリの plugins ディレクトリにアップロードします。

システム管理画面のプラグイン一覧で、「ThemeConfirmer～」が表示されればインストール完了です。

４．ダイアログメッセージの設定

ダイアログメッセージは変更することができます。メッセージを変更するには、ウェブサイト管理画面またはブログ管理画面の「ツール」→「プラグイン」→「ThemeConfirmer～」をクリックし、メッセージを設定して「変更を保存」をクリックします。

告知が遅れましたが、本日（6月19日）の10:00～18:00、MTハッカソン / Theme Conversationが開催されます。詳細は次の通りです。

• 日時：2010年6月19日(土) 10:00～18:00
• 場所：シックス・アパート株式会社
• 議題：Movable Type 5 に関連するプログラミング、テンプレート開発、利用法に関する質問会など
• 持ちもの：PC とハッカー魂 / デザイナ魂
• 参加費：無料
• その他：昼食、スナック、飲み物が用意される予定

今回はテーマに関する勉強会も開催されます。

Movable Type コンテスト2010 開催のお知らせ

また、今回はMT コンテスト／テーマ コンテストにちなんでMovable Type 5 の新しいデザインの形である'テーマ'についての簡単な勉強会も同時開催いたします。テーマって何だろう？テーマについてもっときちんと知りたい、こんな事ってテーマで出来るの？、テーマについて質問がある、というデザイナの皆さんもどうぞご参加ください。

XML::Simpleを使ったPerlスクリプトの文字化けではまってしまったので、その備忘録です。

１．発生事象

Perlスクリプトで次のXMLファイルを読み込みます。ファイルの文字コードはUTF-8です。

<?xml version="1.0" encoding="utf-8"?>
<list>
<name>ほげ</name>
</list>

Perlスクリプト（CGI）のサンプルは次の通りです。ファイルの文字コードはUTF-8です。

#!/usr/bin/perl
 
use strict;
 
use CGI;
use XML::Simple;
 
my $q = new CGI;
print $q->header(-charset=>'utf-8');
print $q->start_html;
 
my $xml = XMLin('foo.xml');
my $name = $xml->{name};
 
print <<EOF;
<form method="post" action="hoge.cgi">
名前:<input type="text" id="hoge" name="hoge" value="$name" />
<input type="submit" name="submit" value="送信" />
</form>
EOF
 
print $q->end_html;

このCGIをブラウザで表示すると、次のように、スクリプトに記述した全角文字の文字化けが発生します。

XMLファイルから取得する文字が、次のように全角文字でなければ文字化けは発生しません。

<?xml version="1.0" encoding="utf-8"?>
<list>
<name>hoge</name>
</list>

２．原因

XMLinで日本語を含む文字列を取得する場合、XML宣言のencoding属性に指定した文字コードの内部文字列に変換されます。よって外部に出力する場合、バイト文字列に変換（エンコード）する必要があるようです。

Data::Dumperで$nameを出力すると、「ほげ」は次のようになっていました。

$VAR1 = "\x{307b}\x{3052}";

試しに、次のようなサンプルであれば、

my $name = 'ほげ';

Data::Dumperで$nameを出力すると、

$VAR1 = 'ほげ';

となりました。

推測ですが、文字化けが発生したのは、内部文字列とバイト文字列が混在していたため、Perl自体がバイト文字列である「名前」「送信」をさらにエンコードを行い、文字化けが発生したものと思われます（解釈が間違っていたらご指摘ください）。

３．対処

スクリプトの$nameをUTF-8にエンコードすることで解決しました。

#!/usr/bin/perl
 
use strict;
 
use CGI;
use XML::Simple;
use Encode;
 
my $q = new CGI;
print $q->header(-charset=>'utf-8');
print $q->start_html;
 
my $xml = XMLin('foo.xml');
my $name = encode('UTF-8', $xml->{name});
 
print <<EOF;
<form method="post" action="hoge.cgi">
名前:<input type="text" id="hoge" name="hoge" value="$name" />
<input type="submit" name="submit" value="送信" />
</form>
EOF
 
print $q->end_html;

４．その他

出力時だけでなく、スクリプトに記述した全角文字と比較をする際も、予めエンコードしておく必要があります。

my $name = encode('UTF-8', $xml->{name});
if ($name eq 'ほげ') { ... }

以上です。色々調べてこれが最適解と思ったのですが、より適切な解決方法がありましたらコメントください。

2010.6.18 追記
下記の記事で、utf8プラグマの情報頂きました。ありがとうございました。

日曜プログラマのそゞろ事 - XML::Simpleで文字化けしない方法

５．参考サイト

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

サンプルコードによるPerl入門 - XML::Simple - シンプルなXMLパーサ / Perlモジュール徹底解説

Movable Type のコミュニティ機能に関する専門書の紹介です。デザインユニットlinkerの黒野さんより献本頂きました。ありがとうございました。

Movable Type Community Solution―MT5/MT4.2対応

posted with amazlet at 10.06.17

デザインユニットlinker（黒野明子、秋野琢、柳谷真志）
ソシム

Amazon.co.jp で詳細を見る

手前味噌ですが、これまでMovable Typeのコミュニティ機能に関して詳細なカスタマイズ方法を記した書籍は、「Movable Type逆引きデザイン事典[4.2/4.1対応]」しかありませんでした。そしてこの書籍でも、その中の1つの章でコミュニティ機能を取り上げているのみでした。

Movable Type逆引きデザイン事典[4.2/4.1対応]

posted with amazlet at 10.06.17

荒木 勇次郎 高山 一登 菱川 由理
翔泳社

Amazon.co.jp で詳細を見る

Movable Type Community Solutionで作る最新最強のコミュニティサイトでは、1冊すべてがコミュニティ機能に関する内容となっており、コミュニティサイト制作には必携の1冊と言えるでしょう。

1章はコミュニティ機能の概要、2章はコミュニティ機能を利用するための基本設定の解説です。「2-3 コミュニティブログ／掲示板のテンプレートセットの構造」では1つのMovable Typeで複数のコミュニティサイトを作成する方法、「2-4 既存のブログにコミュニティ機能を追加する」では、テーマのエクスポート機能を利用した、クラシックブログへのコミュニティ機能の追加方法が記されています。これを利用すれば、「コミュニティブログ」テーマや「コミュニティ掲示板」テーマに依存しないコミュニティサイトの制作方法が分かるでしょう。

3章～5章は実践的なサイト制作です。3章はキャンペーンサイトで画像の投稿と投票による投稿画像のランキング表示、ユーザーのプロフィールページに自分が投票した画像の表示方法などを学べます。4章は商店街サイトで、カスタムフィールドをふんだんに利用した各商店の登録画面作成方法、各商店のページ（プロフィールページ）への登録情報表示、各商店が投稿する記事のカテゴリの指定方法などを学べます。5章は個人ブログをレシピサイトに移行する想定で、データベースの移行方法、各コミュニティ機能の利用方法、mixiアカウントによるログイン方法などが学べます。

「5-8-4 「検索結果」システムテンプレートで「メインエリア」を出力する部分」では、当ブログの「タグ検索を絞り込み」を取り上げて頂いてます。タグ検索の絞り込みの基本機能については以下の記事を参照してください。

• タグ検索を絞り込む（その1）
• タグ検索を絞り込む（その2：カスタマイズ）

linkerさんはMovable Typeでのウェブ制作が得意分野であり、さらにこの本は藤本壱さんの監修となっているので、信頼できる内容と言えるでしょう。

以下、目次です。

1章 MTCSとは？

1-1 MTCSとは？

1-1-1 MTCSの概要

1-1-2 どんなサイトができるの？

1-1-3 MTCSで構築されたウェブサイトの実例

1-2 MTCSの機能

1-2-1 ユーザーによるトピック・記事の投稿機能

1-2-2 ユーザープロフィールページ機能

1-2-3 アクション機能

1-2-4 注目ユーザー（フレンド）機能

1-2-5 お気に入り登録機能

2章 Movable Type Community Solutionによる追加機能

2-1 MTCSで追加される機能の概要

2-1-1 MTCS ＝ MT ＋ コミュニティ機能

2-1-2 MTCSを実現するための追加機能

2-1-3 MT4.2xとMT5でのMTCSの違い

2-2 コミュニティブログ／コミュニティ掲示板を作ってみる

2-2-1 コミュニティブログ／コミュニティ掲示板の作成

2-2-2 新規ユーザーの権限の設定

2-2-3 ユーザー登録の許可

2-2-4 ユーザー登録などの操作

2-2-5 記事を投稿する

2-2-6 記事に投票する

2-2-7 ユーザーのプロフィールの表示

2-3 コミュニティブログ／掲示板のテンプレートセットの構造

2-3-1 コミュニティブログ／掲示板のテンプレートの内容

2-3-2 ブログ記事の投稿に関するテンプレート

2-3-3 ユーザー情報に関するテンプレート

2-3-4 サインイン／ユーザー登録関係のテンプレート

2-4 既存のブログにコミュニティ機能を追加する

2-4-1 取り上げる例

2-4-2 コミュニティ関係のテンプレートの追加

2-4-3 テンプレートにJavaScriptを追加

2-4-4 サインイン機能の追加

2-4-5 投票用リンクの設置

2-4-6 ユーザーごとのページにリンクする

2-4-7 投稿機能の追加

2-4-8 プロフィールテンプレートのカスタマイズ

2-5 MTCSで追加されるテンプレートタグ

2-5-1 アクションの出力

2-5-2 ユーザー毎のコメントの情報の出力

2-5-3 注目・被注目の出力や処理

2-5-4 その他のテンプレートタグ

3章 画像投稿、投票ランキングを使ったキャンペーンサイト

3-1 サンプルサイトの概要

3-1-1 ユーザー間で対話ができる商品プロモーションサイト

3-1-2 サンプルサイトで使う機能

3-2 サンプルサイトのテンプレートの構成と使用するプラグインについて

3-2-1 テンプレートの一覧

3-2-2 使用するプラグインの一覧

3-3 コミュニティサイトの準備

3-3-1 概要

3-3-2 ブログの作成とテンプレートの適用

3-3-3 コミュニティの設定

3-3-4 システムメールアドレスの設定

3-3-5 ユーザー権限の追加

3-3-6 カテゴリの作成

3-4 ログイン・ログアウトで表示を変える

3-4-1 概要

3-4-2 テンプレートモジュール「ログイン」を作成する

3-4-3 テンプレートモジュール「登録または投稿」を作成する

3-5 投稿画面をカスタマイズする

3-5-1 概要

3-5-2 カスタムフィールドの追加

3-5-3 アイテムの投稿場所の指定

3-5-4 投稿画面に説明フィールドを追加する

3-6 投票数ランキングトップ5を作成する

3-6-1 概要

3-6-2 ランキング順に並び替える

3-6-4 「投票する」ボタンの設置

3-6-5 ランキング順位の表示

3-7 ランキング一覧を作成する

3-7-1 概要

3-7-2 ランキング順に並び替える

3-7-3 ページ分割をする

3-8 マイページ（ユーザーページ）に自分が投票したアイテムを表示する

3-8-1 概要

3-8-2 MTActionFavoriteタグでリストを表示する

4章 ユーザー同士が情報を投稿できる商店街サイト

4-1 サンプルサイトの概要

4-1-1 商店街とお客様との情報共有サイト

4-1-2 サンプルサイトの機能

4-2 サンプルサイトのテンプレート構成

4-3 登録画面のカスタマイズ

4-3-1 概要

4-3-2 登録画面のカスタマイズ

4-3-3 プロフィール写真の修正

4-3-4 登録フォームのテンプレートを修正する

4-4 プロフィールページのカスタマイズ

4-4-1 概要

4-4-2 商店の人が自分のプロフィールを見たときに投稿リンクを表示させる

4-4-3 「プロフィール」テンプレートのカスタマイズ

4-4-4 お気に入りに登録した商店の情報を表示

4-4-5 プロフィール情報を表示する

4-4-6 最近のWebサイトでの活動を表示させる

4-5 記事投稿のカテゴリを指定できるようにする

4-5-1 概要

4-5-2 投稿用のカテゴリを作成して当該カテゴリのみを表示する

4-6 ユーザーを属性ごとに分けて表示する

4-6-1 概要

4-6-2 ロールを設定する

4-6-3 個人一覧を表示する

4-7 店舗をカテゴリごとに表示する

4-7-1 概要

4-7-2 店舗一覧ページを作る

4-7-3 店舗一覧を出力するテンプレートモジュール

4-8 トピックのカテゴリによってコメント可否を切り替える

4-8-1 概要

4-8-2 テンプレートを修正する

4-9 表示するお知らせを調整する

4-9-1 概要

4-9-2 テンプレート修正

5章 レシピサイトにユーザー投稿機能をプラスする

5-1 サンプルサイトの概要

5-1-1 誰でも投稿可能なレシピ集サイト

5-1-2 MTCS化するブログの要件

5-2 Movable Typeのアップグレード

5-2-1 Movable Typeのアップグレード手順

5-2-2 既存のデータベースのダンプファイルを作成

5-2-3 新しいデータベースを作成

5-2-4 5-2-2で作成したダンプファイルを新しいデータベースにリストア（復元）

5-2-5 既存のMovable Type 4.0xとは別に、Movable Type 5（または4.27）をインストール 5-2-6 Movable Type 5のmt.cgiにアクセス

5-2-7 ログインできたら、「コミュニティブログ」テーマを適用

5-2-8 コミュニティサイトの準備

5-2-9 再構築

5-3 カスタムフィールドの作成

5-3-1 概要

5-3-2 「ブログ記事」に対するカスタムフィールド

5-3-3 システム全体に対するカスタムフィールド

5-4 プラグインのインストールとCSS／画像のアップロード

5-4-1 概要

5-4-2 必要なプラグインのインストール

5-4-3 必要なCSSと画像のアップロード

5-5 サンプルテンプレートの導入

5-5-1 概要

5-5-2 導入するテンプレート

5-5-3 不要なテンプレートの削除

5-6 「メインページ」テンプレートのカスタマイズ解説

5-6-1 概要

5-6-2 「メインページ」テンプレートのカスタマイズ

5-7 メインページに組み込むテンプレートモジュールの内容

5-7-1 概要

5-7-2 「head要素」テンプレートのカスタマイズ解説

5-7-3 「title要素」テンプレートのカスタマイズ解説

5-7-4 「keywordsとdescription」テンプレートのカスタマイズ解説

5-7-5 「ページ分割用JavaScript」テンプレートのカスタマイズ解説

5-7-6 「ユーザープロフィール用JavaScript」テンプレートのカスタマイズ解説

5-7-7 「ヘッダ部」テンプレートのカスタマイズ解説

5-7-8 「検索・ユーザーランキング」テンプレートのカスタマイズ解説

5-7-9 「フッタ部」テンプレートのカスタマイズ解説

5-7-10 「メインエリア」テンプレートモジュールについて

5-8 「メインエリア」テンプレートモジュールの解説

5-8-1 概要

5-8-2 「メインページ」テンプレートで「メインエリア」を出力する部分

5-8-3 「ブログ記事」アーカイブテンプレートで「メインエリア」を出力する部分

5-8-4 「検索結果」システムテンプレートで「メインエリア」を出力する部分

5-8-5 「ブログ記事の作成」インデックステンプレートで「メインエリア」を出力する部分

5-8-6 「ブログ記事リスト」アーカイブテンプレートで「メインエリア」を出力する部分

5-8-7 「コメント完了」システムテンプレートで「メインエリア」を出力する部分

5-8-8 「コメントプレビュー」システムテンプレートで「メインエリア」を出力する部分

5-8-9 「投稿完了」システムテンプレートで「メインエリア」を出力する部分

5-8-10 「メインページ」インデックステンプレートで「メインエリア」を出力する部分（その2）

5-9 インデックステンプレート／アーカイブテンプレートのカスタマイズ

5-9-1 概要

5-9-2 「ブログ記事の作成」テンプレートのカスタマイズ解説

5-9-3 「ブログ記事フォーム」テンプレートのカスタマイズ解説

5-9-4 「JavaScript」テンプレートのカスタマイズ解説

5-9-5 アーカイブテンプレートのカスタマイズ

5-10 その他のテンプレートモジュールの解説

5-10-1 概要

5-10-2 「パンくずナビゲーション」テンプレートのカスタマイズ解説

5-10-3 「ブログ記事のメタデータ」テンプレートのカスタマイズ解説

5-10-4 「コメント」テンプレートのカスタマイズ解説

5-10-5 「ページ分割用Javascript002」テンプレートのカスタマイズ解説

5-10-6 「ページ選択」テンプレートのカスタマイズ

5-11 システムテンプレートのカスタマイズ

5-11-1 概要

5-11-2 「コメントプレビュー」テンプレートのカスタマイズ解説

5-11-3 「コメント完了」テンプレートのカスタマイズ解説

5-11-4 「投稿完了」テンプレートのカスタマイズ解説

5-11-5 「検索結果」テンプレートのカスタマイズ解説

5-12 グローバルテンプレートのカスタマイズ

5-12-1 概要

5-12-2 「フォームフィールド」テンプレートのカスタマイズ解説

5-12-3 「プロフィール」テンプレートのカスタマイズ解説

5-13 mixiアカウントなどによるログイン機能の追加

5-13-1 概要

5-13-2 Crypt::SSLeayモジュールのインストール

5-13-3 mixiCommentプラグインの修正

補章 Movable Type 4.2／Movable Type 5.0の違いとアップグレードについて

Movable Type 5.0の新機能

ウェブサイトとブログ

サイトの構造を配布できる「テーマ」

カテゴリ毎にカスタムフィールドのオン／オフを指定

ブログ記事／ウェブページ／テンプレートの履歴管理

Movable Type 4.2からMovable Type 5.0へのアップグレード

Movable Type 5.0の動作要件

アップグレードの際の注意事項

既存のMovable Typeのバックアップ

データベースの変換

アップグレードを行う

テーマのIDの変更

自動作成されたウェブサイトの設定

「Movable Type 4.3 でスライドショーを実現する（その1：基本動作）」で紹介したスライドショーは、メインページや、ブログ記事リストなど、1ページに複数記事がある場合に正常に動作しません。

本エントリーではその対処方法を紹介します。以下のサンプルでは、2つの記事にスライドショーを設定しており、それぞれが独立して動作します。

サンプル

対処方法は、メインページやブログ記事リストのMTEntiesタグの中に、以下の青色部分を追加します。やっつけ仕事なのでエレガントなコードでありません。予めご了承ください。

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

Movable Typeの投稿コメントに、例えば「この画像です」みたいな感じで、別サイトにある画像のimg要素を挿入されても、デフォルトの設定ではコメントに反映されません。

コメント

投稿されたコメント

本エントリーでは、次のように、コメントに設定したimg要素を反映する方法を紹介します。

投稿されたコメント

１．img 要素を許容する

img 要素を許容するには、管理画面のナビゲーションから「設定」→「コミュニケーション」をクリックし、移動したページにある「HTMLを許可」がチェックされていることを確認し、さらに「HTMLタグを制限」の項目から「カスタム設定」を選択します。

そして「カスタム設定」のテキストフィールドに「img src」を設定し、「変更を保存」をクリックします。

「標準の設定」にある内容をコピーすれば、他のHTML要素も許容されるので、必要な要素をカンマ区切りで追加します。下はa要素、br要素、p要素を設定した例です。

属性が必要な要素は、要素名の後に属性名を設定します。

２．img 要素を(X)HTML validにする

「img src」という記述だけではalt属性が許容されないため、コメント投稿者がalt属性を記述しても除去されてしまい、ページが(X)HTML validになりません。

(X)HTML validにするには、「カスタム設定」の設定内容を「img src alt」にします。

３．他の属性も追加する

width属性、height属性を追加しておけば、コメント投稿者が画像サイズを指定することもできます。title属性も追加しておくとよいでしょう。

Twitterの検索エンジン、Topsyが提供するTopsy Retweet Button for Web Sitesを使って、ブログなどの記事にRT数とretweetボタン（Topsy Retweet Button）を表示する方法を紹介します。

このブログでも各記事ページの右上に表示しています（2010年6月現在）。

１．Topsy Retweet Buttonの機能

数字の部分をクリックすれば、記事のRT一覧を表示します。

「retweet」をクリックすれば、その記事のretweet用の記事タイトル・URLをTwitterのページに表示します。

以下、一般的な設定方法と、Movable Typeに設置する場合の設定例の2つを紹介します。

２．基本設定

まず、次のスクリプトを、<head>～</head>の間に設定します。

<script type="text/javascript" src="http://cdn.topsy.com/topsy.js?init=topsyWidgetCreator"></script>

次に、各記事ページの任意の位置に以下のスクリプトを設定します。class名が「topsy_widget_data」のdiv要素の中にHTMLコメントをつけたJSONデータ形式で、url（記事のURL）とtitle（記事のタイトル）を設定します。

<div class="topsy_widget_data"><!--
    {
        "url": "記事のURL",
        "title": "記事のタイトル"
    }
--></div>

Movable Type の場合は、ブログ記事アーカイブテンプレートに次の内容で設定します。

<div class="topsy_widget_data"><!--
    {
        "url": "<mt:EntryPermalink />",
        "title": "<mt:EntryTitle />"
    }
--></div>

このような表示になります。

３．RTをクリックしたときのユーザ名を変更する

２項で設定したボタンの「retweet」をクリックすると、Twitterに次のようなRTが表示されます。

ただし、これではユーザー名が「@TopsyRT」になっているので、これを自ユーザー名に変更します。ユーザー名を変更するには、JSONデータに「nick」を追加します。

<div class="topsy_widget_data"><!--
    {
        "url": "記事のURL",
        "title": "記事タイトル",
        "nick": "Twitterのユーザ名"
    }
--></div>

「@yujiro」を表示させたい場合は

<div class="topsy_widget_data"><!--
    {
        "url": "記事のURL",
        "title": "記事タイトル",
        "nick": "yujiro"
    }
--></div>

とします。これで次のような表示に変更されます。

４．ボタンのスタイルを変更する

ボタンを大きくする場合は、JSONデータに「style」を追加します。値は「big」です。

<div class="topsy_widget_data"><!--
    {
        "url": "記事のURL",
        "title": "記事タイトル",
        "nick": "Twitterのユーザ名",
        "style": "big"
    }
--></div>

これで次のようなスタイルに変更されます。

５．ボタンのテーマを変更する

ボタンのテーマ（配色）を変更するには、JSONデータに「theme」を追加します。

<div class="topsy_widget_data"><!--
    {
        "url": "記事のURL",
        "title": "記事タイトル",
        "nick": "Twitterのユーザ名",
        "style": "big",
        "theme": "テーマ名"
    }
--></div>

テーマ名は「Topsy Retweet Button for Web Sites」にある次の一覧を参考にしてください。

６．アーカイブページに表示する

アーカイブページなど、1つのページに複数の記事があり、その記事ごとにボタンを表示する場合、<head>～</head>の間に次のように記述することで、nick、style、themeをひとまとめに定義することができます。変数名は変更しないでそのまま使ってください。

<script type="text/javascript" id="topsy_global_settings">
     var topsy_theme = "テーマ名";
     var topsy_style = "big";
     var topsy_nick = "Twitterのユーザ名";
</script>

こうしておけば、記事別の設定は次の内容だけでOKです。

<div class="topsy_widget_data"><!--
    {
        "url": "記事のURL",
        "title": "記事タイトル"
    }
--></div>

７．注意事項

JSONデータの、途中のデータの末尾にカンマを付け忘れると正常に表示されないので注意しましょう。また、最後のデータにカンマをつけるとIEで正常に動作しません。

2010.06.17
IEで正常に動作するよう、各サンプルを修正し、７項の記述を修正しました。

当サイトも参加しているブログネットワーク AMN（アジャイルメディア・ネットワーク） の「第4回読者アンケート」のお知らせです。

AMN は現在 90 のブログ（合計約2000万PV）による広告ソリューションや、タイアップ・イベント・サンプル配布等をトータルに企画・立案する企業ソリューションを展開している会社です。

AMN 第4回読者アンケートの詳細は以下の通りです。

• 目的：ブログの読者の方々というのは、どういう方が多いのか、ブログ読者の方々はどういう情報を必要としているのかを知り、今回のアンケート結果を今後のAMNのサービスに反映していくため
• 集計期間：6月1日～6月30日（予定）
• アンケート項目：24問（23問選択式、1問は記述式。必須項目は3問）

以下のリンクをクリックすればアンケートフォームに移動します。

第4回AMN読者アンケートフォーム

過去のアンケート結果は以下をご覧ください。

• 第2回AMNブログ読者アンケート結果
• 第1回AMNブログ読者アンケート結果

皆様のご協力をよろしくお願い致します。

以前「Movable Type コンテスト 2010」のエントリーでお知らせしていた「Movable Type コンテスト2010」が開始しました。

これだけでは何なので、2005年～2007年に行われたコンテストの受賞サイトを掲載します。これだけ並べると壮観です。コンテスト対策というより、「Movable Type でこういうサイトが作れます」という参考資料になれば幸いです。

閉鎖されているものや他のツールに変わったように思われるサイトは省いてます。

2005コンテスト

グランプリ：バカ世界地図

準グランプリ：DAIRY ARCHIVE

優秀賞：長谷幼稚園

優秀賞：はんだ付け装置メーカー ジャパンユニックス

シックス・アパート 関賞：壱岐千年湯｜平山旅館

シックス・アパート 平田賞：Movable Type 3.x 導入手順

メディアカイト賞：350日の節約生活

フィールド賞：JJazz.Net

グロービズ賞：PhotoCubic by GhettoDesign

アロマネット賞：PHOTOLOG | OVERSTYLE.COM

技術評論社賞：古い家に住む。

インプレス インターネットマガジン賞：キノボレ！ノート

2006コンテスト

グランプリ：相鉄Style

準グランプリ：+LIFE

ビジネスサイト 優秀賞：九谷焼専門通信販売　和座本舗

個人サイト 優秀賞：絵本ならべ

ビジネスサイト 準優秀賞：社会貢献ダイアリー「活動日記」

個人サイト 準優秀賞：小粋空間

シックス・アパート 関賞：Hello World! 世界旅行

一刀賞：我が家の庭畑

デジパ賞：【treep KAMAKURA】鎌倉ツリープ

エッセンティア賞：沖縄旅行の便利帳～沖縄探訪記

ジャストシステム賞：Memories of HARADA Family

Web Designing 賞：男鹿の観光情報サイト男鹿なび

シックス・アパート 平田賞：moblog

ソフトバンク クリエイティブ賞：あっとベルリン

MdN 賞：Terra

ネットスター賞：とってもわかりやすい自閉症のページ

アートバイブス賞：MTmail

2007コンテスト

グランプリ：WIRED VISION

準グランプリ：仏像ガール

ビジネスサイト　優秀賞：J-cast ニュース

ビジネスサイト　準優秀賞：Lines Of Sight

個人サイト　優秀賞：からふるいろのたね

個人サイト　準優秀賞：YAKINIQUEST

シックスアパート賞：千葉の産婦人科情報

ベイリーフ賞：graphiso

スカイアーク賞：東京もつ鍋天国

アウトライヴ賞：八十島プロシード株式会社

ひらた賞：あすなろBlog

ファイナルゲート賞：スーパーオータニWebサイト

LIN Networks賞：コルク屋本舗

ロフトワーク賞：AKICHIATLAS.com

Web Designing賞：旅音ブログ

Software Design賞：無料ゲームリアルアーケード

アスキー賞：システム設計・開発のアイロベックス

会社の同僚に教えてもらったのですが、Windows の「Ctrl + Alt + 矢印キー」で画面を回転する（画面の向きを変える）ことができます。Dell や ThinkPad では回転できました。

これを知らない同僚や友人のディスプレイを回転させておくといいでしょう（笑）。

［Ctrl］ + ［Alt］ + ［↓］

［Ctrl］ + ［Alt］ + ［←］

［Ctrl］ + ［Alt］ + ［→］

［Ctrl］ + ［Alt］ + ［↑］

「CMSとして使う Movable Type 5 ガイドブック」が発売になりました。

CMSとして使う Movable Type 5 ガイドブック

posted with amazlet at 10.06.12

荒木 勇次郎 高山 一登 菱川 由理
翔泳社
売り上げランキング: 1123

Amazon.co.jp で詳細を見る

以下、目次と並行して書籍の内容を簡単に紹介します。また前書「CMSとして使うMovable Typeガイドブック
」との違いも併せて記します。

ボリューム的には、CHAPTER-01から03で約200ページ、CHAPTER-04から07で約200ページとなっています。

CHAPTER-01 基本操作

01-01 Movable Typeのインターフェース

01 ウェブサイトとブログ

02 管理画面の構成

03 ウェブサイト管理画面

04 ウェブサイト設定画面

05 ブログ管理画面

06 ブログ設定／ツール画面

07 システム管理画面

01-02 ウェブページ／ブログ記事を作成／編集する

01 ウェブページを作成する

02 ウェブページにファイルを挿入する

03 ウェブページにフォルダを設定する

04 ブログ記事を投稿する

05 ブログ記事にカテゴリを設定する

06 リビジョン管理をする

01-03 カスタムフィールド

01 カスタムフィールド概要

02 カスタムフィールドの作成

03 カスタムフィールドを管理画面に表示する

04 カテゴリとカスタムフィールドの関連づけ

05 カスタムフィールドの内容をページに表示する

06 コメント投稿フォームからカスタムフィールドを入力できるようにする

CHAPTER-01は、Movable Typeの管理画面と基本操作の解説です。

「01-01 Movable Typeのインターフェース」では、ブログ管理画面はもちろん、MT5で追加になったウェブサイトの管理画面・システム管理画面についても解説しています。ほぼすべての管理画面を紹介しているので、MTビギナーの方でもこの1冊で管理画面の構成や操作方法はお分かりになるかと思います。

「01-02 ウェブページ／ブログ記事を作成／編集する」では、ウェブページの作成・ブログ記事の投稿方法を紹介しています。MT5で追加になったリビジョン管理による記事の戻し方も解説しています。

前書「CMSとして使う Movable Typeガイドブック」ではほとんど触れていなかったカスタムフィールドについては、「01-03 カスタムフィールド」で一通り記しました。この節では、カスタムフィールドの基本的な利用方法をほぼすべて網羅しています。

余談ですが、カスタムフィールドをさらに使いこなしたい方は、「Movable Type 5 プロフェッショナルガイド」の16章「カスタムフィールド」や、17-5「テンプレートでカスタムフィールド検索のページを作る」などを立ち読みしてください。

CHAPTER-02 テンプレート／テンプレートタグ／テーマ

02-01 テンプレートの仕組み

01 テンプレートの仕組み

02-02 テンプレートの種類と役割

01 インデックステンプレート

02 インデックステンプレートを作成する

03 アーカイブテンプレート

04 アーカイブマッピング

05 ウェブページとブログ記事のアーカイブマッピング

06 パス

07 アーカイブテンプレートを作成する

08 テンプレートモジュール

09 システムテンプレート

10 ウィジェット

02-03 テンプレートタグの種類と役割

01 テンプレートタグの基礎

02 ファンクションタグ

03 ブロックタグ

04 モディファイアによる出力結果のカスタマイズ

05 モディファイアによるウェブサイトとブログの指定

02-04 テーマとスタイル

01 テーマについて

02 テーマのエクスポートとエクスポートしたテーマの適用

03 テーマ切り替え時の動作

04 テーマにウェブページを追加する

05 スタイルについて

CHAPTER-02は、テンプレートとテーマの解説です。前書との大きな違いは、MT5で追加されたテーマについて「02-04 テーマとスタイル」でまとめています。この節では、テーマの概要・テーマのエクスポート・テーマを切り替えたときの動作・テーマにウェブページを追加する方法などを紹介しています。

他の節も、構成や文章について全面的に見直したので、読みやすくなっていると思います。

CHAPTER-03 テンプレートタグによるプログラミング

03-01 変数を利用したカスタマイズ

01 変数とは

02 SetVarタグによる変数の設定

03 GetVarタグなどによる変数の取得

04 テンプレートタグの出力結果を変数の値として扱う

05 appendモディファイア／prependモディファイア／defaultモディファイア

06 モディファイアの値に変数を利用する

07 配列とハッシュ

08 繰り返し処理

03-02 コンディショナルブロックタグを利用した条件文の作成

01 条件判定について

02 データベースに格納されている情報を利用した条件文の作成

03 ユーザー変数を利用した条件文の作成

04 Elselfタグ／Unlessタグでさらに複雑な条件を制御する

05 さまざまな条件を設定する

06 Ifタグ、Elselfタグ、Elseタグ、Unlessタグを組み合わせた制御

07 tagモディファイアで変数の値にテンプレートタグを利用する

08 予約変数と特殊変数

09 変数の演算

03-03 テンプレートをモジュール化する

01 テンプレートモジュールの基本

02 テンプレートごとに出力内容を切り替える

03 Includeタグで変数を引き継ぐ

04 ウェブサイト／ブログ／システムのテンプレートモジュールの呼び出し

05 高度なモジュールキャッシング

CHAPTER-03は、テンプレートタグを使ったプログラミングの解説です。具体的には、制御系テンプレートタグである、MTSetVarタグ／MTGetVarタグ／MTIfタグ／MTElseタグや、各種モディファイアを使ったテンプレートの制御について、約60ページにわたって記しています。MTのキモとも言えるこの機能についてここまで詳しく扱っているのはこの本くらいなので、この部分を勉強したい方にはおすすめです。

この節は基本的に前書の改訂ですが、執筆内容は全面的に見直しています。

CHAPTER-04 ECサイトを制作する

04-01 サイトの設計

01 Movable Typeを使ったECサイトの制作

02 サイトマップ

03 完成イメージ

04-02 ブログの作成

01 必要なブログの設定

02 テンプレートの準備

03 テンプレートの作成

04-03 ショップブログの作成

01 必要なブログの設定

02 テンプレートの準備

03 テンプレートの作成

04-04 トップページの作成

01 トップページの作成

02 テンプレートの準備

03 テンプレートの作成

CHAPTER-04～07は、執筆者が前書の黒野さんから高山さんに交代となったため、全面的に新しくなっています。

CHAPTER-04は、実際に運用しているECサイトの制作過程をそのまま掲載したものです。CHAPTER-07までプロのウェブデザイナーによる執筆なので、実践的なサイト制作に役立つことでしょう。

CHAPTER-05 コミュニティサイトを制作する

05-01 サイトの設計

01 Movable Typeで作るコミュニティサイト

02 サイトマップ

03 完成イメージ

05-02 ブログの作成

01 必要なブログの設定

05-03 テンプレートの作成

01 お知らせの作成

02 スレッドの作成

03 みんなの目標の作成

04 メンバーの作成

05 その他の画面の作成

CHAPTER-04は、MTのコミュニティ機能を利用したコミュニティサイトの制作方法の紹介です。コミュニティ機能を使ったサイト制作のMT本はまだ少ないので、参考になることでしょう。

CHAPTER-06 ケータイサイトを制作する

06-01 サイトの設計

01 ケータイサイトの特徴

02 完成イメージ

06-02 サイトの作成

01 必要なブログの設定

02 テンプレートの作成

CHAPTER-06は携帯サイトの制作方法です。さきほどと同様、MTによる携帯サイト制作のMT本はまだ少ないので、参考になるのではないでしょうか。

CHAPTER-07 iphoneサイトを制作する

07-01 サイトの設計

01 iphoneサイトの特徴

02 完成イメージ

07-02 サイトの作成

01 必要なブログの設定

02 テンプレートの作成

CHAPTER-07はiPhoneサイトの制作方法です。CHAPTER04～07は、サンプルデータをダウンロードすることができます。

その他、付録として、書籍に収録できなかったテンプレートタグリファレンス／グローバルモディファイアリファレンスをダウンロードすることができます。

MTAssetThumbnailLinkタグとMTAssetThumbnailURLタグのsquareモディファイアの動作について調べてみました。調査の発端はriatwさんのツイートです。

１．squareモディファイアについて

squareモディファイアは、サムネイルの縦横比を1：1で出力するためのものです。辺のサイズは widthモディファイア, heightモディファイアまたはscale モディファイアで決定します。

冒頭に記したとおり、このモディファイアはMTAssetThumbnailLinkタグ、MTAssetThumbnailURLタグで利用できます。

• MTAssetThumbnailLinkタグ
• MTAssetThumbnailURLタグ

２．サンプル

上がsquareモディファイアで整形した画像、下が元画像です。どの部分を切り取っているかは次項で解説します。

３．squareモディファイアで切り取られる部分

squareモディファイアでは、まず次の2つの値を元に、1辺のサイズ（縮小したサイズではなく、縦横比を1：1にするためのサイズ）とx方向およびy方向の切り取り開始位置を決定します。

• 元画像の幅（px）：w
• 元画像の高さ（px）：h

wがhより大きい場合は次のように計算します。

• 1辺のサイズ：h
• x方向の切り取り開始位置：w-h/2（1辺が画像の中心になるようにxを設定）
• y方向の切り取り開始位置：0

wがhより小さい場合（またはwとhが等しい場合）は次のように計算します。

• 1辺のサイズ：w
• x方向の切り取り開始位置：0
• y方向の切り取り開始位置：h-w/2（1辺が画像の中心になるようにyを設定）

その後、正方形に切り取った画像を、widthモディファイア、heightモディファイア、scaleモディファイアで指定されたサイズに縮小します。拡大はできません。

４．処理の流れ

おまけで、トレース結果を残しておきます。

MTAssetThumbnailURLタグはMT::Template::Tags::Asset::_hdlr_asset_thumbnail_urlを実行します。

sub _hdlr_asset_thumbnail_url {
    my ($ctx, $args) = @_;
    my $a = $ctx->stash('asset')
        or return $ctx->_no_asset_error();
    return '' unless $a->has_thumbnail;
 
    my %arg;
    foreach (keys %$args) {
        $arg{$_} = $args->{$_};
    }
    $arg{Width} = $args->{width} if $args->{width};
    $arg{Height} = $args->{height} if $args->{height};
    $arg{Scale} = $args->{scale} if $args->{scale};
    $arg{Square} = $args->{square} if $args->{square}; 
    my ($url, $w, $h) = $a->thumbnail_url(%arg);
    return $url || '';
}

MTAssetThumbnailLinkタグはMT::Template::Tags::Asset::_hdlr_asset_thumbnail_linkを実行します。いずれも、後は青色で示す関数を順次実行します（多分）。

sub _hdlr_asset_thumbnail_link {
    my ($ctx, $args) = @_;
    my $a = $ctx->stash('asset')
        or return $ctx->_no_asset_error();
    my $class = ref($a);
    return '' unless UNIVERSAL::isa($a, 'MT::Asset::Image');
 
    # # Load MT::Image
    # require MT::Image;
    # my $img = new MT::Image(Filename => $a->file_path)
    #     or return $ctx->error(MT->translate(MT::Image->errstr));
 
    # Get dimensions
    my %arg;
    $arg{Width} = $args->{width} if $args->{width};
    $arg{Height} = $args->{height} if $args->{height};
    $arg{Scale} = $args->{scale} if $args->{scale};
    $arg{Square} = $args->{square} if $args->{square}; 
    my ($url, $w, $h) = $a->thumbnail_url(%arg);
    my $ret = sprintf qq(<a href="%s"), $a->url;
    if ($args->{new_window}) {
        $ret .= qq( target="_blank");
    }
    $ret .= sprintf qq(><img src="%s" width="%d" height="%d" alt="" /></a>), $url, $w, $h;
    $ret;
}

MT::Asset::thumbnail_urlを実行します。

sub thumbnail_url {
    my $asset = shift;
    my (%param) = @_;
 
    require File::Basename;
    if (my ($thumbnail_file, $w, $h) = $asset->thumbnail_file(@_)) {
        return $asset->stock_icon_url(@_) if !defined $thumbnail_file;
        my $file = File::Basename::basename($thumbnail_file);
        my $asset_file_path = $asset->SUPER::file_path();
        my $site_url;
        my $blog = $asset->blog;
        if (!$blog) {
            $site_url = $param{Pseudo} ? '%s' : MT->instance->support_directory_url;
        }
        elsif ( $asset_file_path =~ m/^%a/ ) {
            $site_url = $param{Pseudo} ? '%a' : $blog->archive_url;
        }
        else {
            $site_url = $param{Pseudo} ? '%r' : $blog->site_url;
        }
 
        if ($file && $site_url) {
            require MT::Util;
            my $path = $param{Path};
            if (!defined $path) {
                $path = MT::Util::caturl(MT->config('AssetCacheDir'), unpack('A4A2', $asset->created_on));
            } else {
                require File::Spec;
                my @path = File::Spec->splitdir($path);
                $path = '';
                for my $p (@path) {
                    $path = MT::Util::caturl($path, $p);
                }
            }
            $file = MT::Util::encode_url($file);
            $site_url = MT::Util::caturl($site_url, $path, $file);
            return ($site_url, $w, $h);
        }
    }
 
    # Use a stock icon
    return $asset->stock_icon_url(@_);
}

MT::Asset::Image::thumbnail_file（MT::Assetを継承）を実行します。

sub thumbnail_file {
    my $asset     = shift;
    my (%param)   = @_;
    my $fmgr;
    my $blog = $param{Blog} || $asset->blog;
 
    require MT::FileMgr;
    $fmgr ||= $blog ? $blog->file_mgr : MT::FileMgr->new('Local');
    return undef unless $fmgr;
 
    my $file_path = $asset->file_path;
    return undef unless $fmgr->exists( $file_path );
 
    require MT::Util;
    my $asset_cache_path = $asset->_make_cache_path($param{Path});
    my ( $i_h, $i_w ) = ( $asset->image_height, $asset->image_width );
    return undef unless $i_h && $i_w;
 
    # Pretend the image is already square, for calculation purposes.
    if ($param{Square}) {
        require MT::Image;
        my %square = MT::Image->inscribe_square(
            Width => $i_w, Height => $i_h );
        ($i_h, $i_w) = @square{qw( Size Size )};
        if ( $param{Width} && !$param{Height} ) {
            $param{Height} = $param{Width};
        }
        elsif ( !$param{Width} && $param{Height} ) {
            $param{Width} = $param{Height};
        }
    }
    if ( my $scale = $param{Scale} ) {
        $param{Width}  = int( ( $i_w * $scale ) / 100 );
        $param{Height} = int( ( $i_h * $scale ) / 100 );
    }
    if ( !exists $param{Width} && !exists $param{Height} ) {
        $param{Width}  = $i_w;
        $param{Height} = $i_h;
    }
 
    # find the longest dimension of the image:
    my ( $n_h, $n_w ) =
      _get_dimension( $i_h, $i_w, $param{Height}, $param{Width} );
 
    my $file = $asset->thumbnail_filename(%param) or return;
    my $thumbnail = File::Spec->catfile( $asset_cache_path, $file );
 
    # thumbnail file exists and is dated on or later than source image
    if ( $fmgr->exists($thumbnail)
      && ( $fmgr->file_mod_time($thumbnail) >= $fmgr->file_mod_time($file_path))) {
        return ( $thumbnail, $n_w, $n_h );
    }
    # stale or non-existent thumbnail. let's create one!
    return undef unless $fmgr->can_write($asset_cache_path);
 
    my $data;
    if ( ( $n_w == $i_w ) && ( $n_h == $i_h ) && !$param{Square}
      && !$param{Type} ) {
        $data = $fmgr->get_data( $file_path, 'upload' );
    }
    else {
        # create a thumbnail for this file
        require MT::Image;
        my $img = new MT::Image( Filename => $file_path )
          or return $asset->error( MT::Image->errstr );
 
        # Really make the image square, so our scale calculation works out.
        if ($param{Square}) {
            ($data) = $img->make_square()
              or return $asset->error(
                MT->translate( "Error cropping image: [_1]", $img->errstr ) );
        }
 
        ($data) = $img->scale( Height => $n_h, Width => $n_w )
          or return $asset->error(
            MT->translate( "Error scaling image: [_1]", $img->errstr ) );
 
        if (my $type = $param{Type}) {
            ($data) = $img->convert( Type => $type )
              or return $asset->error(
                MT->translate( "Error converting image: [_1]", $img->errstr ) );
        }
    }
    $fmgr->put_data( $data, $thumbnail, 'upload' )
      or return $asset->error(
        MT->translate( "Error creating thumbnail file: [_1]", $fmgr->errstr ) );
    return ( $thumbnail, $n_w, $n_h );
}

MT::Image::inscribe_squareを実行します。

sub inscribe_square {
    my $class = shift;
    my %params = @_;
    my ($w, $h) = @params{qw( Width Height )};
 
    my ($dim, $x, $y);
 
    if ($w > $h) {
        $dim = $h;
        $x = int(($w - $dim) / 2);
        $y = 0;
    }
    else {
        $dim = $w;
        $x = 0;
        $y = int(($h - $dim) / 2);
    }
 
    return ( Size => $dim, X => $x, Y => $y ); 
}

MT::Image::make_squareを実行します。

sub make_square {
    my $image = shift;
    my %square = $image->inscribe_square(
        Width  => $image->{width},
        Height => $image->{height},
    );
    $image->crop(%square);
}

このあとは利用している画像ライブラリによって、実行関数が異なります。

ImageMagickを利用している場合、MT::Image::ImageMagick::cropを実行します。

sub crop {
    my $image = shift;
    my %param = @_;
    my ($size, $x, $y) = @param{qw( Size X Y )};
    my $magick = $image->{magick};
 
    my $err = $magick->Crop(width => $size, height => $size, x => $x, y => $y);
    return $image->error(MT->translate(
        "Cropping a [_1]x[_1] square at [_2],[_3] failed: [_4]", $size, $x,
        $y, $err)) if $err;
 
    ## Remove page offsets from the original image, per this thread:
    ## http://studio.imagemagick.org/pipermail/magick-users/2003-September/010803.html
    $magick->Set( page => '+0+0' );
 
    ($image->{width}, $image->{height}) = ($size, $size);
    wantarray ? ($magick->ImageToBlob, $size, $size) : $magick->ImageToBlob;
}

NetPBMを利用している場合、MT::Image::NetPBM::cropを実行します。

sub crop {
    my $image = shift;
    my %param = @_;
    my ($size, $x, $y) = @param{qw( Size X Y )};
 
    my($w, $h) = $image->get_dimensions(@_);
    my $type = $image->{type};
    my($out, $err);
    my $pbm = $image->_find_pbm or return;
    my @in = ("$pbm${type}topnm", ($image->{data} ? () : $image->{file} ? $image->{file} : ()));
 
    my @crop = ("${pbm}pnmcut", $x, $y, $size, $size);
    my @out;
    for my $try (qw( ppm pnm )) {
        my $prog = "${pbm}${try}to$type";
        @out = ($prog), last if -x $prog;
    }
    my(@quant);
    if ($type eq 'gif') {
        push @quant, ([ "${pbm}ppmquant", 256 ], '|');
    }
    IPC::Run::run(\@in, '<', ($image->{data} ? \$image->{data} : \undef), '|',
        \@crop, '|',
        @quant,
        \@out, \$out, \$err)
        or return $image->error(MT->translate(
            "Cropping to [_1]x[_1] failed: [_2]", $size, $err));
    ($image->{width}, $image->{height}, $image->{data}) = ($w, $h, $out);
    wantarray ? ($out, $w, $h) : $out;
}

GDを利用している場合、MT::Image::GD::cropを実行します。

sub crop {
    my $image = shift;
    my %param = @_;
    my ($size, $x, $y) = @param{qw( Size X Y )};
    my $src = $image->{gd};
    my $gd = GD::Image->new($size, $size, 1);  # True color image (24 bit)
    $gd->copy($src, 0, 0, $x, $y, $size, $size);
    ($image->{gd}, $image->{width}, $image->{height}) = ($gd, $size, $size);
    wantarray ? ($image->blob, $size, $size) : $image->blob;
}

以上です。

ちょっと出遅れましたが、MTDDC（Movable Type Developers and Designers Conference：開発者・制作者向けカンファレンス）の地方開催についての話です。

ご存知の通り、MTDDCは過去、東京・大阪の2主要都市でしか開催されていません。MTDDCの前身であるMTDC（Movable Type Developers Conference）も同様です。

• Movable Type Developers & Designers Conference Osaka のお知らせ
• MTDDC Tokyo のお知らせ
• Movable Type Developer Conference のお知らせ 【参加無料】
• Movable Type 開発者向けカンファレンスのお知らせ【参加無料】

が、それ以外の地方での開催について、蒲生トシヒロさんが、シックスアパートの関社長と話し合いを行われたようで、「Movable Typeの地方セミナーとか、地方集会を実現しようと考えてます。」と記されています。

【Movable Type】シックス・アパートに行って関さんと話をしました。

「地方でもMovable Typeの勉強会等のイベントをぜひ開催してほしい」という方や、「開催するなら協力できる」という方など、この件についてご興味のある方は、以下のGoogleグループにご登録ください。

MT Study Society

遅ればせながら、私も登録致しました。

現在、シックスアパートでは、Movable Type 5.1の開発が進んでいるようですが、蒲生トシヒロさんの呼びかけで、多くのMTユーザーからMT5.1への要望がMTQ（Movable Type 5 ユーザーコミュニティ）に集まっています。

世界中の１％の人々へ - Movable Type 5.1への要望を出そう！その２

MTQ - MT5.1への要望を出しましょう！

ここに要望が集まる理由は、蒲生さんの「Movable Type 5.1への要望を出そう！」という記事で、関社長が次のように述べられている、と書かれているからかもしれません。

MTチームに対するMT5.1への要望は、Movabel Typeの公式コミュニティであるMTQに投稿すると、MTチームの人たちが必ず見ているので効果的です。

ということで、MT5.1に要望がある人は、どしどしMTQに投稿しましょう。バグはFogBugzへ。

Twitterのshosen_bt_pc（書泉ブックタワーコンピュータ書売り場）で、「CMSとして使う Movable Type 5 ガイドブック
」先行発売のお知らせがありました。10冊入荷して、6月2日（水）からすでに発売中のようです。

書泉ブックタワーは東京・秋葉原駅近くにあります。

大きな地図で見る

ということで、早く手にしたい方は是非お立ち寄りください。

余談ですが、上のように、Google マップにふきだしを表示しない方法は「Google マップの埋め込み HTML でふきだしを消してマーカーを残す方法」をご覧ください。

Twitterの1日分のツイートをブログに投稿してくれる、loudtwitterの紹介です。以下、設定方法です。設定内容は後で変更することができます。

loudtwitterのページにアクセスし、ブログのURLを入力して、「Yes, this is my blog」をクリックします。

文章の右下にある「signup!」のリンクをクリックします。

「Atom API endpoint url:」にAtom APIのエンドポイントURIを入力します。Movable Typeであれば、

http://user-domain/mt/mt-atom.cgi/weblog/blog_id=1

のようになります。キャプチャ画面は「weblog」の部分が「1.0」になっていますがWSSE認証が必要となるので、レガシーなエンドポイントの「weblog」の方がよいかもしれません。

また、数字の部分はブログIDになるので、投稿したいブログのブログIDを設定します。「Username」「Password」は、Atom APIを利用するユーザーとパスワードを設定します。Movable Typeであれば、パスワードは、ユーザー情報編集画面にある「Webサービスパスワード」が該当します。

「Twitter name:」に投稿したいTwitterのユーザー名を入力します。

各種情報を設定します。設定項目の意味は次の通りです。

• your name: 名前を入力します（必須ではありません）。
• post time: Twitterのツイートをブログに投稿する時間を設定します。
• post title: 投稿時のブログ記事タイトルを設定します。
• Style of post: 投稿したときのツイートのスタイルです。「Bullet list」はul要素/li要素、「Paragraph」はp要素で投稿します。チェックボックスで各情報の表示・非表示を決めます。
• text to add at the beginning of the post: ブログ記事の先頭に挿入するテキストがあれば設定します。
• text to add at the end of the post: ブログ記事の最後に挿入するテキストがあれば設定します。

メールアドレスとログイン時のパスワードを入力します。OpenIDでログインしたい場合は、右側の「click-here」をクリックします。

OpenIDでログインする場合の設定画面です。入力は必須ではありません。

設定したメールアドレスに確認メールが届くので、そこに記述されたactivation codeを次の画面に入力するか、メールに表示されたURLをクリックします。

これで設定完了です。「Try it out, now」のリンクをクリックすれば、テスト投稿を行う画面に遷移するので、すぐに確認することができるようです。

「CMS として使う Movable Type 5 ガイドブック」の見本誌が到着しました。

前半は2色刷りで、管理画面・カスタムフィールド・テンプレート・テーマ・テンプレートタグの解説です。これはカスタムフィールドの解説ページの一部です。カスタムフィールドはMT5で追加されたカテゴリ・フォルダによる振り分け機能の解説も含め、24ページにわたって解説しています。

後半は4色刷り（フルカラー）で、ECサイト・コミュニティサイト・携帯サイト・iPhoneサイトの、4つのサイト制作方法について解説されています。これは携帯サイトの解説ページの一部です。

各サイトのデータはサンプルデータとしてダウンロードできます。また、ページ数の都合で本書に含むことができなかった「テンプレートタグリファレンス」「グローバルモディファイアリファレンス」もサンプルデータからダウンロードすることができます。

発売は6月8日です。こうご期待ください！

再構築中のインデックステンプレートのファイル名を出力するIndexFileNameプラグインを公開します。インデックステンプレートのファイル名で処理を振り分けたい場合に便利です。

１．機能

MTIndexFileNameファンクションタグを提供します。インデックステンプレートにこのテンプレートタグを記述すると、再構築時にそのインデックステンプレートのファイル名を出力します。他のテンプレートに記述しても何も出力しませんが、例えばインデックステンプレートからインクルードしているテンプレートモジュール内の処理を振り分けたいときにも使えます（詳細は後述）。

後で考えると、このプラグインでなくてもやりたいことは実現できたのですが、何かの役に立つかもしれないので公開します。

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

下記の IndexFileName_0_01.zip をクリックして、プラグインアーカイブをダウンロードします。

2010.06.01 初版

IndexFileName_0_01.zip

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

プラグインアーカイブを展開し、中にある IndexFileName フォルダごと、Movable Type のアプリケーションディレクトリの plugins ディレクトリにアップロードします。

システム管理画面のプラグイン一覧で、「IndexFileName～」が表示されればインストール完了です。

４．利用方法

テンプレートモジュール側で判定したい場合は、MTIncludeタグのモディファイアを利用して、値を引き継ぎます。

インデックステンプレート（foo.html）

<mt:IndexFileName setvar="index_file_name" />
<mt:Include module="bar" index_file_name="$index_file_name" />

テンプレートモジュール（bar）

<mt:if name="index_file_name" eq="foo.html">
…中略…
</mt:if>