1. 仕事に役立てるテーマ
蒲生トシヒロ
2010年7月31日 MTDDC Tokyo テーマ編

2. 本日のAgenda
1. 自己紹介
2. テーマって？
3. テーマが何に役立つか？
4. 設計前の注意点（機能編）
5. 設計前の注意点（環境編）
6. テーマの設計
7. テーマを作ってみよう
8. テーマのエクスポート
9. テーマのパッケージの作成
10. テーマ適用時に気をつけること
11. テーマを理解するための簡単な練習課題
12. 本日のまとめ
13. シックス・アパートへのお願い
14. 書籍の宣伝、みなさんへのお願い 2

3. 自己紹介
 蒲生トシヒロ（Dakiny）
 岐阜県岐阜市生まれ
 職種：Webプロデューサー、プランナー
 ブランディング、プル型マーケティングが得意！
 15年間広告代理店に勤務、でディレクター、プランナー
を行い、1995年マルチメディア事業部を立ち上げイン
ターネットの世界に入る。1999年独立。2001年より有限
会社ITプロフェッショナルを設立、主にWeb制作を営み
今日に至る。
 自称：Movable Typeの宣教師
MTの洗礼は3.17から。以来Movable Typeの布教活動にな
ることを公私を問わずやってます。
3

4. 僕が関わった書籍
 Movable Type 5実践テ
クニック（共著）
監修：シックス・アパート株式会社
ソフトバンククリエイティブ
2010年3月26日発売
 インターネット&Webの
必須常識100（共著）
ワークスコーポレーション
2009年10月20日発売
 Movable Type プロ
フェッショナル・スタ
イルMT4.1対応（共
著）
毎日コミュニケーションズ
2008年4月8日発売
4

5. ブログ等
 世界中の1%の人々へ
http://www.dakiny.com
 Twitter
http://twitter.com/Dakiny
※DMか@Dakinyでリプライいただけで
ばもれなくフォローします。
 Mixi
http://mixi.jp/show_friend.pl?id=
1474285
 E-mail
gamo@it-pro.co.jp
5

6. テーマって？
 （乱暴な言い方だけど…）ブログやWebを簡
単に始められるスタートアップキット。
（WordPressやDrupalの世界では一般的）
 テーマを使えば最初から任意の業種のWeb
が、画像や配色のカスタマイズ程度で簡単に
スタートできる。
 バックアップやテストサーバーから本サー
バーの移転にも便利。
6

7. そんな便利なテーマが…、
 Movable Type 5.0から
使えるようになった！
万歳！
7

8. でも…
 利用者まだまだ、
少ないよね。
 もっと普及しても
いいはずなのに？
8

9. そんな理由（わけ）で
 今日はテーマが普及してほしいので…
テーマを作った経験から振り返って…
1. どうしたら簡単にテーマが作れるか…
2. テーマを作る上で何に注意したらいいか？
をポイントに、主に設計する人たち向けに
情報をまとめてみました。
今日の話がみなさんのお役に立てば幸いです。
9

10. テーマが何に役立つか？
 バックアップ＆リストアが簡単
 バリエーション展開が容易
 テーマの配布
 その他の用途（例：Slidon等）
10

11. バックアップ＆リストアが簡単
 テーマを作っておけば、phpMyAdminにログ
インしなくてもMovable Typeで作ったWebの
機能の大半を簡単にバックアップ、リストア
できる。
 テーマを作っておけば、テストサーバーから
本サーバーへの移行が簡単。
 テーマを作っておけば、万が一の時のリスト
アも簡単。
11

12. バリエーション展開が容易
 テーマをあらかじめ作っておけば…
適用は簡単なので…
1. ブログサービス
2. 同一業種を多く抱えるWeb制作会社
などを扱う人たちにむいている。
12

13. 配布に便利
 テンプレートセットより作成が楽で、
