Movable Type 5のテーマ機能を活用する
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 4,293 views

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

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

Statistics

Views

Total Views
4,293
Views on SlideShare
4,234
Embed Views
59

Actions

Likes
1
Downloads
3
Comments
0

1 Embed 59

http://www.h-fj.com 59

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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