20180818_MT_HOKURIKU_handson.pdf

Transcript

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