できることは多いので配布にはむいて
いる。
#ただし、MT5.0xの仕様上、ウェブサイトでブログ
機能がないのが現状のボトルネック。
13

14. 設計前の注意点（機能編）
 テーマは便利だが万能じゃない。
 何がテーマでエクスポートできるかを
知っておくことは重要。
 何がテーマでインポートできるかを
知っておくことも重要。
※エクスポートはできないが、インポートでできる
機能がある（後述）
14

15. テーマでできる事一覧
エクスポート インポート
設定情報 ○ ○
テンプレート（設定含む） ○ ○
カテゴリ ○ ○
ブログ記事 ×（※1） ×（※1）
フォルダ ○ ○
ウェブページ × ○
blog_static(ファイル等) ○（※2） ○
カスタムフィールド △（※3） △（※3）
アセット情報 × ×
テーマのサムネール × ○
※１：ブログ記事のエクスポート、インポートを利用
※２：Jpg, jpeg, gif, png, js, css, ico, flv, swfが可能
※３：カテゴリ別の設定ができない等 15

16. 補足注意事項
 アセット情報のエクスポート、インポートはできな
い
※もちろんDBからの移植は可能。
 Movable Typeで作ったウェブページはインポートは
できるがエクスポートできない。
 カスタムフィールドのカテゴリ別情報はエクスポー
ト、インポートできない。
 プラグインの設定情報はエクスポート、インポート
できない。
 カスタムフィールドで画像をアップロードする場合
はそのままでは表示されない。
※プラグインで補足できる。
16

17. 設計前の注意点（環境編）
 事前に利用するサーバーで動作環境を調べ
ておくこと
1. DBの種類とバージョン
2. Perlのバージョン
3. PHPのバージョン
4. モジュールの有無（※特にYAML::Tiny）
5. その他（例： SSIの利用の可・不可）
17

18. 経験上、こんなケースが複数
ありました。
 書籍「Movable Type 5実践テクニック」の
サンプルデータでインストール時のエラー
で下記が原因の不具合が何件かありまし
た。
1. 動作に必要なモジュール（YAML::Tiny ）が
不足していた
2. DBがSQLiteだった
3. MTではなくMTOSをインストールしていた
18

19. 環境は同梱ファイル全てを
調べておくこと
 動作環境においてはテーマだけ
じゃなくて、同梱する全て（プラ
グイン等）についても調べておく
こと
※テーマが利用しなくとも、同梱ファイルが
必要とする環境もある。
19

20. テーマの設計上の注意点
1. 目的により設計が異なるので、テーマを作
る目的は明確にしておく。
※配布とバックアップでは目的が違う
2. 画像、モジュールはウェブサイトにまとめ
る。
3. URL、ブログIDに依存しない設計をおこな
う。
4. エクスポートでできない事は、エクスポー
ト後に補完する。
20

21. テーマを作ってみよう
 とはいえ、
Movable Typeのテーマは、
他のCMSに比べて
作るのはすごく簡単。
21

22. なぜならば…
 Movable Typeで
ふつうにWebを作ることで
テーマの基本は
できてしまうから…。
22

23. テーマの作り方の工程
1. 任意のサーバーにMovable Type 5.0x
をインストールする
2. MTでWebを作る
3. テーマのエクスポートで出力
4. 「theme.yaml」の追記（すごく大事）
やサムネール等を追加してパッケージ
を作り完成
23

24. 理解する上で躓きがちなポイント
 テーマの作り方がわからない人は下記がわ
からない場合が多い
1. テーマで何ができるのかわからない。
2. どうすればテーマができるのかがわからな
い。
3. 何がエクスポートできるかわからない。
4. 何がインポートできるかがわからない。
5. 「theme.yaml」の記述方法がわからない。
24

25. エクスポート時の注意点
1. ウェブページはエクスポートできない
のでテキストエディタ等にソースコー
ドをバックアップしておくこと。
2. プラグインの設定は別途ドキュメント
化しておくこと。
※もちろん両者ともDBからエクス
ポート、インポートできるので、その
やり方をとる場合は別。
25

