20180809_TAM_MT7_handson.pdf

2018年8月9日 TAM様向けハンズオンの資料です

Transcript

1. TAM様向け Movable Type クラウド版 ハンズオンセミナー 2018年8月9日 シックス・アパート株式会社 長内毅志
2. 自己紹介 •長内毅志 • Movable Type ディベロッパーリレーションマネージャー • エバンジェリスト –趣味 ジョギング (サブフォー) 英語の勉強 (TOEIC 875, 英検準1級) スプラトゥーン2 家族と過ごすこと
3. まず最初に –アカウント情報を元に、アクセスできるか確認しましょう
4. アジェンダ • Movable Type 7 の管理画面と基本操作 • コンテンツタイプを触ってみる • クラウド版独自の機能
5. Movable Type 7 の管理画面と 基本操作
6. • ダッシュボードが表示されま す。本日のハンズオンのため に、最初のサイトを作成しま す。左メニューから「システ ム」をクリックします。
7. • システム設定の画面に移動し ます。左メニューから 「サイト」=>「新規」 をクリックします。
8. • サイトの作成画面に移動しま す。以下の設定をします。 • サイトテーマ =>Rainier • サイト名 =>適宜名前をつける
9. • 続けて設定します。 • タイムゾーン =>UTC+9 • 使用言語 =>日本語 • すべて設定したら「サイトの作 成」をクリックします。
10. • 作成が終わると、サイトの操 作画面に移動します。 • 左メニューもしくは全般設定 ページ内の「再構築」をクリ ックします。
11. • ポップアップウィンドウが開き、再構 築の操作画面が表示されます。 • 再構築とは、Movable Type からhtml を生成するための操作となります。 • 再構築ボタンをクリックします。
12. • 再構築が終了したら、「サイトを 見る」をクリックします。
13. • 本日のハンズオンで操作する サイトが公開されているのが 分かります。
14. ブログではなく「サイト」
15. Movable Type 7 のサイトとは • サイト –登録したコンテンツを管理するための仕組み、入れもの • 従来のウェブサイト、ブログに当たる –記事・ページの管理も可能 –コンテンツタイプの管理も可能
16. 1つのWebサイトを構成する例
17. 複数のWebサイトを構成する例
18. コンテンツタイプを主とした構造化
19. 記事の作成と公開
20. ハンズオン •最初の記事を投稿してみましょう
21. • 左のメニューから 「記事」=>「新規」 をクリックします。 • 最初の記事作成画面が表示さ れます。
23. • タイトルと本文を入力して、右メ ニューの「公開」ボタンをクリッ クします。
25. • 公開が終わったら、サイトを もう一度見てみましょう。 • 今公開した記事が、新たに反 映されています。
26. •再構築とは –htmlを出力するための操作 –100ページ存在する場合、100ページのhtmlを実際に出力 する
27. •「再構築」ボタンをクリックしてみましょう。 •ポップアップウィンドウが出たら、再構築を実行 してみましょう。
28. コンテンツタイプを触ってみる
29. 素材ファイルをダウンロード
30. • 解凍すると[01_MTGram] [02_recipe] の2フォルダが展開されます
31. フォルダ内のファイルを確認しましょう •01_MTGram –mtgram.html –サンプル写真
32. 写真ギャラリーを開発する
33. 開発するもの •写真ギャラリー「MTGram」 •写真「だけ」を登録していくウェブサービス
34. • 左メニュー [コンテンツタイプ] =>[新規]を選び、名前を「 MTGram」とします。
35. • 画面右部から[画像アセット] を選び、中央にドラッグアンド ドロップします。名前を「画像 」と指定します。[このフィー ルドは必須ですか？]をオンに します 。
36. • ユーザーに新規イメージのア ップロードを許可します。 終わったら[保存］ボタンをク リックします。
37. • コンテンツタイプがセーブされ たことを確認して、次に進みま す。
38. • 右部メニューから[デザイン ]=>[テンプレート]を選びま す。画面上部の選択肢から[ インデックス]を選び、新規 作成をクリックします。
39. • テンプレート名を[MTGram]と します。 • [mtgram.html]の中身をコピー &ペーストします。
40. • 出力ファイル名を [mtgram.html]とします • [変更を保存]ボタンを押してセ ーブし、[保存と再構築]ボタン をクリックします。
41. • 再構築が完了したら、右メニューから「公開さ れたテンプレートを確認」リンクをクリックし ます。
42. • MTGramのサービスページが 公開されています。写真が未 登録の状態なので、登録して いきましょう。
43. • 右メニューから[コンテンツデ ータ] => [MTGram]を選びま す。 • [MTGramを作成]を選びます 。
44. • データ入力画面に変わります 。[データ識別ラベル]を入力 します。[画像]から［アセッ トを選択］を選びます。
45. • 写真挿入画面が表示されるので、 任意の画像をアップロードします 。
46. • 画像が選択されたことを確認 して、［挿入］ボタンをクリ ックします。
47. • 画像の挿入が終わったら「公 開」ボタンを押します。
48. • 公開ができたら、同じ要領で何枚 か写真を登録していきましょう
49. • 先程公開したインデックステンプレート「MTGram」 のページを確認します。 • 写真ギャラリーが公開されているのがわかります。
50. •ウェブサイトのような「ページ」がない •一覧ページ+写真のみ •「コンテンツ」という粒度でデータを管理 =>コンテンツタイプ
51. レシピサイトを開発する
52. この章で開発するもの •レシピ集 •レシピの材料・写真・作り方データベース
53. • メニューの [コンテンツタイプ]=>[新 規]を選びます。 • 名前を「レシピブック」と して先に進みます。
54. • 右部のフィールドから[テキ スト]を選んで中央へドラッ グアンドドロップします。 • 名前を「レシピ名」と入力し ます。
55. • [このフィールドは必須です か?]をチェックします。 • [閉じる]をクリックして次の フィールドの追加に移ります 。
56. • 右部のフィールドから[画像 アセット]を選び中央にドロ ップします。 • 名前を「写真」として、[こ のフィールドは必須ですか？ ] をチェックします
57. • [新しい画像ファイルのアップロード を許可する]をオンにします。 • [閉じる]をクリックして次のフィー ルドの追加に移ります。
58. • 右部のフィールドから[一覧 ]を選び中央にドロップしま す。 • 名前を「材料」とし、「こ のフィールドは必須ですか ？」をオンにします。
59. • [閉じる]ボタンをクリックして、 次のフィールドの追加に移ります 。
60. • 右部のフィールドから[テキ スト(複数行)]を選び中央へ ドロップします。 • 名前を「作り方」とします。
61. • [入力フォーマット]を「なし」 もしくは「改行を変換」にしま す。 • [閉じる]ボタンをクリックしま す。
62. • 4つのフィールドをすべて設定 したら、ページ下部の[保存]ボ タンをクリックします。
63. • コンテンツタイプの設定が終了 しました。 • 次に、テンプレートの設定画面 に移動します。
64. • 左部メニューから[デザイン ]⇒［テンプレート］を選択 します。 • 画面上部から［インデックス ］を選び［新規作成］をクリ ックします。
65. • テンプレート名を「レシピイ ンデックス」とします。 • テンプレートの内容に [recipe_index.html]の内容 を貼り付けます。
66. • [出力ファイル名]を「recipe.html 」とします。 • ページ下部の[保存]ボタンをクリ ックします。
67. • 保存終了後[保存と再構築]ボ タンをクリックします。
68. • 再構築が終了したら、右メニ ューの「公開されたテンプレ ートを確認」リンクをクリッ クしてみます。
69. • レシピブックのインデックス ページが表示されていれば OKです。
70. • 再度、左部メニューから[デ ザイン]⇒［テンプレート］ を選択します。 • 画面上部から［インデックス ］を選び［新規作成］をクリ ックします。
71. • 新規のテンプレートを作成し ます。名前を「レシピスタイ ル」とします。
72. • [style.css]の中身をコピーして貼 り付けます。 • ファイル名は 「style.css」とします。
73. • [保存]ボタンをクリックしま す。 • 保存後、再構築を行います。
74. • CSSの作成が終了したら ［デザイン］⇒［テンプレー ト］を選びます。 • 画面上部から［コンテンツタ イプアーカイブ］を選び［新 規作成］ボタンをクリックし ます。
75. • テンプレート名を[レシピ詳 細]とします。 • コンテンツタイプは [レシピブック]を選択します 。
76. • 「detail.html」の中身をコ ピーして貼り付けます。 • 「保存」ボタンを押します。
77. • テンプレートの保存後「新し いアーカイブマッピングを作 成」をクリックします。
78. • パスを [yyyy/mm/content- basename.html] として選びます。 • [追加]ボタンをクリックします
79. • 「アーカイブマッピングの更 新を完了しました」というメ ッセージが表示されたら［変 更を保存］ボタンをクリック します。
80. • 保存が完了したら、テンプレ ートの設定は終了です。
81. • データを入力します。メニュー の [コンテンツデータ]=>[レシピ ブック]を選び [レシピブックを作成]をクリッ クします。
82. • データ入力画面が表示されま す。 • サンプルデータを利用して、 入力していきます • 「データ識別ラベル」は任意 のラベル名を入力します。
83. • 「材料」の入力フィールドは 、入力欄の右にある「＋」ボ タンをおすことで、フィール ドを増やせます。
84. データの入力が終わったら 、右メニューの[公開]ボタ ンをクリックします。
85. • 公開が終わったら [表示]リンクをクリックして みましょう
86. • 入力したレシピデータが表示 されます。 • 「トップへ戻る」をクリック してみましょう。
87. • トップページにも新着レシピ が表示されているのがわかり ます。
88. クラウド版独自の機能を 理解する
89. Movable Type クラウド版とは •シックス・アパートがサーバー管理 •管理画面の動作が速く快適 •常に最新版を使用可能 •テクニカルサポート付き •独自機能
90. •2種類のウェブサーバー –nginx版 •低価格、高速。 •5000円/月から –Apache版 •一般的なウェブサーバー、マルチドメイン対応。 •19000円/月から
91. nginxとは • Apache、IISに続くシェア (netcraft社、2016/09) • 軽量、高速。メモリ使用量が少ない • デメリットもある(.htaccessが使えないなど)
92. MTクラウド版の構成 •クラウド版独自の構成で高速化を実現 –管理画面、再構築ともに最適化されている •クラウド版独自機能 –後述します
93. MTクラウドのドキュメント •http://www.movabletype.jp/documentation/cl oud
94. サーバー配信機能
95. サーバー配信機能とは •MTクラウドで生成したコンテンツを外部のサー バーへ配信して公開する機能 •MTクラウドをステージング環境として利用可能 •FTP(S)で配信
96. サーバー配信機能 •設定=>サーバー配信
97. Basic認証
98. Basic認証でできること •公開しているウェブサイト・ブログに対して Basic認証の設定ができます •ファイルに対しても設定できます •複数設定が可能です
99. Basic認証 • 左メニューから クラウドサービス=>Basic認証
100. ハンズオン •ウェブサイト・ブログにBasic認証をかけてみま しょう •サイトパスはMTクラウドで利用しているドメイ ンを基点として 「/」から相対パスで指定します
101. 設定例 設定例 認証設定したい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」の場合
102. HTTPリダイレクト
103. HTTPリダイレクトとは •あるディレクトリやファイルへのアクセスを、自 動的に他のURLに転送する仕組み
104. HTTPリダイレクト • 左メニューから クラウドサービス => Redirect
105. ハンズオン •ウェブサイトのindex.htmlをYahoo!へリダイレ クトしてみましょう。 • / => https://www.yahoo.co.jp
106. 管理画面のセキュリティ設定
107. ブルートフォースアタック(総当り攻撃) イラスト：「2014年版 情報セキュリティ10大脅威」より http://www.ipa.go.jp/security/vuln/10threats2014.html
108. ブルートフォースの例 [30/Aug/2014:22:09:48 +0900] "POST /wp-login.php HTTP/1.0" 200 5529 "-" "-" [30/Aug/2014:22:09:49 +0900] "POST /wp-login.php HTTP/1.0" 200 5529 "-" "-" [30/Aug/2014:22:09:50 +0900] "POST /wp-login.php HTTP/1.0" 200 5529 "-" "-" [30/Aug/2014:22:09:53 +0900] "POST /mt.cgi HTTP/1.0" 200 5529 "-" "-" [30/Aug/2014:22:09:54 +0900] "POST /mt.cgi HTTP/1.0" 200 5529 "-" "-" [30/Aug/2014:22:09:55 +0900] "POST /mt.cgi HTTP/1.0" 200 5529 "-" "-" [30/Aug/2014:22:09:56 +0900] "POST /mt.cgi HTTP/1.0" 200 5529 "-" "-" [30/Aug/2014:22:09:58 +0900] "POST /mt.cgi HTTP/1.0" 200 5529 "-" "-"
109. コード内の識別情報
110. 管理画面のセキュリティ設定とは •管理画面のURLを任意に変更することができます
111. •システム => クラウドサービス => セキュリティ
112. ハンズオン •管理画面のURLを任意に変更してみましょう •変更後、一度ログアウトして再ログインしましょ う
113. その他 •管理画面にBasic認証の設定が可能 •IP制限も可能
114. MT環境変数
115. MT環境変数とは •MTの環境変数を管理画面から設定することがで きます。 –http://www.movabletype.jp/documentation/appendices /config-directives/ •設定不可能な環境変数もあります –http://www.movabletype.jp/documentation/cloud/specification s/config-directives.html
116. •システム => クラウドサービス => MT環境変数
117. 環境のリストア
118. 環境のリストアでできること •MTクラウドおよび公開済みのWebサイトのデー タをすべて任意の時点の状態に戻す機能
119. 環境のリストア •システム => クラウドサービス => 環境のリストア
120. ハンズオン •リストアを行ってみましょう •最初の状態に戻っていることが確認できますか？
121. •その他の機能
122. ディスクの使用量 •現在利用しているディスク容量が一目でわかるサ ービス •システム => クラウドサービス => ディスクの使用量
123. 自動アップデート •MTを自動的に最新版にアップデートする機能。 無効にすることも可能。
124. サンドボックスサービス
125. サンドボックスサービスとは •MTクラウドで構築した仮想マシンデータを複製 して使えるサービス
126. サービス利用料金 ご契約中のプランの月額料金1カ月分 （＋消費税） サンドボックス利用 可能期間 お申し込み月の翌月末日まで 申し込み期限 毎月25日まで（25日が休業の場合は直 前の前の営業日） ※ 26日以降のお申し込みは翌月1日のお 申し込み扱いとなります。 作成可能なサンド ボックスの数 Movable Type クラウド版 １契約につき １つまで
127. •http://www.sixapart.jp/movabletype/cloud/sa ndbox.html
128. Movable Type ソフトウェア版との違い
129. クラウド版でできて、ソフトウェア版でできないこと •サーバー配信機能 •Basic認証 •HTTPリダイレクト •環境リストア(定期バックアップ) •自動バージョンアップ、他
130. ソフトウェア版でできて、クラウド版でできないこと •ブログの公開パスに制限があります –クラウド版は「/data/file/static」以下の み –FTPからアクセスすると「/static」ディレ クトリのみ確認できます
131. •Movable Type のプログラムファイルの改変はで きません。 –alt-search、alt-tmpl などの設定は可能
132. •サーバーへのSSH接続は不許可 –クラウド版は許可していません •一部環境変数は使用できない –StaticWebPathなどのファイルシステム関連 –SQLSetNamesなど、DB関連
133. その他の制限事項 •http://www.sixapart.jp/movabletype/cloud/sp ecification.html
134. ソフトウェア版からの 移行時のポイント
135. 留意点 •DBデータレベルの移行はできない –MTの標準機能「バックアップと復元」を基本とした移行を –移行後は「blogId」の変更に注意
136. 例 •MT6のサイトデータ移行 1. MT6のバックアップデータをMT6でバージョンを合わせ て復元 1. バージョンに注意(6.2.4=>6.2.4など) 2. MT6からMT7へバージョンアップ 3. MTクラウドへ投入
137. コメントやトラックバックがない場合 •MTのテーマ機能+データのエクスポートによる 移行も選択肢
138. 移行用のテンプレート •「バックアップと復元」や「エクスポート」が使 えない場合、テンプレートを利用したデータ作成 という手がある –https://github.com/movabletype/mt- recipes/blob/master/Export%20entry%20data%20in%2 0MT%20format.md
139. 無料引越サービス •MTクラウド版を契約した方に対して、一回のみ 提供 –https://www.sixapart.jp/movabletype/cloud/migration-service.html
140. •価格
143. プライベートプラン •より大規模なサイトを運用の場合、個別相談をお 受けします。
144. ご参加ありがとうございました。