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




                         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
 「テンプレートセット」機能が追加
 テンプレートセットの組み込みは簡単
 テン...
テーマ機能の登場
Movable Type 5の新機能
テンプレートセット機能のバージョンアッ
プ的存在
サイトの構造を丸ごとパッケージ化
(テンプレート/カテゴリ/フォルダ/カ
スタムフィールド/ファイル)
管理画面上でテーマのエクスポート(...
テーマの仕組み

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


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




                     12
テーマの適用




         「適用」ボタン




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




                      14
テーマのエクスポート




             15
エクスポートの設定




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

  ブログのパス
             img
      ...
ファイルのエクスポート




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




                  19
テーマのファイル構造
   theme.yamlファイル
   templatesディレクトリ
        各種テンプレートファイル
  blog_staticディレクトリ
           画像等のファイル
設定ファイル(theme....
YAMLの基本
さまざまなデータ構造を記述できるテキ
ストファイル
XMLに比べて記法がシンプル
Movable TypeではYAMLを多用
   テーマの設定(theme.yaml)
   プラグインの基本情報(config.yaml)
YA...
theme.yamlの例
label: テーマ名
id: テーマのID
・・・
elements:
  template_set:
    ・・・
  default_categories:
    ・・・
  custom_fields
  ...
theme.yamlの基本構造
  テーマ全体の設定
  elements(テーマの各要素の設定)
エレメント名               内容
template_set         テンプレート
default_categories  ...
エクスポートではなくtheme.yamlの書き換
えでのみできること

 サムネイルの追加
 ウェブページの追加
 etc.




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




                       25
サムネイルの追加(2)
以下の3つのファイルを用意
     ファイル             サイズ
   thumb.png       400×300ピクセル
thumb-medium.png   240×180ピクセル
 thumb-s...
サムネイルを追加(3)
 theme.yamlに以下の3行を追加
label: テーマ名
id: テーマのID
・
・
・
thumbnail_file: thumb.png
thumbnail_file_medium: thumb-mediu...
ウェブページの追加(1)
お決まりのウェブページのひな形をテー
マに入れられる
 会社概要
 社長挨拶
 アクセス
 プライバシーポリシー
 特定商取引法に関する表示
テーマを適用した後にサイトにあわせて
内容を修正するだけ
         ...
ウェブページの追加(2)
 theme.yamlに「default_pages」のエレメ
 ントを追加
default_pages:
 importer: default_pages
 component: core
 name: Defaul...
ウェブページの追加(3)
          項目名          内容
title           タイトル
text            本文
text_more       続き
excerpt         概要
folde...
ウェブページの追加事例(1)

 以下の内容のウェブページを追加
      項目名               内容
ベースネーム      corporate
title       会社案内
text        弊社は・・・
    ...
ウェブページの追加事例(2)
default_pages:
 importer: default_pages
 component: core
 name: Default Pages
 data:
   corporate:
    titl...
テーマの活かし方




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




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



                  35
テーマの配布・販売
ECサイト用、不動産サイト用など、ある
程度作りこんだサイトを作成
テーマとしてエクスポート
エクスポートしたファイルをインターネット
等を通して配布・販売
事例:@style(http://atstyle.biz/)
MT...
プラグインと組み合わせたテーマ
プラグインと組み合わせてより強力な
テーマを作成可能
事例:書籍「Movable Type 5実践テク
ニック」
 メールフォームプラグインによるお問い合わ
 せフォーム
 検索(SearchEntries)プラ...
プラグインと組み合わせたテーマの例




    http://food.hippos.jp   38
HTML/CSS以外への展開
Movable Typeはテキストファイルなら何でも出
力できる
 例:XML、CSV、 JavaScript、SVG、etc.
Slidon(シックスアパート澤田氏によるプレゼン
テーション用テーマ)
InDes...
まとめ




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




                   42
Movable Typeコンテスト2010開催中




 テーマ部門の応募はごくわずか
 豪華商品(Adobe Creative Suite 5や
 iPad等)が手に入るかも?
 http://www.mtcontest.jp/
     ...
シックスアパート公式
地方コミュニティ支援プログラム
地方コミュニティ支援プログラムが近日スタート
MTDDC(Movable Type Designers and
Developers Conference)および勉強会に対
するシックスアパ...
「Movable Type 5 Webサイト製作ガイド
Volume 1&2」(PDF書籍)販売中




 http://www.h-fj.com/blog/mt5bookvol1/
 http://www.h-fj.com/blog/mt5...
本日ご来場の皆様への特典




 2,500円      3,000円

 2,300円      2,700円
 CD-ROMをお持ち帰りいただけます
                      46
テーマの作成については、
Volume 2の中で詳細に
解説しています。




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




                 48
Upcoming SlideShare
Loading in …5
×

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

3,591
-1

Published on

Movable Type 5のテーマ機能の基本や、その活用について解説しています。

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,591
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. Movable Type 5の テーマ機能を活用する 藤本 壱 2010.8.7 第8回Creatorz×第2回広島MT学会 1
  2. 2. 今日のアジェンダ 自己紹介 テーマの適用とエクスポート Theme.yamlファイルの書き換えによる 機能追加 テーマの活かし方 まとめ 2
  3. 3. 本日の連絡事項 録音/写真撮影/動画撮影等はご自由 に 本日のスライドは近日中にslideshare (http://www.slideshare.net)にて公開 3
  4. 4. 自己紹介 4
  5. 5. 自己紹介 藤本 壱(ふじもと はじめ) フリーライター(PC関連、マネー関連) 2004年11月よりMovable Typeを利用 Movable Type関連の書籍を複数執筆 5
  6. 6. 自己紹介 群馬県から来ました 6
  7. 7. ブログやってます The Blog of H.Fujimoto http://www.h-fj.com/blog/ 7
  8. 8. テーマの適用とエクスポート 8
  9. 9. テンプレート入れ替えが面倒だっ たかつてのMT Movable Type 3.x テンプレートは手作業で入れ替え 非常に面倒 Movable Type 4.x 「テンプレートセット」機能が追加 テンプレートセットの組み込みは簡単 テンプレートセット自体はプラグイン →作成するのにスキルが必要 9
  10. 10. テーマ機能の登場 Movable Type 5の新機能 テンプレートセット機能のバージョンアッ プ的存在 サイトの構造を丸ごとパッケージ化 (テンプレート/カテゴリ/フォルダ/カ スタムフィールド/ファイル) 管理画面上でテーマのエクスポート(書 き出し)が可能 10
  11. 11. テーマの仕組み テーマ テンプレート 適用 カテゴリ ウェブサイト フォルダ ブログ カスタムフィールド エクスポート ファイル 11
  12. 12. テーマの適用 テーマのファイルをMTの「themes」ディ レクトリ以下にアップロード 「デザイン」→「テーマ」メニューを選ぶ 使いたいテーマを選んで「適用」ボタンを クリック 12
  13. 13. テーマの適用 「適用」ボタン 13
  14. 14. テーマのエクスポート 現在使用中のテンプレート等をテーマに エクスポート可能 「ツール」→「テーマのエクスポート」メ ニューを選択 エクスポートする内容を設定 14
  15. 15. テーマのエクスポート 15
  16. 16. エクスポートの設定 16
  17. 17. ファイルのエクスポート ブログ(ウェブサイト)のパスを基準にファ イルがあるディレクトリ名を指定 例:ブログのパスにある「img」「js」ディレクトリ のファイルをエクスポート ブログのパス img js 17
  18. 18. ファイルのエクスポート 18
  19. 19. theme.yamlファイルの 書き換えによる機能追加 19
  20. 20. テーマのファイル構造 theme.yamlファイル templatesディレクトリ 各種テンプレートファイル blog_staticディレクトリ 画像等のファイル 設定ファイル(theme.yaml)を書き換えて 機能を追加できる 20
  21. 21. YAMLの基本 さまざまなデータ構造を記述できるテキ ストファイル XMLに比べて記法がシンプル Movable TypeではYAMLを多用 テーマの設定(theme.yaml) プラグインの基本情報(config.yaml) YAMLの詳細は以下のWebページを参 照 http://jp.rubyist.net/magazine/?0009-YAML 21
  22. 22. theme.yamlの例 label: テーマ名 id: テーマのID ・・・ elements: template_set: ・・・ default_categories: ・・・ custom_fields ・・・ 22
  23. 23. theme.yamlの基本構造 テーマ全体の設定 elements(テーマの各要素の設定) エレメント名 内容 template_set テンプレート default_categories カテゴリ default_folders フォルダ custom_fields カスタムフィールド blog_static_files ファイル default_pages ウェブページ 23
  24. 24. エクスポートではなくtheme.yamlの書き換 えでのみできること サムネイルの追加 ウェブページの追加 etc. 24
  25. 25. サムネイルの追加(1) テーマにはサムネイルを設定可能 エクスポート直後のテーマにはサムネイルは ない 25
  26. 26. サムネイルの追加(2) 以下の3つのファイルを用意 ファイル サイズ thumb.png 400×300ピクセル thumb-medium.png 240×180ピクセル thumb-small.png 120×90ピクセル theme.yamlファイルと同じディレクトリに アップロード 26
  27. 27. サムネイルを追加(3) theme.yamlに以下の3行を追加 label: テーマ名 id: テーマのID ・ ・ ・ thumbnail_file: thumb.png thumbnail_file_medium: thumb-medium.png thumbnail_file_small: thumb-small.png ・ 27
  28. 28. ウェブページの追加(1) お決まりのウェブページのひな形をテー マに入れられる 会社概要 社長挨拶 アクセス プライバシーポリシー 特定商取引法に関する表示 テーマを適用した後にサイトにあわせて 内容を修正するだけ 28
  29. 29. ウェブページの追加(2) theme.yamlに「default_pages」のエレメ ントを追加 default_pages: importer: default_pages component: core name: Default Pages data: ウェブページのベースネーム: 項目名: 値 項目名: 値 … ウェブページのベースネーム: 項目名: 値 項目名: 値 … 29
  30. 30. ウェブページの追加(3) 項目名 内容 title タイトル text 本文 text_more 続き excerpt 概要 folder フォルダ tags タグ status 公開状態 30
  31. 31. ウェブページの追加事例(1) 以下の内容のウェブページを追加 項目名 内容 ベースネーム corporate title 会社案内 text 弊社は・・・ ○○をモットーに・・・ folder corporate tags @corporate 31
  32. 32. ウェブページの追加事例(2) default_pages: importer: default_pages component: core name: Default Pages data: corporate: title: 会社案内 text: | 弊社は・・・ ○○をモットーに・・・ folder: corporate tags: @corporate 32
  33. 33. テーマの活かし方 33
  34. 34. テスト環境から本番環境への移行 テストサイトを作成 テストサイトのテンプレート等をテーマに エクスポート 本番環境にテーマを適用 コンテンツを投入して公開 34
  35. 35. ひな形となるテーマの再利用 テンプレート等のひな形を作成 ひな形をテーマにエクスポート サイト製作開始時にひな形のテーマを適 用 テンプレート等をカスタマイズして実際の サイトに合わせる 35
  36. 36. テーマの配布・販売 ECサイト用、不動産サイト用など、ある 程度作りこんだサイトを作成 テーマとしてエクスポート エクスポートしたファイルをインターネット 等を通して配布・販売 事例:@style(http://atstyle.biz/) MT5用有償テーマを30種類販売中 36
  37. 37. プラグインと組み合わせたテーマ プラグインと組み合わせてより強力な テーマを作成可能 事例:書籍「Movable Type 5実践テク ニック」 メールフォームプラグインによるお問い合わ せフォーム 検索(SearchEntries)プラグインによる検索 フォーム etc. 37
  38. 38. プラグインと組み合わせたテーマの例 http://food.hippos.jp 38
  39. 39. HTML/CSS以外への展開 Movable Typeはテキストファイルなら何でも出 力できる 例:XML、CSV、 JavaScript、SVG、etc. Slidon(シックスアパート澤田氏によるプレゼン テーション用テーマ) InDesignの組版用データをMTで出力(ワン ソースでWebでのカタログと紙ベースのカタロ グの両方を出力) アルファサード有限会社の電子出版ソリュー ション「ePublisher」 39
  40. 40. まとめ 40
  41. 41. まとめ テーマの適用とエクスポート テーマはMovable Type 5の新機能 適用/エクスポートとも管理画面で theme.yamlファイルの書き換えによる機 能追加 サムネイル ウェブページ テーマの活かし方 テーマの活かし方はいろいろある 41
  42. 42. Few more things… 42
  43. 43. Movable Typeコンテスト2010開催中 テーマ部門の応募はごくわずか 豪華商品(Adobe Creative Suite 5や iPad等)が手に入るかも? http://www.mtcontest.jp/ 43
  44. 44. シックスアパート公式 地方コミュニティ支援プログラム 地方コミュニティ支援プログラムが近日スタート MTDDC(Movable Type Designers and Developers Conference)および勉強会に対 するシックスアパートからの公式支援 MTDDC地方版第1弾が福島で開催 広島でもぜひ 詳細は「http://groups.google.com/group/mt- study-society?hl=ja」にて 44
  45. 45. 「Movable Type 5 Webサイト製作ガイド Volume 1&2」(PDF書籍)販売中 http://www.h-fj.com/blog/mt5bookvol1/ http://www.h-fj.com/blog/mt5bookvol2/ 45
  46. 46. 本日ご来場の皆様への特典 2,500円 3,000円 2,300円 2,700円 CD-ROMをお持ち帰りいただけます 46
  47. 47. テーマの作成については、 Volume 2の中で詳細に 解説しています。 47
  48. 48. ご清聴ありがとうございました 48
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×