MT DDC Tokyo（テーマ編）：テーマを使った手間いらずなサイト制作

MT DDC Tokyo テーマ編
2010.07.31

テーマを使って手間いらずなサイト制作

自己紹介

・荒木勇次郎（@yujiro）
・ブログ「小粋空間」の管理人
・ Movable Typeの著書多数

2/141

広告
Movable Type 5
プロフェッショナルガイド

荒木勇次郎著
B5版・512ページ
毎日コミュニケーションズ
¥4,179

好評発売中！

3/141

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

荒木勇次郎/高山一登/菱川由理著
B5変形版・404ページ
翔泳社
¥2,940

好評発売中！

4/141

アジェンダ

・テーマの概要
・テーマのカスタマイズ
・スタイルの切り替え
・管理画面の切り替え
・テーマフレームワークの拡張
・拡張フレームワークを利用した実演

5/141

テーマの概要

6/141

テーマでできること
テンプレート／カテゴリ／カスタムフィールドなど

「テーマ」としてエクスポート

Movable Type
theme

export

7/141

テーマでできること

エクスポートしたテーマを別のMTにインポート

Movable Type
theme

import

8/141

こんなことができる

テーマはオブジェクト別に作成可能

例：テンプレートセットだけのテーマ／カスタム
フィールドだけのテーマ、など

9/141


テーマ切り替え前のデータは残ります（テンプレー
トセットは除く）。

例：テンプレートセットだけのテーマから、カスタム
フィールドだけのテーマに切り替えた場合

10/141


同じデータは上書きされません

例：同一名のカテゴリをインポートする場合など

11/141


MTOSでも利用可能
（カスタムフィールドは×）

12/141

注意事項

テンプレートセットのテーマを何回も切り替える
と、バックアップテンプレートに大量のテンプレ
ートが保存されます。

13/141

注意事項

14/141

テーマのカスタマイズ

15/141

カスタマイズとは

エクスポートしたテーマファイルなどを直接編集
すること。

エクスポートしたデータを利用せず、テーマを一
から手作りすることも可能。

16/141

カスタマイズの例

•各エレメントの追加・変更・削除
テンプレート／カテゴリ／カスタムフィールド／ウェブページなど
• 管理画面の追加
• スタイル機能の追加
• テーマ用画像の追加など

17/141

テーマパッケージの構成
<MT_DIR>

テーマ名/
テーマ名
blog_static/

ファイルパス/
ファイルパス
外部ファイル

・・・
templates/
テンプレートファイル（.mtml）
テンプレートファイル（）

・・・
・・・
・・・
・・・
l10n_ja.yaml
theme.yaml
thumb.png
thumb-medium.png
thumb-small.png 18/141

<MT_DIR>

テーマ名/
テーマ名
blog_static/

ファイルパス/
ファイルパス
外部ファイル

・・・
templates/

・・・
・・・
・・・
・・・
l10n_ja.yaml
theme.yaml テーマの定義ファイル
thumb.png
thumb-medium.png

<MT_DIR>

テーマ名/
テーマ名
blog_static/

ファイルパス/
ファイルパス
外部ファイル
テンプレートセットのファイル

・・・
templates/

・・・
・・・
・・・
・・・
l10n_ja.yaml
theme.yaml
thumb.png
thumb-medium.png

<MT_DIR>

テーマ名/
テーマ名外部ファイル（画像など）
blog_static/

ファイルパス/
ファイルパス
外部ファイル

・・・
templates/

・・・
・・・
・・・
・・・
l10n_ja.yaml
theme.yaml
thumb.png
thumb-medium.png

<MT_DIR>

テーマ名/
テーマ名
blog_static/

ファイルパス/
ファイルパス
外部ファイル

・・・
templates/

・・・
・・・
・・・
・・・
l10n_ja.yaml ローカライズ用ファイル
theme.yaml
thumb.png
thumb-medium.png

<MT_DIR>

テーマ名/
テーマ名
blog_static/

ファイルパス/
ファイルパス
外部ファイル

・・・
templates/

・・・
・・・
・・・
・・・
l10n_ja.yaml
theme.yaml
thumb.png
thumb-medium.png テーマ用画像

theme.yaml

• テーマパッケージの構造を定義
• YAML（ヤムル）形式
＝ハッシュまたは配列のデータ定義

プログラマーのための YAML 入門 (初級編初級編)
初級編
http://jp.rubyist.net/magazine/?0009-YAML

24/141

のサンプル
theme.yamlのサンプル
theme.yaml
label: Classic Blog
id: classic_blog
author_name: Six Apart, Ltd.
author_link: http://www.sixapart.com/
version: 1.0
class: blog
protected: 1 elements:
elements:
template_set:
component: core
importer: template_set
template_set:
name: template set
data:
label: Classic Blog
component: core
base_path: templates
require: 1
templates:
archive:
category_entry_listing:
label: Category Entry Listing
mappings:
name: template set
category:
archive_type: Category
monthly_entry_listing:
label: Monthly Entry Listing
mappings:
monthly:
archive_type: Monthly
index:
archive_index:
label: Archive Index
outfile: archives.html
rebuild_me: 1
feed_recent:
label: 'Feed - Recent Entries'
outfile: atom.xml
rebuild_me: 1
javascript:
label: JavaScript
outfile: mt.js
rebuild_me: 1
main_index:
label: Main Index
outfile: index.html
rebuild_me: 1
rsd:
label: RSD
outfile: rsd.xml
rebuild_me: 1
styles:
label: Stylesheet
outfile: styles.css
rebuild_me: 1

25/141

YAMLのフォーマット
ハッシュの定義

foo: aaa

キー値

スペース
26/141

ハッシュの入れ子

foo:
bar: aaa

値
キー

27/141


配列の定義

- aaa
- bbb 値
- ccc

スペース
28/141


ハッシュと配列の組み合わせ

foo:
- aaa
- bbb
- ccc

29/141

の注意事項
theme.yamlの注意事項

インデントは正しく

30/141

