2016年6月10日 MT SAGA のハンズオンセミナーで使用した資料です。

1. 【MT Saga】
Movable Type ハンズオンセミナー
2016年6月10日
シックス・アパート株式会社
長内 毅志

2. 自己紹介
–2011年～ Movable Typeプロダクトマネージャー
–2014年～ ディベロッパーリレーションマネージャー
エバンジェリスト
–趣味 ダンス (ストリート、ジャズ)
ジョギング (サブフォー)
英語の勉強 (TOEIC 875, 英検準1級)
家族と過ごすこと

3. まず最初に
–アカウント情報を元に、アクセスできるか確認しましょう

4. アジェンダ
• Movable Type の特徴
• 環境構築に関する参考情報
• 管理画面と基本操作
• Movable Type のテンプレート
• テーマを作成する

5. Movable Type の特徴

6. •14年以上使われているパブリッシングプラットフォー
ム
Movable Type（ムーバブル・タイプ）とは
2001年 2015年
Movable Type 1.0 Movable Type 6.2
サンフランシスコのシックス・アパー
ト創業者夫妻が自分たちの日記を書く
ために開発したブログツール
国内導入実績 ナンバー１。ウェブに
とどまらないコンテンツ管理が可能な
CMSソフトウェアとして進化中。
Movable Type とは

7. •ブログから数万ページに及び大規模サイトまで
5万件以上の導入実績
ECサイト
イントラサイト・WEB社内報
メディアサイト・企業オウンドメディア
会員制サイト・コミュニティサイト
実績
コーポレートサイト
5万件以上の導入実績

8. ビジネスユーザーに絶大な支持
•日経平均225社の半分以上がMTユーザー
•国内導入企業は5万件超

9. わかりやすい編集画面 機能
S
C編集画面
•リッチテキストエディタで編集・投稿

10. 記事の履歴管理・自動保存 機能
S
C記事の履歴管理
•誰がいつ記事を変更したかの履歴を保存
•過去バージョンへのロールバックも可能

11. 記事の履歴管理・自動保存 機能
S
C記事の自動保存
•編集中のデータを自動保存

12. カスタムフィールドで入力項目の拡張 機能
S
Cカスタムフィールド
•投稿画面の入力項目を拡張
–テキスト
–ラジオボタン
–チェックボックス
–etc

13. Movable Type 6.2 で強化されたアイテム管理・編集機能 機能
S
Cアイテム管理
•マルチアップロード
•編集機能
•エディタ機能
•日本語ファイル名の自動変換
•画像の品質指定

14. テンプレートを利用・保存 機能
S
Cテーマ機能
•デザインテンプレートを保存・交換
•カスファムフィールドもまとめて設定

15. 公式iOSアプリ Movable Type for iOS 機能
S
CiOS対応アプリ

16. 技術的な特徴

17. Movable Typeとは
• 10年以上利用されているブログ・CMS(通称MT)
• MTタグ組み合わせでロジック生成
• テンプレートとDBが完全に分離している
(MVCライク)
• プラグインで拡張可能
• どんなコードも生成可能

18. 最新10件のブログ記事をリンク付きで生成
<ul>
<MT:Entries limit="10">
<li>
<a href="<MT:EntryPermalink>">
<MT:EntryTitle>
</a>
</li>
</MT:Entries>
</ul>

19. 特徴1
•静的生成でhtmlを出力
(スタティックパブリッシング)
•動的生成も対応可能
(ダイナミックパブリッシング)

20. •動的、静的生成どちらも対応することで、様々なサー
バー構成に対して柔軟に対応できる

21. 基本的な構成
公開サーバー兼
CMSサーバー
管理者
閲覧者
(サイト訪問者)

22. ステージング環境
ステージング
サーバー兼
CMSサーバー
公開
サーバー
管理者 閲覧者
(サイト訪問者)

23. 冗長構成
CMS
サーバー
公開
サーバー
（冗長構成）
ロード
バランサ

24. クラウド環境
–CMSサーバーをVMイメージで構築(Amazon EC2など)
–公開ページはコンテンツサーバーで構築
–AmazonS3 (Azure Webサイト) など
VMサーバー
AmazonEC2など
Amazon S3など

25. CDNを利用した構成
–CMSサーバーはVMイメージ n個で冗長構成
–公開コンテンツをストレージサーバーへ出力
–CDNを利用して世界各地にキャッシュ
DBサーバー
CDNサーバー

26. 特徴2
•柔軟なテンプレートタグ
–四則計算なども可能
•Data API でデータを利用することが可能
–データはJSON形式で出力、RESTで取得可能
–独自アプリも開発可能

27. Data APIを利用したアプリ例:Movable Type Writer

28. Data API を利用したアプリ例:Movable Type for iOS

29. 特徴3
•中小企業から中-大規模企業、官公庁まで幅広い導
入実績

