Movable Type 備忘録

StyleCatcher用のリポジトリを公開する

Jul242006
Author: bzbell
Categories: Customize
Tags: MovableType, StyleCatcher, Template

Next Page: Google Sitemapsへの更新通知を自動化する
Prev Page: StyleCatcher対応テンプレート配布

忘れないうちにメモしておきます。

MovableType(ムーバブルタイプ) 3.3から標準機能となったStyleCatcherですが、改めて使ってみると楽にテンプレートを差し替えができるので、公開に至るまでにいろいろ動作確認したりなどで時間がかかってしまいましたが、対応して良かったと思っています。

当サイトで配布しているテンプレートは、MovableType(ムーバブルタイプ)のデフォルトを使用していない(独自のテンプレートを使用しています)ので、StyleCatcherを利用する前にちょっとした準備が必要になります。デフォルトのテンプレートをベースにすると、何も考えずにStyleCatcherを利用することができます。

何をベースにするかは人それぞれの考え、拘りがあると思いますが、ちょっと凝ったことをやろうとすると、デフォルトの許容範囲外となってしまいますので、各自で納得のいくテンプレートが作れればOKではないでしょうか。

前置きはこのくらいにして、さっそくStyleCatcher用のリポジトリ公開方法を紹介します。

リポジトリとは

StyleCatcherを利用していると目にするのがリポジトリという単語です。リポジトリとは何かというと、サイトでテーマを公開しているディレクトリを指します。テーマとはテンプレートの単位…と言えばいいのかな。たとえば、当サイトで公開してるテーマには、以下の3つのテーマがあります。( 2007.07.23 現在 )

Basic: 当サイトでベースとしてるテンプレートです。
Collection001: ダークなイメージのサイトをよく見かけたので、わたしも作ってみたテンプレートです。
Collection006: よく分からないけど、思うがままに作ったテンプレートです。

当サイトでは、各テーマで異なるレイアウトを公開していますが、サイトによっては色違いだったり、画像が違ったりなどしてます。

スタイルライブラリとは

実際に各テンプレートが格納されているディレクトリを指します。リポジトリはStyleCatcherが参照しに行くディレクトリで、スタイルライブラリはテンプレートが格納されているディレクトリ…というかんじでしょうか。リポジトリとスタイルライブラリが同じ場所であっても、異なっていても問題ありません。言い換えると、StyleCatcherはリポジトリのURLさえ固定されていれば、その先のスタイルライブラリのURLがどこであっても問題ない…ということです。

実は当サイトのリポジトリとスタイルライブラリは別々な場所になっています。特別な理由があったから…というわけではないのですが、わたしの管理上の理由で…というところでしょうか。ちなみに、シックス・アパートのリポジトリとスタイルライブラリも別々な場所になっています。

StyleCatcerのしくみについて

StyleCatcherはリポジトリで指定されているテーマを読み出します。どのように読み出すのかというと、リポジトリ内にStyleCatcher用の index.html をあらかじめ用意しておくことで、StyleCatcherはそのファイルを読み取ってテーマ一覧を表示しています。 index.html の記述については後ほど説明しますが、index.html の中にはスタイルライブラリへのパスが記述されています。スタイルライブラリ内にテンプレートのサムネイルをあらかじめ用意しておくことで、StyleCatcherはそのサムネイルを表示しています。

リポジトリで用意するもの

公開するリポジトリで用意するものは、index.html だけです。以下に index.html の内容を記します。

<?xml version="1.0" encoding="UTF-8"?>
<!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="ja" lang="ja">
<head profile="http://www.w3.org/2003/g/data-view">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="StyleCatcher プラグインで利用できるスタイルライブラリ" />
<meta name="dc.title" content="Style Library" />
<title>Style Library</title>
<link rev="made" href="mailto:admin@mail.address" title="管理者 メールアドレス" />
<link rel="theme" type="text/x-theme" href="http://www.sixapart.com/movabletype/styles/bold_palettes/theme-beckett/theme-beckett.css" />
<link rel="theme" type="text/x-theme" href="http://www.sixapart.com/movabletype/styles/classic/theme-earth/theme-earth.css" />
<link rel="theme" type="text/x-theme" href="http://www.sixapart.com/movabletype/styles/classic/theme-green_grass/theme-green_grass.css" />
</head>
<body>
...
</body>
</html>

