新機能ハイライト

2009/11/26

8周年2001年10月８日 サンフランシスコ当時24歳になったばかりのエンジニアBen（ベン）が、ウェブデザイナー Mena（ミナ）のために開発

２年ぶりのメジャーバージョンアップ

Movable Type 5.0ウェブサイト運営に重要な三要素を強化

テーマ

コンテンツ ユーザー

テーマ [ Theme ]

テーマに含まれるものカスタムフィールド

カテゴリ, フォルダ

デザイン テンプレート

ウェブページ

ファイル

名前, 説明文

アイス/ホット, 価格 S/M/L

商品画像

価格表をテンプレート出力

名前, 説明文

原材料, カロリー, 価格

商品画像

写真を中心にしたデザイン

メニュー

ドリンクフード

コンテンツの枠組み= サイトのテーマ

サンプルテーマの作成

フォトブログ テーマ

•Fancybox で画像をモーダル表示•Fancybox ライブラリをテーマに同梱•Fancybox 用にテンプレートを編集

テーマ用にブログをカスタマイズ

fancybox ライブラリをダウンロード

ファイルをアップロードブログパス/js/fancybox/＊

テーマ用にテンプレートを記述する

注意点

•URLは、必ず相対パスで記述• 他のブログのテンプレートを include しない• カテゴリー、フォルダ、カスタムフィールドをテンプレートで指定する場合は、エクスポート時に忘れずにテーマに含める

• プラグインに依存するMTタグを記述する場合は、テーマの説明などに注意書きを記述

例 : 画像を表示

<img src="<$mt:BlogURL$>images/logo.png" />

例 : サイト内リンク

<a href="<$mt:BlogURL$>

about.html" />ウェブサイトについて</a>

例 ファイルのInclude

<$mt:BlogSitePath cat="file/data.html" setvar="data_include"$>

<$mt:Include file="$data_include"$>

ブログパスを出力 パスに追記

変数にセット

BlogSitePath/file/data.htmlをインクルード

親サイトのテンプレートをインクルード

<mt:SetVarBlock name="website_id"><mt:BlogParentWebsite><mt:WebsiteID></mt:BlogParentWebsite></mt:SetVarBlock>

<mt:Include module="Test" blog_id="$website_id">

また、階層的にテンプレートを複数Include する時は、できるだけインクルード先のIDを指定することを推奨

既存のテーマをカスタマイズ

fancybox をscriptタグで読み込み実行JavaScriptをヘッダーに記述

ブログ記事に画像をアップ

動作を確認

テーマのエクスポート

ファイルを置いたディレクトリを指定

指定したディレクトリのサブフォルダとファイルがテーマに含まれる

ファイルの配置例

‣ ブログのサイトルート‣ theme‣ css• theme.css‣ js‣ fancybox‣ images• logo.png

標準の対応ファイル種類

jpg, jpeg, gif, pngjs, cssswf, flvico

ThemeStaticFileExtensions 環境変数

• mt-config.cgi に追記• ThemeStaticFileExtensions jpg jpeg gif png js css ico flv swf html htm csv

• ただし、テーマをエクスポートするMTと、利用するMTの両方に指定が必要

• 将来的に、テーマを適用する際に、標準で利用可能なファイル種類を増やすかも

別のブログに適用 ZIP形式でダウンロード

ネットで配布他のMTにインストール

テーマ一覧に表示

テーマの構造

theme.yaml--- author_link: http://www.movabletype.jp/author_name: Melody Nelsonclass: blogdescription: フォトブログ用のテーマです。elements: blog_static_files: component: ̅ data: - theme importer: blog_static_files default_categories: component: ̅ data: surfing: label: Surfing importer: default_categories

サムネイルを追加する

画像をテーマフォルダに配置

thumb.png 400px x 300px

thumb-small.png 120px x 90px

thumb-medium.png 240px x 180px

theme.yaml に追記--- author_link: http://www.movabletype.jp/author_name: Melody Nelsonclass: blogdescription: フォトブログ用のテーマです。thumbnail_file: thumb.pngthumbnail_file_medium: thumb-medium.pngthumbnail_file_small: thumb-small.pngelements: blog_static_files: component: ̅ data: - theme importer: blog_static_files default_categories: component: ̅ data: surfing: label: Surfing importer: default_categories

サムネイルが表示される

スタイルとの連携

テーマディレクトリ - static - style_library - スタイルファイルを配置

テーマを適用するとサポートディレクトリにスタイルファイルをコピー

mt:SupportDirectoryURL/theme_static/photolog/style_library

