2018年8月18日 MT北陸ハンズオン資料

Transcript

1. MT北陸向け Movable Type 7 ハンズオン 2018年8月19日 シックス・アパート株式会社 長内毅志
2. •長内毅志 –2011年～ Movable Typeプロダクトマネージャー –2014年～ ディベロッパーリレーションマネージャー エバンジェリスト –趣味 ダンス (ストリート、ジャズ) ジョギング (サブフォー) 英語の勉強 (TOEIC 875, 英検準1級) 家族と過ごすこと
3. 接続確認 •Wifiの接続を確認しましょう •手元のハンズオン用アカウントに接続してみまし ょう
4. アジェンダ •「ページ」と「コンテンツ」 –ウェブ制作者・開発者の視点からおさらいする •Movable Type 7の概要とコンテンツタイプ •ハンズオン
5. 今日のゴール •「コンテンツタイプ」が果たす役割とメリットを 理解してもらう •Movable Type 7 のコンテンツタイプに触れても らう •コンテンツタイプの設計と開発を体験してもらう
6. Movable Type 7 へサインインする
7. •アカウント情報を元に Movable Type へサイ ンインします。
8. • ダッシュボードが表示されま す。 • [Site List]から、皆さんに割 り当てられたサイト名をクリ ックします。
9. •Movable Type 7 ではコンテンツを [サイト]という単位で管理していきます。 •[チャイルドサイト]を作って階層構造も作れます
10. •右メニューから 「システム」をクリックし ます。
11. • 右メニューから 「サイト」⇒「新規」をクリ ックします。
12. • ハンズオンに使う最初のサイト を作成します。 サイトテーマ ⇒Rainier サイト名 ⇒任意の名前 を入力します。
13. • テーマとサイト名を入力した ら、画面下部にある「サイト の作成」ボタンをクリックし ます。
14. • サイトの作成が終わったら、 画面右部もしくは中央の「再 構築」をクリックします。
15. •再構築とは –htmlを出力するための操作 –100ページ存在する場合、100ページのhtmlを実際に出力 する
16. •「再構築」ボタンをクリックしてみましょう。 •ポップアップウィンドウが出たら、再構築を実行 してみましょう。
17. • 再構築が終わったら、ポップ アップウィンドウの「サイト を見る」もしくは、管理画面 右メニューの「サイトの表示 」をクリックします。
18. • 記事がなにもない、初期状態 のサイトが表示されます。
19. 記事の作成 記事 => 新規をクリック
20. ハンズオン •最初の記事を投稿してみましょう
24. ページとコンテンツ
25. ウェブサイトの構造、htmlの構造
27. タイトル 見出し 段落
28. title Heading Paragraph
29. <h1> <h2> <p>
30. htmlの構造 •論文の構造に非常に近い •ロジカルに情報を伝える •まとまった情報を「ページ」という単位で表示す ることに長けている •「ページ」をまとめることで「ウェブサイト」が できた
31. ウェブサイトの構造
32. •[ページ]という概念では捉えづらいコンテンツが 増え始めている
35. •「ページ」の概念とは異なるコンテンツ設計
36. http://www.nadeshikoleague.jp/
37. https://www.sixapart.jp/business/nadeshikoleague.html
38. 現在のコンテンツ ネット上のコンテンツ≠ページ
39. •ネット上のコンテンツ ≠ ウェブページ •細かい粒度でデータを管理する必要性 •「ページ」ではなく、「コンテンツ」を適切な形 で設計・配信できるシステム ＝CMS
40. Movable Type 7 の概要と コンテンツタイプ
41. • コンテンツを管理しやすいシステムへ • Content Type (コンテンツタイプ) 機能を新規搭載
42. •自由にコンテンツをデザインして管理する •MTタグで利用可能 •アーカイブマッピングの柔軟性、多様性はそのま まに •サイト管理の柔軟さの実現
43. ネット上のあらゆるコンテンツの配信システムとして
44. コンテンツタイプとは •0 からすべての要素を設計可能 •「ウェブページ」も、複雑な「コンテンツ」も
45. これまでのコンテンツ設計 •記事フィールド ＋カスタムフィールド •「ページ」をベースに した画面設計
46. コンテンツタイプのコンテンツ設計 •ドラッグ＆ドロップで自由にフィールドを定義
47. •数値、文字列、画像、ファイル、日時、 Content-Type など… •プラグインで拡張可能 •複雑なコンテンツでも、一定のルールに誘導
48. ページの編集で良く聞く質問 写真=>文字⇒写真のよう にレイアウトしたい…
49. ブロックエディタ
50. コンテンツタイプに対応した「Data API Ver.4」 •「ヘッドレス」CMS •コンテンツタイプのデータをAPIで操作
51. •コンテンツごとの可用性、可搬性を高め •コンテンツをより大きな価値に変えられる •「Reusable」なコンテンツ管理を目指して
52. ハンズオン用素材ファイルを ダウンロードする
53. 素材ファイルをダウンロード
54. • 解凍すると[01_MTGram] [02_recipe] の2フォルダが展開されます
55. フォルダ内のファイルを確認しましょう •01_MTGram –mtgram.html –サンプル写真
56. •02_recipe –recipe_index.html –style.css –detail.html –レシピデータと画像
57. 写真ギャラリーを開発する
58. 開発するもの •写真ギャラリー「MTGram」 •写真「だけ」を登録していくウェブサービス
59. • 左メニュー [コンテンツタイプ] =>[新規]を選び、名前を「 MTGram」とします。
60. • 画面右部から[画像アセット] を選び、中央にドラッグアンド ドロップします。名前を「画像 」と指定します。[このフィー ルドは必須ですか？]をオンに します 。
61. • ユーザーに新規イメージのア ップロードを許可します。 終わったら[保存］ボタンをク リックします。
62. • コンテンツタイプがセーブされ たことを確認して、次に進みま す。
63. • 右部メニューから[デザイン ]=>[テンプレート]を選びま す。画面上部の選択肢から[ インデックス]を選び、新規 作成をクリックします。
64. • テンプレート名を[MTGram]と します。 • [mtgram.html]の中身をコピー &ペーストします。
65. • 出力ファイル名を [mtgram.html]とします • [変更を保存]ボタンを押してセ ーブし、[保存と再構築]ボタン をクリックします。
66. • 再構築が完了したら、右メニューから「公開さ れたテンプレートを確認」リンクをクリックし ます。
67. • MTGramのサービスページが 公開されています。写真が未 登録の状態なので、登録して いきましょう。
68. • 右メニューから[コンテンツデ ータ] => [MTGram]を選びま す。 • [MTGramを作成]を選びます 。
69. • データ入力画面に変わります 。[データ識別ラベル]を入力 します。[画像]から［アセッ トを選択］を選びます。
70. • 写真挿入画面が表示されるので、 任意の画像をアップロードします 。
71. • 画像が選択されたことを確認 して、［挿入］ボタンをクリ ックします。
72. • 画像の挿入が終わったら「公 開」ボタンを押します。
73. • 公開ができたら、同じ要領で何枚 か写真を登録していきましょう
74. • 先程公開したインデックステンプレート「MTGram」 のページを確認します。 • 写真ギャラリーが公開されているのがわかります。
76. タグの解説 •<mt:Contents>-</mt:Contents> –ブロックタグ –コンテンツデータを一覧するためのブロックタグです。
77. •<mt:Contents name="MTGram" limit="3"> •コンテンツタイプ名「MTGram」からデータを取 得する
78. •<mt:ContentField>-</mt:ContentField> –コンテンツデータの各フィールドに登録されたデータを表 示するためのタグです
79. <mt:ContentField label="画像"> <a class="lightbox" href="<mt:AssetURL>"> <img src="<mt:AssetThumbnailURL square="1">"> </a> </mt:ContentField> • [画像]という名前のコンテンツフィールドからデータを取得 • [画像]に登録されたアイテムのURLを取得 • サムネイルを生成して、正方形に加工する
80. この章で確認したこと •コンテンツタイプではコンテンツを自由に設計で きる •テンプレートの書き方は従来と変わらない •入力画面は必要なフィールドだけが表示される
81. レシピサイトを開発する
82. この章で開発するもの •レシピ集 •レシピの材料・写真・作り方データベース
83. • メニューの [コンテンツタイプ]=>[新 規]を選びます。 • 名前を「レシピブック」と して先に進みます。
84. • 右部のフィールドから[テキ スト]を選んで中央へドラッ グアンドドロップします。 • 名前を「レシピ名」と入力し ます。
85. • [このフィールドは必須です か?]をチェックします。 • [閉じる]をクリックして次の フィールドの追加に移ります 。
86. • 右部のフィールドから[画像 アセット]を選び中央にどrっ ぷします。 • 名前を「写真」として、[こ のフィールドは必須ですか？ ] をチェックします
87. • [新しい画像ファイルのアップロード を許可する]をオンにします。 • [閉じる]をクリックして次のフィー ルドの追加に移ります。
88. • 右部のフィールドから[一覧 ]を選び中央にドロップしま す。 • 名前を「材料」とし、「こ のフィールドは必須ですか ？」をオンにします。
89. • [閉じる]ボタンをクリックして、 次のフィールドの追加に移ります 。
90. • 右部のフィールドから[テキ スト(複数行)]を選び中央へ ドロップします。 • 名前を「作り方」とします。
91. • [入力フォーマット]を「なし」 もしくは「改行を変換」にしま す。 • [閉じる]ボタンをクリックしま す。
92. • 4つのフィールドをすべて設定 したら、ページ下部の[保存]ボ タンをクリックします。
93. • コンテンツタイプの設定が終了 しました。 • 次に、テンプレートの設定画面 に移動します。
94. • 左部メニューから[デザイン ]⇒［テンプレート］を選択 します。 • 画面上部から［インデックス ］を選び［新規作成］をクリ ックします。
95. • テンプレート名を「レシピイ ンデックス」とします。 • テンプレートの内容に [recipe_index.html]の内容 を貼り付けます。
96. • [出力ファイル名]を「recipe.html 」とします。 • ページ下部の[保存]ボタンをクリ ックします。
97. • 保存終了後[保存と再構築]ボ タンをクリックします。
98. • 再構築が終了したら、右メニ ューの「公開されたテンプレ ートを確認」リンクをクリッ クしてみます。
99. • レシピブックのインデックス ページが表示されていれば OKです。
100. • 再度、左部メニューから[デ ザイン]⇒［テンプレート］ を選択します。 • 画面上部から［インデックス ］を選び［新規作成］をクリ ックします。
101. • 新規のテンプレートを作成し ます。名前を「レシピスタイ ル」とします。
102. • [style.css]の中身をコピーして貼 り付けます。 • ファイル名は 「style.css」とします。
103. • [保存]ボタンをクリックしま す。 • 保存後、再構築を行います。
104. • CSSの作成が終了したら ［デザイン］⇒［テンプレー ト］を選びます。 • 画面上部から［コンテンツタ イプアーカイブ］を選び［新 規作成］ボタンをクリックし ます。
105. • テンプレート名を[レシピ詳 細]とします。 • コンテンツタイプは [レシピブック]を選択します 。
106. • 「detail.html」の中身をコ ピーして貼り付けます。 • 「保存」ボタンを押します。
107. • テンプレートの保存後「新し いアーカイブマッピングを作 成」をクリックします。
108. • パスを [yyyy/mm/content- basename.html] として選びます。 • [追加]ボタンをクリックします
109. • 「アーカイブマッピングの更 新を完了しました」というメ ッセージが表示されたら［変 更を保存］ボタンをクリック します。
110. • 保存が完了したら、テンプレ ートの設定は終了です。
111. • データを入力します。メニュー の [コンテンツデータ]=>[レシピ ブック]を選び [レシピブックを作成]をクリッ クします。
112. • データ入力画面が表示されま す。 • サンプルデータを利用して、 入力していきます • 「データ識別ラベル」は任意 のラベル名を入力します。
113. • 「材料」の入力フィールドは 、入力欄の右にある「＋」ボ タンをおすことで、フィール ドを増やせます。
114. データの入力が終わったら 、右メニューの[公開]ボタ ンをクリックします。
115. • 公開が終わったら [表示]リンクをクリックして みましょう
116. • 入力したレシピデータが表示 されます。 • 「トップへ戻る」をクリック してみましょう。
117. • トップページにも新着レシピ が表示されているのがわかり ます。
118. •<mt:ContentField>を使い、各コンテンツの値 を取得しています •値は<mt:ContentFieldValue>で取得しています
119. <mt:ContentField content_field=“レシピ名"> <mt:ContentFieldValue> </mt:ContentField>
120. この章で確認したこと •作成したコンテンツタイプのデータは [Content Type]のアーカイブテンプレートで出 力できる •MTの記事やページと同様、リスト表示と個別 データの関連付けもできる
121. •ウェブコンテンツに合わせて、リストや複数行な ど、柔軟なコンテンツタイプを設定することがで きる
122. Contentタグあれこれ
123. •<mt:ContentDate> –公開日時を返します –MT:EntryDate の用に使います
124. サンプル <mt:Contents content_type="イベント・セミナー"> 公開日: <mt:ContentDate> </mt:Contents> => May 30, 2017 7:30 PM
125. •<MT:ContentAuthorDisplayName> –コンテンツ作成者の表示名を返します
126. サンプル <mt:Contents content_type="イベント・セミナー"> <mt:ContentAuthorDisplayName> </mt:Contents> => Takeshi Nick Osanai
127. •<MT:ContentSiteName> –Content Data が属するサイトの名前を返します
128. <mt:Contents content_type=“MTGram”> <mt:ContentSiteName> </mt:Contents> => MTGram
129. •MTEntries •MTPages の感覚で試用できます。 •詳細はタグリファレンスをご覧ください。
130. Appendix
131. 迷わないコンテンツ管理のために
133. クラウド版独自の機能を 理解する
134. Movable Type クラウド版とは •シックス・アパートがサーバー管理 •管理画面の動作が速く快適 •常に最新版を使用可能 •テクニカルサポート付き •独自機能
135. •2種類のウェブサーバー –nginx版 •低価格、高速。 •5000円/月から –Apache版 •一般的なウェブサーバー、マルチドメイン対応。 •19000円/月から
136. MTクラウド版の構成 •クラウド版独自の構成で高速化を実現 –管理画面、再構築ともに最適化されている •クラウド版独自機能 –後述します
137. MTクラウドのドキュメント •http://www.movabletype.jp/documentation/cl oud
138. サーバー配信機能
139. サーバー配信機能とは •MTクラウドで生成したコンテンツを外部のサー バーへ配信して公開する機能 •MTクラウドをステージング環境として利用可能 •FTP(S)で配信
140. サーバー配信機能 •設定=>サーバー配信
141. Basic認証
142. Basic認証でできること •公開しているウェブサイト・ブログに対して Basic認証の設定ができます •ファイルに対しても設定できます •複数設定が可能です
143. Basic認証 • 左メニューから クラウドサービス=>Basic認証
144. 設定例 設定例 認証設定したい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」の場合
145. HTTPリダイレクト
146. HTTPリダイレクトとは •あるディレクトリやファイルへのアクセスを、自 動的に他のURLに転送する仕組み
147. HTTPリダイレクト • 左メニューから クラウドサービス => Redirect
148. 管理画面のセキュリティ設定
149. ブルートフォースアタック(総当り攻撃) イラスト：「2014年版 情報セキュリティ10大脅威」より http://www.ipa.go.jp/security/vuln/10threats2014.html
150. 管理画面のセキュリティ設定とは •管理画面のURLを任意に変更することができます
151. •システム => クラウドサービス => セキュリティ
152. その他 •管理画面にBasic認証の設定が可能 •IP制限も可能
153. MT環境変数
154. MT環境変数とは •MTの環境変数を管理画面から設定することがで きます。 –http://www.movabletype.jp/documentation/appendices /config-directives/ •設定不可能な環境変数もあります –http://www.movabletype.jp/documentation/cloud/specification s/config-directives.html
155. •システム => クラウドサービス => MT環境変数
156. 環境のリストア
157. 環境のリストアでできること •MTクラウドおよび公開済みのWebサイトのデー タをすべて任意の時点の状態に戻す機能
158. 環境のリストア •システム => クラウドサービス => 環境のリストア
159. •その他の機能
160. ディスクの使用量 •現在利用しているディスク容量が一目でわかるサ ービス •システム => クラウドサービス => ディスクの使用量
161. 自動アップデート •MTを自動的に最新版にアップデートする機能。 無効にすることも可能。
162. サンドボックスサービス
163. サンドボックスサービスとは •MTクラウドで構築した仮想マシンデータを複製 して使えるサービス
164. サービス利用料金 ご契約中のプランの月額料金1カ月分 （＋消費税） サンドボックス利用 可能期間 お申し込み月の翌月末日まで 申し込み期限 毎月25日まで（25日が休業の場合は直 前の前の営業日） ※ 26日以降のお申し込みは翌月1日のお 申し込み扱いとなります。 作成可能なサンド ボックスの数 Movable Type クラウド版 １契約につき １つまで
165. •http://www.sixapart.jp/movabletype/cloud/sa ndbox.html
166. Movable Type ソフトウェア版との違い
167. クラウド版でできて、ソフトウェア版でできないこと •サーバー配信機能 •Basic認証 •HTTPリダイレクト •環境リストア(定期バックアップ) •自動バージョンアップ、他
168. ソフトウェア版でできて、クラウド版でできないこと •ブログの公開パスに制限があります –クラウド版は「/data/file/static」以下の み –FTPからアクセスすると「/static」ディレ クトリのみ確認できます
169. •Movable Type のプログラムファイルの改変はで きません。 –alt-search、alt-tmpl などの設定は可能
170. •サーバーへのSSH接続は不許可 –クラウド版は許可していません •一部環境変数は使用できない –StaticWebPathなどのファイルシステム関連 –SQLSetNamesなど、DB関連
171. その他の制限事項 •http://www.sixapart.jp/movabletype/cloud/sp ecification.html
172. ソフトウェア版からの 移行時のポイント
173. 留意点 •DBデータレベルの移行はできない –MTの標準機能「バックアップと復元」を基本とした移行を –移行後は「blogId」の変更に注意
174. 例 •MT6のサイトデータ移行 1. MT6のバックアップデータをMT6でバージョンを合わせ て復元 1. バージョンに注意(6.2.4=>6.2.4など) 2. MT6からMT7へバージョンアップ 3. MTクラウドへ投入
175. コメントやトラックバックがない場合 •MTのテーマ機能+データのエクスポートによる 移行も選択肢
176. 移行用のテンプレート •「バックアップと復元」や「エクスポート」が使 えない場合、テンプレートを利用したデータ作成 という手がある –https://github.com/movabletype/mt- recipes/blob/master/Export%20entry%20data%20in%2 0MT%20format.md
177. 無料引越サービス •MTクラウド版を契約した方に対して、一回のみ 提供 –https://www.sixapart.jp/movabletype/cloud/migration-service.html
178. •価格
181. プライベートプラン •より大規模なサイトを運用の場合、個別相談をお 受けします。
182. Movable Type 7 をより詳しく理解する ために
183. 本日の資料
184. •https://goo.gl/E7zdcA
185. プロダクトマネージャーの詳説資料 https://goo.gl/mYtJGN
186. サンプルテーマ「Jungfrau」 https://demo.movabletype.jp/jungfrau/
187. ダウンロード https://goo.gl/s9xkPU
188. マニュアル https://goo.gl/VVBhG8
189. プラグイン開発者のためのスタイルガイド https://goo.gl/hVzyuy
190. •ハンズオン環境はこの時間限り有効です。 •終了後、使えなくなります。
191. ご参加ありがとうございました。