20141119 Movable Type HandsOn Seminar

2014年11月19日シックス・アパート株式会社

長内 毅志

Movable Type ハンズオンセミナー

•長内毅志

–2011年～ Movable Typeプロダクトマネージャー

–2014年～ ディベロッパーリレーションマネージャー

–ダンス、ジョギング、家族が大好きです。

まず最初に

–アカウント情報を元に、アクセスできるか確認しまし

ょう。

Movable Type

–FTP

アジェンダ

•Movable Type の特徴

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

•Movable Type のテンプレート

•Movable Type のテーマを作成する

•Movable Type クラウド版

Movable Type の特徴

Movable Typeとは

• 10年以上利用されているブログ・CMS(通称MT)

• MTタグ組み合わせでロジック生成

• テンプレートとDBが完全に分離している

(MVCライク)

• プラグインで拡張可能

• どんなコードも生成可能

最新10件のブログ記事をリンク付きで生成

<ul> <MT:Entries limit="10"> <li>

<a href="<MT:EntryPermalink>"><MT:EntryTitle>

</a></li>

</MT:Entries> </ul>

特徴1

•静的生成でhtmlを出力

(スタティックパブリッシング)

•動的生成も対応可能

(ダイナミックパブリッシング)

•動的、静的生成どちらも対応することで、

様々なサーバー構成に対して柔軟に対応

できる

基本的な構成

公開サーバー兼CMSサーバー

管理者

閲覧者(サイト訪問者)

ステージング環境

ステージングサーバー兼

CMSサーバー

公開サーバー

管理者 閲覧者(サイト訪問者)

冗長構成

CMSサーバー

公開サーバー

（冗長構成）

ロードバランサ

クラウド環境

–CMSサーバーをVMイメージで構築(Amazon EC2な

ど)

–公開ページはコンテンツサーバーで構築

–AmazonS3 (Azure Webサイト) など

VMサーバーAmazonEC2など

Amazon S3など

CDNを利用した構成

–CMSサーバーはVMイメージ n個で冗長構成

–公開コンテンツをストレージサーバーへ出力

–CDNを利用して世界各地にキャッシュ

DBサーバー

CDNサーバー

特徴2

•柔軟なテンプレートタグ

–四則計算なども可能

•Data API で拡張可能

–データはJSON形式で出力、RESTで取得可能

特徴3

•中小企業から中-大規模企業、官公庁まで

幅広い導入実績

Movable Typeの管理画面と

基本操作

管理画面

ウェブサイトとブログの違い

• ウェブサイト…

「サイト」「ホームページ」全体を管理する仕組み

• ブログ…

ウェブサイトの中にある、更新頻度の高いコンテンツを管理

する仕組み

「ブログ」「ニュースリリース」「IR情報」

「新製品紹介」など

参考リンク3：http://www.movabletype.jp/documentation/mt6/websites/

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

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

ウェブページとブログ事の違い

• 記事…時間の経過と共に蓄積されるページ

例:日記、ニュースリリースなど

• ウェブページ…時間の経過と関係なく、階層構

造に従い情報を伝えるためのページ

例:会社概要、組織図、会社地図など

参考リンク4：http://www.movabletype.jp/documentation/mt6/compose/

ダッシュボード

記事の作成

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

•http://www.movabletype.jp/documentatio

n/mt6/menu/

ハンズオン

•最初の記事を投稿してみましょう

ハンズオン

•以下のデータをMTにインポートしてみまし

ょう

•http://goo.gl/MROcIK

•ブラウザからローカルに保存して、インスト

ールを行います

データのインポート

ツール => 記事のインポート

Movable Type の

テンプレート

テンプレートとは

•Movable Typeのデータベースに保存され

ている各種のデータを、htmlとして出力す

るための仕組み

DBのオブジェクトをタグで出力

<MTEntryTitle>

<MTEntryBody>

<MTEntryMore>

データベースを見てみましょう

•DEMO

MTタグの実際

テンプレートの説明

• インデックステンプレート

–自由にどこでも単一ページを出力

• アーカイブテンプレート

–特定のルールに従い複数ページを出力

• テンプレートモジュール

–パーツ化して様々な形で共有使用

• システムテンプレート

–付属システムの出力部分を調整

テーマについての説明

•テーマとは

