2015年12月6日シックス・アパート株式会社

長内 毅志

Movable Type クラウド版ハンズオンセミナー

•長内毅志

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

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

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

まず最初に

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

アジェンダ

• 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を出力

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

•動的生成も対応可能

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

•動的、静的生成どちらも対応することで、様々なサー

バー構成に対して柔軟に対応できる

特徴2

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

–四則計算なども可能

•Data API でデータを利用することが可能

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

–独自アプリも開発可能

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

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

Data API を利用したサイト実装例:MAKEPO

特徴3

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

入実績

事例集

•http://www.sixapart.jp/business

Movable Type の環境構築に

関する参考情報

構造

OS

ウェブサーバー

Perlモジュール

PerlPHP

Movable Type

DB

公式ドキュメント

•http://www.movabletype.jp

インストールについて(専用サーバー)

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

専用サーバーへのインストール

•http://knowledge.sakura.ad.jp/

beginner/2074/

参考:CPANとは

•Perlのモジュール群

•ほとんどがGPL・Apache License

基本的な構成

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

管理者

閲覧者(サイト訪問者)

ステージング環境

ステージングサーバー兼

CMSサーバー

公開サーバー

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

冗長構成

CMSサーバー

公開サーバー

（冗長構成）

ロードバランサ

クラウド環境

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

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

–AmazonS3 (Azure Webサイト) など

VMサーバーAmazonEC2など

Amazon S3など

CDNを利用した構成

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

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

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

DBサーバー

CDNサーバー

Movable Typeの管理画面と

基本操作

管理画面

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

• ウェブサイト…

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

• ブログ…

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

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

「新製品紹介」など

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

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

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

ダッシュボード

記事の作成

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

ハンズオン

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

ハンズオン

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

•https://goo.gl/VRErKo

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

います

•もしくはテキストデータをエディタにコピーして保存し

ます

データのインポート

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

Movable Type の

テンプレート

テンプレートとは

•Movable Typeのデータベースに保存されている各種

のデータを、htmlとして出力するための仕組み

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

<MTEntryTitle>

<MTEntryBody>

<MTEntryMore>

MTタグの実際

ハンズオン

•Movable Type のテンプレートを確認しましょう

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

テンプレートの説明

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

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

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

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

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

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

• システムテンプレート

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

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

•ブログ・ウェブサイト全体に関わるファイルを扱うテン

プレート

•サイトに一つしか存在しないファイルを扱う事が多い

例:CSS, JavaScript, トップページなど

アーカイブテンプレート

•更新ごとに増加するデータページをまとめるテンプレート。

•出力ルールを設定できる(カテゴリ一覧ページを作る、月別

ページを作る、など)

• 1テンプレートで複数の種類のファイルを出力できる

テンプレートモジュール

•様々なテンプレートで共通して使う、部品のためのテ

ンプレート

•ヘッダーやフッターなど、全ページ共通で使用する場

合に使う

システムテンプレート

•コメントのプレビューや検索画面など、特定の画面の

デザインを設定するためのテンプレート。

•MTのインタラクティブページを管理する

•「ブログ」構築以外の場面では、使用頻度は高くない

かも

ウィジェット

• サイドバーなどで利用するコンテンツを細かく部品化し、管理画面

上でドラッグ・アンド・ドロップして管理できるもの。

• テンプレートモジュール以上に、細かいパーツを管理

• 昔はブログパーツなどによく使われていました

ハンズオン

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

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

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

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

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

–値を5に変更

タグの書き方

•下記のどれでもOK

–<$MTEntryTitle$>

–<MTEntryTitle>

–<mt:entrytitle>

–<MT:EntryTitle />

ハンズオン

• テンプレートモジュール => 記事の詳細 3行目付近

<$mt:EntryTitle$>を、以下のように書き換えてみましょう

– <$MTEntryTitle$>

– <mt:EntryTitle>

• 書き換えたら、保存=>再構築を行い、出力データを確認してみまし

ょう

ハンズオン

• トップページの記事一覧を、タイトルだけの表示に変えてみましょう

。

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

解説

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

モジュールテンプレート => 記事の概要

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

ハンズオン

•記事数を合計して

–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/design/templat

es/calculation.html

ハンズオン

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

うせき」とひらがなに置換しましょう

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

検索

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

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

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

Movable Typeのテーマを

作成する

テーマについての説明

•テーマとは

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

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

画面

•デザイン => テーマ

ハンズオン

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

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

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

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

ハンズオン

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

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

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

テーマ画像

ハンズオン

•トップページの記事一覧を、最新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/appendices/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 クラウド版とは

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

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

•常に最新版を使用可能

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

•独自機能

MTクラウド版の構成

•nginx+PSGI

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

•各種機能を実装

–後述します

nginxとは

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

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

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

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

Movable Typeクラウド版

オリジナル機能の説明

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

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

php、cgi

•phpは一部利用可能

–phpinfoは制限

–MySQLへのアクセスは不可能

•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をtest.htmlへリダイレクトし

てみましょう。

•例 www.example.com/inde.html

=>www.example.com/test.html

環境のリストア

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

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

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

その他の制限事項

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

tion.html

ソフトウェア版からの

移行時のポイント

留意点

•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%20for

mat.md

留意点

•nginx+PSGIという環境

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

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

価格

IDCフロンティアプラン

GMOプラン

購入方法(仕入方法)

購入経路

エンドユーザー様

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時間に限り何度でも無料で使用可能

プラグインとテーマサイト

• http://plugins.movabletype.jp

事業会社による各種のソリューション

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

GitHub

•mt-theme-XXXX

•mt-plugins-XXXX

プラグインの開発方法

• https://github.com/movabletype/Documentation/wiki/Japanese-

developer-guide

テーマの開発

• http://www.movabletype.jp/documentation/#designer-guide

人気のあるプラグイン(Movable Type プラデミー賞)

• http://www.movabletype.jp/blog/pludemy-goes-to.html

Data APIの概要

Data APIとは

•Movable Type のデータをREST形式で取得

•言語問わずデータ表示、更新、追加などの操作が可

能

Data APIのドキュメント

•https://github.com/movabletype/mt-data-api-sdk-

js/wiki

リファレンス

ハンズオン

•最新の記事リストをREST URI 経由で取得してみまし

ょう

–https://github.com/movabletype/Documentation/wiki/data-

api-entries-list

• http://(your_domain)/mt/mt-data-

api.cgi/v2/sites/(blog_id)/entries

ハンズオン

•取得した最新記事のJSONデータを、<ul><li>タグをつ

かって、タイトルだけリスト表示してみましょう

–今回はJavaScript(SDK)を使います

DataAPI

• 以下のファイルを取得、保存

–https://goo.gl/BPwjBe

–デザイン => テンプレート => インデックステンプレート => datalist (新

しくテンプレートを作る)

• 「datalist.html」などの名前をつけ、保存・再構築

Data APIの操作

• ヘッダー内でJSライブラリを読み込み

<script type=“text/javascript”

src=“MTのスタティックパス/data-api/v2/js/mt-data-api.js">

</script>

• DataAPIのオブジェクトを生成

• エンドポイントをつかってデータを取得、加工

•7. 質疑応答

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

•MT蝦夷

•MT東北

•MT東京

•MTなごや

•MT愛媛

•MT鹿児島

•MT関西

•MT広島

•MT福岡

•MT長野

• MT ∗/ NIIGATA(新潟)

MTDDC Meetup TOHOKU 2015

•6月6日(日) 仙台で開催

MTDDC Meetup TOKYO 2015 開催！

•2015年11月28日（土）東京・品川

Any Questions?