26. テーマパッケージの作成
1. 「theme.yaml」の追記、修正
（ウェブページデータ、サムネール
等）
2. サムネールの作成
3. 利用プラグインの同梱
4. ドキュメント（インストール解説書）
の作成
26

27. テーマ適用時に気をつけること
 くどいようですが…
1. サーバー環境の整備
2. 利用プラグインの同梱ならびに設定
3. カスタムフィールドのカテゴリ別設定（利
用している場合）は適用後に設定する
4. その他（仕様・環境により異なる）
をくれぐれもお忘れなく
27

28. テーマを理解するための
簡単な練習
 とは言っても、
テーマを作ったことのない人に
テーマの設計は困難。
28

29. では、どうするか？
 テーマの仕組みは…
1. 既存テーマをカスタマイズし
2. カスタマイズしたテーマを
エクスポートし
3. 元のテーマと差分を検証してみると
理解しやすい。
29

30. サンプルテーマを
カスタマイズしてみよう
 書籍「Movable Type 5
実践テクニック」のサン
プルテーマを使って、
簡単な実習をしてみま
す。
サンプルURL：http://sbc.hippos.jp/
30

31. サンプルテーマの構成
 このサンプルテーマは
ウェブサイトと
３つのブログで構成されています。
SBC お知らせ
ブログ
商品案内
31

32. 練習課題の工程
1. Movable Typeのインストール
2. テーマのダウンロード
3. プラグインのインストール
4. プラグインの設定
5. テーマのインストール
6. テーマの適応
7. ブログの新規作成
8. ブログデータのインポート
9. トリガーの設定
10. テーマのカスタマイズ
11. テーマのエクスポート
12. データの結合（パッケージ制作）
※手順を踏めば1時間程度で終わります。
32

33. Movable Typeのインストール
 注意点は２カ所
1. 動作環境の確認を行う。
（特にYAML::Tiny）
※XAMPP、MAMP等ローカルサーバーは自分で組み込まないとあり
ませんが、以降で対応策は説明してあります。
2. テーマを選ぶ時に、
「クラッシックウェブサイト」を
選んでおく。
※readme.txtと合わせて読んでください。
33

34. テーマのダウンロード
 下記サイト
http://www.sbcr.jp/support/8849.htmlよ
り
Chapter 3 の「mt5bk3.zip」を
ダウンロードして解凍する。
※readme.txtと合わせて読んでください。
34

35. プラグインのインストール
 「mt-static」「blogdata」をアップロード
（他のフォルダはアップロードしない）
mt5bk3 themas sbc_website
mt-static sbc_news
sbc_blog
plugins
sbc_products
blogdata
※blogdataはテーマ適用後に利用します。
document ※documentは学習用コード等
35

36. プラグインの設定をする
 設定を行っておくプラグイン
1. Mail Form 2.2
※必ずテーマ適応前に設定をしておく
2. MultiBlog 2.1
※ブログ制作後でかまわない
3. CKEditor for Movable Type 1.051
※利用時でかまわない
※readme.txtと合わせて読んでください。
36

37. Mail Form 2.2の設定 1
 テーマ適応前に設定をしておかない
と、テーマ適応後の再構築時に下記の
エラーが表示される。
テンプレート「mail_form:メールフォーム」の再構築中に
エラーが発生しました:
<mtIncludeMailFormCommon>タグでエラーがあ
りました: メールフォームの設定を読み込むのに失敗し
ました
※設定の詳細は作者藤本さんのブログでどうぞ
37

38. Mail Form 2.2の設定 ２
 下記の手順で
1. 右メニュー「メールフォーム」より「新規」
を選ぶ設定を行うページが表示される。
2. 設定のタイトル「お問い合わせメールフォー
ム」等任意の名前をつける。
3. メールアドレスなどの設定を行う。
4. 設定が完了したら「変更を保存」をクリッ
ク。
38

