20130225 pronet study

テンプレート・カスタマイズについて学ぶPronet勉強会

シックス・アパート株式会社⻑内毅志

自己紹介 : ⻑内毅志2011年よりMovable Type製品企画マネージャーtwitter:twitter:twitter:twitter: Nick_smallworldblog:blog:blog:blog: smallworld.west-tokyo.com

アジェンダアジェンダアジェンダアジェンダアジェンダアジェンダアジェンダアジェンダ• 最初に

–Movable Typeの特徴

–テンプレートとは

–ウェブサイトとブログの違い

• Movable Typeのテンプレート構造

• テンプレートの種類

• 空のテンプレートを変えてみる

• 簡単な条件分岐

• テーマとは?

• テーマとテンプレート

Movable TypeMovable TypeMovable TypeMovable Typeの特徴の特徴の特徴の特徴Movable TypeMovable TypeMovable TypeMovable Typeの特徴の特徴の特徴の特徴

• 10年以上利用されているブログ・CMS(通称MT)

• MTタグと呼ばれるタグの組み合わせでロジック生成

• テンプレートとDBが完全に分離している(MVCライク)

• プラグインで拡張可能

• どんなコードも生成可能

MTMTMTMTタグによるタグによるタグによるタグによるhtmlhtmlhtmlhtml生成生成生成生成MTMTMTMTタグによるタグによるタグによるタグによるhtmlhtmlhtmlhtml生成生成生成生成

<ul>

<MT:Entries limit="10">

<li><a href="<MT:EntryPermalink>"><MT:EntryTitle></a></li>

</MT:Entries>

</ul>

再新10件のブログ記事をリンク付きで生成

参考リンク2：https://github.com/movabletype/Documentation/wiki/J

apanese-mtml-guide

テンプレートとはテンプレートとはテンプレートとはテンプレートとはテンプレートとはテンプレートとはテンプレートとはテンプレートとは

• Movable Typeのデータベースに保存されている各種の

データを、htmlとして出力するための仕組み

DBDBDBDBのオブジェクトをタグで出力のオブジェクトをタグで出力のオブジェクトをタグで出力のオブジェクトをタグで出力DBDBDBDBのオブジェクトをタグで出力のオブジェクトをタグで出力のオブジェクトをタグで出力のオブジェクトをタグで出力

<MTEntryTitle>

<MTEntryBody>

<MTEntryMore>

テンプレートテンプレートテンプレートテンプレートテンプレートテンプレートテンプレートテンプレート

テンプレートの実際

ウェブサイトとブログの違いウェブサイトとブログの違いウェブサイトとブログの違いウェブサイトとブログの違いウェブサイトとブログの違いウェブサイトとブログの違いウェブサイトとブログの違いウェブサイトとブログの違い• ウェブサイト…

いわゆる「ウェブサイト」「ホームページ」全体を管理するた

めの器

• ブログ…

ウェブサイト(ホームページ)の中にある、更新頻度の高いコン

テンツを管理するための器。

「ブログ」「ニュースリリース」「IR情報」

「新製品紹介」など参考リンク3：http://www.movabletype.jp/documentation/mt5/websites/

ウェブページとブログ記事の違いウェブページとブログ記事の違いウェブページとブログ記事の違いウェブページとブログ記事の違いウェブページとブログ記事の違いウェブページとブログ記事の違いウェブページとブログ記事の違いウェブページとブログ記事の違い

• ブログ記事…時間の経過とともに蓄積されるページ

例:日記、ニュースリリースなど

• ウェブページ…時間の経過と関係なく、階層構造に従い

情報を伝えるためのページ

例:会社概要、組織図、会社地図など

参考リンク4：http://www.movabletype.jp/documentation/mt5/compose/

Movable TypeMovable TypeMovable TypeMovable Typeのテンプレート構造のテンプレート構造のテンプレート構造のテンプレート構造Movable TypeMovable TypeMovable TypeMovable Typeのテンプレート構造のテンプレート構造のテンプレート構造のテンプレート構造

• インデックステンプレート