の注意事項
elements:
plugin_default_pages:
component: ~
data:
post_2:

elements:
component: ~
data:
post_2:

31/141

の注意事項

UTF-8で書きましょう。
UTF-8以外の文字エンコーディング
で日本語を入れると読み込みエラー
になる場合があります。

32/141

ここからの連動書籍

Movable Type 5
プロフェッショナルガイド

2章：62ページ～

33/141

theme.yamlでの定義項目

・基本情報の定義
・elementsの定義

34/141

基本情報の定義
プロフェッショナルガイド Chapter3 63ページ

label: Classic Blog
id: classic_blog
version: 1.0
class: blog
protected: 1
description: <__trans phrase="Typical and authentic blogging design comes
with plenty of styles and the selection of 2 column / 3 column layout.
Best for all the bloggers.">
thumbnail_file: thumb.png
thumbnail_file_medium: thumb-medium.png
thumbnail_file_small: thumb-small.png
・・・後略・・・
35/141


label: Classic Blog
id: classic_blog
version: 1.0
class: blog
protected: 1
・・・後略・・・
36/141


label: Classic Blog
id: classic_blog
version: 1.0
class: blog
protected: 1
・・・後略・・・
37/141


label: Classic Blog
id: classic_blog
version: 1.0
<__trans phrase="">で
class: blog 辞書ファイルを使用
protected: 1
・・・後略・・・
38/141


label: Classic Blog
id: classic_blog
version: 1.0
class: blog
protected: 1
・・・後略・・・
39/141

elementsの定義

「エレメント」とは・・・
・テンプレートセット
・カテゴリ
・フォルダ
・カスタムフィールド
・外部ファイル
など

40/141

elementsの定義
label: Classic Blog
…中略…
elements:
template_set:
・・・中略・・・
default_categories:
・・・中略・・・
default_folders:
・・・中略・・・
custom_fields:
・・・中略・・・
blog_static_files:
・・・中略・・・
default_pages:
・・・中略・・・
default_prefs:
・・・中略・・・
41/141

elementsの定義
label: Classic Blog
…中略…
elements:
template_set: テンプレートセット
・・・中略・・・
default_categories: カテゴリ
・・・中略・・・
default_folders: フォルダ
・・・中略・・・
custom_fields: カスタムフィールド
・・・中略・・・
blog_static_files: 外部ファイル
・・・中略・・・
default_pages: ウェブページ
・・・中略・・・
default_prefs: ウェブサイト・ブログの設定
・・・中略・・・
42/141

elementsの定義

elements:
エレメント名
エレメント名:
component: core
name: template set
data:
・・・後略・・・

elementsの定義

適用コンポーネント名
／等
core／commercial等
elements:
エレメント名
エレメント名: 適用インポーター名
component: core
（固定かつ必須）
name: template set
data: エレメントの名称（任意）
・・・後略・・・

エレメントデータの定義開始

template_setの定義

element:
template_set:
component: core
name: template set
data:
label: Classic Blog
require: 1
templates:
・・・後略・・・


element:
template_set: インポーター名
component: core
name: template set
data: テンプレート
label: Classic Blog セット名
require: 1
templates: テンプレートファイル
・・・後略・・・のパス
インポート必須の指示

次スライドテンプレートの定義開始

templates:
index:
・・・中略・・・
archive:
・・・中略・・・
individual:
・・・中略・・・
page:
・・・中略・・・
module:
・・・中略・・・
system:
・・・中略・・・
widget:
・・・中略・・・
widgetset:
・・・中略・・・

templates:
index: インデックステンプレート
・・・中略・・・
archive: アーカイブテンプレート
・・・中略・・・
individual: ブログ記事テンプレート
・・・中略・・・
page: ウェブページテンプレート
・・・中略・・・
module: テンプレートモジュール
・・・中略・・・
system: システムテンプレート
・・・中略・・・
widget: ウィジェットテンプレート
・・・中略・・・
widgetset: ウィジェットセット
・・・中略・・・

インデックステンプレートの定義
オプション画面で選択したテンプレートをYAML形式で出力
index:
archive_index:
rebuild_me: 1
feed_recent:
outfile: atom.xml
rebuild_me: 1
javascript:
label: JavaScript
outfile: mt.js
rebuild_me: 1
main_index:
label: Main Index
outfile: index.html
rebuild_me: 1
rsd:
label: RSD
outfile: rsd.xml
rebuild_me: 1
styles:
label: Stylesheet
outfile: styles.css
rebuild_me: 1

インデックステンプレートの定義

index:
archive_index:
rebuild_me: 1
feed_recent:
outfile: atom.xml
rebuild_me: 1
javascript:
label: JavaScript
outfile: mt.js
rebuild_me: 1
main_index:
label: Main Index
outfile: index.html
rebuild_me: 1
rsd:
label: RSD
outfile: rsd.xml
rebuild_me: 1
styles:
label: Stylesheet
outfile: styles.css
rebuild_me: 1
テーマ名/templates/main_index.mtml

RSSフィード用テンプレートの追加

templates:
index:
・・・中略・・・
rss:
label: RSS
outfile: rss.xml
rebuild_me: 1

テーマ名/templates/rss.mtml

RSSフィード用インデックステンプレート
ファイルを配置

アーカイブテンプレートの定義

archive:
category_entry_listing:
label: Category Entry Listing
mappings:
category:
archive_type: Category
monthly_entry_listing:
label: Monthly Entry Listing
mappings:
monthly:
archive_type: Monthly

テーマ名/templates/
monthly_archive_listing.mtml

テンプレートモジュールの定義

module:
banner_footer:
label: Banner Footer
banner_header:
label: Banner Header
comment_detail:
label: Comment Detail
comments:
label: Comments
entry_summary:
label: Entry Summary
html_head:
label: HTML Head
sidebar:
label: Sidebar
trackbacks:
label: Trackbacks

テーマ名/templates/html_head.mtml

ウィジェットテンプレートの定義

