小粋空間: リポジトリ: 2007年4月アーカイブ

Top ＞ Movable Type ＞リポジトリ＞ 2007年4月

2007年4月26日

Movable Type のテンプレートを1クリックで切り替えるカスタマイズ（その3：テンプレートを切り替える）

April 26,2007 8:55 AM
Tag：[Customize, MovableType, Template]
Permalink

「Movable Type のテンプレートを1クリックで切り替えるカスタマイズ」の3回目は、配布テンプレートを利用するにあたっての事前準備、およびテンプレート切り替えについて記します。

このエントリーを投稿するために、実際に当サイトおよび他サイトで配布されているテンプレートを拝借してテンプレート切り替えを行ってみました。で、手前味噌ですが、

「これはいい！」

の一言です。

準備さえ整えばテンプレートをわずか数秒で切り替えられます。再構築の手間を差し引いても、適用するテンプレートが一斉に切り替わるのは爽快です。
下記に当サイトのテンプレートを用意しましたので、もしよろしければ試してみてください。

アーカイブ（利用方法は２項参照）

URL（利用方法は４項参照）

http://www.koikikukan.com/styles/library/

なお動作は Movable Type 3.3x で行っています。3.2x については未確認ですので予めご容赦ください。またいくつかの制約がありますので、ご利用になる前に必ず５項「注意事項」をご覧ください。

１．事前準備

テンプレート切り替えを実現するにあたっての準備です。少し面倒な作業ですが、一度設定してしまえばあとは簡単ですので、是非トライしてみてください。

１．１ StyleCatcher ソースコード修正

まず、StyleCatcher プラグインでスタイルシート以外のテンプレートを読み込めるようにするため、下記のパッチをダウンロードし、plugins/StyleCatcher/lib/StyleCatcher.pm に適用します。パッチについては「パッチをあてる（その1：適用方法）」をご覧ください。

StyleCatcher_patch.zip

パッチがお分かりにならない場合は、plugins/StyleCatcher/lib/StyleCatcher.pm をダウンロードし、任意のエディタで開いて下記の赤色部分を修正、および青色部分を追加し、保存後、元のディレクトリにアップロードしてください。念のため、ファイルのバックアップ（StyleCatcher.pm.bak がいいです）はとっておきましょう。

# Replacing the theme import or adding a new one at the beginning
my $template_text = $tmpl->text();
my @template_lines = split(/\r?\n/, $template_text);
my $replaced = 1;
my $header = '/* This is the StyleCatcher theme addition. Do not remove this block. */';
 　　　 ：
　　（中略） 
 　　　 ：
# Putting the stylesheet back together again
$tmpl->text(join("\n", @template_lines));
$tmpl->save or return $app->json_error($tmpl->errstr);
 
my %templates = ($basename . '.css' => "stylesheet",
                 'main_index.tmpl' => "index",
                 'master_archive_index.tmpl' => "index",
                 'individual_entry_archive.tmpl' => "individual",
                 'category_archive.tmpl' => "category",
                 'datebased_archive.tmpl' => "archive",
                 'comment_preview_template.tmpl' => "comment_preview",
                 'comment_error_template.tmpl' => "comment_error", 
                 'comment_pending_template.tmpl' => "comment_pending", 
                 'search_results_template.tmpl' => "search_template");
require MT::Template;
$url = $app->param('url');
my $user_agent = $app->new_ua;
for my $name (keys %templates) {
    $url = $new_url . $name;
    my $request = HTTP::Request->new(GET => $url);
    my $response = $user_agent->request($request);
    next unless $response->is_success;
    $tmpl = $templates{$name} eq 'stylesheet' ?
                $app->load_style_template($blog_id) :
                MT::Template->load({ blog_id => $blog_id, type => $templates{$name} });
    $tmpl = MT::Template->load({ blog_id => $blog_id, outfile => 'archives.html' })
                if $name eq 'master_archive_index.tmpl';
    $tmpl->text($response->content);
    my $saveroot = $blog_themeroot ? $blog_themeroot : $sys_themeroot;
    $tmpl->linked_file(File::Spec->catfile($saveroot, $basename, $name));
    $tmpl->save or return $app->json_error($tmpl->errstr);
}
 
# Store our current theme information
$app->plugin->set_config_value("current_theme_$blog_id", $basename);

１．２ StyleCatcher 設定

管理画面の「メイン・メニュー > システム・メニュー > プラグイン」のページで、StyleCatcher と表示された右側にある「設定を表示」をクリック。
中央に設定画面が開くので下記の内容を設定し、「変更を保存」をクリック。

テーマのルートURL：（修正しない）
テーマのルートパス：（修正しない）
Style Library へのURL：「テーマのルートURL（一番上の内容）」を設定