–デザインなどをワンクリックで変更する仕組み

–カスタムフィールドなどもまとめて設定できる

画面

•デザイン => テーマ

ハンズオン

•テーマを変えてみましょう

–「Eiger」を選んで適用してみましょう

–再構築後、デザインを確認してみましょう

–確認後、テーマ「Rainier」を選んでデザインを変えま

しょう

テンプレート

デザイン => テンプレート

ハンズオン

•トップページの記事件数を、5件に変更して

みましょう

• デザイン => テンプレート =>

インデックステンプレート => メインページ

• <mt:Entries limit="5" search_results="1">

–値を5に変更

ハンズオン

•トップページの記事一覧を、タイトルだけの

表示に変えてみましょう。

•成功したら、元に戻しておきましょう

解説

• <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>

ハンズオン

•トップページ記事一覧を「です。」を、スギち

ゃん風に「だぜぇ。」に変換してみましょう。(

少古)

解説

デザイン => テンプレート =>

インデックステンプレート => メインページ

<mt:Entries limit=“$entries_per_page”

search_results=“1”

replace=“です。”,”だぜぇ。”>

グローバルモディファイア

•出力結果をある規則に沿って修正する仕

組み

•Replace モディファイア

http://www.movabletype.jp/documentation/appendices/modi

fiers/replace.html

ハンズオン

•記事数を合計して

–10以上ある場合は「記事数:10件以上」

–10未満の場合は「記事数:10件未満」

と表示してみましょう

(条件分岐)

• <div id="index-main" class="main" role="main">

<MTSetVarBlock name=“num”>

<MTBlogEntryCount></MTSetVarBlock>

<MTIf name=“num” ge=“10”>

記事数:10件以上

<MTElse>

記事数:10件未満

</MTIf>

リファレンス

•タグリファレンス

–http://goo.gl/CDlmDI

•変数の定義

–http://goo.gl/crKTYI

•条件分岐

–http://goo.gl/2hU5Ux

ハンズオン

•テンプレートを利用して以下の計算をして

みましょう

–10+3

–10-3

–10x3

–10÷3

<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="/">

リファレンス

•変数の初期値に対して、valueモディファイ

アとopモディファイアで計算

•MTタグで利用できる演算関数

–http://www.movabletype.jp/documentation/mt6/de

sign/templates/calculation.html

ハンズオン

•最初に作成した記事を、トップページの最

新情報として常に表示してみましょう (ステ

ィッキー表示)

•ヒント：タグ欄に「@stick」と入力します。

やりかた

• 記事のタグ欄に「@stick」と入力後、保存

• メインページのテンプレートを修正

<MTEntries tags=“@stick”>

<MTInclude module=“記事の概要”>

</MTEntries>

<mt:Entries limit="$entries_per_page"

search_results="1“ tags=“NOT @stick”>

リファレンス

•プライベートタグでウェブページを部品デ

ータにする

•http://goo.gl/SuzGxy

ハンズオン

•記事データ内にある「宝石」という単語を、

すべて「ほうせき」とひらがなに置換しまし

ょう

•記事編集画面の右上にある検索ボタンか

ら「宝石」を検索

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

•検索、置換は様々なデータに対応

–(記事、ウェブページ、テンプレート、コメントなど)

Movable Typeのテーマを

作成する

ハンズオン

•ハンズオン用テーマをインストールしてみ

ましょう

•http://goo.gl/Pljde0

•終わったら、再構築してみましょう。

インストールの仕方

ダウンロードして解凍した「hands-on-theme」をフォルダごとMTクラウドの「themes」ディレクトリにアップロードする

• デザイン => テーマ から

ハンズオン用テーマを適用する

テーマ画像

ハンズオン

•トップページの記事一覧を、最新5件表示

するように変更してみましょう。

解説

タイトル

• テンプレート => インデックス => メインページ

<article>

<h2>Introduction to respo </h2>

=>

<article>

<h2><MTEntryTitle></h2>

日付と著者名

<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>

参考情報

•日付情報

–日付に関するテンプレートモディファイア

http://www.movabletype.jp/documentation/appendi

ces/date-formats.html

本文

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ……</p>

=>

<p><MTEntryBody></p>

続きを見る(Read More)

<a href="#" class="button">Read more</a>

=>

