仕事に役立てるテーマ

2010年7月31日 MTDDC Tokyo テーマ編

蒲生トシヒロ

2

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

3

自己紹介 蒲生トシヒロ（Dakiny） 岐阜県岐阜市生まれ 職種：Webプロデューサー、プランナー ブランディング、プル型マーケティングが得意！ 15年間広告代理店に勤務、でディレクター、プランナー

を行い、1995年マルチメディア事業部を立ち上げインターネットの世界に入る。1999年独立。2001年より有限会社ITプロフェッショナルを設立、主にWeb制作を営み今日に至る。

自称：Movable Typeの宣教師MTの洗礼は3.17から。以来Movable Typeの布教活動になることを公私を問わずやってます。

4

僕が関わった書籍 Movable Type 5実践テクニック（共著）監修：シックス・アパート株式会社ソフトバンククリエイティブ2010年3月26日発売

インターネット&Webの必須常識100（共著）ワークスコーポレーション2009年10月20日発売

Movable Type プロフェッショナル・スタイルMT4.1対応（共著）毎日コミュニケーションズ2008年4月8日発売

5

ブログ等 世界中の1%の人々へ

http://www.dakiny.com

Twitterhttp://twitter.com/Dakiny※DMか@Dakinyでリプライいただけでばもれなくフォローします。

Mixihttp://mixi.jp/show_friend.pl?id=1474285

E-mailgamo@it-pro.co.jp

6

テーマって？ （乱暴な言い方だけど…）ブログやWebを簡単に始められるスタートアップキット。（WordPressやDrupalの世界では一般的）

テーマを使えば最初から任意の業種のWebが、画像や配色のカスタマイズ程度で簡単にスタートできる。

バックアップやテストサーバーから本サーバーの移転にも便利。

7

そんな便利なテーマが…、

Movable Type 5.0から使えるようになった！万歳！

8

でも…

利用者まだまだ、少ないよね。

もっと普及してもいいはずなのに？

9

そんな理由（わけ）で 今日はテーマが普及してほしいので…

テーマを作った経験から振り返って…

1. どうしたら簡単にテーマが作れるか…

2. テーマを作る上で何に注意したらいいか？をポイントに、主に設計する人たち向けに情報をまとめてみました。

今日の話がみなさんのお役に立てば幸いです。

10

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

11

バックアップ＆リストアが簡単 テーマを作っておけば、phpMyAdminにログインしなくてもMovable Typeで作ったWebの機能の大半を簡単にバックアップ、リストアできる。

テーマを作っておけば、テストサーバーから本サーバーへの移行が簡単。

テーマを作っておけば、万が一の時のリストアも簡単。

12

バリエーション展開が容易 テーマをあらかじめ作っておけば…

適用は簡単なので…

1. ブログサービス2. 同一業種を多く抱えるWeb制作会社などを扱う人たちにむいている。

13

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

14

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

何がテーマでインポートできるかを知っておくことも重要。※エクスポートはできないが、インポートでできる機能がある（後述）

15

テーマでできる事一覧エクスポート インポート

設定情報 ○ ○テンプレート（設定含む） ○ ○カテゴリ ○ ○ブログ記事 ×（※1） ×（※1）フォルダ ○ ○ウェブページ × ○blog_static(ファイル等) ○（※2） ○カスタムフィールド △（※3） △（※3）アセット情報 × ×テーマのサムネール × ○

※１：ブログ記事のエクスポート、インポートを利用※２：Jpg, jpeg, gif, png, js, css, ico, flv, swfが可能※３：カテゴリ別の設定ができない等

16

補足注意事項 アセット情報のエクスポート、インポートはできない※もちろんDBからの移植は可能。

Movable Typeで作ったウェブページはインポートはできるがエクスポートできない。

カスタムフィールドのカテゴリ別情報はエクスポート、インポートできない。

プラグインの設定情報はエクスポート、インポートできない。

カスタムフィールドで画像をアップロードする場合はそのままでは表示されない。※プラグインで補足できる。

17

設計前の注意点（環境編） 事前に利用するサーバーで動作環境を調べ

