GREAT ADVENTURE OF THE THEME
Akira Sawada
Six Apart Engineer, Movable Type Engineering

今回の資料は以下のURLでも閲覧できます

  • http://blog.aklaswad.com/gaott/

Slidon(サンプルテーマ)のダウンロード

  • http://blog.aklaswad.com/slidon0.2.zip
  • http://github.com/aklaswad/slidon
  • この資料自体もSlidonで作成しました。
  • Slidonの動作にはCMSContextプラグインが必要です
  • http://alfasado.net/contents/labs.html

Themeのインストール

  • ディレクトリを丸ごとthemesディレクトリに放り込むだけ!

あとはブログの作成時にテーマを選べばOK

または、既存のブログへ適用

click!

What is the Theme

Themeとは

  • 各ブログ(またはウェブサイト)に結びついて、ブログの初期設定や動作を定義、拡張するもの
  • エクスポート機能を備えることで、ブログデザインの再利用性を高めるもの

そのためにThemeが目指す事

  • Portable
  • Secure
  • Extensible

Portable

  • インストールが簡単
  • エクスポートに対応
  • プログラム不要

Secure

  • 実行コードを含まない
  • 制御されたファイルタイプ

Extensible

  • 豊富なカスタマイズオプション
  • フレームワーク自体も拡張可能

Themeでこんなことが出来るようになる!

  • より簡単にブログを始めることが出来る
  • 特定の用途に特化したブログをデザイン出来る
  • 作成したブログデザインを配布出来る
  • 要件に応じたデザインの雛型をストック出来る

エクスポートも簡単

  • エクスポート画面で必要な項目を入力、選択するだけ
  • http://www.movabletype.jp/documentation/mt5/design/themes/create.html

エクスポートのオプション

  • Template Set
  • Static Files
  • Category/Folder
  • Custom Fields

エクスポート先も指定可能

もっとカスタマイズしたい!

  • どんどんカスタマイズしてください!
  • テーマパッケージを直接編集してカスタマイズ可能
  • エクスポートしたテーマをベースにすれば楽
  • もちろん一からフルスクラッチでも作成できます

テーマの構造を知ろう!

http://www.movabletype.jp/documentation/developer/theme/index.html

ThemePackageの構造

theme.yaml基本情報
elements
elements用ファイルblog_static, templates...
thumbnaillarge.png, small.png...
Special Directoriesalt-tmpl, static...

theme.yaml

  • テーマの構造を定義する基本となるファイル
  • YAMLで書かれている

YAMLとは

YAML とは、構造化されたデータを表現するためのフォーマットです。目的は XML と似ていますが、XML と比べて「読みやすい」「書きやすい」「わかりやすい」という利点があります。
  • 「Rubyist Magazine - プログラマーのための YAML 入門 (初級編)」より引用
  • http://jp.rubyist.net/magazine/?0009-YAML

theme.yamlの構造

  • Themeの動作を定義する基本情報
  • Theme適用時にブログにインストールする各種の要素(Element)

Themeの基本情報

http://www.movabletype.jp/documentation/developer/theme/registry.html

  • label
  • id
  • author_name
  • author_link
  • description
  • version
  • class
  • protected

依存コンポーネントの指定

required_components:
    community: 0.1
optional_components:
    commercial: 0.1

Thumbnailの指定

thumbnail_file: thumb.png
thumbnail_file_medium: thumb-medium.png
thumbnail_file_small: thumb-small.png

Thumbnailのサイズ表

widthheight
thumbnail_file400300
thumbnail_file_medium240180
thumbnail_file_small12090

翻訳用辞書の指定

l10n_lexicon:
    ja:
        Classic Website: クラシックウェブサイト
    de:
        Classic Website: Klassische Website
  • テンプレートに<__trans phrase="Classic Blog">などと書くと、テーマ適用時に翻訳される
  • descriptionなどでも使える
  • エクスポートでテーマを作る場合には注意が必要
author_link: http://blog.aklaswad.com/
author_name: Akira Sawada
class: blog
description: A slideware theme that brings you a slide composing screen and cool presentation appearance. This theme is for demonstration of MT5 theme framework.
id: slidon
label: Slidon
name: Slidon
version: 0.2
thumbnail_file: slidon_icon.png
thumbnail_file_medium: slidon_icon_medium.png
thumbnail_file_small: slidon_icon_small.png
required_components:
  cmscontext/cmscontext.pl: 0.1

Theme Elements

Core Elements

http://www.movabletype.jp/documentation/developer/theme/core_elements.html

  • Template Set
  • Static Files
  • Category/Folder
  • Page
  • Pref

エクスポート画面のココに対応しています

Special Directories

alt-tmpl

  • themeのパッケージにalt-tmplディレクトリを設置
  • そのテーマを利用しているブログでのみ管理画面をカスタマイズ

Slidon(このスライドのバックエンドテーマ)でも

static

  • MT4までのmt-staticへのインストール作業を自動化
  • テーマが管理画面で表示するスタティックファイル用
  • (mt-static)/support/theme_static/(theme_id)/ 以下に自動コピーされる

staticディレクトリの利用例

  • alt-tmplで利用するimage/js/styleファイルなど
  • StyleCatcher用リポジトリをテーマに同梱

Theme Framework and more

http://www.movabletype.jp/documentation/developer/theme/extend_theme_framewok.html

MTがThemeとして認識するのは

  • themesディレクトリ以下のパッケージ
  • プラグインがRegistryに登録したTheme
  • Template Set (後方互換のため)

ThemeとPluginの比較

ThemePlugin
設置場所./themes./plugins
長所開発が容易高度なカスタマイズが可能
短所サーバー側でのスクリプトは含められない作成にはある程度のスキルが必要

ThemeFrameworkを拡張する

  • Themeが扱える情報(Element)をプラグインから拡張
  • プラグイン固有の情報をThemeに含めて配布できる

Theme Framework拡張の例

  • ドキュメント: http://www.movabletype.jp/documentation/developer/theme/extend_theme_framewok.html
  • 参考例: PluginDataExporter(http://tec.toi-planning.net/mt/plugindataexporter/)

PerlからThemeを操作してみる

require MT::Theme;
my $theme = MT::Theme->load('slidon');
# or my $theme = $blog->theme;

$theme->apply($blog);

MT::Theme

  • テーマは内部的にはMT::Themeクラスのインスタンス
  • MT::Componentを継承している(独自のpath情報、registryを持っている)
  • MT::Objectの派生では無いので注意
  • 直接Themeオブジェクトを触っておいしいことはあまりないかも

特定のthemeが適用されたブログでのみ処理をするサンプル

for my $blog ( @blogs ) {
    if ( $blog->theme_id eq 'pico' ) {
        # do something
    }
}

詳しくはソース読んでね

冒険はまだまだ続く

  • テーマを管理画面からインストール
  • ネット経由でテーマをインストール
  • エクスポートのgit, svnとの連携
  • ・・・という夢を見ています

ご清聴ありがとうございました