<a href=“<MTEntryPermaLink>" class="button">Read more</a>

ループ処理

<section id="content">

<MTEntries limit=“5”>

<article>

先ほど修正したコード

</article>

</MTEntries>

</section>

ハンズオン

•ブログの記事詳細を見れるようにしましょう

。

変更場所

タイトル

• テンプレート => アーカイブテンプレート

=> 記事

<article>

<h2>Introduction to respo </h2>

=>

<article>

<h2><MTEntryTitle></h2>

日付と著者名

<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>

本文

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod ……</p>

=>

<p><MTEntryBody>

<MTEntryMore>

</p>

ハンズオン

•ブログのタイトル名を変更しましょう

• テンプレート => インデックス => メインページ

• テンプレート => アーカイブテンプレート

=> 記事

<h1><a href="<mt:BlogURL>">CompanyName</a></h1>=><h1><a href="<mt:BlogURL>“><MTBlogName></a></h1>

ハンズオン

•<head>内の<title>を修正しておきましょう。

• テンプレート => インデックス => メインページ

<title>respo - Free CSS Template by ZyPOP</title>

=>

<title><MTBlogName></title>

• テンプレート => アーカイブテンプレート

=> 記事

<title>respo - Free CSS Template by ZyPOP</title>=><title><MTEntryTitle> - <MTBlogName></title>

ハンズオン

•すべての修正が終わったら、全体を再構

築してみましょう

•ブログデザイン、記事共に正常に見えてい

ますか？

ハンズオン

•ブログの記事を数件、適当に入力してみま

しょう

•意図通りにトップページ、記事ページが作

成されていますか？

ハンズオン

•今回作成したテーマを、名前をつけて保存

しておきましょう。

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

解説

•出力方式を「テーマディレクトリのインスト

ール」として保存してみましょう

•テーマが新しく選択できるようになっていま

すか？

解説

•「zip形式アーカイブでダウンロード」を選び

、ローカルにダウンロードしてみましょう

•ダウンロードしたテーマは、他のMovable

Type でも使えます。

Movable Type クラウド版

Movable Type クラウド版とは

•シックス・アパートがサーバー管理

•管理画面の動作が速く快適

•常に最新版を使用可能

•テクニカルサポート付き

•独自機能

MTクラウド版の構成

•nginx+PSGI

–管理画面、再構築ともに最適化されている

•各種機能を実装

–後述します

nginxとは

• ロシアで開発されたウェブサーバー

• Apacheに続く第二位のシェア(netcraft社、2012/03)

• 軽量、高速。メモリ使用量が少ない

• デメリットもある(.htaccessが使えないなど)

Movable Typeクラウド版

オリジナル機能の説明

MTクラウドのドキュメント

•http://www.movabletype.jp/documentatio

n/cloud

php、cgi

•phpは利用可能

–phpinfoは制限

•CGI,plファイルは利用不可能

cronの実行間隔

•5分おきに実行します

サーバー配信機能

サーバー配信機能とは

•MTクラウドで生成したコンテンツを外部の

サーバーへ配信して公開する機能

•MTクラウドをステージング環境として利用

可能

•FTP(S)で配信

サーバー配信機能

•設定=>サーバー配信

Basic認証

Basic認証でできること

•公開しているウェブサイト・ブログに対して

Basic認証の設定ができます

•ファイルに対しても設定できます

•複数設定が可能です

Basic認証

• システム=>クラウドサービス=>Basic認証

ハンズオン

•ウェブサイト・ブログにBasic認証をかけて

みましょう

•サイトパスはMTクラウドで利用しているドメ

インを基点として

「/」から相対パスで指定します

設定例

設定例 認証設定したいURL 設定内容

サイト全体に Basic 認証を設定したい

http://www.example.com/ /

一部のディレクトリにBasic 認証を設定したい

http://www.example.com/secret/ /secret/

一部のファイルにBasic 認証を設定したい

http://www.example.com/secret/file.html

/secret/file.html

利用しているMTクラウドのドメインが「www.example.com」の場合

HTTPリダイレクト

HTTPリダイレクトとは

•あるディレクトリやファイルへのアクセスを

、自動的に他のURLに転送する仕組み

HTTPリダイレクト

• システム =>

クラウドサービス => HTTPリダイレクト

ハンズオン