30. 事例集
•http://www.sixapart.jp/business

31. Movable Typeの管理画面と
基本操作

32. 管理画面

33. ウェブサイトとブログの違い
• ウェブサイト…
「サイト」「ホームページ」全体を管理する仕組み
• ブログ…
ウェブサイトの中にある、更新頻度の高いコンテンツを管理する仕組み
「ブログ」「ニュースリリース」「IR情報」
「新製品紹介」など
参考リンク3：
http://www.movabletype.jp/documentation/mt6/websites/

34. 1つのWebサイトを構成する例

35. 複数のWebサイトを構成する例

36. ダッシュボード

37. 記事の作成
記事 => 新規、もしくは新規作成

38. ハンズオン
•最初の記事を投稿してみましょう

40. ハンズオン
•以下のデータをMTにインポートしてみましょう
•https://goo.gl/VRErKo
•ブラウザからローカルに保存して、インストールを行
います
•もしくはテキストデータをエディタにコピーして保存し
ます

41. データのインポート
ツール => 記事のインポート

42. Movable Type の
テンプレート

43. テンプレートとは
•Movable Typeのデータベースに保存されている各種
のデータを、htmlとして出力するための仕組み

44. DBのオブジェクトをタグで出力
<MTEntryTitle>
<MTEntryBody>
<MTEntryMore>

45. MTタグの実際

48. ハンズオン
•Movable Type のテンプレートを確認しましょう
デザイン => テンプレート

49. テンプレートの説明
• インデックステンプレート
–自由にどこでも単一ページを出力
• アーカイブテンプレート
–特定のルールに従い複数ページを出力
• テンプレートモジュール
–パーツ化して様々な形で共有使用
• システムテンプレート
–付属システムの出力部分を調整

50. インデックステンプレート
•ブログ・ウェブサイト全体に関わるファイルを扱うテン
プレート
•サイトに一つしか存在しないファイルを扱う事が多い
例:CSS, JavaScript, トップページなど

51. アーカイブテンプレート
• 更新ごとに増加するデータページをまとめるテンプレート。
• 出力ルールを設定できる(カテゴリ一覧ページを作る、月別
ページを作る、など)
• 1テンプレートで複数の種類のファイルを出力できる

52. テンプレートモジュール
•様々なテンプレートで共通して使う、部品のためのテ
ンプレート
•ヘッダーやフッターなど、全ページ共通で使用する場
合に使う

53. システムテンプレート
•コメントのプレビューや検索画面など、特定の画面の
デザインを設定するためのテンプレート。
•MTのインタラクティブページを管理する
•「ブログ」構築以外の場面では、使用頻度は高くない
かも

54. ウィジェット
• サイドバーなどで利用するコンテンツを細かく部品化し、管理画面
上でドラッグ・アンド・ドロップして管理できるもの。
• テンプレートモジュール以上に、細かいパーツを管理
• 昔はブログパーツなどによく使われていました

55. ハンズオン
•トップページの記事件数を、5件に変更してみましょう

56. •設定 => 投稿 => 表示される記事数

57. • デザイン => テンプレート =>
インデックステンプレート => メインページ
• <mt:Entries limit="5" search_results="1">
–値を5に変更

58. タグの書き方
•下記のどれでもOK
–<$MTEntryTitle$>
–<MTEntryTitle>
–<mt:entrytitle>
–<MT:EntryTitle />

59. ハンズオン
• テンプレートモジュール => 記事の概要 3行目付近
<$mt:EntryTitle$>を、以下のように書き換えてみましょう
– <$MTEntryTitle$>
– <mt:EntryTitle>
• 書き換えたら、保存=>再構築を行い、出力データを確認してみまし
ょう

60. ハンズオン
• トップページの記事一覧を、タイトルだけの表示に変えてみましょう
。
• 成功したら、元に戻しておきましょう

61. 解説
• デザイン => テンプレート =>
モジュールテンプレート => 記事の概要
<MTIgnore>
<div class="asset-content entry-content" itemprop="articleBody">
<$mt:EntryBody$>
</div>
<div class="entry-more-link">
<a href="<$mt:EntryPermalink encode_html="1"$>"
itemprop="url">ブログ記事を読む</a>
</div>
</MTIgnore>

62. ハンズオン
•記事数を合計して
–10以上ある場合は「記事数:10件以上」
–10未満の場合は「記事数:10件未満」
と表示してみましょう
(条件分岐)

63. • <div id="index-main" class="main" role="main">
<MTSetVars>
num=<MTBlogEntryCount>
</MTSetVars>
<MTIf name=“num” ge=“3”>
記事数3件以上
<MTElse>
記事数:3件未満
</MTIf>

64. リファレンス
•タグリファレンス
–http://goo.gl/CDlmDI
•変数の定義
–http://goo.gl/crKTYI
•条件分岐
–http://goo.gl/2hU5Ux

