1

Movable Type 5のテーマ機能を活用する

藤本 壱2010.8.7

第8回Creatorz×第2回広島ＭＴ学会

2

今日のアジェンダ

自己紹介

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

Theme.yamlファイルの書き換えによる

機能追加

テーマの活かし方

まとめ

3

本日の連絡事項

録音／写真撮影／動画撮影等はご自由に

本日のスライドは近日中にslideshare（http://www.slideshare.net)にて公開

4

自己紹介

5

自己紹介

藤本 壱（ふじもと はじめ）

フリーライター(PC関連、マネー関連)2004年11月よりMovable Typeを利用

Movable Type関連の書籍を複数執筆

6

自己紹介

群馬県から来ました

7

ブログやってます

The Blog of H.Fujimotohttp://www.h-fj.com/blog/

8

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

9

テンプレート入れ替えが面倒だったかつてのMT

Movable Type 3.xテンプレートは手作業で入れ替え

非常に面倒

Movable Type 4.x「テンプレートセット」機能が追加

テンプレートセットの組み込みは簡単

テンプレートセット自体はプラグイン→作成するのにスキルが必要

10

テーマ機能の登場

Movable Type 5の新機能

テンプレートセット機能のバージョンアップ的存在

サイトの構造を丸ごとパッケージ化（テンプレート／カテゴリ／フォルダ／カスタムフィールド／ファイル）

管理画面上でテーマのエクスポート（書き出し）が可能

11

テーマの仕組み

テンプレートカテゴリフォルダ

カスタムフィールドファイル

テーマ

ウェブサイトブログ

適用

エクスポート

12

テーマの適用

テーマのファイルをMTの「themes」ディ

レクトリ以下にアップロード

「デザイン」→「テーマ」メニューを選ぶ

使いたいテーマを選んで「適用」ボタンをクリック

13

テーマの適用

「適用」ボタン

14

テーマのエクスポート

現在使用中のテンプレート等をテーマにエクスポート可能

「ツール」→「テーマのエクスポート」メニューを選択

エクスポートする内容を設定

15

テーマのエクスポート

16

エクスポートの設定

17

ファイルのエクスポート

ブログ（ウェブサイト）のパスを基準にファイルがあるディレクトリ名を指定

例：ブログのパスにある「img」「js」ディレクトリ

のファイルをエクスポート

ブログのパス

img

js

18

ファイルのエクスポート

19

theme.yamlファイルの

書き換えによる機能追加

20

テーマのファイル構造

theme.yamlファイル

templatesディレクトリ

blog_staticディレクトリ

各種テンプレートファイル

画像等のファイル

設定ファイル（theme.yaml）を書き換えて機能を追加できる

21

YAMLの基本

さまざまなデータ構造を記述できるテキストファイル

XMLに比べて記法がシンプル

Movable TypeではYAMLを多用テーマの設定（theme.yaml）プラグインの基本情報（config.yaml）

YAMLの詳細は以下のWebページを参照

http://jp.rubyist.net/magazine/?0009-YAML

22

theme.yamlの例

label: テーマ名id: テーマのID・・・elements:

template_set: ・・・

default_categories:・・・

custom_fields・・・

23

theme.yamlの基本構造

テーマ全体の設定

elements（テーマの各要素の設定）

ウェブページdefault_pagesファイルblog_static_filesカスタムフィールドcustom_fieldsフォルダdefault_foldersカテゴリdefault_categoriesテンプレートtemplate_set内容エレメント名

24

エクスポートではなくtheme.yamlの書き換

えでのみできること

サムネイルの追加

ウェブページの追加

etc.

25

サムネイルの追加(1)

テーマにはサムネイルを設定可能

エクスポート直後のテーマにはサムネイルはない

26

サムネイルの追加(2)

以下の3つのファイルを用意

120×90ピクセルthumb-small.png

240×180ピクセルthumb-medium.png

400×300ピクセルthumb.png

サイズファイル

theme.yamlファイルと同じディレクトリに

アップロード

27

サムネイルを追加(3)

theme.yamlに以下の3行を追加