widget:
about_this_page:
label: About This Page
archive_widgets_group:
label: Archive Widgets Group
author_archive_list:
label: Author Archives
calendar:
label: Calendar
category_archive_list:
label: Category Archives
creative_commons:
label: Creative Commons
current_author_monthly_archive_list:
label: Current Author Monthly Archives
current_category_monthly_archive_list:
label: Current Category Monthly Archives

テーマ名/templates/ category_archive_list.mtml

ウィジェットセットの定義

widgetset:
3column_layout_primary_sidebar:
label: '3-column layout - Primary Sidebar'
order: 1000
widgets:
- Archive Widgets Group
- Page Listing
- Syndication
- OpenID Accepted
- Powered By
3column_layout_secondary_sidebar:
label: '3-column layout - Secondary Sidebar'
order: 1000
widgets:
- Search
- Home Page Widgets Group
- About This Page

・ここで表示順序が決められる
・ここにないものは「利用可能」エリアに

default_categoriesの定義
オプション画面で選択したカテゴリをYAML形式で出力

elememts:
default_categories:
component: core
importer: default_categories
data:
information:
label: お知らせ
description: これはお知らせ用のカテゴリです
children:
customer:
label: お客様向けのお知らせ
staff:
label: スタッフ向けのお知らせ
event:
label: イベント
description: これはイベント用のカテゴリです

default_categoriesの定義

elements:
default_categories:
component: core
data:
information:
label: お知らせ
children:
customer:
staff:
event:
label: イベント

サブカテゴリの定義

elememts:
default_categories:
component: core
data:
information:
label: お知らせ
children:
customer:
staff:
event:
label: イベント

default_foldersの定義

default_categoriesの定義と
異なるのは「default_folders」の部分

elememts:
default_folders:
component: core
importer: default_folders
data:
about:
label: このサイトについて
description: 「このサイトについて」用のフォルダ
このサイトについて」用のフォルダ
children:
sub_about:
label: このサイトについてのサブフォルダ
contact:
label: お問い合わせ
children:
sub_contact:
label: お問い合わせのサブフォルダ

custom_fieldsの定義

elememts:
custom_fields:
component: commercial
importer: custom_fields
data:
cf_1:
obj_type: page
name: 価格
type: text
required: 1
tag: PageProductPrice
cf_2:
obj_type: page
name: サイズ
服のサイズ'
服のサイズ
description: '服のサイズ
type: select
options: SS,S,M,L,LL
required: 0
default: SS
tag: PageProcuctSize

custom_fieldsの定義
elememts:
custom_fields:
data:
cf_1:
obj_type: page
name: 価格
type: text
required: 1
tag: PageProductPrice
cf_2:
obj_type: page
name: サイズ
服のサイズ'
服のサイズ
description: '服のサイズ
type: select
options: SS,S,M,L,LL
required: 0
default: SS
tag: PageProcuctSize

カスタマイズ
「商品名」用カスタムフィールドを追加
custom_fields:
data:
・・・中略・・・
cf_1:
obj_type: page
name: 商品名
type: text
required: 1
tag: PageProductName

既存のカスタムフィールドのベースネー
ムと重複しないように注意

blog_static_filesの定義

テーマで利用するリソースを定義

・画像／CSS／JavaScriptなど
・アイテムとの関連付けはなし
・指定単位はサイトパス直下の
ディレクトリ

オプション画面で選択したディレクトリをYAML形式（配列）で出力

elememts:
blog_static_files:
component: core
importer: blog_static_files
data:
- css
- images
- js

<MT_DIR>
elememts: テーマ名/
テーマ名
blog_static_files:
component: core blog_static/
importer: blog_static_files css/
data: main.css
- css style.css
- images images/
- js
banner.jpg
credit.png
js/
user.js
エクスポート時に、指定したフォルダと jQuery/
jQuery.js
フォルダ配下にあるリソースを jQuery.json.js
blog_staticにコピー
に
サブフォルダもコピー

インポート時はサイトパス直下に
同じ名称で展開
テーマ名
テーマ名/
ウェブサイトパス／ブログパス
blog_static/

css/ css/

main.css main.css
style.css
style.css インポート
images/ images/
banner.jpg banner.jpg
credit.png credit.png

js/ js/
user.js user.js
jQuery/
jQuery/
jQuery.js
jQuery.js
jQuery.json.js
jQuery.json.js

default_pagesの定義
default_pages:
component: core
importer: default_pages
data:
contact:
title: お問い合わせ
お問い合わせはXXXXXまでどうぞ。
text: お問い合わせはまでどうぞ。
tags: @contact
folder: contact

default_prefsの定義

default_prefs:
component: core
importer: default_prefs
data:
name: First Weblog
これはFirst Websiteです。
description: これはです。
site_url: http://user-domain/
site_path: /home/www/foo
file_extension: php

l10n_lexicon

テーマに記述された特定の文字を指定
した言語に変換

・管理画面に表示するテンプレート名
・エラーメッセージなど

ローカライズ
プロフェッショナルガイド Chapter3 82ページ～

label: Classic Blog
id: classic_blog
version: 1.0
class: blog
・・・中略・・・
l10n_lexicon:
ja:
Header: ヘッダー
Footer: フッター
Main Index: メインページ
Page: ウェブページ
Links: リンク
…後略…

ローカライズの例

l10n_lexicon:
ja:
elements:
template_set:
data:
templates:
index:
・・・中略・・・
main_index:
label: Main Index
outfile: index.html
rebuild_me: 1
・・・後略・・・

ローカライズ用ファイル
<MT_DIR>

テーマ名/
テーマ名
blog_static/

ファイルパス/
ファイルパス
外部ファイル

・・・
theme.yamlと独立して配置
templates/

・・・
l10n_ja.yaml
theme.yaml
thumb.png
thumb-medium.png

ローカライズ用ファイル
label: Classic Blog
id: classic_blog
version: 1.0
class: blog
・・・中略・・・
l10n_lexicon:
l10n_ja.yaml
ja: l10n_ja.yaml
・・・後略・・・ Header: ヘッダー
Footer: フッター
Page: ウェブページ
Links: リンク