ここでは自サイトにテンプレートセットをアップロードする設定を前提に書いていますが、外部URLを設定して取得する場合は、４項「外部URLを指定してテンプレートセットを取得する方法」を参照ください。

１．３スタイルライブラリページ作成

アップロードしたテンプレートを StyleCatcher で表示させるために「スタイルライブラリページ」をインデックステンプレートとして作成します。ここでは予めサンプルである当サイトのテンプレートを読み込む設定（link 要素）を加えています。

[テンプレート]-[インデックス]タブのページ右上の[テンプレートを新規作成]をクリックし、次のページで下記を設定。

テンプレート名：StyleCatcher（←何でもいいです）
出力ファイル名：mt-static/themes/index.html
テンプレートの内容：下記

<?xml version="1.0" encoding="<$MTPublishCharset$>"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<$MTDefaultLanguage$>" lang="<$MTDefaultLanguage$>">
  <head profile="http://www.w3.org/2003/g/data-view">
    <meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
    <link rel="theme" type="text/x-theme" href="<$MTStaticWebPath$>themes/koikikukan3/koikikukan3.css" />
    <title>Theme Repository</title>
  </head>
  <body>
  </body>
</html>

設定後、保存・再構築します。これで mt-static/themes 配下に index.html が生成されます。

また、新しいテンプレートをアップロードした場合は、このテンプレートに link タグを追加します。例えば hogehoge というテンプレートをアップロードしたら、このテンプレートに、

　　　：
  <head profile="http://www.w3.org/2003/g/data-view">
    <meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
    <link rel="theme" type="text/x-theme" href="<$MTStaticWebPath$>themes/koikikukan3/koikikukan3.css" />
    <link rel="theme" type="text/x-theme" href="<$MTStaticWebPath$>themes/hogehoge/hogehoge.css" />
    <title>Theme Repository</title>
  </head>
　　　：

と、青色の行を追加し、保存・再構築します。

２．配布テンプレートのダウンロードとアップロード

ここではサンプルとして下記のテンプレートセットをダウンロードしてください。

ダウンロードしたアーカイブを解凍し、次のディレクトリ構成（青色）になるように mt-static/themes 配下にアップロードします。

mt-static/
　　themes/
　　　　index.html
　　　　koikikukan3/
　　　　　　archive.tmpl
　　　　　　category.tmpl
　　　　　　comment_error.tmpl
　　　　　　comment_pending.tmpl
　　　　　　comment_preview.tmpl
　　　　　　index.tmpl
　　　　　　individual.tmpl
　　　　　　master_archive_index.tmpl
　　　　　　search_template.tmpl
　　　　　　koikikukan3.css

３．テンプレート切り替え

いよいよテンプレート切り替えを実行します。

まず StyleCatcher を起動します。管理画面の[テンプレート]で次のページ下に表示された「StyleCatcherでデザインを選ぶ」をクリックします。

StyleCatcher 起動

（サンプル通りであれば）左ペインに「Theme Repository」が表示されますので、選択状態にすると右ペインにサンプルテンプレート（koikikukan 3 column for changing template）が表示されます。

テーマ選択

その画像をクリックし、右下の「デザインを適用」をクリックします。システムメニューから StyleCatcher を起動するとボタン左にブログ選択用のセレクトボックスが表示されますので、テンプレートを切り替えたいブログを選択してから「デザインを適用」をクリックしてください。

デザインを適用

「新しいテーマを適用しました」というダイアログが表示されれば完了です。

ダイアログ

これで該当ブログのテンプレートが入れ替わっていればOKです。さくらのブログ（スタンダードプラン） + SQLite で試したところ、ボタンをクリックして1秒でダイアログが表示、つまりテンプレートが切り替わりました。

４．外部URLを指定してテンプレートセットを取得する方法

２項は、一旦ダウンロードしたテンプレートを読み込む方法を紹介しましたが、配布サイトのURLを指定することで切り替えることも可能です。ただし、切り替え後のテンプレート修正履歴は再切り替え後には反映されません。

管理画面の「メイン・メニュー > システム・メニュー > プラグイン」のページで、StyleCatcher と表示された右側にある「設定を表示」をクリック。
中央に設定画面が開くので下記の内容を設定し（3番目の項目が外部URLになります）、「変更を保存」をクリック。

テーマのルートURL：（修正しない）
テーマのルートパス：（修正しない）
Style Library へのURL：外部URLを設定

外部URLには、冒頭に記した当サイトの配布URL

http://www.koikikukan.com/styles/library/

を指定してみてください。通常の StyleCatcher 用のテーマ（KOIKIKUKAN Classic）も表示されますが、「koikikukan 3 column for changing template」を選択してください。

５．注意事項

