Movable Type 5のテーマ機能の基本や、その活用について解説しています。

1. Movable Type 5の
テーマ機能を活用する
藤本 壱
2010.8.7
第8回Creatorz×第2回広島ＭＴ学会
1

2. 今日のアジェンダ
自己紹介
テーマの適用とエクスポート
Theme.yamlファイルの書き換えによる
機能追加
テーマの活かし方
まとめ
2

3. 本日の連絡事項
録音／写真撮影／動画撮影等はご自由
に
本日のスライドは近日中にslideshare
（http://www.slideshare.net)にて公開
3

4. 自己紹介
4

5. 自己紹介
藤本 壱（ふじもと はじめ）
フリーライター(PC関連、マネー関連)
2004年11月よりMovable Typeを利用
Movable Type関連の書籍を複数執筆
5

6. 自己紹介
群馬県から来ました
6

7. ブログやってます
The Blog of H.Fujimoto
http://www.h-fj.com/blog/
7

8. テーマの適用とエクスポート
8

9. テンプレート入れ替えが面倒だっ
たかつてのMT
Movable Type 3.x
テンプレートは手作業で入れ替え
非常に面倒
Movable Type 4.x
「テンプレートセット」機能が追加
テンプレートセットの組み込みは簡単
テンプレートセット自体はプラグイン
→作成するのにスキルが必要
9

10. テーマ機能の登場
Movable Type 5の新機能
テンプレートセット機能のバージョンアッ
プ的存在
サイトの構造を丸ごとパッケージ化
（テンプレート／カテゴリ／フォルダ／カ
スタムフィールド／ファイル）
管理画面上でテーマのエクスポート（書
き出し）が可能
10

11. テーマの仕組み
テーマ
テンプレート
適用
カテゴリ ウェブサイト
フォルダ ブログ
カスタムフィールド エクスポート
ファイル
11

12. テーマの適用
テーマのファイルをMTの「themes」ディ
レクトリ以下にアップロード
「デザイン」→「テーマ」メニューを選ぶ
使いたいテーマを選んで「適用」ボタンを
クリック
12

13. テーマの適用
「適用」ボタン
13

14. テーマのエクスポート
現在使用中のテンプレート等をテーマに
エクスポート可能
「ツール」→「テーマのエクスポート」メ
ニューを選択
エクスポートする内容を設定
14

15. テーマのエクスポート
15

16. エクスポートの設定
16

17. ファイルのエクスポート
ブログ（ウェブサイト）のパスを基準にファ
イルがあるディレクトリ名を指定
例：ブログのパスにある「img」「js」ディレクトリ
のファイルをエクスポート
ブログのパス
img
js
17

18. ファイルのエクスポート
18

19. theme.yamlファイルの
書き換えによる機能追加
19

20. テーマのファイル構造
theme.yamlファイル
templatesディレクトリ
各種テンプレートファイル
blog_staticディレクトリ
画像等のファイル
設定ファイル（theme.yaml）を書き換えて
機能を追加できる
20

21. YAMLの基本
さまざまなデータ構造を記述できるテキ
ストファイル
XMLに比べて記法がシンプル
Movable TypeではYAMLを多用
テーマの設定（theme.yaml）
プラグインの基本情報（config.yaml）
YAMLの詳細は以下のWebページを参
照
http://jp.rubyist.net/magazine/?0009-YAML
21

22. theme.yamlの例
label: テーマ名
id: テーマのID
・・・
elements:
template_set:
・・・
default_categories:
・・・
custom_fields
・・・
22

23. theme.yamlの基本構造
テーマ全体の設定
elements（テーマの各要素の設定）
エレメント名 内容
template_set テンプレート
default_categories カテゴリ
default_folders フォルダ
custom_fields カスタムフィールド
blog_static_files ファイル
default_pages ウェブページ
23

24. エクスポートではなくtheme.yamlの書き換
えでのみできること
サムネイルの追加
ウェブページの追加
etc.
24

25. サムネイルの追加(1)
テーマにはサムネイルを設定可能
エクスポート直後のテーマにはサムネイルは
ない
25

26. サムネイルの追加(2)
以下の3つのファイルを用意
ファイル サイズ
thumb.png 400×300ピクセル
thumb-medium.png 240×180ピクセル
thumb-small.png 120×90ピクセル
theme.yamlファイルと同じディレクトリに
アップロード
26