protected

エクスポート時に・・・

・同名のテーマをエクスポートできない
・同名でテーマを上書きする

protectedなし
theme.yaml
のテーマ'
のテーマ
label: 'First Weblogのテーマ
id: test
version: 1.0
class: blog
protected: 0

エクスポート上書きの確認メッセージを表示

protectedあり
theme.yaml
のテーマ'
のテーマ
id: test
version: 1.0
class: blog
protected: 1

エクスポート出力ファイル名を変更する表示

protectedのその他の機能
クリックするとthemes
システム管理画面→「デザイン」→「テーマ」フォルダから削除

protectedなし

protectedあり

required_components

特定のプラグインがインストールされて
いないとテーマを利用できないようにし
たい。

required_components
theme.yaml
label: Classic Blog
id: classic_blog
version: 1.0
class: blog
required_components:
poweredit: 0.15

テーマは適用できない

optional_components

特定のプラグインがインストールされて
いないと警告を表示したい。

optional_components
theme.yaml
label: Classic Blog
id: classic_blog
version: 1.0
class: blog
optional_components:
poweredit: 0.15

テーマは適用可能
テーマは適用可能

テーマを特定のプラグインと組み合わせたい場合に便利

スタイルの切り替え
プロフェッショナルガイド Chapter3 85ページ～

82/141

スタイル切り替えのサンプル
Picoテーマのスタイル切り替え画面

この「Picoテーマ」をサンプルに説明します

static
<MT_DIR>
pico/ static配下の内容はmt-staticへコピー
templates/

static/
style_library/
pico-darkblue/
screen.css
thumbnail.gif
thumbnail-large.gif
pico-darkgrey/

pico-tan/

pico-white/

pico.html
84/141

スタイル用ファイル構成
<MT_DIR>
pico/
templates/

static/
style_library/
pico-darkblue/
screen.css
thumbnail.gif
thumbnail-large.gif
pico-darkgrey/

pico-tan/

pico-white/
リポジトリ情報ファイル
pico.html
85/141

<MT_DIR>
pico/
templates/

static/
style_library/
pico-darkblue/

各スタイル別のファイル screen.css
thumbnail.gif
（pico.htmlで指定） thumbnail-large.gif
pico-darkgrey/

pico-tan/

pico-white/

pico.html
86/141

<MT_DIR>
pico/
templates/

static/
style_library/
pico-darkblue/ スタイルシート
screen.css
thumbnail.gif
thumbnail-large.gif
pico-darkgrey/

pico-tan/

pico-white/

pico.html
87/141

<MT_DIR>
pico/
templates/

static/
style_library/
pico-darkblue/
screen.css
thumbnail.gif
thumbnail-large.gif
pico-darkgrey/
スタイル画面
pico-tan/ 用のサムネイル

pico-white/

pico.html
88/141

theme.yamlの定義

ベースとなるスタイルシート（base.css）のパス ※任意
theme.yaml
label: Classic Blog
中略…
中略
…中略
elements:
template_set: リポジトリ情報ファイルのパス
中略…
中略
…中略
data:
label: Pico
require: 1
base_css: style_library/base.css
stylecatcher_libraries:
pico:
url: '{{support}}theme_static/pico/style_library/pico.html'
label: Pico Styles
description_label: A collection of styles compatible with Pico themes.
order: 1

89/141

theme.yamlの定義
url: '{{support}}theme_static/pico/style_library/pico.html'

サポートディレクトリを示す
（<$mt:SupportDirectorURL$>タグと同義）

mt-static/
スタイル用リソース
support/
（style_library配下）は
theme_static/ mt-staticにコピーされる
pico/

style_library/

pico.html
もある
{{static}}もある
（<$mt:StaticWebPath$>タグと同義）
タグと同義）
90/141

pico.htmlの定義
pico.html
<!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="en">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Pico Themes</title>
<link rel="theme" type="text/x-theme" href="pico-white/screen.css" />
<link rel="theme" type="text/x-theme" href="pico-tan/screen.css" />
<link rel="theme" type="text/x-theme" href="pico-darkgrey/screen.css" />
<link rel="theme" type="text/x-theme" href="pico-darkblue/screen.css" />
</head>
<body>
<p>This is the Pico Theme set.</p>
</body>
</html>

追加したスタイル分のディレ
クトリとスタイルシート名を記
述するのみ
91/141

screen.cssの定義
screen.css
/*

name: Pico (White)
designer: Jim Ramsey
designer_url: http://www.jimramsey.net/
layouts: layout-w-b

*/

/* White */

body {
background: #fff;
color: #333;
}
・・・後略・・・

スタイルシートの先頭にコメ
ント形式で記述すること
92/141

カラムレイアウト定義の拡張

screen.css
/*

name: Koikikukan
designer: Yujiro Araki
designer_url:
http://www.koikikukan.com/
layouts: layout-three-column, layout-
three-column-right, layout-three-
column-liquid, layout-two-column-right,
layout-two-column-liquid-right, layout-
two-column-left, layout-two-column-
liquid-left, layout-one-column, layout-
one-column-liquid

*/

テンプレートに工夫が必要で
すがここでは割愛
93/141

管理画面の切り替え

94/141

alt-tmpl
<MT_DIR>
※パスはtmplディレクトリを再現すること
テーマ名/
テーマ名 ex. alt-tmpl/include/header.mtml
alt-tmpl/

hoge.mtml 管理画面を配置
static/
css/
js/
templates/
l10n_ja.yaml
・・・

theme.yaml
thumb.png
thumb-medium.png

static
<MT_DIR>

テーマ名/
テーマ名
alt-tmpl/

hoge.mtml
static/ 管理画面用の
css/ リソースを配置
js/ （コピー先はス
ライド86参照）
templates/
l10n_ja.yaml
・・・

theme.yaml
thumb.png
thumb-medium.png

テーマフレームワークの拡張

97/141

できること

・任意のオブジェクトのエクスポート
・任意のオブジェクトのインポート