•ウェブサイトのindex.htmlを

Yahoo! Japanへリダイレクトしてみましょう

。

•例 /

=> www.yahoo.co.jp

環境のリストア

環境のリストアでできること

•MTクラウドおよび公開済みのWebサイトの

データをすべて任意の時点の状態に戻す

機能

環境のリストア

•システム => クラウドサービス =>

環境のリストア

ハンズオン

•ウェブサイト・ブログで記事を書いた後、バ

ックアップデータからデータリストアを行っ

てみましょう

•直前に書いた記事が消え、以前の状態に

戻っていることが確認できますか？

管理画面のセキュリティ設定

管理画面のセキュリティ設定とは

•管理画面のURLを任意に変更することが

できます。

•システム => クラウドサービス =>

セキュリティ

ハンズオン

•管理画面のURLを任意に変更してみましょ

う

•変更後、一度ログアウトして再ログインしま

しょう

ハンズオン

•管理画面にBasic認証を設定してみましょ

う

•管理画面のURLを元に戻しておきましょう

MT環境変数

MT環境変数とは

•MTの環境変数を管理画面から設定するこ

とができます。

–http://www.movabletype.jp/documentation/append

ices/config-directives/

•設定不可能な環境変数もあります

–http://www.movabletype.jp/documentation/cloud/specific

ations/config-directives.html

•システム => クラウドサービス =>

MT環境変数

ハンズオン

•環境変数

「AssetFileExtensions」にjpgと設定し、.jpg

ファイル以外のアップロードを禁止してみ

ましょう

• .jpgファイル以外がアップロードできるか試

してみましょう

参考

•AssetFileExtensions

–http://www.movabletype.jp/documentation/appendices/co

nfig-directives/assetfileextensions.html

その他の機能

ディスクの使用量

•現在利用しているディスク容量が一目でわ

かるサービス

•システム =>

クラウドサービス =>

ディスクの使用量

自動アップデート

•MTを自動的に最新版にアップデートする

機能。無効にすることも可能。

2つの新機能

• IP制限

–管理画面、公開サイトへのアクセス制限が可能

•マルチドメイン対応

–S4i、S4g以上、10ドメインまで利用可能

サンドボックスサービス

サンドボックスサービスとは

•MTクラウドで構築した仮想マシンデータを

複製して使えるサービス

サービス利用料金ご契約中のプランの月額料金1カ月分（＋消費税）

サンドボックス利用可能期間

お申し込み月の翌月末日まで

申し込み期限

毎月25日まで（25日が休業の場合は直前の前の営業日）※ 26日以降のお申し込みは翌月1日のお申し込み扱いとなります。

作成可能なサンドボックスの数

Movable Type クラウド版 １契約につき１つまで

お申し込み・お支払い方法

•http://www.sixapart.jp/movabletype/cloud

/sandbox.html

Movable Type

ソフトウェア版との違い

クラウド版でできて、ソフトウェア版でできないこと

•サーバー配信機能

•Basic認証

•HTTPリダイレクト

•環境リストア(定期バックアップ)

•自動バージョンアップ、他

ソフトウェア版でできて、クラウド版でできないこと

•ブログの公開パスに制限があります

–クラウド版は「/data/file/static」以下の

み

–FTPからアクセスすると「/static」ディレク

トリのみ確認できます

.htacessが使えない

• .htaccessの設定はできない

•各種の代替機能を実装

–リダイレクト

–Basic認証

•Movable Type のプログラムファイルの改

変はできません。

–alt-search、alt-tmpl などの設定は可能

•サーバーへのSSH接続は不許可

–クラウド版は許可していません

•一部環境変数は使用できない

–StaticWebPathなどのファイルシステム関連

–SQLSetNamesなど、DB関連

ソフトウェア版からの

移行時のポイント

留意点

•DBデータレベルの移行はできない

–MTの標準機能「バックアップと復元」を基本とした移

行を

–移行後は「blogId」の変更に注意

例

•MT5のサイトデータ移行

1. MT5のバックアップデータをMT5でバージョンを合

わせて復元

1. バージョンに注意(5.13=>5.13など)

2. MT5からMT6へバージョンアップ

3. MTクラウドへ投入

コメントやトラックバックがない場合

•MTのテーマ機能+データのエクスポートに