• アーカイブテンプレート

• テンプレートモジュール

• システムテンプレート

• ウィジェット参考リンク5：http://www.movabletype.jp/documentation/designer/temp

late-types.html

インデックステンプレートインデックステンプレートインデックステンプレートインデックステンプレートインデックステンプレートインデックステンプレートインデックステンプレートインデックステンプレート

• ブログ・ウェブサイト全体に関わるファイルを扱うテン

プレート

• サイトに一つしか存在しないファイルを扱う事が多い

例:CSS, JavaScript, トップページなど

アーカイブテンプレートアーカイブテンプレートアーカイブテンプレートアーカイブテンプレートアーカイブテンプレートアーカイブテンプレートアーカイブテンプレートアーカイブテンプレート

• 更新ごとに増加するデータページをまとめるテンプレー

ト。

• 出力ルールを設定できる(カテゴリごとに一覧ページを

作る、月毎にページをまとめるなど)

• 1テンプレートで複数の種類のファイルを出力できる

テンプレートモジュールテンプレートモジュールテンプレートモジュールテンプレートモジュールテンプレートモジュールテンプレートモジュールテンプレートモジュールテンプレートモジュール

• 様々なテンプレートで共通して使う、部品のためのテン

プレート

• ヘッダーやフッターなど、全ページ共通で使用する場合

に使う

システムテンプレートシステムテンプレートシステムテンプレートシステムテンプレートシステムテンプレートシステムテンプレートシステムテンプレートシステムテンプレート

• コメントのプレビューや検索画面など、特定の画面のデ

ザインを設定するためのテンプレート。

• MTのインタラクティブページを管理する

ウィジェットウィジェットウィジェットウィジェットウィジェットウィジェットウィジェットウィジェット

• サイドバーなどで利用するコンテンツを細かく部品化し

、管理画面上でドラッグ・アンド・ドロップして管理で

きるもの。

• テンプレートモジュール以上に、細かいパーツを管理

• 昔はブログパーツなどによく使われていました

ハンズオンハンズオンハンズオンハンズオンハンズオンハンズオンハンズオンハンズオン

バナーヘッダー

バナーフッターバナーフッター

サイドバー

構造構造構造構造構造構造構造構造

課題課題課題課題1111課題課題課題課題1111

• 新しいウェブページを作成、更新してみる


• インデックスページの文言を変えてみる


• 全部のウェブページのタイトルに色をつける


• サイドバーの見出し「ウェブページ」を別な文言に変え

る


• インデックスページの場合、サイトロゴ文字の下に

「これはインデックスページです」

ウェブページの場合、サイトロゴ文字の下に

「これはウェブページです」

という文字を、条件分岐を利用して入れる参考リンク6：http://www.movabletype.jp/blog/customize_conditional_01.html

参考リンク7:http://www.movabletype.jp/documentation/designer/archive-

template-variable.html


• インデックスページの場合はサイドメニューの位置を左

に、ウェブページの場合はサイドメニューの位置を右の

ままにする

• ヒント：スタイルシートのclassを見ながら、bodyの指

定を変える

課題課題課題課題6666----1111課題課題課題課題6666----1111

• インデックスページ、ウェブページでレイアウトを変え

る方法を、条件分岐を使って実現する


• @topタグがついたページのみ、トップページにタイト

ルとリンクを表示してみる

参考リンク8：http://www.movabletype.jp/documentation/mt5/compose/edit.html

#edit-privatemode

参考リンク9:http://www.movabletype.jp/blog/mtddc2011_special_03.html

SPECIALSPECIALSPECIALSPECIALSPECIALSPECIALSPECIALSPECIAL

• 今回カスタマイズしたテーマファイルを、ダウンロード

してみる

SPECIAL2SPECIAL2SPECIAL2SPECIAL2SPECIAL2SPECIAL2SPECIAL2SPECIAL2

• ウェブページプレビューの時に

「これはプレビューです」という表示を、ページ内に

表示する。

20130225 pronet study

Documents

Transcript of 20130225 pronet study