39. Mail Form 2.2の設定 ３
1. 中程に新規に表示されたボタンの左側の「メール
フォームに、必須のMTSetverをタグを追加」をク
リック。
2. テンプレートに「MTSetver」が追加されているこ
とを確認したら閉じる。
39

40. テーマのインストール
 「themas」をアップロード
（他のフォルダはアップロードしない）
mt5bk3 themas sbc_website
mt-static sbc_news
sbc_blog
plugins
sbc_products
blogdata
※blogdataはテーマ適用後に利用します。
document ※documentは学習用コード等
40

41. ウェブサイトのテーマの適用
 ウェブサイトのテーマの適用で、
「SBCのテーマ」を選び適用
※適用が終わったら再構築しておく
41

42. エラーが表示されたら１
 YAML::Tinyが不足していると下記のエラー
が表示されるので、以下のページで対応策
を記述しておく。
Error reading
C:xampphtdocssbcmt5themessbc_websitethe
me.yaml: YAML::Tiny failed to classify line '
<p>このページは設定用であり、コンテンツは存
在しません</p>'
42

43. エラーが表示されたら２
 下記ファイルを修正する。
themes/sbc_website/templates/sitemap_xml.mtml
の
<MTPages lastn="0" folder="NOT 設定用">
を探し
<MTPages lastn="0">
に変更して保存。
43

44. エラーが表示されたら３
 続いて下記ファイルを修正する。
themes/sbc_website/config.yaml
の
text:
を探し（287行目あたり）
text: |
に変更して保存。
44

45. インストールができなかったら…
 ＭＴQに質問投げてください。
 その際に
1. 環境と
2. エラー表示
の記述はお忘れなく。
45

46. ブログ（NEWS）の作成
 新規にブログ（NEWS）を作成
※ブログURL：news/ ブログパス：news
46

47. ブログ(商品案内)の作成
 新規ブログ(商品案内)の作成
※ブログURL：products/ ブログパス：products
47

48. ブログ(ブログ)の作成
 新規ブログ(ブログ)の作成
※ブログURL：blog/ ブログパス：blog
48

49. ブログデータのインポート１
 ブログは下記のフォルダにある
mt5bk3 themas
mt-static news.txt
plugins products.txt
blogdata blog.txt
document
※ブログ名と同じ名前のついたテキストをインポー
ト。 49

50. ブログデータのインポート２
 ３つのブログのデータをインポート。
※ブログ名と同じ名前のついたテキストをインポー
ト。 50

51. トリガーの設定を行い再構築
1. MultiBlog 2.1のトリガーの設定をおこ
なう。
2. ブログを順番に再構築
3. 出力して問題がなければ設定完了。
51

52. カスタマイズをしてみよう
 簡単にブログのカスタマイズ（例：SSLインクルー
ド化等をしてみる）
※機能を知るだけなので徹底して行う必要はありません。
 できれば、
1. 画像を変更する
2. CSSを触ってみる
3. ウィジェットを追加してみるなどしてみれば、
さらに理解が向上します。
52

53. エクスポートをしてみよう
 カスタマイズが終わったら、Movable
Type.jpに記載してある方法等を参考
にテーマをエクスポートする。
http://www.movabletype.jp/documentation/mt5/design/themes
/create.html
 ウェブサイトのテーマ出力時にブログ
のファイルも合わせてエクスポートし
ておくと楽。
53

54. データを比較してみよう
 エクスポートが終わったら、エキスポート
データと元のテーマデータを比べてみる
 特に注意するのは…
1. テンプレート
2. 設定ファイル（theme.yaml）
これらを比べれば…
テーマが何がエクスポートできて、
何がインポートできないかが、
だいたいわかります。
※DF等の差分検証ソフトを利用すると便利。
54

55. パッケージの作成
 エクスポートファイルと元のダウン