ウェブサイト・ブログ上の各データを
テーマとして再利用可能

98/141

サンプル

ウェブページ用のエクスポータとインポータを例
に解説します。

プラグイン名：PageExporter

99/141

エクスポータとインポータ

Movable Type Movable Type

exporter theme.yaml importer

export import

諸々の事情で両方ともプラグインで提供

プラグインディレクトリの構成例
<MT_DIR>
プラグインの定義
plugins/
PageExporter/

config.yaml
プラグインの実装
lib/
プラグイン
PageExporter/
ディレクトリ
tmpl/ theme.pm
export_page.tmpl

エクスポート画面のフォーマット
101/141

config.yaml
エレメント名
（エクスポート画面のチェックボックスに対応）
l10n_lexicon:
ja:
Pages: ウェブページ
theme_element_handlers:
plugin_default_pages: チェックボックスに対応して
label: Pages
importer:
エクスポート画面に表示する内容
import: $PageExporter::PageExporter::Theme::import_pages
info: $PageExporter::PageExporter::Theme::info_pages
exporter:
params: plugin_default_pages_export_ids
condition: $PageExporter::PageExporter::Theme::condition
template: $PageExporter::PageExporter::Theme::template
export: $PageExporter::PageExporter::Theme::export
エクスポータの定義
インポータの定義
102/141

exporterの定義
component:インポータのコンポーネントIDを指定
params：オプション設定画面で使用するパラメータ名
：
config.yaml
condition：エクスポートオプション表示判定
：
id: PageExporter
name: PageExporter
template：エクスポート用テンプレートファイルのパラメー
：
version: 0.01 タ設定＆テンプレートファイルのロード
l10n_lexicon:
ja:
export：エクスポート実行
：
label: Pages
importer:
exporter:

103/141

condition

引数：ブログオブジェクト
theme.pm
sub condition {
my ( $blog ) = @_;
my $page = MT->model('page')->load({ blog_id => $blog->id },
{ limit => 1 });
return defined $page ? 1 : 0;
}
返却値：0/1

エクスポート可能なデータ（ウェブページ）が1件以上あるか判定
→あればオプションのチェックボックスを表示

104/141

こんな風に表示されます

105/141

も
config.yamlもUTF-8で
config.yaml
・・・前略・・・
l10n_lexicon:
ja:
label: Pages
・・・後略・・・

save Shift_JIS save UTF-8

106/141

template
theme.pm 引数：アプリケーションオブジェクト、ブログオブジ
sub template { ェクト、オプション画面での保存データ（あれば）
my $app = shift;
my ( $blog, $saved ) = @_; 一覧に表示したいデータを
my @pages = MT->model('page')->load({
パラメータに設定
blog_id => $blog->id,
});
return unless scalar @pages;
my @list;
my %checked_ids;
if ( $saved ) {
%checked_ids = map { $_ => 1 } @{ $saved->{plugin_default_pages_export_ids} };
}
for my $page ( @pages ) {
push @list, {
page_title => $page->title,
page_id => $page->id,
checked => $saved ? $checked_ids{ $page->id } : 1,
};
}
my %param = ( pages => ¥@list );

my $plugin = MT->component('PageExporter');
return $plugin->load_tmpl('export_page.tmpl', ¥%param);
}

返却値：テンプレートファイル（次スライド）のロード結果
107/141

export_page.tmpl
export_page.tmpl
<mtapp:listing id="pages" loop="pages" hide_pager="1" show_actions="0" type="pages">
<mt:if __first__>
<thead>
<tr>
<th class="cb"><input type="checkbox" name="id-head" value="all"
class="select" /></th>
<th class="field-name primary-col"><__trans phrase="Name"></th>
繰り返し処理したいオブジェクト（ウェブページ）を
</tr>
</thead>
<tbody><mtapp:listing>タグ※に指定するだけ。
</mt:if>
※プロフェッショナルガイド142ページ参照
<tr class="<mt:if name="__odd__">odd<mt:else>even</mt:if>">
<td class="cb">
<input type="checkbox" name="plugin_default_pages_export_ids"
class="select" value="<mt:var name="page_id">" <mt:if checked>checked="checked"
</mt:if>/>
</td>
<td class="field-name"><mt:var name="page_title" escape="html"></td>
</tr>
<mt:if __last__>
</tbody>
</mt:if>
</mtapp:listing>
<script type="text/javascript">
jQuery.mtCheckbox();
</script>
108/141

オプション画面
これが「export_page.tmpl」に対応します
「」

109/141

export
引数：templateと同じ
sub export { チェックしたデータの
my ( $app, $blog, $settings ) = @_;
my @pages; 一覧を取得
if ( defined $settings ) {
my @ids = $settings->{plugin_default_pages_export_ids};
@pages = MT->model('page')->load({ id => ¥@ids });
} else {
@pages = MT->model('page')->load({ blog_id => $blog->id });
}
return unless scalar @pages;
my $data = {};
for my $page ( @pages ) { エクスポートしたい
my $cats = $page->categories;
my $folder;
データを
for my $cat (@$cats) { $folder = $cat->basename; } パラメータに設定
my $hash = {
title => $page->title,
text => $page->text,
text_more => $page->text_more,
excerpt => $page->excerpt,
keywords => $page->keywords,
basename => $page->basename,
tags => join(',', $page->get_tags),
folder => $folder,
};
$data->{ $page->basename } = $hash;
}
return %$data ? $data : undef;
}
返却値：ハッシュのリファレンス 110/141