よる移行も選択肢

移行用のテンプレート

•「バックアップと復元」や「エクスポート」が

使えない場合、テンプレートを利用したデ

ータ作成という手がある

–https://github.com/movabletype/mt-

recipes/blob/master/Export%20entry%20data%20in%

20MT%20format.md

留意点

•nginx+PSGIという環境

–Apacheの機能を多用したサイトの移行には注意が

必要

–MTクラウドのリダイレクト・ベーシック認証をうまく活

用

価格

XSg S2g S4g S450g S4100g

CPU：0.5CPU（仮想CPU）

CPU：1CPU（仮想CPU）

CPU：1CPU（仮想CPU）

1CPU（仮想CPU）

1CPU（仮想CPU）

メモリ：0.5GB メモリ：2GB メモリ：4GB メモリ：4GB メモリ：4GB

ディスク：10GB ディスク：10GB ディスク：10GB ディスク：50GB ディスク：100GB

5,000円（税抜）／月

8,000円（税抜）／月

14,000円（税抜）／月

22,000円（税抜）／月

28,000円（税抜）／月

•GMOクラウドプラン

• IDCフロンティアプラン

XSi プラン S2i プラン S4i プラン S450i プラン S4100i プラン

CPU：1CPU（0.8GHz相当）

CPU：1CPU（1.6GHz相当）

CPU：1CPU（1.6GHz相当）

CPU：1CPU（1.6GHz相当）

CPU：1CPU（1.6GHz相当）

メモリ：0.5GB メモリ：2.0GB メモリ：4.0GB メモリ：4.0GB メモリ：4.0GB

ディスク：10GB ディスク：10GB ディスク：10GB ディスク：50GB ディスク：100GB

9,500円（税抜）／月

14,200円（税抜）／月

19,000円（税抜）／月

28,000円（税抜）／月

35,000円（税抜）／月

http://www.sixapart.jp/movabletype/cloud/?id=colud-top-plan

購入方法(仕入方法)

購入経路

エンドユーザー様

UNIBaaSECバイヤーズ

ソフトバンクC&S

Movable Type クラウド版

制作・開発会社

購入方法

1. ECバイヤーズ(ECサイト)からの購入

2. 既存の取引先からの購入

3. UNIBaaS参加企業からの購入

ECバイヤーズ(ECサイト)からの購入

• http://www.ecbuyers.com/sixapart/catalog/?cPath=6_91&prmcd=mt6_

cl_sa_20131017

ECバイヤーズとは

• ソフトバンク・テクノロジー(株)が運営するECサ

イト

• 個人でも企業でも購入可能

• 標準価格での販売

既存の取引先からの購入

• MTクラウドは、ソフトバンク コマース＆サービス株式

会社を経由して、一般に流通していますので、ソフト

バンク コマース＆サービス株式会社と取引口座を持

つ販売会社から購入可能

• 販売価格は各販売会社へご確認ください

ソフトバンク コマース＆サービス社様からの仕入れ

• http://bbwebmarketing.jp/

UNIBaaS参加企業からの購入

• http://www.sixapart.jp/pronet/unibaas.html

UNIBaaSとは

• UNIBaaSは、シックス・アパートが提供する販売支援プラットフ

ォームです(CRM+MTクラウドのセットアップ機能)。

• UNIBaaSは、シックス・アパートのパートナープログラム「

ProNet」にご参加いただいている企業様であれば、参加可能

です。

UNIBaaSの特徴

• 利用中のバージョンを継続して利用可能

(バージョンアップの回避)

• サンドボックス機能を12時間に限り何度でも無料で使用可能

まとめ

後半のまとめ

•Movable Type クラウド版は、快適な速度

で使用できるように環境をチューン・アップ

したサービス

•独自機能で管理画面から各種運用の支援

が可能

MTコミュニティとイベント

•MT蝦夷

•（MT東北）

•MT東京

•MTなごや

•MT長野

•MT関西

•MT広島

•MT福岡

MTDDC Meetup 2014 開催!

•2014年11月29日(土) 11:00-19:00

•六本木ミッドタウン

Yahoo! Japan セミナールーム

MT Live 開催中！

•第2、4水曜日 茅場町で開催中！

http://blog.sixapart.jp/2014-09/mt-live-movable-type.html

Any Questions?