Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

MTを今すぐCMSとして使いたい人のための60分急ごしらえセミナー

6.851 Aufrufe

Veröffentlicht am

4月22日にGMOクラウドで開催されたMovable Typeセミナーのプレゼン資料。

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

MTを今すぐCMSとして使いたい人のための60分急ごしらえセミナー

  1. 1. MTを今すぐCMSとして使いたい人のための60分急ごしらえセミナー<br />シックス・アパート <br />マーケティング担当 高橋真弓<br />
  2. 2. 自己紹介<br />高橋真弓(シックス・アパート株式会社 マーケティング担当)<br />3年間、都内のWeb制作会社にてWebプロデュースやWebディレクションを行う。<br />2008年よりシックス・アパート株式会社に入社、マーケティング・マネジャーとしてシックス・アパートのマーケティング活動全般を手がける。<br />ブログを書いている。(Movable Type については一切言及していませんが)<br />鳥を飼っている。<br />http://uramayu.typepad.jp/<br />Twitter ID: @mayumine<br />
  3. 3. 今日の流れ<br />Movable Type とは<br />Movable Type とWordPressの違いは?<br />MTで何ができるの?<br />MTの簡単なカスタマイズにチャレンジ!<br />Movable Type 5.1 紹介<br />
  4. 4. Movable Typeとは<br />2001年<br />2011年<br />2001年 Movable Type 1.0<br />サンフランシスコのシックス・アパートの創業者夫妻が自分たちの日記を書くために開発したブログツール<br />2011年 Movable Type 5.1 Beta公開<br />日本で一番導入されているCMSソフトウェアとして進化中<br />
  5. 5. MTとWordPressの違い<br />
  6. 6. MTとWordPressの違い<br />結論(あくまで所感ですが)<br />ブログとして使う場合は… WordPress<br /><ul><li>WPの方がインストールが簡単
  7. 7. 様々なプラグイン、テンプレートが豊富ですぐに始められる
  8. 8. いろいろやろうとするとPHPの知識が必要になってくる</li></ul>CMSとして使う場合は… Movable Type<br /><ul><li>MTの方が複数サイト複数ブログ、ユーザーの管理になど、CMSとしての機能が充実している
  9. 9. システムとデザインとコンテンツが分離しているので、構築時においてデザイナー、プログラマーの分業がし易い
  10. 10. MTに対応できる制作会社、デザイナー、そして関連書籍がやはり豊富</li></li></ul><li>MTでなにができるの? Movable Type コンテスト 2010 入賞作品よりご紹介<br />もちろん、カスタマイズして<br />かっこいいブログもつくれます<br />MTコンテスト2010グランプリ<br />narajin.net<br />http://narajin.net/<br />
  11. 11. MTでなにができるの?Movable Type コンテスト 2010 入賞作品よりご紹介<br />一方、誰もが知っている大企業の大規模サイトのCMSプラットフォームとして使われています。<br />ソーシャルサービスと連携したり、マルチデバイス対応も可能にしています。<br />MTコンテスト2010準グランプリローソン<br />http://www.lawson.co.jp/<br />
  12. 12. MTでなにができるの? Movable Type コンテスト 2010 入賞作品よりご紹介<br />また大学のサイト(しかもフルFlash版、HTML版あり)のサイトにも利用されています。<br />MTコンテスト2010 シックス・アパート賞多摩美術大学<br />http://aworks.tamabi.ac.jp/<br />
  13. 13. MTでなにができるの?<br />ローカルビジネスのサイトにも<br />CMSとして、数多く導入してもらっています。<br />やまだ整骨院<br />http://www.yamada-seikotsu.com/<br />シックス・アパートの導入事例が<br />700近く掲載されています。<br />http://www.sixapart.jp/business/<br />
  14. 14. MTに挑戦しようと思ってインストールまでは何とかできた!<br />でもいざMTのカスタマイズをしようとして、ドキュメントや本も読んだけど、MTの概念とか、MTタグ、テンプレート,変数?もうよくわかんなくなって前はあきらめたんだよね…<br />MTの簡単なカスタマイズにチャレンジ!<br />
  15. 15. なんの変哲もない小規模な非実在企業サイト<br />じゃあMovable Type を導入しましょう!<br />「お知らせ」だけ<br />自分で更新できないかなー<br />
  16. 16. 今すぐできる超絶シンプルなMTのCMSカスタマイズテクニック<br />今回説明する内容は、2010年7月~8月にgihyo.jpに連載された、「今すぐできる超絶シンプルなMTのCMSカスタマイズテクニック」の導入部分が基本となっています。<br />http://gihyo.jp/design/serial/01/mtcorp_cms<br />
  17. 17. サイト構成<br />
  18. 18. カスタマイズするHTMLテンプレートは3つ<br /><ul><li>トップページ(index.html)
  19. 19. お知らせの一覧ページ(news/index.html)
  20. 20. お知らせの個別ページ(news/entry.html)</li></li></ul><li>前提として<br />サイトのHTMLはひと通り完成している<br />MTはサーバーにインストール済みで何も設定されていない<br />※インストールマニュアルhttp://www.movabletype.jp/documentation/mt5/installation/system.html<br />※画像やスタイルシートは全てディレクトリ直下の「common」フォルダに入っているつもりで説明をしていきます<br />
  21. 21. まずはMTの下準備<br />Step 1  まずは「ウェブサイト」を作成<br />
  22. 22. まずはMTの下準備<br />Step 2  次に「ブログ」を作成<br />
  23. 23. テンプレートの下準備<br />Step 3 不要なテンプレートを削除<br /><ul><li>インデックステンプレート:JavaScriptと、最新記事のフィード、メインページ以外削除
  24. 24. アーカイブテンプレート:ブログ記事以外削除
  25. 25. テンプレートモジュール:すべて削除
  26. 26. ウィジェットセット:すべて削除
  27. 27. システムテンプレート:そのまま(すべて削除しても問題なし)</li></ul>http://gihyo.jp/design/serial/01/mtcorp_cms/0001?page=2<br />
  28. 28. 「ブログ記事」テンプレートの編集<br />Step 4 「ブログ記事」テンプレート    アーカイブマッピングのURL設定<br />
  29. 29. 「ブログ記事」テンプレートの編集<br />Step 4 「ブログ記事」テンプレート    アーカイブマッピングのURL設定<br />生成されるページのURLの出力形式を定義する<br /><ul><li>http://www.movabletype.jp/documentation/appendices/date-formats.html</li></ul>カスタマイズ<br />%y-%m-%d-%h-%n.html<br />↓<br />yyyy-mm-dd-hh-mm.html<br />↓<br />2011-03-25-15-30.html<br />デフォルト<br />yyyy/mm/entry-basename.html<br />↓<br />2011/03/gmoseminer.html<br />※任意のファイル名<br />
  30. 30. 「ブログ記事」テンプレートの編集<br />Step 5 「ブログ記事」テンプレートをMTカスタマイズ<br />デフォルトテンプレートのソースをすべて削除<br />あらかじめ用意しておいた「お知らせの詳細ページ」の(news/entry.html)のHTMLソースをそのままコピー&ペースト<br />
  31. 31. 「ブログ記事」テンプレートの編集<br />Step 5 「ブログ記事」テンプレートをMTカスタマイズ<br />見出しに該当する箇所と,本文部分に該当する箇所にMTタグを挿入する<br />h2><$MTEntryTitle$></h2><br /><p><$MTEntryBody$></p><br /><$MTEntryTitle$> <br />ブログ記事のタイトルを表示するタグです。<br /><$MTEntryBody$> <br />ブログ記事の本文を表示するタグです。<br />
  32. 32. 「ブログ記事」テンプレートの編集<br />Step 5 「ブログ記事」テンプレートをMTカスタマイズ<br />
  33. 33. 「ブログ記事」テンプレートの編集<br />
  34. 34. お知らせトップページの編集<br />Step 6 「メインページ」テンプレートをMTカスタマイズ<br />デフォルトテンプレートのソースをすべて削除<br />あらかじめ用意しておいた「お知らせの一覧ページ」の(news/index.html)のHTMLソースをそのままコピー&ペースト<br />
  35. 35. お知らせトップページの編集<br />Step 6 「メインページ」テンプレートをMTカスタマイズ<br />ブロク記事を一覧表示するMTカスタマイズ<br /><table class="news"> <tbody> <br /><mt:Entrieslastn="10“><br /> <tr> <th><mt:EntryDate format="%Y.%m.%d"></th> <br /><td><ahref="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a> </td> <br /></tr> </mt:Entries> </tbody> </table><br /><mt:Entrieslastn="10"> ~ </mt:Entries><br />MTEntriesは、ブログ記事を一覧させるためのMT タグ。<br />HTML タグのように開始タグと終了タグを対にして記述します。「lastn=“10”」という指定は出力するブログ記事の件数を制限していて、ここでは「最新のブロク記事10件を表示する」と指定しています。<br />
  36. 36. お知らせトップページの編集<br />Step 6 「メインページ」テンプレートをMTカスタマイズ<br />ブロク記事を一覧表示するMTカスタマイズ<br /><table class="news"> <tbody> <br /><mt:Entrieslastn="10“><br /> <tr> <th><mt:EntryDate format="%Y.%m.%d"></th> <br /><td><ahref="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a> </td> <br /></tr> </mt:Entries> </tbody> </table><br /><mt:EntryDate format="%Y.%m.%d"> <br />MTEntryDateで,ブログ記事の作成日時を表示。<br />formatを指定し,日時の表示方法を設定しています。<br />format=“%Y.%m.%d”の指定で、”yyyy.mm.dd(ex 2011.3.25)”と出力されます。<br />
  37. 37. お知らせトップページの編集<br />Step 6 「メインページ」テンプレートをMTカスタマイズ<br />ブロク記事を一覧表示するMTカスタマイズ<br /><table class="news"> <tbody> <br /><mt:Entrieslastn="10“><br /> <tr> <th><mt:EntryDate format="%Y.%m.%d"></th> <br /><td><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a> </td> <br /></tr> </mt:Entries> </tbody> </table><br /><$MTEntryPermalink$> <br />作成したブログ記事のURLを表示。<br /><$mt:EntryTitle$><br />ブログ記事のタイトルを表示。<br />
  38. 38. お知らせトップページの編集<br />
  39. 39. ここまでのまとめ<br />・企業サイトをMT化するために、ウェブサイト、ブログを作成、不要なテンプレートは削除した<br />・お知らせブログの「ブログ記事」のテンプレートをカスタマイズ<br />・お知らせブログの「メインページ」のテンプレートをカスタマイズ<br />お知らせブログをから記事を入力すると、記事が生成され、<br />「お知らせ」のトップに一覧表示されるようにした ←イマココ<br />
  40. 40. トップページにもお知らせ一覧を表示させる(再構築トリガーの設定)<br />Step 6 「メインページ」テンプレートをMTカスタマイズ<br />マルチブログ機能…<br />「news」ブログの記事が更新されたらウェブサイトのトップページにも即座に更新が反映されるように,「MultiBlogプラグイン」の設定を行います。<br />
  41. 41. トップページにもお知らせ一覧を表示させる<br />Step 8「ウェブサイト」のテンプレート画面から、<br />    不要なテンプレートを削除<br /><ul><li>インデックステンプレート:JavaScriptと、最新記事のフィード、メインページ以外削除
  42. 42. アーカイブテンプレート:全て削除
  43. 43. テンプレートモジュール:すべて削除
  44. 44. ウィジェットセット:すべて削除
  45. 45. システムテンプレート:そのまま(すべて削除しても問題なし)</li></li></ul><li>トップページにもお知らせ一覧を表示させる<br />Step 9 「メインページ」テンプレートをMTカスタマイズ<br />デフォルトテンプレートのソースをすべて削除<br />あらかじめ用意しておいた「トップページ」の(index.html)のHTMLソースをそのままコピー&ペースト<br />
  46. 46. トップページにもお知らせ一覧を表示させる<br />Step 9 「メインページ」テンプレートをMTカスタマイズ<br />「news」ブログで更新された記事をウェブサイトトップに一覧表示させる<br /><table class="news"> <tbody><br /> <mt:Entrieslastn="5" blog_ids="表示させるブログのID"><br /><tr> <td><mt:EntryDate format="%Y.%m.%d"></td> <br /><th><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></th> </tr> </mt:Entries> </tbody> </table><br /><mt:Entrieslastn=“5” blog_ids=“表示させるブログのID”>blog_ids=“表示させるブログのID”の指定で、ウェブサイトの配下に作成したブログの情報を出力させることができます。<br />
  47. 47. トップページにもお知らせ一覧を表示させる<br />ブログIDナンバーの探し方は…<br />ブログのダッシュボードのページのアドレス<br />「http://…/mt.cgi?__mode=dashboard&blog_id=○」<br />の,最後の「○」がブログのID にあたります。<br />
  48. 48. まとめ<br />
  49. 49. Movable Type 5.1<br />MT 5.1 の大きな新機能<br />カテゴリー、フォルダの並び替え<br />一覧画面のソートやフィルタ機能の強化と、Ajaxによる速度向上<br />投稿画面のユーザビリティ向上<br />マルチブログ環境でのテンプレート編集と、MTタグの強化<br />Internet Explorer 8, Safari 最新版, Firefox 最新版をサポート<br />
  50. 50. DEMO<br />

×