エクスポートされたデータ
theme.yaml post:
--- basename: post
author_link: ''
class: blog excerpt: ''
description: ''
elements:
folder: theme
plugin_default_pages: keywords: ''
component: ~
data: tags: バージョン管理
post:
basename: post text: “<div class=¥”section¥“>¥n <h2>テテ
excerpt: ''
folder: theme
ーマのバージョン管理</h2>¥n¥n <p>テーマパッケージ
ーマのバージョン管理テーマ
keywords: '' とインポータには、各々二つのバージョン管理設定がありま
tags: バージョン管理
す。・・・中略・・・
す。・・・中略・・・
テーマのバージョン管理</h2>¥n¥n <p>テーマパッケージとインポータには、各々二つのバージョン管理設定が
テーマのバージョン管理
text: "<div class=¥"section¥">¥n <h2>テーマのバージョン管理テーマ
あります。</p>¥n¥n <ul>¥n
あります。テーマパッケージ¥n
<li>テーマパッケージ <ul>¥n <li>schema_version</li>¥n <li>min_importer_version</li>¥n
</ul>¥n </li>¥n インポータ¥n
インポータ
<li>インポータ <ul>¥n¥n text_more: ''
<li>min_schema_version</li>¥n <li>max_schema_version</li>¥n
</ul>¥n title: テーマのバージョン管理
</li>¥n </ul>¥n ¥n¥n<div class=¥"section¥">¥n <h3>min_schema_version <= schema_version <=
テーマパッケージのschema_versionが、インポータの min_schema_version 以上、かつ max_schema_version 以下の場合
max_schema_version</h3>¥n¥n <p>テーマパッケージのが、インポータ
は、正常に処理が行われます。</p>¥n</div>¥n¥n¥n<div
は、正常に処理が行われます。
ひとつの問題は、プラグインがバージョンアップして、インポータが古いテーマを
class=¥"section¥">¥n <h3>schema_version < min_schema_version</h3>¥n <p>ひとつの問題は、プラグインがバージョンアップして、インポータが古いテーマを
適用することが出来なくなった場合です。</p>¥n <p>インポータの
適用することが出来なくなった場合です。インポータのmin_schema_versionよりも、テーマパッケージの
インポータのよりも、テーマパッケージのschema_versionの方が低い場合、
の方が低い場合、Movable Typeはテー
の方が低い場合、はテー
マエレメントが必須であれば処理を中止してユーザーにエラーを通知します。必須では無いときは次のテーマエレメントの処理に移りテーマの適用を続行します。エレメントの処理に移りテーマの適用を続行します。</p>¥n¥n<p>ただし、ただし、
プラグイン作者はテーマのschema_versionを確認して適切な代替値を入力するなど、出来得る限り下位互換性を確保することが推奨されます。
プラグイン作者はテーマのを確認して適切な代替値を入力するなど、出来得る限り下位互換性を確保することが推奨されます。</p>¥n¥n</div>¥n¥n<div class=¥"section¥">¥n <h3>max_schema_version < schema_version</h3>¥n¥n <p>イ
ンポータのmax_schema_versionよりも、テーマパッケージの
ンポータのよりも、テーマパッケージのschema_versionが大きい場合も考えられます。最新のプラグインでエクスポートされたテーマを、古いバージョンのプラ
が大きい場合も考えられます。最新のプラグインでエクスポートされたテーマを、古いバージョンのプラ
グインでインポートしようとした場合が考えられます。</p>¥n ¥n <p>この場合は、テーマ作者がテーマパッケージで指定した min_importer_versionを利用します。
グインでインポートしようとした場合が考えられます。この場合は、テーマ作者がテーマを利用します。Movable
を利用します。
は、テーマを利用するためには、プラグインをアップグレードする必要があることをユーザーに伝え、テーマの適用を続行または中止します。</p>¥n¥n</div>¥n¥n"
text_more: ''
title: テーマのバージョン管理
importer: plugin_default_pages
id: theme_from_page
のテーマ'
のテーマ
のテーマ'
のテーマ
name: 'First Weblogのテーマ
version: 1.0

111/141

importerの定義
info：インポート情報
config.yaml validator：インポートの検証
id: PageExporter import：インポート実行
name: PageExporter
version: 0.01
label: Pages
importer:
exporter:

112/141

info
引数：エレメントオブジェクト、テーマオブジェクト、ブログオブジェクト
sub info {
my ( $element, $theme, $blog ) = @_;
my $data = $element->{data};

return sub {
MT->translate( 'Pages' ) .'('. MT->translate( '[_1] pages', scalar
keys %{$element->{data}} ) .')';
};
}
返却値：テーマ一覧画面に表示する内容

インポート情報を表示

113/141

import
sub import_pages { 引数：エレメントオブジェクト、テーマオブジェクト、適用対象のオブジェクト
my ( $element, $theme, $obj_to_apply ) = @_;
my $entries = $element->{data};
_add_entries( $theme, $obj_to_apply, $entries, 'page' )
or die "Failed to create theme default Pages";
return 1;
}
返却値：成功時は「1」、失敗時はエラー
sub _add_entries { $obj->save or die $obj->errstr;
my ( $theme, $blog, $entries, $class ) = @_; my $path_str;
my $app = MT->instance; if ( $class eq 'page' && ($path_str = $entry->{folder}) ) {
my @text_fields = qw( my @paths = split( '/', $path_str );
title text text_more my ($current, $parent);
excerpt keywords PATH: while ( my $path = shift @paths ) {
); my $terms = {
for my $basename ( keys %$entries ) { blog_id => $blog->id,
my $entry = $entries->{$basename}; basename => $path,
next if MT->model($class)->count({ };
basename => $basename, $terms->{parent} = $parent->id if $parent;
blog_id => $blog->id, $current = MT->model('folder')->load($terms);
}); if ( !$current ) {
next if MT->model($class)->count({ unshift @paths, $path;
title => $entry->{title}, while ( my $new = shift @paths ) {
blog_id => $blog->id, my $f = MT->model('folder')->new();
}); $f->set_values({
my $obj = MT->model($class)->new(); blog_id => $blog->id,
my $current_lang = MT->current_language; author_id => $app->user->id,
MT->set_language($blog->language); label => $new,
$obj->set_values({ basename => $new,
map { $_ => $theme- });
>translate_templatized( $entry->{$_} ) } $f->parent( $parent->id ) if $parent;
grep { exists $entry->{$_} } $f->save;
@text_fields $parent = $f;
}); }
MT->set_language( $current_lang ); last PATH;
$obj->basename( $basename ); }
$obj->blog_id( $blog->id ); $parent = $current;
$obj->author_id( $app->user->id ); }
$obj->status( my $place = MT->model('placement')->new;
exists $entry->{status} ? $entry- $place->set_values({
>{status} : MT::Entry::RELEASE() blog_id => $blog->id,
); entry_id => $obj->id,
if ( my $tags = $entry->{tags} ) { category_id => $parent->id,
my @tags = ref $tags ? @$tags : is_primary => 1,
split( /¥s*¥,¥s*/, $tags ); });
$obj->set_tags( @tags ); $place->save;
} }
}
1;
}
114/141