ておくこと1. DBの種類とバージョン2. Perlのバージョン3. PHPのバージョン4. モジュールの有無（※特にYAML::Tiny）5. その他（例： SSIの利用の可・不可）

18

経験上、こんなケースが複数ありました。 書籍「Movable Type 5実践テクニック」の

サンプルデータでインストール時のエラーで下記が原因の不具合が何件かありました。

1. 動作に必要なモジュール（YAML::Tiny ）が不足していた

2. DBがSQLiteだった3. MTではなくMTOSをインストールしていた

19

環境は同梱ファイル全てを調べておくこと

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

20

テーマの設計上の注意点1. 目的により設計が異なるので、テーマを作

る目的は明確にしておく。※配布とバックアップでは目的が違う

2. 画像、モジュールはウェブサイトにまとめる。

3. URL、ブログIDに依存しない設計をおこなう。

4. エクスポートでできない事は、エクスポート後に補完する。

21

テーマを作ってみよう

とはいえ、Movable Typeのテーマは、他のCMSに比べて作るのはすごく簡単。

22

なぜならば…

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

23

テーマの作り方の工程1. 任意のサーバーにMovable Type 5.0x

をインストールする2. MTでWebを作る3. テーマのエクスポートで出力4. 「theme.yaml」の追記（すごく大事）

やサムネール等を追加してパッケージを作り完成

24

理解する上で躓きがちなポイント テーマの作り方がわからない人は下記がわ

からない場合が多い1. テーマで何ができるのかわからない。2. どうすればテーマができるのかがわからな

い。3. 何がエクスポートできるかわからない。4. 何がインポートできるかがわからない。5. 「theme.yaml」の記述方法がわからない。

25

エクスポート時の注意点1. ウェブページはエクスポートできない

のでテキストエディタ等にソースコードをバックアップしておくこと。

2. プラグインの設定は別途ドキュメント化しておくこと。※もちろん両者ともDBからエクスポート、インポートできるので、そのやり方をとる場合は別。

26

テーマパッケージの作成1. 「theme.yaml」の追記、修正

（ウェブページデータ、サムネール等）

2. サムネールの作成3. 利用プラグインの同梱4. ドキュメント（インストール解説書）

の作成

27

テーマ適用時に気をつけること くどいようですが…

1. サーバー環境の整備2. 利用プラグインの同梱ならびに設定3. カスタムフィールドのカテゴリ別設定（利

用している場合）は適用後に設定する4. その他（仕様・環境により異なる）をくれぐれもお忘れなく

28

テーマを理解するための簡単な練習

とは言っても、テーマを作ったことのない人にテーマの設計は困難。

29

では、どうするか？ テーマの仕組みは…

1. 既存テーマをカスタマイズし2. カスタマイズしたテーマを

エクスポートし3. 元のテーマと差分を検証してみると

理解しやすい。

30

サンプルテーマをカスタマイズしてみよう 書籍「Movable Type 5

実践テクニック」のサンプルテーマを使って、簡単な実習をしてみます。

サンプルURL：http://sbc.hippos.jp/

31

サンプルテーマの構成 このサンプルテーマは

ウェブサイトと３つのブログで構成されています。

SBC

商品案内

ブログ

お知らせ

32

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

33

Movable Typeのインストール 注意点は２カ所1. 動作環境の確認を行う。

（特にYAML::Tiny）※XAMPP、MAMP等ローカルサーバーは自分で組み込まないとありませんが、以降で対応策は説明してあります。

2. テーマを選ぶ時に、「クラッシックウェブサイト」を選んでおく。

※readme.txtと合わせて読んでください。

34

テーマのダウンロード

下記サイトhttp://www.sbcr.jp/support/8849.htmlよりChapter 3 の「mt5bk3.zip」をダウンロードして解凍する。

※readme.txtと合わせて読んでください。

35

プラグインのインストール 「mt-static」「blogdata」をアップロード

（他のフォルダはアップロードしない）

mt5bk3 themas

mt-static

plugins

blogdata

document※blogdataはテーマ適用後に利用します。

