2018年12月 MT長野 ハンズオン資料

Transcript

1. Movable Type 7 ハンズオン 2018年12月1日 シックス・アパート株式会社 長内毅志
2. •長内毅志 –2011年～ Movable Typeプロダクトマネージャー –2014年～ ディベロッパーリレーションマネージャー エバンジェリスト –趣味 ダンス (ストリート、ジャズ) ジョギング (サブフォー) 英語の勉強 (TOEIC 875, 英検準1級) 家族と過ごすこと
3. 最近ハマっていること •スプラ2ガチ勢
4. 接続確認 •Wifiの接続を確認しましょう •手元のハンズオン用アカウントに接続してみまし ょう
5. アジェンダ •「ページ」と「コンテンツ」 –ウェブ制作者・開発者の視点からおさらいする •Movable Type 7の概要とコンテンツタイプ •ハンズオン
6. 今日のゴール •「コンテンツタイプ」が果たす役割とメリットを 理解してもらう •Movable Type 7 のコンテンツタイプに触れても らう •コンテンツタイプの設計と開発を体験してもらう
7. Movable Type 7 へサインインする
8. •アカウント情報を元に Movable Type へサイ ンインします。
9. • ダッシュボードが表示されま す。 • [Site List]から、皆さんに割 り当てられたサイト名をクリ ックします。
10. •Movable Type 7 ではコンテンツを [サイト]という単位で管理していきます。 •[チャイルドサイト]を作って階層構造も作れます
11. •右メニューから 「システム」をクリックし ます。
12. • 右メニューから 「サイト」⇒「新規」をクリ ックします。
13. • ハンズオンに使う最初のサイト を作成します。 サイトテーマ ⇒Rainier サイト名 ⇒任意の名前 を入力します。
14. • テーマとサイト名を入力した ら、画面下部にある「サイト の作成」ボタンをクリックし ます。
15. • サイトの作成が終わったら、 画面右部もしくは中央の「再 構築」をクリックします。
16. •再構築とは –htmlを出力するための操作 –100ページ存在する場合、100ページのhtmlを実際に出力 する
17. •「再構築」ボタンをクリックしてみましょう。 •ポップアップウィンドウが出たら、再構築を実行 してみましょう。
18. • 再構築が終わったら、ポップ アップウィンドウの「サイト を見る」もしくは、管理画面 右メニューの「サイトの表示 」をクリックします。
19. • 記事がなにもない、初期状態 のサイトが表示されます。
20. 記事の作成 記事 => 新規をクリック
21. ハンズオン •最初の記事を投稿してみましょう
25. ページとコンテンツ
26. ウェブサイトの構造、htmlの構造
28. タイトル 見出し 段落
29. title Heading Paragraph
30. <h1> <h2> <p>
31. htmlの構造 •論文の構造に非常に近い •ロジカルに情報を伝える •まとまった情報を「ページ」という単位で表示す ることに長けている •「ページ」をまとめることで「ウェブサイト」が できた
32. ウェブサイトの構造
33. •[ページ]という概念では捉えづらいコンテンツが 増え始めている
36. •「ページ」の概念とは異なるコンテンツ設計
37. http://www.nadeshikoleague.jp/
38. https://www.sixapart.jp/business/nadeshikoleague.html
39. 現在のコンテンツ ネット上のコンテンツ≠ページ
40. •ネット上のコンテンツ ≠ ウェブページ •細かい粒度でデータを管理する必要性 •「ページ」ではなく、「コンテンツ」を適切な形 で設計・配信できるシステム ＝CMS
41. Movable Type 7 の概要と コンテンツタイプ
42. • コンテンツを管理しやすいシステムへ • Content Type (コンテンツタイプ) 機能を新規搭載
43. •自由にコンテンツをデザインして管理する •MTタグで利用可能 •アーカイブマッピングの柔軟性、多様性はそのま まに •サイト管理の柔軟さの実現
44. ネット上のあらゆるコンテンツの配信システムとして
45. コンテンツタイプとは •0 からすべての要素を設計可能 •「ウェブページ」も、複雑な「コンテンツ」も
46. これまでのコンテンツ設計 •記事フィールド ＋カスタムフィールド •「ページ」をベースに した画面設計
47. コンテンツタイプのコンテンツ設計 •ドラッグ＆ドロップで自由にフィールドを定義
48. •数値、文字列、画像、ファイル、日時、 Content-Type など… •プラグインで拡張可能 •複雑なコンテンツでも、一定のルールに誘導
49. ページの編集で良く聞く質問 写真=>文字⇒写真のよう にレイアウトしたい…
50. ブロックエディタ
51. コンテンツタイプに対応した「Data API Ver.4」 •「ヘッドレス」CMS •コンテンツタイプのデータをAPIで操作
52. •コンテンツごとの可用性、可搬性を高め •コンテンツをより大きな価値に変えられる •「Reusable」なコンテンツ管理を目指して
53. ハンズオン用素材ファイルを ダウンロードする
54. 素材ファイルをダウンロード
55. • 解凍すると[01_MTGram] [02_recipe] の2フォルダが展開されます
56. フォルダ内のファイルを確認しましょう •01_MTGram –mtgram.html –サンプル写真
57. •02_recipe –recipe_index.html –style.css –detail.html –レシピデータと画像
58. 写真ギャラリーを開発する
59. 開発するもの •写真ギャラリー「MTGram」 •写真「だけ」を登録していくウェブサービス
60. • 左メニュー [コンテンツタイプ] =>[新規]を選び、名前を「 MTGram」とします。
61. • 画面右部から[画像アセット] を選び、中央にドラッグアンド ドロップします。名前を「画像 」と指定します。[このフィー ルドは必須ですか？]をオンに します 。
62. • ユーザーに新規イメージのア ップロードを許可します。 終わったら[保存］ボタンをク リックします。
63. • コンテンツタイプがセーブされ たことを確認して、次に進みま す。
64. • 右部メニューから[デザイン ]=>[テンプレート]を選びま す。画面上部の選択肢から[ インデックス]を選び、新規 作成をクリックします。
65. • テンプレート名を[MTGram]と します。 • [mtgram.html]の中身をコピー &ペーストします。
66. • 出力ファイル名を [mtgram.html]とします • [変更を保存]ボタンを押してセ ーブし、[保存と再構築]ボタン をクリックします。
67. • 再構築が完了したら、右メニューから「公開さ れたテンプレートを確認」リンクをクリックし ます。
68. • MTGramのサービスページが 公開されています。写真が未 登録の状態なので、登録して いきましょう。
69. • 右メニューから[コンテンツデ ータ] => [MTGram]を選びま す。 • [MTGramを作成]を選びます 。
70. • データ入力画面に変わります 。[データ識別ラベル]を入力 します。[画像]から［アセッ トを選択］を選びます。
71. • 写真挿入画面が表示されるので、 任意の画像をアップロードします 。
72. • 画像が選択されたことを確認 して、［挿入］ボタンをクリ ックします。
73. • 画像の挿入が終わったら「公 開」ボタンを押します。
74. • 公開ができたら、同じ要領で何枚 か写真を登録していきましょう
75. • 先程公開したインデックステンプレート「MTGram」 のページを確認します。 • 写真ギャラリーが公開されているのがわかります。
77. タグの解説 •<mt:Contents>-</mt:Contents> –ブロックタグ –コンテンツデータを一覧するためのブロックタグです。
78. •<mt:Contents name="MTGram" limit="3"> •コンテンツタイプ名「MTGram」からデータを取 得する
79. •<mt:ContentField>-</mt:ContentField> –コンテンツデータの各フィールドに登録されたデータを表 示するためのタグです
80. <mt:ContentField label="画像"> <a class="lightbox" href="<mt:AssetURL>"> <img src="<mt:AssetThumbnailURL square="1">"> </a> </mt:ContentField> • [画像]という名前のコンテンツフィールドからデータを取得 • [画像]に登録されたアイテムのURLを取得 • サムネイルを生成して、正方形に加工する
81. この章で確認したこと •コンテンツタイプではコンテンツを自由に設計で きる •テンプレートの書き方は従来と変わらない •入力画面は必要なフィールドだけが表示される
82. レシピサイトを開発する
83. この章で開発するもの •レシピ集 •レシピの材料・写真・作り方データベース
84. • メニューの [コンテンツタイプ]=>[新 規]を選びます。 • 名前を「レシピブック」と して先に進みます。
85. • 右部のフィールドから[テキ スト]を選んで中央へドラッ グアンドドロップします。 • 名前を「レシピ名」と入力し ます。
86. • [このフィールドは必須です か?]をチェックします。 • [閉じる]をクリックして次の フィールドの追加に移ります 。
87. • 右部のフィールドから[画像 アセット]を選び中央にどrっ ぷします。 • 名前を「写真」として、[こ のフィールドは必須ですか？ ] をチェックします
88. • [新しい画像ファイルのアップロード を許可する]をオンにします。 • [閉じる]をクリックして次のフィー ルドの追加に移ります。
89. • 右部のフィールドから[一覧 ]を選び中央にドロップしま す。 • 名前を「材料」とし、「こ のフィールドは必須ですか ？」をオンにします。
90. • [閉じる]ボタンをクリックして、 次のフィールドの追加に移ります 。
91. • 右部のフィールドから[テキ スト(複数行)]を選び中央へ ドロップします。 • 名前を「作り方」とします。
92. • [入力フォーマット]を「なし」 もしくは「改行を変換」にしま す。 • [閉じる]ボタンをクリックしま す。
93. • 4つのフィールドをすべて設定 したら、ページ下部の[保存]ボ タンをクリックします。
94. • コンテンツタイプの設定が終了 しました。 • 次に、テンプレートの設定画面 に移動します。
95. • 左部メニューから[デザイン ]⇒［テンプレート］を選択 します。 • 画面上部から［インデックス ］を選び［新規作成］をクリ ックします。
96. • テンプレート名を「レシピイ ンデックス」とします。 • テンプレートの内容に [recipe_index.html]の内容 を貼り付けます。
97. • [出力ファイル名]を「recipe.html 」とします。 • ページ下部の[保存]ボタンをクリ ックします。
98. • 保存終了後[保存と再構築]ボ タンをクリックします。
99. • 再構築が終了したら、右メニ ューの「公開されたテンプレ ートを確認」リンクをクリッ クしてみます。
100. • レシピブックのインデックス ページが表示されていれば OKです。
101. • 再度、左部メニューから[デ ザイン]⇒［テンプレート］ を選択します。 • 画面上部から［インデックス ］を選び［新規作成］をクリ ックします。
102. • 新規のテンプレートを作成し ます。名前を「レシピスタイ ル」とします。
103. • [style.css]の中身をコピーして貼 り付けます。 • ファイル名は 「style.css」とします。
104. • [保存]ボタンをクリックしま す。 • 保存後、再構築を行います。
105. • CSSの作成が終了したら ［デザイン］⇒［テンプレー ト］を選びます。 • 画面上部から［コンテンツタ イプアーカイブ］を選び［新 規作成］ボタンをクリックし ます。
106. • テンプレート名を[レシピ詳 細]とします。 • コンテンツタイプは [レシピブック]を選択します 。
107. • 「detail.html」の中身をコ ピーして貼り付けます。 • 「保存」ボタンを押します。
108. • テンプレートの保存後「新し いアーカイブマッピングを作 成」をクリックします。
109. • パスを [yyyy/mm/content- basename.html] として選びます。 • [追加]ボタンをクリックします
110. • 「アーカイブマッピングの更 新を完了しました」というメ ッセージが表示されたら［変 更を保存］ボタンをクリック します。
111. • 保存が完了したら、テンプレ ートの設定は終了です。
112. • データを入力します。メニュー の [コンテンツデータ]=>[レシピ ブック]を選び [レシピブックを作成]をクリッ クします。
113. • データ入力画面が表示されま す。 • サンプルデータを利用して、 入力していきます • 「データ識別ラベル」は任意 のラベル名を入力します。
114. • 「材料」の入力フィールドは 、入力欄の右にある「＋」ボ タンをおすことで、フィール ドを増やせます。
115. データの入力が終わったら 、右メニューの[公開]ボタ ンをクリックします。
116. • 公開が終わったら [表示]リンクをクリックして みましょう
117. • 入力したレシピデータが表示 されます。 • 「トップへ戻る」をクリック してみましょう。
118. • トップページにも新着レシピ が表示されているのがわかり ます。
119. •<mt:ContentField>を使い、各コンテンツの値 を取得しています •値は<mt:ContentFieldValue>で取得しています
120. <mt:ContentField content_field=“レシピ名"> <mt:ContentFieldValue> </mt:ContentField>
121. この章で確認したこと •作成したコンテンツタイプのデータは [Content Type]のアーカイブテンプレートで出 力できる •MTの記事やページと同様、リスト表示と個別 データの関連付けもできる
122. •ウェブコンテンツに合わせて、リストや複数行な ど、柔軟なコンテンツタイプを設定することがで きる
123. Appendix
124. 迷わないコンテンツ管理のために
126. •ハンズオン環境はこの時間限り有効です。 •終了後、使えなくなります。
127. ご参加ありがとうございました。