プラグイン作りました

PageExporter

SettingExporter

AssetExporter

EntryExporter

その他：AuthorImporter
：
115/141

プラグイン配布URL
PageExporter
http://www.koikikukan.com/archives/download/plugin/PageExporter/0.01/PageExporter_0_01.zip

EntryExporter
http://www.koikikukan.com/archives/download/plugin/EntryExporter/0.01/EntryExporter_0_01.zip

AssetExporter
http://www.koikikukan.com/archives/download/plugin/AssetExporter/0.01/AssetExporter_0_01.zip

SettingExporter
http://www.koikikukan.com/archives/download/plugin/SettingExporter/0.01/SettingExporter_0_01.zip

AuthorImporter
http://www.koikikukan.com/archives/download/plugin/AuthorImporter/0.01/AuthorImporter_0_01.zip

116/141

EntryExporter
オプション選択画面

117/141

EntryExporter
post-1:
theme.yaml allow_comments: ~
id: theme_from_entry
allow_pings: ~
のテーマ'
のテーマ
label: 'First Weblogのテーマ authored_on: 20080317174343
のテーマ'
のテーマ
name: 'First Weblogのテーマ category: event
version: 1.0
author_link: '' convert_breaks: ~
class: blog created_on: 20100714231311
description: ''
elements: excerpt: ~
default_entries: keywords: ~
importer: default_entries
component: ~ modified_on: 20100714231311
data: status: 2
post-1:
allow_comments: ~ お知らせ,アフィリエイトスタイルシート,タグ
お知らせアフィリエイト,スタイルシートタグ,IE,JavaScript,mixi,PHP,RSS,XHTML
tags: Ajax,お知らせアフィリエイトスタイルシートタグ
allow_pings: ~ ×××のホームページをリニューアルしました。
×××のホームページをリニューアルしました。¥n¥n前回のホームページを作成したのが、
text: "×××のホームページをリニューアルしました。前回のホームページを作成したのが、2001
前回のホームページを作成したのが、
authored_on: 20080317174343
category: event 月なので約約7年ぶりのリニューアルとなりました。今回のリニューアルの目的はブログにすることと、トップペー
年3月なので約約年ぶりのリニューアルとなりました。今回のリニューアルの目的はブログにすることと、トップペー
月なので約約
convert_breaks: ~ ジや他のページからすべてのページにたどりつけるようなインターフェースにすることだったので、この目的は達成さ
created_on: 20100714231311
excerpt: ~ れたと思います。¥n¥nリニューアルはまだ全体の割ぐらで、自社サイトも統一したインタフェースへ移行予定です。
れたと思います。リニューアルはまだ全体の8割ぐらで、自社サイトも統一したインタフェースへ移行予定です。
リニューアルはまだ全体の
keywords: ~ "
modified_on: 20100714231311
status: 2 text_more: ~
お知らせ,アフィリエイトスタイルシート,タグ title: ホームページリニューアル
お知らせアフィリエイト,スタイルシートタグ,IE,JavaScript,mixi,PHP,RSS,XHTML
tags: Ajax,お知らせアフィリエイトスタイルシートタグ
×××のホームページをリニューアルしました。
×××のホームページをリニューアルしました。¥n¥n前回のホームページを作成したのが、
text: "×××のホームページをリニューアルしました。前回のホームページを作成したのが、2001年3月なので約約年ぶりのリニューアルとなりました。今回のリニューアルの目的はブログにす
前回のホームページを作成したのが、月なので約約7年ぶりのリニューアルとなりました。今回のリニューアルの目的はブログにす
年月なので約約
ることと、トップページや他のページからすべてのページにたどりつけるようなインターフェースにすることだったので、この目的は達成されたと思います。
ることと、トップページや他のページからすべてのページにたどりつけるようなインターフェースにすることだったので、この目的は達成されたと思います。¥n¥nリニューアルはまだ全体の割ぐらで、自社サイトも統一し
たと思います。リニューアルはまだ全体の8割ぐらで、自社サイトも統一し
リニューアルはまだ全体の
たインタフェースへ移行予定です。"
たインタフェースへ移行予定です。
text_more: ~
title: ホームページリニューアル
post-2:
allow_comments: ~
allow_pings: ~
authored_on: 20080725174540
category: information
convert_breaks: ~
created_on: 20100714231312
excerpt: ~
keywords: ~
modified_on: 20100714231312
status: 2
お知らせ,セミナー
セミナー,CSS,MovableType,SEO,Web2.0,Webデザイン
tags: お知らせセミナーデザイン,XHTML
デザイン
本セミナーでは、ソフトウェアの品質向上という課題に取り組み、成功されたお客様の事例をご紹介致します。さらに要件定義から運用まで、ソフトウェア開発におけるライフサイクルのすべてを支
text: "本セミナーでは、ソフトウェアの品質向上という課題に取り組み、成功されたお客様の事例をご紹介致します。さらに要件定義から運用まで、ソフトウェア開発におけるライフサイクルのすべてを支
本セミナーでは、ソフトウェアの品質向上という課題に取り組み、成功されたお客様の事例をご紹介致します。さらに要件定義から運用まで、
また、実際にご体感いただく展示コーナーも併設しております。¥n是非この機会にご参加いただきますようお願い致します。名称：ソリューションセミナー¥n開催日程：
名称：ソリューションセミナー開催日程：2007
援するサービスをご紹介致します。また、実際にご体感いただく展示コーナーも併設しております。是非この機会にご参加いただきますようお願い致します。 ¥n¥n名称：ソリューションセミナー開催日程：
（受付開始：13時）開催場所：コンファレンスセンター¥n主催：×××株式会社
時）¥n開催場所：コンファレンスセンター主催：×××株式会社"
年8月1日（火） 13:30～17:30 （受付開始：時）開催場所：コンファレンスセンター主催：×××株式会社
月日（火）～
text_more: ~
title: ソリューションセミナー