27. サムネイルを追加(3)
theme.yamlに以下の3行を追加
label: テーマ名
id: テーマのID
・
・
・
thumbnail_file: thumb.png
thumbnail_file_medium: thumb-medium.png
thumbnail_file_small: thumb-small.png
・
27

28. ウェブページの追加(1)
お決まりのウェブページのひな形をテー
マに入れられる
会社概要
社長挨拶
アクセス
プライバシーポリシー
特定商取引法に関する表示
テーマを適用した後にサイトにあわせて
内容を修正するだけ
28

29. ウェブページの追加(2)
theme.yamlに「default_pages」のエレメ
ントを追加
default_pages:
importer: default_pages
component: core
name: Default Pages
data:
ウェブページのベースネーム:
項目名: 値
項目名: 値
…
ウェブページのベースネーム:
項目名: 値
項目名: 値
… 29

30. ウェブページの追加(3)
項目名 内容
title タイトル
text 本文
text_more 続き
excerpt 概要
folder フォルダ
tags タグ
status 公開状態
30

31. ウェブページの追加事例(1)
以下の内容のウェブページを追加
項目名 内容
ベースネーム corporate
title 会社案内
text 弊社は・・・
○○をモットーに・・・
folder corporate
tags @corporate
31

32. ウェブページの追加事例(2)
default_pages:
importer: default_pages
component: core
name: Default Pages
data:
corporate:
title: 会社案内
text: |
弊社は・・・
○○をモットーに・・・
folder: corporate
tags: @corporate
32

33. テーマの活かし方
33

34. テスト環境から本番環境への移行
テストサイトを作成
テストサイトのテンプレート等をテーマに
エクスポート
本番環境にテーマを適用
コンテンツを投入して公開
34

35. ひな形となるテーマの再利用
テンプレート等のひな形を作成
ひな形をテーマにエクスポート
サイト製作開始時にひな形のテーマを適
用
テンプレート等をカスタマイズして実際の
サイトに合わせる
35

36. テーマの配布・販売
ECサイト用、不動産サイト用など、ある
程度作りこんだサイトを作成
テーマとしてエクスポート
エクスポートしたファイルをインターネット
等を通して配布・販売
事例：@style（http://atstyle.biz/）
MT5用有償テーマを30種類販売中
36

37. プラグインと組み合わせたテーマ
プラグインと組み合わせてより強力な
テーマを作成可能
事例：書籍「Movable Type 5実践テク
ニック」
メールフォームプラグインによるお問い合わ
せフォーム
検索（SearchEntries）プラグインによる検索
フォーム
etc.
37

38. プラグインと組み合わせたテーマの例
http://food.hippos.jp 38

39. HTML／CSS以外への展開
Movable Typeはテキストファイルなら何でも出
力できる
例：XML、CSV、 JavaScript、SVG、etc.
Slidon（シックスアパート澤田氏によるプレゼン
テーション用テーマ）
InDesignの組版用データをMTで出力（ワン
ソースでWebでのカタログと紙ベースのカタロ
グの両方を出力）
アルファサード有限会社の電子出版ソリュー
ション「ePublisher」
39

40. まとめ
40

41. まとめ
テーマの適用とエクスポート
テーマはMovable Type 5の新機能
適用／エクスポートとも管理画面で
theme.yamlファイルの書き換えによる機
能追加
サムネイル
ウェブページ
テーマの活かし方
テーマの活かし方はいろいろある
41

42. Few more things…
42

43. Movable Typeコンテスト2010開催中
テーマ部門の応募はごくわずか
豪華商品（Adobe Creative Suite 5や
iPad等）が手に入るかも？
http://www.mtcontest.jp/
43

44. シックスアパート公式
地方コミュニティ支援プログラム
地方コミュニティ支援プログラムが近日スタート
MTDDC（Movable Type Designers and
Developers Conference）および勉強会に対
するシックスアパートからの公式支援
MTDDC地方版第1弾が福島で開催
広島でもぜひ
詳細は「http://groups.google.com/group/mt-
study-society?hl=ja」にて
44

45. 「Movable Type 5 Webサイト製作ガイド
Volume 1&2」(PDF書籍)販売中
http://www.h-fj.com/blog/mt5bookvol1/
http://www.h-fj.com/blog/mt5bookvol2/
45

46. 本日ご来場の皆様への特典
2,500円 3,000円
2,300円 2,700円
CD-ROMをお持ち帰りいただけます
46

47. テーマの作成については、
Volume 2の中で詳細に
解説しています。
47

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