※documentは学習用コード等

sbc_website

sbc_news

sbc_blog

sbc_products

36

プラグインの設定をする 設定を行っておくプラグイン1. Mail Form 2.2

※必ずテーマ適応前に設定をしておく2. MultiBlog 2.1

※ブログ制作後でかまわない3. CKEditor for Movable Type 1.051

※利用時でかまわない

※readme.txtと合わせて読んでください。

37

Mail Form 2.2の設定 1 テーマ適応前に設定をしておかない

と、テーマ適応後の再構築時に下記のエラーが表示される。

※設定の詳細は作者藤本さんのブログでどうぞ

テンプレート「mail_form:メールフォーム」の再構築中にエラーが発生しました: <mtIncludeMailFormCommon>タグでエラーがありました: メールフォームの設定を読み込むのに失敗しました

38

Mail Form 2.2の設定２ 下記の手順で1. 右メニュー「メールフォーム」より「新規」

を選ぶ設定を行うページが表示される。2. 設定のタイトル「お問い合わせメールフォー

ム」等任意の名前をつける。3. メールアドレスなどの設定を行う。4. 設定が完了したら「変更を保存」をクリッ

ク。

39

Mail Form 2.2の設定３

1. 中程に新規に表示されたボタンの左側の「メールフォームに、必須のMTSetverをタグを追加」をクリック。

2. テンプレートに「MTSetver」が追加されていることを確認したら閉じる。

40

テーマのインストール 「themas」をアップロード

（他のフォルダはアップロードしない）

※blogdataはテーマ適用後に利用します。

※documentは学習用コード等

mt5bk3 themas

mt-static

plugins

blogdata

document

sbc_website

sbc_news

sbc_blog

sbc_products

41

ウェブサイトのテーマの適用 ウェブサイトのテーマの適用で、

「SBCのテーマ」を選び適用

※適用が終わったら再構築しておく

42

エラーが表示されたら１ YAML::Tinyが不足していると下記のエラー

が表示されるので、以下のページで対応策を記述しておく。

Error reading C:\xampp\htdocs\sbc\mt5\themes\sbc_website\theme.yaml: YAML::Tiny failed to classify line ' <p>このページは設定用であり、コンテンツは存在しません</p>'

43

エラーが表示されたら２ 下記ファイルを修正する。

の

を探し

に変更して保存。

themes/sbc_website/templates/sitemap_xml.mtml

<MTPages lastn="0" folder="NOT 設定用">

<MTPages lastn="0">

44

エラーが表示されたら３ 続いて下記ファイルを修正する。

の

を探し（287行目あたり）

に変更して保存。

themes/sbc_website/config.yaml

text:

text: |

45

インストールができなかったら…

ＭＴQに質問投げてください。 その際に1. 環境と2. エラー表示

の記述はお忘れなく。

46

ブログ（NEWS）の作成 新規にブログ（NEWS）を作成

※ブログURL：news/ ブログパス：news

47

ブログ(商品案内)の作成 新規ブログ(商品案内)の作成

※ブログURL：products/ ブログパス：products

48

ブログ(ブログ)の作成 新規ブログ(ブログ)の作成

※ブログURL：blog/ ブログパス：blog

49

ブログデータのインポート１ ブログは下記のフォルダにある

mt5bk3 themas

mt-static

plugins

blogdata

document

news.txt

products.txt

blog.txt

※ブログ名と同じ名前のついたテキストをインポート。

50

ブログデータのインポート２ ３つのブログのデータをインポート。

※ブログ名と同じ名前のついたテキストをインポート。

51

トリガーの設定を行い再構築1. MultiBlog 2.1のトリガーの設定をおこ

なう。2. ブログを順番に再構築3. 出力して問題がなければ設定完了。

52

カスタマイズをしてみよう 簡単にブログのカスタマイズ（例：SSLインクルー

ド化等をしてみる）※機能を知るだけなので徹底して行う必要はありません。

できれば、1. 画像を変更する2. CSSを触ってみる3. ウィジェットを追加してみるなどしてみれば、

さらに理解が向上します。

