Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
20190205_MTCloud_handson_public.pdf
Search
Takeshi Nick Osanai
February 05, 2019
Technology
1
63
20190205_MTCloud_handson_public.pdf
Takeshi Nick Osanai
February 05, 2019
Tweet
Share
More Decks by Takeshi Nick Osanai
See All by Takeshi Nick Osanai
How DevRel should proceed with the breaking change project?
tosanai
0
120
AWS を利用した ウェブサイトホスティングと PowerCMS X
tosanai
1
840
プラットフォーム事業を推進するための開発者マーケティング
tosanai
0
46
MTクラウドハンズオン資料
tosanai
1
89
Movable Type クラウド版 ハンズオンセミナー
tosanai
0
240
20190508_DevRel_Meetup_Public.pdf
tosanai
0
730
Movable Type クラウド版 ハンズオン資料
tosanai
0
84
20190320_MTCloud_handson.pdf
tosanai
0
80
IndexedDBのラッパー「localoForage」を試してみた
tosanai
0
2.6k
Other Decks in Technology
See All in Technology
[AWS JAPAN 生成AIハッカソン] Dialog の紹介
yoshimi0227
0
150
最速最小からはじめるデータプロダクト / Data Product MVP
amaotone
5
740
「 SharePoint 難しい」ってよく聞くけど、そんなに言うなら8歳の息子に試してもらった
taichinakamura
1
630
AWS CodePipelineでコンテナアプリをデプロイした際に、古いイメージを自動で削除する
smt7174
1
100
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
9
120k
フルカイテン株式会社 採用資料
fullkaiten
0
36k
VPC間の接続方法を整理してみた #自治体クラウド勉強会
non97
1
850
Jr. Championsになって、強く連携しながらAWSをもっと使いたい!~AWSに対する期待と行動~
amixedcolor
0
190
CAMERA-Suite: 広告文生成のための評価スイート / ai-camera-suite
cyberagentdevelopers
PRO
3
270
Figma Dev Modeで進化するデザインとエンジニアリングの協働 / figma-with-engineering
cyberagentdevelopers
PRO
1
430
【若手エンジニア応援LT会】AWSで繋がり、共に成長! ~コミュニティ活動と新人教育への挑戦~
kazushi_ohata
0
180
生成AIとAWS CDKで実現! 自社ブログレビューの効率化
ymae
2
330
Featured
See All Featured
Visualization
eitanlees
144
15k
Designing the Hi-DPI Web
ddemaree
280
34k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
How STYLIGHT went responsive
nonsquared
95
5.2k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Speed Design
sergeychernyshev
24
570
A designer walks into a library…
pauljervisheath
202
24k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Happy Clients
brianwarren
97
6.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Transcript
Movable Type クラウド版 ハンズオンセミナー 2019年2月5日 シックス・アパート株式会社 長内毅志
自己紹介 •長内毅志 • ディベロッパーリレーションマネージャー • エバンジェリスト • AWS認定ソリューションアーキテクト –趣味 ジョギング
英語の勉強 (TOEIC 875, 英検準1級) 家族と過ごすこと
まず最初に –アカウント情報を元に、アクセスできるか確認しましょう
アジェンダ • Movable Type の特徴 • 管理画面と基本操作 • 新機能「コンテンツタイプ」を触ってみる •
Movable Type 7 の特徴を理解する • クラウド版独自の機能を理解する
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 など VMサーバー AmazonEC2など Amazon S3など
特徴2 •柔軟なテンプレートタグ –四則計算なども可能 •Data API でデータを利用することが可能 –データはJSON形式で出力、RESTで取得可能 –独自アプリも開発可能
Data APIを利用したアプリ例:Movable Type Writer
Data API を利用したアプリ例:Movable Type for iOS
Data API を利用したサイト実装例:東京書籍様
特徴3 •中小企業から中-大規模企業、官公庁まで幅広い 導入実績
•ブログから数万ページに及び大規模サイトまで 5万件以上の導入実績 ECサイト イントラサイト・WEB社内報 メディアサイト・企業オウンドメディア 会員制サイト・コミュニティサイト 実績 コーポレートサイト 5万件以上の導入実績 5万件以上!
5万件以上!
商用CMSシェアナンバーワン(富士キメラ総研調べ)
ビジネスユーザーに絶大な支持 日経平均225社の 半数以上がMTユーザー 日経平均225社の 半数以上がMTユーザー
Movable Typeの管理画面と基本操作
Movable Type 7 の管理画面と 基本操作
• ダッシュボードが表示されま す。本日のハンズオンのため に、最初のサイトを作成しま す。左メニューから「システ ム」をクリックします。
• システム設定の画面に移動し ます。左メニューから 「サイト」=>「新規」 をクリックします。
• サイトの作成画面に移動しま す。以下の設定をします。 • サイトテーマ =>Rainier • サイト名 =>適宜名前をつける
• 続けて設定します。 • タイムゾーン =>UTC+9 • 使用言語 =>日本語 • すべて設定したら「サイトの作
成」をクリックします。
• 作成が終わると、サイトの操 作画面に移動します。 • 左メニューもしくは全般設定 ページ内の「再構築」をクリ ックします。
• ポップアップウィンドウが開き、再構 築の操作画面が表示されます。 • 再構築とは、Movable Type からhtml を生成するための操作となります。 • 再構築ボタンをクリックします。
• 再構築が終了したら、「サイトを 見る」をクリックします。
• 本日のハンズオンで操作する サイトが公開されているのが 分かります。
•再構築とは –htmlを出力するための操作 –100ページ存在する場合、100ページのhtmlを実際に出力 する
• 左のメニューから 「記事」=>「新規」 をクリックします。 • 最初の記事作成画面が表示さ れます。
• タイトルと本文を入力して、右メ ニューの「公開」ボタンをクリッ クします。
• 公開が終わったら、サイトを もう一度見てみましょう。 • 今公開した記事が、新たに反 映されています。
ブログではなく「サイト」
Movable Type 7 のサイトとは • サイト –登録したコンテンツを管理するための仕組み、入れもの • 従来のウェブサイト、ブログに当たる –記事・ページの管理も可能
–コンテンツタイプの管理も可能
1つのWebサイトを構成する例
複数のWebサイトを構成する例
コンテンツタイプを主とした構造化
Movable Type 7 の特徴
None
タイトル 見出し 段落
title Heading Paragraph
<h1> <h2> <p>
htmlの構造 •論文の構造に非常に近い •ロジカルに情報を伝える •まとまった情報を「ページ」という単位で表示す ることに長けている •「ページ」をまとめることで「ウェブサイト」が できた
ウェブサイトの構造
•[ページ]という概念では捉えづらいコンテンツが 増え始めている
None
None
•「ページ」の概念とは異なるコンテンツ設計
http://www.nadeshikoleague.jp/
https://www.sixapart.jp/business/nadeshikoleague.html
現在のコンテンツ ネット上のコンテンツ≠ページ
•ネット上のコンテンツ ≠ ウェブページ •細かい粒度でデータを管理する必要性 •「ページ」ではなく、「コンテンツ」を適切な形 で設計・配信できるシステム =CMS
• コンテンツを管理しやすいシステムへ • Content Type (コンテンツタイプ) 機能を新規搭載
•自由にコンテンツをデザインして管理する •MTタグで利用可能 •アーカイブマッピングの柔軟性、多様性はそのま まに •サイト管理の柔軟さの実現
コンテンツタイプとは •0 からすべての要素を設計可能 •「ウェブページ」も、複雑な「コンテンツ」も
これまでのコンテンツ設計 •記事フィールド +カスタムフィールド •「ページ」をベースに した画面設計
コンテンツタイプのコンテンツ設計 •ドラッグ&ドロップで自由にフィールドを定義
•数値、文字列、画像、ファイル、日時、 Content-Type など… •プラグインで拡張可能 •複雑なコンテンツでも、一定のルールに誘導
ネット上のあらゆるコンテンツの配信システムとして
ページの編集で良く聞く質問 写真=>文字⇒写真のよう にレイアウトしたい…
ブロックエディタ
コンテンツタイプに対応した「Data API Ver.4」 •コンテンツタイプのデータをAPIで操作
•コンテンツごとの可用性、可搬性を高め •コンテンツをより大きな価値に変えられる •「Reusable」なコンテンツ管理を目指して
コンテンツタイプを触ってみる
素材ファイルをダウンロード
• 解凍すると[01_MTGram] [02_recipe] の2フォルダが展開されます • 01_MTGram のみ使います。
写真ギャラリーを開発する
開発するもの •写真ギャラリー「MTGram」 •写真「だけ」を登録していくウェブサービス
• 左メニュー [コンテンツタイプ] =>[新規]を選び、名前を「 MTGram」とします。
• 画面右部から[画像アセット] を選び、中央にドラッグアンド ドロップします。名前を「画像 」と指定します。[このフィー ルドは必須ですか?]をオンに します 。
• ユーザーに新規イメージのア ップロードを許可します。 終わったら[保存]ボタンをク リックします。
• コンテンツタイプがセーブされ たことを確認して、次に進みま す。
• 左部メニューから[デザイン ]=>[テンプレート]を選びま す。画面上部の選択肢から[ インデックス]を選び、新規 作成をクリックします。
• テンプレート名を[MTGram]と します。 • [mtgram.html]の中身をコピー &ペーストします。
• 出力ファイル名を [mtgram.html]とします • [変更を保存]ボタンを押してセ ーブし、[保存と再構築]ボタン をクリックします。
• 再構築が完了したら、右メニューから「公開さ れたテンプレートを確認」リンクをクリックし ます。
• MTGramのサービスページが 公開されています。写真が未 登録の状態なので、登録して いきましょう。
• 左メニューから[コンテンツデ ータ] => [MTGram]を選びま す。 • [MTGramを作成]を選びます 。
• データ入力画面に変わります 。[データ識別ラベル]を入力 します。[画像]から[アセッ トを選択]を選びます。
• 写真挿入画面が表示されるので、 任意の画像をアップロードします 。
• 画像が選択されたことを確認 して、[挿入]ボタンをクリ ックします。
• 画像の挿入が終わったら「公 開」ボタンを押します。
• 公開ができたら、同じ要領で何枚 か写真を登録していきましょう
• 先程公開したインデックステンプレート「MTGram」 のページを確認します。 • 写真ギャラリーが公開されているのがわかります。
None
•ウェブサイトのような「ページ」がない •一覧ページ+写真のみ •「コンテンツ」という粒度でデータを管理 =>コンテンツタイプ
クラウド版独自の機能を 理解する
Movable Type クラウド版とは •シックス・アパートがサーバー管理 •管理画面の動作が速く快適 •常に最新版を使用可能 •テクニカルサポート付き •独自機能
•2種類のウェブサーバー –nginx版 •低価格、高速。 •5000円/月から –Apache版 •一般的なウェブサーバー、マルチドメイン対応。 •19000円/月から
nginxとは • Apache、IISに続くシェア (netcraft社、2016/09) • 軽量、高速。メモリ使用量が少ない • デメリットもある(.htaccessが使えないなど)
MTクラウド版の構成 •クラウド版独自の構成で高速化を実現 –管理画面、再構築ともに最適化されている •クラウド版独自機能 –後述します
MTクラウドのドキュメント •http://www.movabletype.jp/documentation/cl oud
サーバー配信機能
サーバー配信機能とは •MTクラウドで生成したコンテンツを外部のサー バーへ配信して公開する機能 •MTクラウドをステージング環境として利用可能 •FTP(S)で配信
サーバー配信機能 •設定=>サーバー配信
•以降の内容は、「nginx」版を前提としたハンズ オンとなります。 •Apache版とは異なる箇所があるためご注意くだ さい。
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/fil e.html /secret/file.htm l 利用しているMTクラウドのドメインが 「www.example.com」の場合
HTTPリダイレクト
HTTPリダイレクトとは •あるディレクトリやファイルへのアクセスを、自 動的に他のURLに転送する仕組み
HTTPリダイレクト • 左メニューから クラウドサービス => Redirect
ハンズオン •ウェブサイトのindex.htmlをYahoo!へリダイレ クトしてみましょう。 • / => https://www.yahoo.co.jp
管理画面のセキュリティ設定
ブルートフォースアタック(総当り攻撃) イラスト:「2014年版 情報セキュリティ10大脅威」より http://www.ipa.go.jp/security/vuln/10threats2014.html
管理画面のセキュリティ設定とは •管理画面のURLを任意に変更することができます
•システム => クラウドサービス => セキュリティ
ハンズオン •管理画面のURLを任意に変更してみましょう •変更後、一度ログアウトして再ログインしましょ う
その他 •管理画面にBasic認証の設定が可能 •IP制限も可能
MT環境変数
MT環境変数とは •MTの環境変数を管理画面から設定することがで きます。 –http://www.movabletype.jp/documentation/appendices /config-directives/ •設定不可能な環境変数もあります –http://www.movabletype.jp/documentation/cloud/specification s/config-directives.html
•システム => クラウドサービス => MT環境変数
環境のリストア
環境のリストアでできること •MTクラウドおよび公開済みのWebサイトのデー タをすべて任意の時点の状態に戻す機能
環境のリストア •システム => クラウドサービス => 環境のリストア
ハンズオン •リストアを行ってみましょう •最初の状態に戻っていることが確認できますか?
•その他の機能
ディスクの使用量 •現在利用しているディスク容量が一目でわかるサ ービス •システム => クラウドサービス => ディスクの使用量
自動アップデート •MTを自動的に最新版にアップデートする機能。 無効にすることも可能。
サンドボックスサービス
サンドボックスサービスとは •MTクラウドで構築した仮想マシンデータを複製 して使えるサービス
サービス利用料金 Movable Type クラウド版 ご利用プランの料金 利用可能期間 サンドボックス用に契約されている Movable Type クラウ
ド版を解約されるまで利用可能です。 作成可能なサンドボックス の数 Movable Type クラウド版1契約あたり、いくつでも可。 ※ サンドボックス用の Movable Type クラウド版の契約 ごとに、それぞれ1度コピーを実施します。複数作成さ れる場合は都度ご契約が必要です。
•http://www.sixapart.jp/movabletype/cloud/sa ndbox.html
Movable Type ソフトウェア版との違い
クラウド版でできて、ソフトウェア版でできないこと •サーバー配信機能 •環境リストア(定期バックアップ) •自動バージョンアップ、他
ソフトウェア版でできて、クラウド版でできないこと •ブログの公開パスに制限があります –クラウド版は「/data/file/static」以下の み –FTPからアクセスすると「/static」ディレ クトリのみ確認できます
•Movable Type のプログラムファイルの改変はで きません。 –alt-search、alt-tmpl などの設定は可能
•サーバーへのSSH接続は不許可 –クラウド版は許可していません •一部環境変数は使用できない –StaticWebPathなどのファイルシステム関連 –SQLSetNamesなど、DB関連
その他の制限事項 •http://www.sixapart.jp/movabletype/cloud/sp ecification.html
ソフトウェア版からの 移行時のポイント
留意点 •DBデータレベルの移行はできない –MTの標準機能「バックアップと復元」を基本とした移行を –移行後は「blogId」の変更に注意
例 •MT6のサイトデータ移行 1. MT6のバックアップデータをMT6でバージョンを合わせ て復元 1. バージョンに注意(6.2.4=>6.2.4など) 2. MT6からMT7へバージョンアップ 3.
MTクラウドへ投入
コメントやトラックバックがない場合 •MTのテーマ機能+データのエクスポートによる 移行も選択肢
無料引越サービス •MTクラウド版を契約した方に対して、一回のみ 提供 –https://www.sixapart.jp/movabletype/cloud/migration-service.html
•価格
None
None
CDNオプションサービス •大量のアクセスが見込まれるサイトなど •月額5000円 •初期設定代行費用 5万円 (お客様側で初期設定可能)
プライベートプラン •より大規模なサイトを運用の場合、個別相談をお 受けします。
ご参加ありがとうございました。