ロードファイルの差分を元データに
マージして完成！
 以上の簡単な学習で、Movable Type
5.0の基本機能を理解出来る方ならば、
テーマをどのように作るかは概ね理解
できるかと思います。
55

56. 本日のまとめ
1. 何がテーマでできないかを知っておくこと
が大事。
2. テーマを知るには既存テーマをカスタマイ
ズして差分を比べてみるのが近道。
3. 画像、モジュールはウェブサイトにまとめ
る。
4. エクスポートできることと、インポートで
できることの違いを知る。
5. テーマの基本情報は「theme.yaml」に書か
れている。
56

57. シックス・アパートへのお願い１
 テーマがいまひとつ普及しないのはMovable Type 5
の仕様の問題ではないだろうか？
 MT5.0xの仕様はMT4系まででマルチブログを使って
いた人には使いやすいが、１ブログでシンプルなサ
イトを作っていた人には作りづらい。
 ウェブサイトでブログが作れるようになれば、親子
関係に悩む必要もなく、ウェブサイト単体のみで
テーマが作れるようになるから、サードパーティに
よるテーマの作成も増え応用も広がるのでは？
57

58. シックス・アパートへのお願い２
 ウェブページのエクスポート機能
 アセットのエクスポート、インポート対応。
 ボタン１つでウェブサイト以下のブログ全て
がエキスポート。
 ボタン１つでウェブサイト以下のブログ全て
が適用。
こんなことができればさらに、
制作者と可能性も広がるのでは？
58

59. シックス・アパートへのお願い３
 Movable Typeのテーマを作るのは簡
単！
 テーマでエクスポート、インポートで
きることが増えれば…
 簡単にスタートできるので…
 MTの利用方法とユーザーは広まる。
 と、いいことづくめ！
59

60. シックス・アパートへのお願い４
シックス・アパートの皆さ
ん。
さらなるテーマの機能強化と
利便性の追求を
よろしくお願いします！ 60

61. と書きましたけど…
 これは何？
61

62. 小粋空間の荒木勇次郎さんが…
 エクスポートをカバーするプラグインを作ってくれ
ました(感涙)。
 ダウンロードURLおよび解説は荒木さんのスライド
に掲載されています。
http://www.slideshare.net/yujiro/mt-ddc-tolyo-4882228
 また荒木さんのスライドは「theme.yaml」の書き方
の解説を丁寧に書かれていますので、このスライド
を読んだ後に、荒木さんのスライドと読まれれば
テーマが作れるようになります。
62

63. 宣伝です。
テーマを作るならこの１冊！
 テーマを作るなら
「Movable Type 5実践
テクニック」が便利で
す。
 仕事でMTを利用する
Webデザイナーや、
マークアップエンジニ
アが対象です。
 カスタムフィールドに
関しても詳細に解説！
63

64. 無料で使える商用利用可能な
サンプルテーマ配布してま
す。
 書籍付録とはいえ、3種類のサンプル
テーマはオープンソース。
本を買わなくても無料で利用できます。
http://www.sbcr.jp/products/4797358834.html?sku=4797358834
学習に商用等に、ご自由にご利用ください。
64

65. Movable Typeのテーマには、
まだまだ可能性があります！
 あなたのアイデアとセンスを生か
してテーマを作ってみてくださ
い。
 1人でも多くのテーマ作者が
世の中に登場することを
願ってます。
65

66. 最後に、みなさんへお願い。
僕はMovable Typeが大好きです。
 1人でも多くのMTユーザーが増え、協力しあえる
体制があるといいなと思い、現在、
1. MTDDCの地方版開催の実現
2. MTユーザーフォーラムの立ち上げ
を協力してくれる仲間と
企画・準備進行中です。
 協力いただける方はGoogleグループ
「MT Study Society 」に
是非、参加して意見をください。
http://groups.google.co.jp/group/mt-study-society
 ご静聴ありがとうございました。
66