118/141

AssetExporter

119/141

AssetExporter
theme.yaml 10:
id: theme_from_entry class: image
のテーマ'
のテーマ
のテーマ'
のテーマ
name: 'First Weblogのテーマ created_by: 1
version: 1.0
author_link: ''
class: blog
created_on: 20100728175459
description: ''
elements:
description: ~
default_assets:
component: ~ file_ext: gif
data:
assets:
10:
file_name: logo_movabletype5.gif
class: image
created_by: 1
file_path: /mt/assets/logo_movabletype5.gif
created_on: 20100728175459
description: ~ label: logo_movabletype5.gif
file_ext: gif
file_name: logo_movabletype5.gif
file_path: /mt/assets/logo_movabletype5.gif
mime_type: image/gif
label: logo_movabletype5.gif
modified_by: ~
modified_by: ~
modified_on: 20100728175459 modified_on: 20100728175459
parent: ~
url: http://user-domein/assets/logo_movabletype5.gif parent: ~
11:
class: image
created_by: 1
url: http://user-domein/assets/logo_movablet
created_on: 20100728175516
description: ~ ype5.gif
file_ext: gif
file_name: logo_mt.gif
file_path: /mt/assets/logo_mt.gif
label: logo_mt.gif
modified_by: ~
modified_on: 20100728175516
parent: ~
url: http://user-domein/assets/logo_mt.gif

※MT上で作成したサムネイルはインポート先で再生成されるので対象外
120/141

SettingExporter

121/141

SettingExporter
theme.yaml site_path: /www/user/public_html/3
id: theme_from_asset
site_url: http://user-domain/1/
のテーマ'
のテーマ
のテーマ'
のテーマ
name: 'First Weblogのテーマ archive_url: http://user-domain/1/archives/
version: 1.0
author_link: '' archive_path: /www/user/public_html/3/archives
class: blog
description: ''
elements:
file_extension: html
plugin_default_settings:
importer: plugin_default_settings archive_type_preferred: Individual
component: ~
data: use_revision: 1
site_path: /www/user/public_html/3
site_url: http://user-domain/1/
archive_url: http://user-domain/1/archives/
max_revisions_entry: 20
archive_path: /www/user/public_html/3/archives
file_extension: html
max_revisions_template: 20
archive_type_preferred: Individual
use_revision: 1
max_revisions_entry: 20
max_revisions_template: 20
allow_comment_html: 1
allow_commenter_regist: 1
allow_comments_default: 1
allow_pings: 1
allow_pings_default: 1
allow_reg_comments: 1
allow_unreg_comments: 1
autodiscover_links: ~
autolink_urls: 1
basename_limit: 100
captcha_provider: ~
cc_license: 'by http://creativecommons.org/licenses/by/2.1/jp/ http://i.creativecommons.org/l/by/2.1/jp/88x31.png'
convert_paras: richtext
convert_paras_comments: 1
days_on_index: 10
これはFirst Weblogです。
これは
description: 'これはです。'
です。
email_new_comments: 1
email_new_pings: 1
follow_auth_links: 1
internal_autodiscovery: 0
junk_folder_expiry: 14
junk_score_threshold: 0
language: ja
moderate_pings: 1
moderate_unreg_comments: 2
mt_update_key: ~
name: 'First Weblog'
nofollow_urls: 1
ping_google: 0
ping_others: ~

122/141

AuthorImporter（適当）

theme.yaml taro:
id: theme_from_author
name: 太郎
のテーマ
label: authorのテーマ
のテーマ
name: authorのテーマ nickname: 太郎
version: 1.0
author_link: '' password: abcde
class: blog
description: ''
elements:
email: taro@xxx.xxx
default_authors:
component: ~ url: http://user-domain/
importer: default_authors
data: auth_type: MT
taro:
name: 太郎
nickname: 太郎
preferred_language: ja
password: abcde
email: taro@xx.xx
created_by: 1
url: http://user-domain/
auth_type: MT type: 1
created_by: 1
type: 1
hanako:
name: 花子
nickname: 花子
password: abcde
email: hanako@xx.xx
url: http://user-domain/
auth_type: MT
created_by: 1
type: 1

※システム管理画面には登録できますがパスワードの再設定が必要

123/141

拡張フレームワークを利用した実演

124/141

エクスポートするテーマ

125/141

エクスポートするテーマ

126/141

テンプレートとの対応
メインページ＋
テンプレートモジュールを利用

ニュース欄はブログ記事

新機能紹介はウェブページ
画像はすべてアイテムに登録

このあたりはフッター
テンプレートモジュール
127/141

ニュース

ブログ記事を利用

128/141

新機能紹介

ウェブページを利用

129/141

画像

すべて
アイテムに登録

130/141

メインページインデックステンプレート

131/141

テンプレートの構造
common.css
HTMLヘッダー
メインページ
content.css
バナーヘッダー

バナーフッター

右上メニュー

情報ブログ記事

新機能ウェブページ

132/141

全般設定

133/141

プラグイン一覧

134/141

エクスポート

135/141

MT DDC Tokyo（テーマ編）：テーマを使った手間いらずなサイト制作

MT DDC Tokyo（テーマ編）：テーマを使った手間いらずなサイト制作

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (9)

Similar a MT DDC Tokyo（テーマ編）：テーマを使った手間いらずなサイト制作

Similar a MT DDC Tokyo（テーマ編）：テーマを使った手間いらずなサイト制作 (9)

MT DDC Tokyo（テーマ編）：テーマを使った手間いらずなサイト制作