theme.yaml に追記base_css: style_library/base.css stylecatcher_libraries: photolog: url: '{{support}}theme_static/photolog/style_library/pico.html' label: Photolog Styles description_label: Photolog styles from Pico order: 1

スタイルで選択可能に

アップロード

$MT_HOME/themes/MyThemeclassic_websiteclassic_blogpico

config.yaml からの追加

$MT_HOME/addons/Community.pack/config.yaml

その他にも

•ウェブページの作成http://www.skyarc.co.jp/engineerblog/entry/mt5_1.html

• ブログの設定http://tec.toi-planning.net/mt-column/tips/mt5-1/

• 詳しくはMTDC大阪の後に！？

ウェブサイト管理

MT4 : ブログ起点のサイト設計

ブログ A

ブログ B ブログ C ブログ D

MT5 : 実際のサイト構造に合った設計

ウェブサイト

ブログA ブログ B

MT5のウェブサイト管理

Movable Type 4.x Movable Type 5

example.jpblog.example.jpwww.example.jp/blog

example.jpblog.example.jpwww.example.jp/blog

example.jp ウェブサイトブログ1

ブログ2

ブログ3

example.co.jpblog.example.co.jpwww.example.co.jp/blog

example.co.jpblog.example.co.jpwww.example.co.jp/blog

co.jp ウェブサイトブログ1

ブログ2

ブログ3

アップグレード時のウェブサイト自動作成

ウェブサイト内のコンテンツをポータルサイトでまとめて表示

Search Websitehttp://www.sixapart.com/

http://www.movabletype.com/

Search

<mt:MultiBlog include_blogs="children">

include_blogs モディファイア

• MTAssets• MTAuthors

• MTAuthorCommentResponses• MTAuthorComments

• MTBlogs• MTBlogPingCount• MTBlogCategoryCount• MTBlogCommentCount• MTBlogEntryCount• MTBlogPageCount

• MTCategories• MTComments• MTEntries

• MTEntryAssets• MTFolders• MTPages• MTTags

複数のブログを対象にできます。ブログ ID を列記 (カンマ区切り) して、対象のブログを指定します。all を指定すると、Movable Typeのすべてのブログを対象にします。childrenおよびsiblings を指定すると、そのブログが属するウェブサイト内のブログを対象にします。children はウェブサイトのコンテキストでウェブサイト内のブログを対象にし、siblings は、ブログのコンテキストで同一ウェブサイト内のブログを対象にします。

siteは非推奨

<mt:Entries include_blogs="children">    <$mt:Include module="ブログ記事の概要"$>

</mt:Entries>

ウェブサイトで、子供ブログの記事を表示

ブログで、同じウェブサイト内のブログの記事を表示<mt:Entries include_blogs="siblings">    <$mt:Include module="ブログ記事の概要"$>

</mt:Entries>

ウェブサイトのコンテンツも含める

<mt:Pages include_blogs="children" include_with_website= "1" ></mt:Pages>

詳しくはhttp://www.movabletype.jp/documentation/mt5/design/multiblog/

ウェブサイトの再構築トリガーの設定を忘れずに！

ウェブサイトとウェブページ関連の設定も追加されています

コンテンツ管理

カスタムフィールドの強化カテゴリやフォルダと連携

ドリンク フード

“ドリンク”用のカスタムフィールド

“ドリンク”フォルダ

“フード”用のカスタムフィールド

“フード”フォルダ

インポート・エクスポートに対応

1.記事の入力項目にカスタムフィールド追加

2. エクスポートファイルにコンテンツを追記

3. ファイルをインポートして、コンテントをまとめて取り込み

カタログサイトなど、大量のコンテンツを効率的に追加・管理

拡張できるオブジェクトの追加

新たに拡張可能な対象

• ウェブサイト• ブログ• コメント• テンプレート• アイテム

更新履歴の管理

カスタムフィールド

ブログ記事ウェブページテンプレート

更新履歴

任意のリビジョンへの復帰が可能

いつ、誰が、どのような変更をしたかを管理

本日のおすすめ ドリンク フード 注文

ブログ投稿者

メニューウェブページ管理者

ウェブサイト管理者

問い合わせ担当者

ユーザー ダッシュボード

権限のあるブログを表示

1クリック投稿

大規模なサイトも、分かりやすく安全に管理

システム

ウェブサイト

ブログ

ユーザーダッシュボード

サインイン

コンテンツ

制作者や運営者の知識・経験の蓄積

MT ユーザーテンプレート

テーマ

ウェブサイトのベスト・プラクティスを共有

テーマ

MT

コンテンツ

ユーザーウェブサイト

このプレゼンテーションはオンラインでhttp://www.slideshare.net/goodpic

すべてのウェブサイトにテーマを！

movabletype.jp