View
350
Download
0
Category
Preview:
Citation preview
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?
Recommended