53

エクスポートをしてみよう カスタマイズが終わったら、Movable

Type.jpに記載してある方法等を参考にテーマをエクスポートする。http://www.movabletype.jp/documentation/mt5/design/themes/create.html

ウェブサイトのテーマ出力時にブログのファイルも合わせてエクスポートしておくと楽。

54

データを比較してみよう エクスポートが終わったら、エキスポート

データと元のテーマデータを比べてみる 特に注意するのは…1. テンプレート2. 設定ファイル（theme.yaml）

これらを比べれば…テーマが何がエクスポートできて、何がインポートできないかが、だいたいわかります。※DF等の差分検証ソフトを利用すると便利。

55

パッケージの作成 エクスポートファイルと元のダウン

ロードファイルの差分を元データにマージして完成！

以上の簡単な学習で、Movable Type 5.0の基本機能を理解出来る方ならば、テーマをどのように作るかは概ね理解できるかと思います。

56

本日のまとめ1. 何がテーマでできないかを知っておくこと

が大事。2. テーマを知るには既存テーマをカスタマイ

ズして差分を比べてみるのが近道。3. 画像、モジュールはウェブサイトにまとめ

る。4. エクスポートできることと、インポートで

できることの違いを知る。5. テーマの基本情報は「theme.yaml」に書か

れている。

57

シックス・アパートへのお願い１ テーマがいまひとつ普及しないのはMovable Type 5の仕様の問題ではないだろうか？

MT5.0xの仕様はMT4系まででマルチブログを使っていた人には使いやすいが、１ブログでシンプルなサイトを作っていた人には作りづらい。

ウェブサイトでブログが作れるようになれば、親子関係に悩む必要もなく、ウェブサイト単体のみでテーマが作れるようになるから、サードパーティによるテーマの作成も増え応用も広がるのでは？

58

シックス・アパートへのお願い２ ウェブページのエクスポート機能 アセットのエクスポート、インポート対応。 ボタン１つでウェブサイト以下のブログ全てがエキスポート。

ボタン１つでウェブサイト以下のブログ全てが適用。

こんなことができればさらに、制作者と可能性も広がるのでは？

59

シックス・アパートへのお願い３ Movable Typeのテーマを作るのは簡単！

テーマでエクスポート、インポートできることが増えれば…

簡単にスタートできるので… MTの利用方法とユーザーは広まる。 と、いいことづくめ！

60

シックス・アパートへのお願い４

シックス・アパートの皆さ

ん。

さらなるテーマの機能強化と

利便性の追求を

よろしくお願いします！

61

と書きましたけど…

これは何？

62

小粋空間の荒木勇次郎さんが… エクスポートをカバーするプラグインを作ってくれました(感涙)。

ダウンロードURLおよび解説は荒木さんのスライドに掲載されています。http://www.slideshare.net/yujiro/mt-ddc-tolyo-4882228

また荒木さんのスライドは「theme.yaml」の書き方の解説を丁寧に書かれていますので、このスライドを読んだ後に、荒木さんのスライドと読まれればテーマが作れるようになります。

63

宣伝です。テーマを作るならこの１冊！ テーマを作るなら「Movable Type 5実践テクニック」が便利です。

仕事でMTを利用するWebデザイナーや、マークアップエンジニアが対象です。

カスタムフィールドに関しても詳細に解説！

64

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

学習に商用等に、ご自由にご利用ください。

65

Movable Typeのテーマには、まだまだ可能性があります！

あなたのアイデアとセンスを生かしてテーマを作ってみてください。

1人でも多くのテーマ作者が世の中に登場することを願ってます。

66

最後に、みなさんへお願い。僕はMovable Typeが大好きです。

1人でも多くのMTユーザーが増え、協力しあえる体制があるといいなと思い、現在、

1. MTDDCの地方版開催の実現2. MTユーザーフォーラムの立ち上げ

を協力してくれる仲間と企画・準備進行中です。

協力いただける方はGoogleグループ「MT Study Society 」に是非、参加して意見をください。http://groups.google.co.jp/group/mt-study-society

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