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

Slide 1

Slide 1 text

Movable Type クラウド版ハンズオンセミナー 2019年5月20日シックス・アパート株式会社長内毅志

Slide 2

Slide 2 text

自己紹介 •長内毅志 • ディベロッパーリレーションマネージャー • AWS認定ソリューションアーキテクト –趣味ジョギング、ゲーム、野球観戦英語の勉強(TOEIC 875, 英検準1級) 家族と過ごすこと

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

アジェンダ • Movable Type の特徴 • 管理画面と基本操作 • 新機能「コンテンツタイプ」を触ってみる • Movable Type 7 の特徴を理解する • クラウド版独自の機能を理解する

Slide 5

Slide 5 text

Movable Type の特徴

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Data API を利用したサイト実装例:東京書籍様

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

商用CMSシェアナンバーワン(富士キメラ総研調べ)

Slide 21

Slide 21 text

ビジネスユーザーに絶大な支持日経平均225社の半数以上がMTユーザー日経平均225社の半数以上がMTユーザー

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

• ダッシュボードが表示されます。本日のハンズオンのために、最初のサイトを作成します。左メニューから「システム」をクリックします。

Slide 25

Slide 25 text

• システム設定の画面に移動します。左メニューから「サイト」=>「新規」をクリックします。

Slide 26

Slide 26 text

• サイトの作成画面に移動します。以下の設定をします。 • サイトテーマ =>Rainier • サイト名 =>適宜名前をつける

Slide 27

Slide 27 text

• 続けて設定します。 • タイムゾーン =>UTC+9 • 使用言語 =>日本語 • すべて設定したら「サイトの作成」をクリックします。

Slide 28

Slide 28 text

• 作成が終わると、サイトの操作画面に移動します。 • 左メニューもしくは全般設定ページ内の「再構築」をクリックします。

Slide 29

Slide 29 text

• ポップアップウィンドウが開き、再構築の操作画面が表示されます。 • 再構築とは、Movable Type からhtml を生成するための操作となります。 • 再構築ボタンをクリックします。

Slide 30

Slide 30 text

• 再構築が終了したら、「サイトを見る」をクリックします。

Slide 31

Slide 31 text

• 本日のハンズオンで操作するサイトが公開されているのが分かります。

Slide 32

Slide 32 text

•再構築とは –htmlを出力するための操作 –100ページ存在する場合、100ページのhtmlを実際に出力する

Slide 33

Slide 33 text

• 左のメニューから「記事」=>「新規」をクリックします。 • 最初の記事作成画面が表示されます。

Slide 34

Slide 34 text

• タイトルと本文を入力して、右メニューの「公開」ボタンをクリックします。

Slide 35

Slide 35 text

• 公開が終わったら、サイトをもう一度見てみましょう。 • 今公開した記事が、新たに反映されています。

Slide 36

Slide 36 text

ブログではなく「サイト」

Slide 37

Slide 37 text

Movable Type 7 のサイトとは • サイト –登録したコンテンツを管理するための仕組み、入れもの • 従来のウェブサイト、ブログに当たる –記事・ページの管理も可能 –コンテンツタイプの管理も可能

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

コンテンツタイプを主とした構造化

Slide 41

Slide 41 text

Movable Type 7 の特徴

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

タイトル見出し段落

Slide 44

Slide 44 text

title Heading Paragraph

Slide 45

Slide 45 text

Slide 46

Slide 46 text

htmlの構造 •論文の構造に非常に近い •ロジカルに情報を伝える •まとまった情報を「ページ」という単位で表示することに長けている •「ページ」をまとめることで「ウェブサイト」ができた

Slide 47

Slide 47 text

ウェブサイトの構造

Slide 48

Slide 48 text

•[ページ]という概念では捉えづらいコンテンツが増え始めている

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

•「ページ」の概念とは異なるコンテンツ設計

Slide 52

Slide 52 text

http://www.nadeshikoleague.jp/

Slide 53

Slide 53 text

https://www.sixapart.jp/business/nadeshikoleague.html

Slide 54

Slide 54 text

現在のコンテンツネット上のコンテンツ≠ページ

Slide 55

Slide 55 text

