Movable Type 5のテーマ機能を活用する

Movable Type 5のテーマ機能を活用する藤本壱 2010.8.7 第8回Creatorz×第2回広島ＭＴ学会 1

今日のアジェンダ自己紹介テーマの適用とエクスポート Theme.yamlファイルの書き換えによる機能追加テーマの活かし方まとめ 2

本日の連絡事項録音／写真撮影／動画撮影等はご自由に本日のスライドは近日中にslideshare （http://www.slideshare.net)にて公開 3

自己紹介 4

自己紹介藤本壱（ふじもとはじめ）フリーライター(PC関連、マネー関連) 2004年11月よりMovable Typeを利用 Movable Type関連の書籍を複数執筆 5

自己紹介群馬県から来ました 6

ブログやってます The Blog of H.Fujimoto http://www.h-fj.com/blog/ 7

テーマの適用とエクスポート 8

テンプレート入れ替えが面倒だったかつてのMT Movable Type 3.x テンプレートは手作業で入れ替え非常に面倒 Movable Type 4.x 「テンプレートセット」機能が追加テンプレートセットの組み込みは簡単テンプレートセット自体はプラグイン →作成するのにスキルが必要 9

テーマ機能の登場 Movable Type 5の新機能テンプレートセット機能のバージョンアップ的存在サイトの構造を丸ごとパッケージ化（テンプレート／カテゴリ／フォルダ／カスタムフィールド／ファイル）管理画面上でテーマのエクスポート（書き出し）が可能 10

テーマの仕組みテーマテンプレート適用カテゴリウェブサイトフォルダブログカスタムフィールドエクスポートファイル 11

テーマの適用テーマのファイルをMTの「themes」ディレクトリ以下にアップロード「デザイン」→「テーマ」メニューを選ぶ使いたいテーマを選んで「適用」ボタンをクリック 12

テーマの適用「適用」ボタン 13

テーマのエクスポート現在使用中のテンプレート等をテーマにエクスポート可能「ツール」→「テーマのエクスポート」メニューを選択エクスポートする内容を設定 14

テーマのエクスポート 15

エクスポートの設定 16

ファイルのエクスポートブログ（ウェブサイト）のパスを基準にファイルがあるディレクトリ名を指定例：ブログのパスにある「img」「js」ディレクトリのファイルをエクスポートブログのパス img js 17

ファイルのエクスポート 18

theme.yamlファイルの書き換えによる機能追加 19

テーマのファイル構造 theme.yamlファイル templatesディレクトリ各種テンプレートファイル blog_staticディレクトリ画像等のファイル設定ファイル（theme.yaml）を書き換えて機能を追加できる 20

YAMLの基本さまざまなデータ構造を記述できるテキストファイル XMLに比べて記法がシンプル Movable TypeではYAMLを多用テーマの設定（theme.yaml）プラグインの基本情報（config.yaml） YAMLの詳細は以下のWebページを参照 http://jp.rubyist.net/magazine/?0009-YAML 21

theme.yamlの例 label: テーマ名 id: テーマのID ・・・ elements: template_set: ・・・ default_categories: ・・・ custom_fields ・・・ 22

theme.yamlの基本構造テーマ全体の設定 elements（テーマの各要素の設定）エレメント名内容 template_set テンプレート default_categories カテゴリ default_folders フォルダ custom_fields カスタムフィールド blog_static_files ファイル default_pages ウェブページ 23

エクスポートではなくtheme.yamlの書き換えでのみできることサムネイルの追加ウェブページの追加 etc. 24

サムネイルの追加(1) テーマにはサムネイルを設定可能エクスポート直後のテーマにはサムネイルはない 25

サムネイルの追加(2) 以下の3つのファイルを用意ファイルサイズ thumb.png 400×300ピクセル thumb-medium.png 240×180ピクセル thumb-small.png 120×90ピクセル theme.yamlファイルと同じディレクトリにアップロード 26

サムネイルを追加(3) theme.yamlに以下の3行を追加 label: テーマ名 id: テーマのID ・・・ thumbnail_file: thumb.png thumbnail_file_medium: thumb-medium.png thumbnail_file_small: thumb-small.png ・ 27

