MTDDC Tokyo テーマ編　プレゼン資料

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

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

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

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

ブログ等  世界中の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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

MTDDC Tokyo テーマ編　プレゼン資料

by Toshihito Gamo on Aug 01, 2010

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 670

Statistics