本カスタマイズ前にご利用になっているテンプレートは、テンプレート切り替えにより消去されます。カスタマイズしていないデフォルトテンプレートであればバックアップされているので問題ありませんが、それ以外の場合は、切り替える前に必ずテンプレートのバックアップをとり、保存してください（「その2：テンプレート配布方法」にしたがって保存するのが一番お勧めです）。
ダウンロードするテンプレートに日本語が含まれている場合、ブログの文字コードが一致している必要があります。当サイトで配布しているテンプレートは utf-8 のみ対応しています。
複数ブログを利用している場合も、１．２項の Style Library へのURL は同一です。つまりブログ単位で異なる Style Library へのURLは設定できません（プログラム内部で mt-static のパスを参照している模様）。言い換えると、「１．３スタイルライブラリページ」も含め、いずれかひとつのブログで設定されていればOKです。
１．２項で「テーマのルートURL」「テーマのルートパス」が ?mt-static/themes でない場合は ?mt-static/themes に修正してください（インストールしてから StyleCatcher の設定を触っていなければ心配ありません）。

その1：概要
その2：テンプレート配布方法
その3：配布テンプレート利用方法

Comments [2] | Trackbacks [0]

2007年4月25日

Movable Type のテンプレートを1クリックで切り替えるカスタマイズ（その2：テンプレート配布方法）

April 25,2007 12:55 AM
Tag：[Customize, MovableType, Template]
Permalink

「Movable Type のテンプレートを1クリックで切り替えるカスタマイズ」の2回目は、テンプレートの配布方法を記します。

「その1：概要」でも書いた通り、テンプレート切り替え機能を実現するにあたって、例えば TemplateCatcher や ThemeChanger といったプラグインを作り、それらで同様の機能を実現しても良い訳です。ただし実装に依存する配布形態・配布方法が複数存在するのは配布サイト・利用ユーザともに好ましくないので、インタフェース部分はできるだけ規定しておきたいという思いがあります。流行らない可能性大ですが。

おおまかな方針としては、StyleCatcher を利用している経緯があるので、配布側の稼動を考慮し、StyleCatcher の方式を踏襲し、既存のテーマ変更との互換性を保つようにしています。

１．配布条件

URLアクセスまたはアーカイブ形式で配布
スタイルシートは必須
テンプレートを全て揃える必要はない
サムネイルを同梱（StyleCatcher に準ずる）

２．ファイル名付与規則

本機能でサポートするテンプレートおよびテンプレートの各ファイル名は下記の通りです。Movable Type の default_templates 配下のファイル名と同一にしていますが、スタイルシートのみ StyleCatcher のお作法にしたがい、名称が[テーマ名]になります。

テンプレート名	ファイル名
メインページ	`main_index.tmpl`
スタイルシート	`[テーマ名].css`
アーカイブページ	`master_archive_index.tmpl`
エントリー・アーカイブ	`individual_entry_archive.tmpl`
カテゴリー・アーカイブ	`category_archive.tmpl`
日付アーカイブ	`datebased_archive.tmpl`
コメント・プレビュー	`comment_preview_template.tmpl`
コメント・保留	`comment_pending_template.tmpl`
コメント・エラー	`comment_error_template.tmpl`
検索結果	`search_results_template.tmpl`

３．ファイル・ディレクトリ構成

下記のファイル・ディレクトリ構成でテンプレートセットを配布します。

[テーマ名]/
　　[テーマ名].css
　　archive.tmpl
　　category.tmpl
　　comment_error.tmpl
　　comment_pending.tmpl
　　comment_preview.tmpl
　　index.tmpl
　　individual.tmpl
　　master_archive_index.tmpl
　　search_template.tmpl
　　thumbnail.gif
　　thumbnail-large.gif

ここで挙げているテンプレートはフルセットの場合であり、前述した配布条件の通り、全てのテンプレートを用意する必要はありません。例えばコメントエラー・コメント保留等を省きたい場合は、それらのファイルがない状態でファイルを配置してください。

また、[テーマ名]ディレクトリの上位のディレクトリに index.html を置けば、通常の StyleCatcher 用リポジトリとしての互換性を保つことができます。要するに、StyleCatcher 用テーマを配布されているのであれば、テーマディレクトリに .tmpl ファイルが追加になるだけという訳です。

さらにこのディレクトリをアーカイブしてユーザに配布することで、ユーザにとっては機能の選択肢がより広がることになります。

４．制限事項

配布テンプレートに全角文字が含まれる場合、ブログの文字コードと一致している必要があります。

2007.04.26 追記
４項を追記しました。

Comments [0] | Trackbacks [0]

2007年4月24日

Movable Type のテンプレートを1クリックで切り替えるカスタマイズ（その1：概要）

April 24,2007 1:55 AM
Tag：[Customize, MovableType, StyleCatcher, Template]
Permalink

各サイトで配布されている Movable Type テンプレートを入れ替えるのは結構面倒ですが、メインページ・スタイルシート・各アーカイブテンプレートおよびシステムテンプレート等、主要なテンプレートを1クリックで切り替えられるようにするカスタマイズをご紹介します。

