Downloaded 11 times
MTDDC Tokyo テーマ編 プレゼン資料
- 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.
- 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