ウェブページの追加(1) お決まりのウェブページのひな形をテーマに入れられる会社概要社長挨拶アクセスプライバシーポリシー特定商取引法に関する表示テーマを適用した後にサイトにあわせて内容を修正するだけ 28

ウェブページの追加(2) theme.yamlに「default_pages」のエレメントを追加 default_pages: importer: default_pages component: core name: Default Pages data: ウェブページのベースネーム: 項目名: 値項目名: 値 … ウェブページのベースネーム: 項目名: 値項目名: 値 … 29

ウェブページの追加(3) 項目名内容 title タイトル text 本文 text_more 続き excerpt 概要 folder フォルダ tags タグ status 公開状態 30

ウェブページの追加事例(1) 以下の内容のウェブページを追加項目名内容ベースネーム corporate title 会社案内 text 弊社は・・・ ○○をモットーに・・・ folder corporate tags @corporate 31

ウェブページの追加事例(2) default_pages: importer: default_pages component: core name: Default Pages data: corporate: title: 会社案内 text: | 弊社は・・・ ○○をモットーに・・・ folder: corporate tags: @corporate 32

テーマの活かし方 33

テスト環境から本番環境への移行テストサイトを作成テストサイトのテンプレート等をテーマにエクスポート本番環境にテーマを適用コンテンツを投入して公開 34

ひな形となるテーマの再利用テンプレート等のひな形を作成ひな形をテーマにエクスポートサイト製作開始時にひな形のテーマを適用テンプレート等をカスタマイズして実際のサイトに合わせる 35

テーマの配布・販売 ECサイト用、不動産サイト用など、ある程度作りこんだサイトを作成テーマとしてエクスポートエクスポートしたファイルをインターネット等を通して配布・販売事例：@style（http://atstyle.biz/） MT5用有償テーマを30種類販売中 36

プラグインと組み合わせたテーマプラグインと組み合わせてより強力なテーマを作成可能事例：書籍「Movable Type 5実践テクニック」メールフォームプラグインによるお問い合わせフォーム検索（SearchEntries）プラグインによる検索フォーム etc. 37

プラグインと組み合わせたテーマの例 http://food.hippos.jp 38

HTML／CSS以外への展開 Movable Typeはテキストファイルなら何でも出力できる例：XML、CSV、 JavaScript、SVG、etc. Slidon（シックスアパート澤田氏によるプレゼンテーション用テーマ） InDesignの組版用データをMTで出力（ワンソースでWebでのカタログと紙ベースのカタログの両方を出力）アルファサード有限会社の電子出版ソリューション「ePublisher」 39

まとめ 40

まとめテーマの適用とエクスポートテーマはMovable Type 5の新機能適用／エクスポートとも管理画面で theme.yamlファイルの書き換えによる機能追加サムネイルウェブページテーマの活かし方テーマの活かし方はいろいろある 41

Few more things… 42

Movable Typeコンテスト2010開催中テーマ部門の応募はごくわずか豪華商品（Adobe Creative Suite 5や iPad等）が手に入るかも？ http://www.mtcontest.jp/ 43

シックスアパート公式地方コミュニティ支援プログラム地方コミュニティ支援プログラムが近日スタート MTDDC（Movable Type Designers and Developers Conference）および勉強会に対するシックスアパートからの公式支援 MTDDC地方版第1弾が福島で開催広島でもぜひ詳細は「http://groups.google.com/group/mt- study-society?hl=ja」にて 44

「Movable Type 5 Webサイト製作ガイド Volume 1&2」(PDF書籍)販売中 http://www.h-fj.com/blog/mt5bookvol1/ http://www.h-fj.com/blog/mt5bookvol2/ 45

本日ご来場の皆様への特典 2,500円 3,000円 2,300円 2,700円 CD-ROMをお持ち帰りいただけます 46

テーマの作成については、 Volume 2の中で詳細に解説しています。 47

ご清聴ありがとうございました 48

Movable Type 5のテーマ機能を活用する

by Hajime Fujimoto on Aug 07, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 30

Statistics

Movable Type 5のテーマ機能を活用する — Presentation Transcript