•ネット上のコンテンツ ≠ ウェブページ •細かい粒度でデータを管理する必要性 •「ページ」ではなく、「コンテンツ」を適切な形で設計・配信できるシステム＝CMS

Slide 56

Slide 56 text

• コンテンツを管理しやすいシステムへ • Content Type (コンテンツタイプ) 機能を新規搭載

Slide 57

Slide 57 text

•自由にコンテンツをデザインして管理する •MTタグで利用可能 •アーカイブマッピングの柔軟性、多様性はそのままに •サイト管理の柔軟さの実現

Slide 58

Slide 58 text

コンテンツタイプとは •0 からすべての要素を設計可能 •「ウェブページ」も、複雑な「コンテンツ」も

Slide 59

Slide 59 text

これまでのコンテンツ設計 •記事フィールド＋カスタムフィールド •「ページ」をベースにした画面設計

Slide 60

Slide 60 text

コンテンツタイプのコンテンツ設計 •ドラッグ＆ドロップで自由にフィールドを定義

Slide 61

Slide 61 text

•数値、文字列、画像、ファイル、日時、 Content-Type など… •プラグインで拡張可能 •複雑なコンテンツでも、一定のルールに誘導

Slide 62

Slide 62 text

ネット上のあらゆるコンテンツの配信システムとして

Slide 63

Slide 63 text

ページの編集で良く聞く質問写真=>文字⇒写真のようにレイアウトしたい…

Slide 64

Slide 64 text

ブロックエディタ

Slide 65

Slide 65 text

コンテンツタイプに対応した「Data API Ver.4」 •コンテンツタイプのデータをAPIで操作

Slide 66

Slide 66 text

•コンテンツごとの可用性、可搬性を高め •コンテンツをより大きな価値に変えられる •「Reusable」なコンテンツ管理を目指して

Slide 67

Slide 67 text

コンテンツタイプを触ってみる

Slide 68

Slide 68 text

素材ファイルをダウンロード

Slide 69

Slide 69 text

• 解凍すると[01_MTGram] [02_recipe] の2フォルダが展開されます • 01_MTGram のみ使います。

Slide 70

Slide 70 text

写真ギャラリーを開発する

Slide 71

Slide 71 text

開発するもの •写真ギャラリー「MTGram」 •写真「だけ」を登録していくウェブサービス

Slide 72

Slide 72 text

• 左メニュー [コンテンツタイプ] =>[新規]を選び、名前を「 MTGram」とします。

Slide 73

Slide 73 text

• 画面右部から[画像アセット] を選び、中央にドラッグアンドドロップします。名前を「画像」と指定します。[このフィールドは必須ですか？]をオンにします。

Slide 74

Slide 74 text