カスタマイズ記事はできるだけ1エントリーで完結するようにこころがけていますが、長文であることと、配布サイト／利用ユーザのいずれかによって知るべき内容が異なるので、久々にシリーズものとしてエントリーします。
以下の3回に分けて解説します。

その1：概要
その2：テンプレート配布方法
その3：配布テンプレートの取得とテンプレート切り替え

私の勝手な思いでこのカスタマイズを説明していきますが、配布方法に依存する箇所があるため、賛同頂けるテンプレート配布サイトの方々のご協力を頂ければ幸いです（実装はどうにでもなりますが仕様が大事だと思ってます）。
また、記事内容についてのご意見も併せてお待ちしております。

１．現状の Movable Type でのテンプレート入れ替えについて

現在、Movable Type のデフォルトプラグイン StyleCatcher を用いることでスタイルシートの切替が可能ですが、「スタイルシートだけでなく、他のテンプレートも入れ替えられる仕組みはないだろうか？」とお考えになったことはないでしょうか。
StyleCatcher ではテーマ（デザイン）の変更が簡単にできる反面、下記の制約があります。

(X)HTMLマークアップが固定であるため、カラム増減やナビゲーション、メニューリスト等の追加はユーザ依存
ベースCSS（base-weblog.css）との共存 *これはメリットでもありますが
配布された CSS を変更する場合はテンプレート編集画面ではなく、theme ディレクトリにある外部 CSS を修正

つまり、StyleCatcher のそもそものスタンスが「カスタマイズをせずにブログのデザインを手軽に変更する」ためのもので、そのニーズに合ったユーザには便利な機能です。が、独自のマークアップや異なるカラムレイアウトでテンプレートを提供したいというケースでは、このプラグインの恩恵に預かることができません。

したがって独自にマークアップされた配布テンプレートを利用する場合、ユーザは編集画面を開いてテンプレートをひとつずつコピー＆ペーストで入れ替えるか、default_templates 配下のファイルを入れ替えるのが現状と思われます。

また、WordPress や Serene Bach のテンプレート（テーマ）切替機能のように、複数のテンプレートセットを保持・あるいは瞬時に切り替えられる仕組みがないことは、テンプレート入れ替えを躊躇う要因のひとつになっているかもしれません。

２．主な機能

本シリーズのカスタマイズを行うことで下記が可能になります。

複数のテンプレートセットをご自身のサイトに保持できます
テンプレートを簡単に切り替えることができるようになります
利用したテンプレートをカスタマイズし、途中で他のテンプレートに切り替えても、それまでにカスタマイズした履歴は保存されるので、再読み込みした時に復活できます

３．仕組み

このカスタマイズでは StyleCatcher を利用します。StyleCatcher ではテーマを配布している外部のURLを指定してテーマを取得しますが、ここではご自身で利用している Movable Type の URL（mt-static/theme）を指定します。

下は従来の StyleCatcher 利用時の動作です。
配布サイトのURLを指定して（?）、表示されたテーマ（?）を選択（?）することで該当のスタイルシートがダウンロードされ、ファイルとして保存されます（?）。テーマファイル（CSS）はテンプレートに直接書き込まれず、@import 文で base-weblog.css とともに外部ファイルとして読み込まれます。
従来の StyleCatcher 利用時の動作

こちらがカスタマイズ後の動作です。
ディレクトリ構成・ファイル名付与規則にしたがったテンプレートを配布サイトからダウンロードし、自サイトにアップロードします（?）。StyleCatcher にはテンプレートをアップロードしたURLを指定し（?）、そこで表示されたテーマ（?）を選択（?）することで、全てのテンプレートをデータベースに読み込み、切り替えます（?）。もちろんテーマファイル（CSS）もテンプレートとして書き込まれます（base-weblog.css へのリンクはありません）。
カスタマイズ後の StyleCatcher 利用時の動作

また、自サイトにアップロードしたファイルをそのままテンプレートの外部ファイルとして関連付けをします。こうすることで、例えば取得したテンプレートAをカスタマイズして、その後他のテンプレートBに切り替えても、テンプレートAのカスタマイズ内容は外部ファイルに残りますので、 StyleCatcher でテンプレートAに再び切り替えた時、以前のカスタマイズ内容を復活させることができます。

なお、図は省略していますが、従来の StyleCatcher 利用と同じように、配布サイトのリポジトリにアクセスしてテンプレートを切り替えることも可能です。ただし常に配布サイトからテンプレートを取得するので、アクセスするURLを切り替えないとカスタマイズ履歴が消滅します（詳細は後述します）。

ダイナミックパブリッシングと併用すれば、まさにデザインをダイナミックに変更することが可能になり、利便性が向上することでしょう。

Comments [0] | Trackbacks [1]

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