65. ハンズオン
•テンプレートを利用して以下の計算をしてみましょう
–10+3
–10-3
–10x3
–10÷3

66. <MTSetVar name="first" value="10">
<MTGetVar name="first" value="3" op="+">
<MTGetVar name="first" value="3" op="-">
<MTGetVar name="first" value="3" op="*">
<MTGetVar name="first" value="3" op="/">

67. リファレンス
•変数の初期値に対して、valueモディファイアとopモデ
ィファイアで計算
•MTタグで利用できる演算関数
–http://www.movabletype.jp/documentation/mt6/design/templat
es/calculation.html

68. ハンズオン
•記事データ内にある「宝石」という単語を、すべて「ほ
うせき」とひらがなに置換しましょう

69. •記事編集画面の右上にある検索ボタンから「宝石」を
検索

70. 検索・置換画面から文字を置換

71. •検索、置換は様々なデータに対応
–(記事、ウェブページ、テンプレート、コメントなど)

72. Movable Typeのテーマを
作成する

73. テーマについての説明
•テーマとは
–デザインなどをワンクリックで変更する仕組み
–カスタムフィールドなどもまとめて設定できる

74. 画面
•デザイン => テーマ

75. ハンズオン
•テーマを変えてみましょう
–「Eiger」を選んで適用してみましょう
–再構築後、デザインを確認してみましょう
–確認後、テーマ「Rainier」を選んでデザインを変えましょう

77. ハンズオン
•ハンズオン用テーマをインストールしてみましょう

78. • デザイン => テーマ から
ハンズオン用テーマを適用する

79. テーマ画像

80. ハンズオン
•トップページの記事一覧を、最新5件表示するように
変更してみましょう。

81. 解説

82. タイトル
• テンプレート => インデックス => メインページ
<article>
<h2>Introduction to respo </h2>
=>
<article>
<h2><MTEntryTitle></h2>

83. 日付と著者名
<div class="article-info">Posted on 2013/05/14 by Joe
Bloggs</div>
<div class=“article-info”>Posted on
<MTEntryDate format=“%Y/%m/%d”>
by <MTAuthorName></div>

84. 参考情報
•日付に関するテンプレートのモディファイヤ
• http://www.movabletype.jp/documentation/appendices/date-formats.html

85. 本文
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod ……</p>
=>
<p><MTEntryBody></p>

86. 続きを見る(Read More)
<a href="#" class="button">Read more</a>
=>
<a href=“<MTEntryPermaLink>" class="button">Read more</a>

87. ループ処理
<section id="content">
<MTEntries limit=“5”>
<article>
先ほど修正したコード
</article>
</MTEntries>
</section>

88. ハンズオン
•ブログの記事詳細を見れるようにしましょう。

89. 変更場所

90. タイトル
• テンプレート => アーカイブテンプレート
=> 記事
<article>
<h2>Introduction to respo </h2>
=>
<article>
<h2><MTEntryTitle></h2>

91. 日付と著者名
<div class="article-info">Posted on 2013/05/14 by Joe
Bloggs</div>
<div class="article-info">Posted on
<MTEntryDate format=“%Y/%m/%d”>
by <MTAuthorName></div>

92. 本文
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod ……</p>
=>
<p>
<MTEntryBody>
<MTEntryMore>
</p>

93. ハンズオン
•ブログのタイトル名を変更しましょう

95. • テンプレート => インデックス => メインページ
• テンプレート => アーカイブテンプレート
=> 記事
<h1><a href="<mt:BlogURL>">CompanyName</a></h1>
=>
<h1><a href="<mt:BlogURL>“><MTBlogName></a></h1>

96. ハンズオン
•<head>内の<title>を修正しておきましょう。

97. • テンプレート => インデックス => メインページ
<title>respo - Free CSS Template by ZyPOP</title>
=>
<title><MTBlogName></title>

98. • テンプレート => アーカイブテンプレート
=> 記事
<title>respo - Free CSS Template by ZyPOP</title>
=>
<title><MTEntryTitle> - <MTBlogName></title>

99. ハンズオン
•すべての修正が終わったら、全体を再構築してみま
しょう
•ブログデザイン、記事共に正常に見えていますか？

100. ハンズオン
•ブログの記事を数件、適当に入力してみましょう
•意図通りにトップページ、記事ページが作成されてい
ますか？

101. ハンズオン
•今回作成したテーマを、名前をつけて保存しておきま
しょう。

102. •ツール => テーマのエクスポート

103. 解説
•出力方式を「テーマディレクトリのインストール」として
保存してみましょう
•テーマが新しく選択できるようになっていますか？

104. 解説
•「zip形式アーカイブでダウンロード」を選び、ローカル
にダウンロードしてみましょう
•ダウンロードしたテーマは、他のMovable Type でも
使えます。