• ユーザーに新規イメージのアップロードを許可します。終わったら[保存］ボタンをクリックします。

Slide 75

Slide 75 text

• コンテンツタイプがセーブされたことを確認して、次に進みます。

Slide 76

Slide 76 text

• 左部メニューから[デザイン ]=>[テンプレート]を選びます。画面上部の選択肢から[ インデックス]を選び、新規作成をクリックします。

Slide 77

Slide 77 text

• テンプレート名を[MTGram]とします。 • [mtgram.html]の中身をコピー &ペーストします。

Slide 78

Slide 78 text

• 出力ファイル名を [mtgram.html]とします • [変更を保存]ボタンを押してセーブし、[保存と再構築]ボタンをクリックします。

Slide 79

Slide 79 text

• 再構築が完了したら、右メニューから「公開されたテンプレートを確認」リンクをクリックします。

Slide 80

Slide 80 text

• MTGramのサービスページが公開されています。写真が未登録の状態なので、登録していきましょう。

Slide 81

Slide 81 text

• 左メニューから[コンテンツデータ] => [MTGram]を選びます。 • [MTGramを作成]を選びます。

Slide 82

Slide 82 text

• データ入力画面に変わります。[データ識別ラベル]を入力します。[画像]から［アセットを選択］を選びます。

Slide 83

Slide 83 text

• 写真挿入画面が表示されるので、任意の画像をアップロードします。

Slide 84

Slide 84 text

• 画像が選択されたことを確認して、［挿入］ボタンをクリックします。

Slide 85

Slide 85 text

• 画像の挿入が終わったら「公開」ボタンを押します。

Slide 86

Slide 86 text

• 公開ができたら、同じ要領で何枚か写真を登録していきましょう

Slide 87

Slide 87 text

• 先程公開したインデックステンプレート「MTGram」のページを確認します。 • 写真ギャラリーが公開されているのがわかります。

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

•ウェブサイトのような「ページ」がない •一覧ページ+写真のみ •「コンテンツ」という粒度でデータを管理 =>コンテンツタイプ

Slide 90

Slide 90 text

クラウド版独自の機能を理解する

Slide 91

Slide 91 text

Movable Type クラウド版とは •シックス・アパートがサーバー管理 •管理画面の動作が速く快適 •常に最新版を使用可能 •テクニカルサポート付き •独自機能

Slide 92

Slide 92 text

•2種類のウェブサーバー –nginx版 •低価格、高速。 •5000円/月から –Apache版 •一般的なウェブサーバー、マルチドメイン対応。 •19000円/月から

Slide 93

Slide 93 text

nginxとは • Apacheに続くシェア (netcraft社、2018/08) • 軽量、高速。メモリ使用量が少ない • デメリットもある(.htaccessが使えないなど) https://news.mynavi.jp/article/20180723-667315/

Slide 94

Slide 94 text

MTクラウド版の構成 •クラウド版独自の構成で高速化を実現 –管理画面、再構築ともに最適化されている •クラウド版独自機能 –後述します

Slide 95

Slide 95 text

MTクラウドのドキュメント •https://www.movabletype.jp/documentation/ cloud

Slide 96

Slide 96 text

サーバー配信機能

Slide 97

Slide 97 text

サーバー配信機能とは •MTクラウドで生成したコンテンツを外部のサーバーへ配信して公開する機能 •MTクラウドをステージング環境として利用可能 •FTP(S)で配信

Slide 98

Slide 98 text

サーバー配信機能 •設定=>サーバー配信

Slide 99

Slide 99 text

•以降の内容は、「nginx」版を前提としたハンズオンとなります。 •Apache版とは異なる箇所があるためご注意ください。

Slide 100

Slide 100 text

Basic認証

Slide 101

Slide 101 text

Basic認証でできること •公開しているウェブサイト・ブログに対して Basic認証の設定ができます •ファイルに対しても設定できます •複数設定が可能です

Slide 102

Slide 102 text

Basic認証 • 左メニューからクラウドサービス=>Basic認証

Slide 103

Slide 103 text

ハンズオン •ウェブサイト・ブログにBasic認証をかけてみましょう •サイトパスはMTクラウドで利用しているドメインを基点として「/」から相対パスで指定します

Slide 104

Slide 104 text

設定例

Slide 105

Slide 105 text

設定例設定例認証設定したい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」の場合

Slide 106

Slide 106 text

HTTPリダイレクト

Slide 107

Slide 107 text

HTTPリダイレクトとは •あるディレクトリやファイルへのアクセスを、自動的に他のURLに転送する仕組み

Slide 108

Slide 108 text

HTTPリダイレクト • 左メニューからクラウドサービス => Redirect

Slide 109

Slide 109 text

ハンズオン •ウェブサイトのindex.htmlをGoogleへリダイレクトしてみましょう。 • / => https://www.google.co.jp

Slide 110

Slide 110 text

設定例

Slide 111

Slide 111 text

No content

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

ブルートフォースアタック(総当り攻撃) イラスト：「2014年版情報セキュリティ10大脅威」より http://www.ipa.go.jp/security/vuln/10threats2014.html

Slide 114

Slide 114 text

管理画面のセキュリティ設定とは •管理画面のURLを任意に変更することができます

Slide 115

Slide 115 text

•システム => クラウドサービス => セキュリティ

Slide 116

Slide 116 text

ハンズオン •管理画面のURLを任意に変更してみましょう •変更後、一度ログアウトして再ログインしましょう

Slide 117

Slide 117 text

設定例

Slide 118

Slide 118 text

その他 •管理画面にBasic認証の設定が可能 •IP制限も可能

Slide 119

Slide 119 text

MT環境変数

Slide 120

Slide 120 text

MT環境変数とは •MTの環境変数を管理画面から設定することができます。 –http://www.movabletype.jp/documentation/appendices /config-directives/ •設定不可能な環境変数もあります –http://www.movabletype.jp/documentation/cloud/specification s/config-directives.html

Slide 121

Slide 121 text

•システム => クラウドサービス => MT環境変数

Slide 122

Slide 122 text

環境のリストア

Slide 123

Slide 123 text

環境のリストアでできること •MTクラウドおよび公開済みのWebサイトのデータをすべて任意の時点の状態に戻す機能

Slide 124

Slide 124 text

環境のリストア •システム => クラウドサービス => 環境のリストア

Slide 125

Slide 125 text

ハンズオン •リストアを行ってみましょう •最初の状態に戻っていることが確認できますか？

Slide 126

Slide 126 text

操作画面

Slide 127

Slide 127 text

•その他の機能

Slide 128

Slide 128 text

ディスクの使用量 •現在利用しているディスク容量が一目でわかるサービス •システム => クラウドサービス => ディスクの使用量

Slide 129

Slide 129 text

自動アップデート •MTを自動的に最新版にアップデートする機能。無効にすることも可能。

Slide 130

Slide 130 text

サンドボックスサービス

Slide 131

Slide 131 text

サンドボックスサービスとは •MTクラウドで構築した仮想マシンデータを複製して使えるサービス

Slide 132

Slide 132 text

サービス利用料金 Movable Type クラウド版ご利用プランの料金利用可能期間サンドボックス用に契約されている Movable Type クラウド版を解約されるまで利用可能です。作成可能なサンドボックスの数 Movable Type クラウド版１契約あたり、いくつでも可。 ※ サンドボックス用の Movable Type クラウド版の契約ごとに、それぞれ1度コピーを実施します。複数作成される場合は都度ご契約が必要です。

Slide 133

Slide 133 text

•http://www.sixapart.jp/movabletype/cloud/sa ndbox.html

Slide 134

Slide 134 text

Movable Type ソフトウェア版との違い

Slide 135

Slide 135 text

クラウド版でできて、ソフトウェア版でできないこと •サーバー配信機能 •環境リストア(定期バックアップ) •自動バージョンアップ、他

Slide 136

Slide 136 text

ソフトウェア版でできて、クラウド版でできないこと •ブログの公開パスに制限があります –クラウド版は「/data/file/static」以下のみ –FTPからアクセスすると「/static」ディレクトリのみ確認できます

Slide 137

Slide 137 text

•Movable Type のプログラムファイルの改変はできません。 –alt-search、alt-tmpl などの設定は可能

Slide 138

Slide 138 text

•サーバーへのSSH接続は不許可 –クラウド版は許可していません •一部環境変数は使用できない –StaticWebPathなどのファイルシステム関連 –SQLSetNamesなど、DB関連

Slide 139

Slide 139 text

その他の制限事項 •https://www.sixapart.jp/movabletype/cloud/s pecification.html

Slide 140

Slide 140 text

ソフトウェア版からの移行時のポイント

Slide 141

Slide 141 text

留意点 •DBデータレベルの移行はできない –MTの標準機能「バックアップと復元」を基本とした移行を –移行後は「blogId」の変更に注意

Slide 142

Slide 142 text

例 •MT6のサイトデータ移行 1. MT6のバックアップデータをMT6でバージョンを合わせて復元 1. バージョンに注意(6.2.4=>6.2.4など) 2. MT6からMT7へバージョンアップ 3. MTクラウドへ投入

Slide 143

Slide 143 text

コメントやトラックバックがない場合 •MTのテーマ機能+データのエクスポートによる移行も選択肢

Slide 144

Slide 144 text

無料引越サービス •MTクラウド版を契約した方に対して、一回のみ提供 –https://www.sixapart.jp/movabletype/cloud/migration-service.html

Slide 145

Slide 145 text

•価格

Slide 146

Slide 146 text

No content

Slide 147

Slide 147 text

No content

Slide 148

Slide 148 text

プライベートプラン •より大規模なサイトを運用の場合、個別相談をお受けします。

Slide 149

Slide 149 text

ご参加ありがとうございました。