More Related Content
Similar to MTDDC Tokyo テーマ編 プレゼン資料
Similar to MTDDC Tokyo テーマ編 プレゼン資料 (20)
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
- 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)
アセット情報 × ×
テーマのサムネール × ○
※1:ブログ記事のエクスポート、インポートを利用
※2:Jpg, jpeg, gif, png, js, css, ico, flv, swfが可能
※3:カテゴリ別の設定ができない等 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
- 29. では、どうするか?
テーマの仕組みは…
1. 既存テーマをカスタマイズし
2. カスタマイズしたテーマを
エクスポートし
3. 元のテーマと差分を検証してみると
理解しやすい。
29
- 30. サンプルテーマを
カスタマイズしてみよう
書籍「Movable Type 5
実践テクニック」のサン
プルテーマを使って、
簡単な実習をしてみま
す。
サンプルURL:http://sbc.hippos.jp/
30
- 31. サンプルテーマの構成
このサンプルテーマは
ウェブサイトと
3つのブログで構成されています。
SBC お知らせ
ブログ
商品案内
31
- 32. 練習課題の工程
1. Movable Typeのインストール
2. テーマのダウンロード
3. プラグインのインストール
4. プラグインの設定
5. テーマのインストール
6. テーマの適応
7. ブログの新規作成
8. ブログデータのインポート
9. トリガーの設定
10. テーマのカスタマイズ
11. テーマのエクスポート
12. データの結合(パッケージ制作)
※手順を踏めば1時間程度で終わります。
32
- 33. Movable Typeのインストール
注意点は2カ所
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の設定 2
下記の手順で
1. 右メニュー「メールフォーム」より「新規」
を選ぶ設定を行うページが表示される。
2. 設定のタイトル「お問い合わせメールフォー
ム」等任意の名前をつける。
3. メールアドレスなどの設定を行う。
4. 設定が完了したら「変更を保存」をクリッ
ク。
38
- 39. Mail Form 2.2の設定 3
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
- 42. エラーが表示されたら1
YAML::Tinyが不足していると下記のエラー
が表示されるので、以下のページで対応策
を記述しておく。
Error reading
C:xampphtdocssbcmt5themessbc_websitethe
me.yaml: YAML::Tiny failed to classify line '
<p>このページは設定用であり、コンテンツは存
在しません</p>'
42
- 43. エラーが表示されたら2
下記ファイルを修正する。
themes/sbc_website/templates/sitemap_xml.mtml
の
<MTPages lastn="0" folder="NOT 設定用">
を探し
<MTPages lastn="0">
に変更して保存。
43
- 44. エラーが表示されたら3
続いて下記ファイルを修正する。
themes/sbc_website/config.yaml
の
text:
を探し(287行目あたり)
text: |
に変更して保存。
44
- 49. ブログデータのインポート1
ブログは下記のフォルダにある
mt5bk3 themas
mt-static news.txt
plugins products.txt
blogdata blog.txt
document
※ブログ名と同じ名前のついたテキストをインポー
ト。 49
- 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. シックス・アパートへのお願い1
テーマがいまひとつ普及しないのはMovable Type 5
の仕様の問題ではないだろうか?
MT5.0xの仕様はMT4系まででマルチブログを使って
いた人には使いやすいが、1ブログでシンプルなサ
イトを作っていた人には作りづらい。
ウェブサイトでブログが作れるようになれば、親子
関係に悩む必要もなく、ウェブサイト単体のみで
テーマが作れるようになるから、サードパーティに
よるテーマの作成も増え応用も広がるのでは?
57
- 59. シックス・アパートへのお願い3
Movable Typeのテーマを作るのは簡
単!
テーマでエクスポート、インポートで
きることが増えれば…
簡単にスタートできるので…
MTの利用方法とユーザーは広まる。
と、いいことづくめ!
59
- 62. 小粋空間の荒木勇次郎さんが…
エクスポートをカバーするプラグインを作ってくれ
ました(感涙)。
ダウンロードURLおよび解説は荒木さんのスライド
に掲載されています。
http://www.slideshare.net/yujiro/mt-ddc-tolyo-4882228
また荒木さんのスライドは「theme.yaml」の書き方
の解説を丁寧に書かれていますので、このスライド
を読んだ後に、荒木さんのスライドと読まれれば
テーマが作れるようになります。
62
- 63. 宣伝です。
テーマを作るならこの1冊!
テーマを作るなら
「Movable Type 5実践
テクニック」が便利で
す。
仕事でMTを利用する
Webデザイナーや、
マークアップエンジニ
アが対象です。
カスタムフィールドに
関しても詳細に解説!
63
- 64. 無料で使える商用利用可能な
サンプルテーマ配布してま
す。
書籍付録とはいえ、3種類のサンプル
テーマはオープンソース。
本を買わなくても無料で利用できます。
http://www.sbcr.jp/products/4797358834.html?sku=4797358834
学習に商用等に、ご自由にご利用ください。
64
- 66. 最後に、みなさんへお願い。
僕はMovable Typeが大好きです。
1人でも多くのMTユーザーが増え、協力しあえる
体制があるといいなと思い、現在、
1. MTDDCの地方版開催の実現
2. MTユーザーフォーラムの立ち上げ
を協力してくれる仲間と
企画・準備進行中です。
協力いただける方はGoogleグループ
「MT Study Society 」に
是非、参加して意見をください。
http://groups.google.co.jp/group/mt-study-society
ご静聴ありがとうございました。
66