20130225 pronet study

582 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
582
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

20130225 pronet study

  1. 1. テンプレート・カスタマイズについて学 ぶPronet勉強会 シックス・アパート株式会社 ⻑内 毅志
  2. 2. 自己紹介 : ⻑内毅志2011年よりMovable Type製品企画マネージャーtwitter: Nick_smallworldblog: smallworld.west-tokyo.com
  3. 3. アジェンダ• 最初に – Movable Typeの特徴 – テンプレートとは – ウェブサイトとブログの違い• Movable Typeのテンプレート構造• テンプレートの種類• 空のテンプレートを変えてみる• 簡単な条件分岐• テーマとは?• テーマとテンプレート
  4. 4. Typeの特徴 Movable Type の特徴• 10年以上利用されているブログ・CMS(通称MT)• MTタグと呼ばれるタグの組み合わせでロジック生成• テンプレートとDBが完全に分離している(MVCライク)• プラグインで拡張可能• どんなコードも生成可能
  5. 5. MTタグによるhtml生成 MTタグによるhtml生成 タグによる html再新10件のブログ記事をリンク付きで生成<ul><MT:Entries limit="10"><li><a href="<MT:EntryPermalink>"><MT:EntryTitle></a></li></MT:Entries></ul> 参考リンク2: https://github.com/movabletype/Documentation/wiki/J apanese-mtml-guide
  6. 6. テンプレートとは• Movable Typeのデータベースに保存されている各種のデータを、htmlとして出力するための仕組み
  7. 7. DBのオブジェクトをタグで出力DBのオブジェクトをタグで出力<MTEntryTitle><MTEntryBody><MTEntryMore>
  8. 8. テンプレートテンプレートの実際
  9. 9. ウェブサイトとブログの違い• ウェブサイト… いわゆる「ウェブサイト」「ホームページ」全体を管理するた めの器• ブログ… ウェブサイト(ホームページ)の中にある、更新頻度の高いコン テンツを管理するための器。 「ブログ」「ニュースリリース」「IR情報」 「新製品紹介」など 参考リンク3: http://www.movabletype.jp/documentation/mt5/websites/
  10. 10. ウェブページとブログ記事の違い• ブログ記事…時間の経過とともに蓄積されるページ例:日記、ニュースリリースなど• ウェブページ…時間の経過と関係なく、階層構造に従い情報を伝えるためのページ例:会社概要、組織図、会社地図など 参考リンク4: http://www.movabletype.jp/documentation/mt5/compose/
  11. 11. Typeのテンプレート構造Movable Type のテンプレート構造• インデックステンプレート• アーカイブテンプレート• テンプレートモジュール• システムテンプレート• ウィジェット 参考リンク5: http://www.movabletype.jp/documentation/designer/temp late-types.html
  12. 12. インデックステンプレート• ブログ・ウェブサイト全体に関わるファイルを扱うテンプレート• サイトに一つしか存在しないファイルを扱う事が多い例:CSS, JavaScript, トップページなど
  13. 13. アーカイブテンプレート• 更新ごとに増加するデータページをまとめるテンプレート。• 出力ルールを設定できる(カテゴリごとに一覧ページを作る、月毎にページをまとめるなど)• 1テンプレートで複数の種類のファイルを出力できる
  14. 14. テンプレートモジュール• 様々なテンプレートで共通して使う、部品のためのテンプレート• ヘッダーやフッターなど、全ページ共通で使用する場合に使う
  15. 15. システムテンプレート• コメントのプレビューや検索画面など、特定の画面のデザインを設定するためのテンプレート。• MTのインタラクティブページを管理する
  16. 16. ウィジェット• サイドバーなどで利用するコンテンツを細かく部品化し、管理画面上でドラッグ・アンド・ドロップして管理できるもの。• テンプレートモジュール以上に、細かいパーツを管理• 昔はブログパーツなどによく使われていました
  17. 17. ハンズオン バナーヘッダー サイドバーバナーフッターバナーフッター
  18. 18. 構造
  19. 19. 課題1 課題 1• 新しいウェブページを作成、更新してみる
  20. 20. 課題2 課題 2• インデックスページの文言を変えてみる
  21. 21. 課題3 課題 3• 全部のウェブページのタイトルに色をつける
  22. 22. 課題4 課題 4• サイドバーの見出し「ウェブページ」を別な文言に変える
  23. 23. 課題5 課題 5• インデックスページの場合、サイトロゴ文字の下に 「これはインデックスページです」 ウェブページの場合、サイトロゴ文字の下に 「これはウェブページです」 という文字を、条件分岐を利用して入れる参考リンク6:http://www.movabletype.jp/blog/customize_conditional_01.html参考リンク7:http://www.movabletype.jp/documentation/designer/archive-template-variable.html
  24. 24. 課題6 課題 6• インデックスページの場合はサイドメニューの位置を左に、ウェブページの場合はサイドメニューの位置を右のままにする• ヒント:スタイルシートのclassを見ながら、bodyの指定を変える
  25. 25. 課題6 課題 6 -1• インデックスページ、ウェブページでレイアウトを変える方法を、条件分岐を使って実現する
  26. 26. 課題7 課題 7• @topタグがついたページのみ、トップページにタイト ルとリンクを表示してみる参考リンク8:http://www.movabletype.jp/documentation/mt5/compose/edit.html#edit-privatemode参考リンク9:http://www.movabletype.jp/blog/mtddc2011_special_03.html
  27. 27. SPECIAL• 今回カスタマイズしたテーマファイルを、ダウンロードしてみる
  28. 28. SPECIAL2• ウェブページプレビューの時に「これはプレビューです」という表示を、ページ内に表示する。

×