青い字の部分はStyleCatcherのカテゴリ欄に表示される名称になります。赤い字の部分で後から説明するスタイルライブラリに格納されたテーマのCSSを記述しています。緑の字の分は index.html の本文ですが、あってもなくても問題ありません。

ちなみに当サイトでは、テンプレートカテゴリページとリポジトリを共有させています。カンタンにいうと、MovableType(ムーバブルタイプ)で作成されたカテゴリ・アーカイブのテンプレート内に、スタイルライブラリのURLを記述しています。 ( 厳密にはテンプレートカテゴリのページのみに記述しています。 )

StyleCatcherは<body>～</body>の中に何があろうと関係なく、上記の赤い字の部分のみ参照しているようです。

スタイルライブラリのディレクトリ構成

Warning: include() [function.include]: URL file-access is disabled in the server configuration in /virtual/bzbell/public_html/archives/2006/07/24-010614.php on line 146

Warning: include(http://bizcaz.com/widget/litebox.php?url=http://bizcaz.com/image/zu/stylecatcher.gif&width=264&height=240&title=&noscript=) [function.include]: failed to open stream: no suitable wrapper could be found in /virtual/bzbell/public_html/archives/2006/07/24-010614.php on line 146

Warning: include() [function.include]: Failed opening 'http://bizcaz.com/widget/litebox.php?url=http://bizcaz.com/image/zu/stylecatcher.gif&width=264&height=240&title=&noscript=' for inclusion (include_path='.:/usr/local/lib/php') in /virtual/bzbell/public_html/archives/2006/07/24-010614.php on line 146

スタイルライブラリのディレクトリ構成について説明します。スタイルライブラリのディレクトリ構成は統一されていて、各サイトとも必ず同じディレクトリ構成になっています。以下に当サイトのスタイルライブラリのディレクトリ構成を記します。

赤枠がスタイルライブラリのトップ・ディレクトリになります。青枠が1つのテーマのトップ・ディレクトリになります。当サイトでは3つのテーマを公開しています。緑枠が1つのテーマをベースにした各テンプレートのディレクトリになります。当サイトでは、1つのテーマを基に異なるレイアウトのテンプレートを公開していますが、サイトによってはここには色違いのテンプレートなどを用意されてたりします。ピンク枠が各テンプレートで必要とするCSSと、それに付随するイメージファイルです。

テーマを増やすには、青枠ディレクトリ配下を追加していくことになります。また、1つのテーマを基にテンプレートを増やすには、緑枠ディレクトリ配下を追加していくことになります。

上記図を元に、当サイトで公開しているリポジトリの index.html 内で記述している各スタイルライブラリの記述を以下に記します。

<head>
<link rel="theme" type="text/x-theme" href="http://bizcaz.com/archives/movabletype/library/mt-memo-basic/basic-1column-fixed/basic-1column-fixed.css" />
<link rel="theme" type="text/x-theme" href="http://bizcaz.com/archives/movabletype/library/mt-memo-basic/basic-1column-liquid/basic-1column-liquid.css" />
<link rel="theme" type="text/x-theme" href="http://bizcaz.com/archives/movabletype/library/mt-memo-basic/basic-2column-fixed-left/basic-2column-fixed-left.css" />
<link rel="theme" type="text/x-theme" href="http://bizcaz.com/archives/movabletype/library/mt-memo-basic/basic-2column-fixed-right/basic-2column-fixed-right.css" />
<link rel="theme" type="text/x-theme" href="http://bizcaz.com/archives/movabletype/library/mt-memo-basic/basic-2column-liquid-left/basic-2column-liquid-left.css" />
<link rel="theme" type="text/x-theme" href="http://bizcaz.com/archives/movabletype/library/mt-memo-basic/basic-2column-liquid-right/basic-2column-liquid-right.css" />
<link rel="theme" type="text/x-theme" href="http://bizcaz.com/archives/movabletype/library/mt-memo-basic/basic-3column-fixed/basic-3column-fixed.css" />
<link rel="theme" type="text/x-theme" href="http://bizcaz.com/archives/movabletype/library/mt-memo-basic/basic-3column-fixed-left/basic-3column-fixed-left.css" />
<link rel="theme" type="text/x-theme" href="http://bizcaz.com/archives/movabletype/library/mt-memo-basic/basic-3column-fixed-right/basic-3column-fixed-right.css" />
<link rel="theme" type="text/x-theme" href="http://bizcaz.com/archives/movabletype/library/mt-memo-basic/basic-3column-liquid/basic-3column-liquid.css" />
<link rel="theme" type="text/x-theme" href="http://bizcaz.com/archives/movabletype/library/mt-memo-basic/basic-3column-liquid-left/basic-3column-liquid-left.css" />
<link rel="theme" type="text/x-theme" href="http://bizcaz.com/archives/movabletype/library/mt-memo-basic/basic-3column-liquid-right/basic-3column-liquid-right.css" />

<link rel="theme" type="text/x-theme" href="http://bizcaz.com/archives/movabletype/library/mt-memo-C001/C001-3column-fixed-left/C001-3column-fixed-left.css" />
<link rel="theme" type="text/x-theme" href="http://bizcaz.com/archives/movabletype/library/mt-memo-C001/C001-3column-liquid/C001-3column-liquid.css" />
<link rel="theme" type="text/x-theme" href="http://bizcaz.com/archives/movabletype/library/mt-memo-C001/C001-3column-liquid-left/C001-3column-liquid-left.css" />

<link rel="theme" type="text/x-theme" href="http://bizcaz.com/archives/movabletype/library/mt-memo-C006/C006-3column-fixed-left/C006-3column-fixed-left.css" />
<link rel="theme" type="text/x-theme" href="http://bizcaz.com/archives/movabletype/library/mt-memo-C006/C006-3column-fixed-right/C006-3column-fixed-right.css" />
</head>

上記図と見比べると分かりやすいかと思います。ここで重要なことを以下に記します。

緑枠のテンプレートディレクトリ名とピンク枠内のCSSファイル名を、必ず同一にする必要があります。 StyleCatcherは index.html 内に記述された各テーマのCSSファイル名からそのディレクトリ名を参照しているようです。また、このディレクトリ名は他の人のテーマと重複しないような名前をつけるようにしてください。 StyleCatcherは mt/mt-static/themes/ の中に、このディレクトリ名で必要なCSSおよび、イメージファイルをスタイルライブラリからコピペするようです。
必要なイメージファイルをCSSファイルと同じ場所に格納してください。 StyleCatcherはCSS内を解析!? して、定義されているイメージファイルもいっしょに読み込むようです。
CSSファイルと同じ場所に、thumbnail.gif( 120 x 84 )と、thumbnail-large.gif( 280 x 210 )のサムネイルを用意します。 StyleCatcherは index.html に記述されたCSSファイルと同じディレクトリ内のサムネイルを読み出して一覧表示するようです。
サイトキャプチャーツール
 ブラウザサイズを一定サイズにする

また、CSSファイル内の先頭付近に以下の記述を追加することで、詳細表示したときにテンプレート名称とデザイナー名が表示されるようになります。

/*
name: Beckett
designer: Lilia Ahner
designer_url: http://www.lilia.com
developer: Lilia Ahner
developer_url: http://www.lilia.com
*/

- 2006.07.24 追記 -

CSSファイルで気をつけなければいけないことが、文字コードです。人それぞれMovableType(ムーバブルタイプ)で使用している文字コードが異なります。utf-8 だったり、euc-jp だったりするわけですが、CSS内に
@charset "utf-8";
のような記述を入れてしまうと、指定した文字コードとして扱われてしまうので気をつけてください。

以上で、StyleCatcher用のリポジトリを公開する準備ができました。あとは、各自で動作確認など行った上で公開するだけです。