label: テーマ名id: テーマのID・・・thumbnail_file: thumb.pngthumbnail_file_medium: thumb-medium.pngthumbnail_file_small: thumb-small.png・

28

ウェブページの追加(1)

お決まりのウェブページのひな形をテーマに入れられる

会社概要

社長挨拶

アクセス

プライバシーポリシー

特定商取引法に関する表示

テーマを適用した後にサイトにあわせて内容を修正するだけ

29

ウェブページの追加(2)

theme.yamlに「default_pages」のエレメントを追加

default_pages:importer: default_pagescomponent: corename: Default Pagesdata:ウェブページのベースネーム:項目名: 値項目名: 値…

ウェブページのベースネーム:項目名: 値項目名: 値

…

30

ウェブページの追加(3)

公開状態status

概要excerpt続きtext_more

タグtagsフォルダfolder

本文textタイトルtitle

内容項目名

31

ウェブページの追加事例(1)

以下の内容のウェブページを追加

corporateベースネーム

@corporatetagscorporatefolder

弊社は・・・

○○をモットーに・・・

text会社案内title

内容項目名

32

ウェブページの追加事例(2)default_pages:

importer: default_pagescomponent: corename: Default Pagesdata:corporate:title: 会社案内text: |弊社は・・・○○をモットーに・・・

folder: corporatetags: @corporate

33

テーマの活かし方

34

テスト環境から本番環境への移行

テストサイトを作成

テストサイトのテンプレート等をテーマにエクスポート

本番環境にテーマを適用

コンテンツを投入して公開

35

ひな形となるテーマの再利用

テンプレート等のひな形を作成

ひな形をテーマにエクスポート

サイト製作開始時にひな形のテーマを適用

テンプレート等をカスタマイズして実際のサイトに合わせる

36

テーマの配布・販売

ECサイト用、不動産サイト用など、ある

程度作りこんだサイトを作成

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

エクスポートしたファイルをインターネット等を通して配布・販売

事例：@style（http://atstyle.biz/）MT5用有償テーマを30種類販売中

37

プラグインと組み合わせたテーマ

プラグインと組み合わせてより強力なテーマを作成可能

事例：書籍「Movable Type 5実践テクニック」

メールフォームプラグインによるお問い合わせフォーム

検索（SearchEntries）プラグインによる検索フォーム

etc.

38

プラグインと組み合わせたテーマの例

http://food.hippos.jp

39

HTML／CSS以外への展開

Movable Typeはテキストファイルなら何でも出力できる

例：XML、CSV、 JavaScript、SVG、etc.Slidon（シックスアパート澤田氏によるプレゼンテーション用テーマ）

InDesignの組版用データをMTで出力（ワンソースでWebでのカタログと紙ベースのカタログの両方を出力）

アルファサード有限会社の電子出版ソリューション「ePublisher」

40

まとめ

41

まとめ

テーマの適用とエクスポートテーマはMovable Type 5の新機能

適用／エクスポートとも管理画面で

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

サムネイル

ウェブページ

テーマの活かし方テーマの活かし方はいろいろある

42

Few more things…

43

Movable Typeコンテスト2010開催中

テーマ部門の応募はごくわずか

豪華商品（Adobe Creative Suite 5やiPad等）が手に入るかも？

http://www.mtcontest.jp/

44

シックスアパート公式地方コミュニティ支援プログラム地方コミュニティ支援プログラムが近日スタート

MTDDC（Movable Type Designers and Developers Conference）および勉強会に対するシックスアパートからの公式支援

MTDDC地方版第1弾が福島で開催

広島でもぜひ

詳細は「http://groups.google.com/group/mt-study-society?hl=ja」にて

45

「Movable Type 5 Webサイト製作ガイドVolume 1&2」(PDF書籍)販売中

http://www.h-fj.com/blog/mt5bookvol1/http://www.h-fj.com/blog/mt5bookvol2/

46

本日ご来場の皆様への特典

2,500円 3,000円

2,300円 2,700円

CD-ROMをお持ち帰りいただけます

47

テーマの作成については、Volume 2の中で詳細に

解説しています。

48

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