Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
2018年12月 MT長野 ハンズオン資料
Search
Takeshi Nick Osanai
December 01, 2018
Technology
1
92
2018年12月 MT長野 ハンズオン資料
Takeshi Nick Osanai
December 01, 2018
Tweet
Share
More Decks by Takeshi Nick Osanai
See All by Takeshi Nick Osanai
How DevRel should proceed with the breaking change project?
tosanai
0
120
AWS を利用した ウェブサイトホスティングと PowerCMS X
tosanai
1
860
プラットフォーム事業を推進するための開発者マーケティング
tosanai
0
46
MTクラウドハンズオン資料
tosanai
1
89
Movable Type クラウド版 ハンズオンセミナー
tosanai
0
250
20190508_DevRel_Meetup_Public.pdf
tosanai
0
740
Movable Type クラウド版 ハンズオン資料
tosanai
0
86
20190320_MTCloud_handson.pdf
tosanai
0
82
IndexedDBのラッパー「localoForage」を試してみた
tosanai
0
2.6k
Other Decks in Technology
See All in Technology
20241120_JAWS_東京_ランチタイムLT#17_AWS認定全冠の先へ
tsumita
2
300
『Firebase Dynamic Links終了に備える』 FlutterアプリでのAdjust導入とDeeplink最適化
techiro
0
130
エンジニア人生の拡張性を高める 「探索型キャリア設計」の提案
tenshoku_draft
1
130
Lambda10周年!Lambdaは何をもたらしたか
smt7174
2
110
テストコード品質を高めるためにMutation Testingライブラリ・Strykerを実戦導入してみた話
ysknsid25
7
2.7k
【Pycon mini 東海 2024】Google Colaboratoryで試すVLM
kazuhitotakahashi
2
540
TanStack Routerに移行するのかい しないのかい、どっちなんだい! / Are you going to migrate to TanStack Router or not? Which one is it?
kaminashi
0
600
AWS Media Services 最新サービスアップデート 2024
eijikominami
0
200
Making your applications cross-environment - OSCG 2024 NA
salaboy
0
190
安心してください、日本語使えますよ―Ubuntu日本語Remix提供休止に寄せて― 2024-11-17
nobutomurata
1
1k
CDCL による厳密解法を採用した MILP ソルバー
imai448
3
140
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.9k
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Thoughts on Productivity
jonyablonski
67
4.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
The Invisible Side of Design
smashingmag
298
50k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
How to Ace a Technical Interview
jacobian
276
23k
Building an army of robots
kneath
302
43k
Side Projects
sachag
452
42k
What's new in Ruby 2.0
geeforr
343
31k
How STYLIGHT went responsive
nonsquared
95
5.2k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Transcript
Movable Type 7 ハンズオン 2018年12月1日 シックス・アパート株式会社 長内毅志
•長内毅志 –2011年~ Movable Typeプロダクトマネージャー –2014年~ ディベロッパーリレーションマネージャー エバンジェリスト –趣味 ダンス (ストリート、ジャズ)
ジョギング (サブフォー) 英語の勉強 (TOEIC 875, 英検準1級) 家族と過ごすこと
最近ハマっていること •スプラ2ガチ勢
接続確認 •Wifiの接続を確認しましょう •手元のハンズオン用アカウントに接続してみまし ょう
アジェンダ •「ページ」と「コンテンツ」 –ウェブ制作者・開発者の視点からおさらいする •Movable Type 7の概要とコンテンツタイプ •ハンズオン
今日のゴール •「コンテンツタイプ」が果たす役割とメリットを 理解してもらう •Movable Type 7 のコンテンツタイプに触れても らう •コンテンツタイプの設計と開発を体験してもらう
Movable Type 7 へサインインする
•アカウント情報を元に Movable Type へサイ ンインします。
• ダッシュボードが表示されま す。 • [Site List]から、皆さんに割 り当てられたサイト名をクリ ックします。
•Movable Type 7 ではコンテンツを [サイト]という単位で管理していきます。 •[チャイルドサイト]を作って階層構造も作れます
•右メニューから 「システム」をクリックし ます。
• 右メニューから 「サイト」⇒「新規」をクリ ックします。
• ハンズオンに使う最初のサイト を作成します。 サイトテーマ ⇒Rainier サイト名 ⇒任意の名前 を入力します。
• テーマとサイト名を入力した ら、画面下部にある「サイト の作成」ボタンをクリックし ます。
• サイトの作成が終わったら、 画面右部もしくは中央の「再 構築」をクリックします。
•再構築とは –htmlを出力するための操作 –100ページ存在する場合、100ページのhtmlを実際に出力 する
•「再構築」ボタンをクリックしてみましょう。 •ポップアップウィンドウが出たら、再構築を実行 してみましょう。
• 再構築が終わったら、ポップ アップウィンドウの「サイト を見る」もしくは、管理画面 右メニューの「サイトの表示 」をクリックします。
• 記事がなにもない、初期状態 のサイトが表示されます。
記事の作成 記事 => 新規をクリック
ハンズオン •最初の記事を投稿してみましょう
None
None
None
ページとコンテンツ
ウェブサイトの構造、htmlの構造
None
タイトル 見出し 段落
title Heading Paragraph
<h1> <h2> <p>
htmlの構造 •論文の構造に非常に近い •ロジカルに情報を伝える •まとまった情報を「ページ」という単位で表示す ることに長けている •「ページ」をまとめることで「ウェブサイト」が できた
ウェブサイトの構造
•[ページ]という概念では捉えづらいコンテンツが 増え始めている
None
None
•「ページ」の概念とは異なるコンテンツ設計
http://www.nadeshikoleague.jp/
https://www.sixapart.jp/business/nadeshikoleague.html
現在のコンテンツ ネット上のコンテンツ≠ページ
•ネット上のコンテンツ ≠ ウェブページ •細かい粒度でデータを管理する必要性 •「ページ」ではなく、「コンテンツ」を適切な形 で設計・配信できるシステム =CMS
Movable Type 7 の概要と コンテンツタイプ
• コンテンツを管理しやすいシステムへ • Content Type (コンテンツタイプ) 機能を新規搭載
•自由にコンテンツをデザインして管理する •MTタグで利用可能 •アーカイブマッピングの柔軟性、多様性はそのま まに •サイト管理の柔軟さの実現
ネット上のあらゆるコンテンツの配信システムとして
コンテンツタイプとは •0 からすべての要素を設計可能 •「ウェブページ」も、複雑な「コンテンツ」も
これまでのコンテンツ設計 •記事フィールド +カスタムフィールド •「ページ」をベースに した画面設計
コンテンツタイプのコンテンツ設計 •ドラッグ&ドロップで自由にフィールドを定義
•数値、文字列、画像、ファイル、日時、 Content-Type など… •プラグインで拡張可能 •複雑なコンテンツでも、一定のルールに誘導
ページの編集で良く聞く質問 写真=>文字⇒写真のよう にレイアウトしたい…
ブロックエディタ
コンテンツタイプに対応した「Data API Ver.4」 •「ヘッドレス」CMS •コンテンツタイプのデータをAPIで操作
•コンテンツごとの可用性、可搬性を高め •コンテンツをより大きな価値に変えられる •「Reusable」なコンテンツ管理を目指して
ハンズオン用素材ファイルを ダウンロードする
素材ファイルをダウンロード
• 解凍すると[01_MTGram] [02_recipe] の2フォルダが展開されます
フォルダ内のファイルを確認しましょう •01_MTGram –mtgram.html –サンプル写真
•02_recipe –recipe_index.html –style.css –detail.html –レシピデータと画像
写真ギャラリーを開発する
開発するもの •写真ギャラリー「MTGram」 •写真「だけ」を登録していくウェブサービス
• 左メニュー [コンテンツタイプ] =>[新規]を選び、名前を「 MTGram」とします。
• 画面右部から[画像アセット] を選び、中央にドラッグアンド ドロップします。名前を「画像 」と指定します。[このフィー ルドは必須ですか?]をオンに します 。
• ユーザーに新規イメージのア ップロードを許可します。 終わったら[保存]ボタンをク リックします。
• コンテンツタイプがセーブされ たことを確認して、次に進みま す。
• 右部メニューから[デザイン ]=>[テンプレート]を選びま す。画面上部の選択肢から[ インデックス]を選び、新規 作成をクリックします。
• テンプレート名を[MTGram]と します。 • [mtgram.html]の中身をコピー &ペーストします。
• 出力ファイル名を [mtgram.html]とします • [変更を保存]ボタンを押してセ ーブし、[保存と再構築]ボタン をクリックします。
• 再構築が完了したら、右メニューから「公開さ れたテンプレートを確認」リンクをクリックし ます。
• MTGramのサービスページが 公開されています。写真が未 登録の状態なので、登録して いきましょう。
• 右メニューから[コンテンツデ ータ] => [MTGram]を選びま す。 • [MTGramを作成]を選びます 。
• データ入力画面に変わります 。[データ識別ラベル]を入力 します。[画像]から[アセッ トを選択]を選びます。
• 写真挿入画面が表示されるので、 任意の画像をアップロードします 。
• 画像が選択されたことを確認 して、[挿入]ボタンをクリ ックします。
• 画像の挿入が終わったら「公 開」ボタンを押します。
• 公開ができたら、同じ要領で何枚 か写真を登録していきましょう
• 先程公開したインデックステンプレート「MTGram」 のページを確認します。 • 写真ギャラリーが公開されているのがわかります。
None
タグの解説 •<mt:Contents>-</mt:Contents> –ブロックタグ –コンテンツデータを一覧するためのブロックタグです。
•<mt:Contents name="MTGram" limit="3"> •コンテンツタイプ名「MTGram」からデータを取 得する
•<mt:ContentField>-</mt:ContentField> –コンテンツデータの各フィールドに登録されたデータを表 示するためのタグです
<mt:ContentField label="画像"> <a class="lightbox" href="<mt:AssetURL>"> <img src="<mt:AssetThumbnailURL square="1">"> </a> </mt:ContentField>
• [画像]という名前のコンテンツフィールドからデータを取得 • [画像]に登録されたアイテムのURLを取得 • サムネイルを生成して、正方形に加工する
この章で確認したこと •コンテンツタイプではコンテンツを自由に設計で きる •テンプレートの書き方は従来と変わらない •入力画面は必要なフィールドだけが表示される
レシピサイトを開発する
この章で開発するもの •レシピ集 •レシピの材料・写真・作り方データベース
• メニューの [コンテンツタイプ]=>[新 規]を選びます。 • 名前を「レシピブック」と して先に進みます。
• 右部のフィールドから[テキ スト]を選んで中央へドラッ グアンドドロップします。 • 名前を「レシピ名」と入力し ます。
• [このフィールドは必須です か?]をチェックします。 • [閉じる]をクリックして次の フィールドの追加に移ります 。
• 右部のフィールドから[画像 アセット]を選び中央にどrっ ぷします。 • 名前を「写真」として、[こ のフィールドは必須ですか? ] をチェックします
• [新しい画像ファイルのアップロード を許可する]をオンにします。 • [閉じる]をクリックして次のフィー ルドの追加に移ります。
• 右部のフィールドから[一覧 ]を選び中央にドロップしま す。 • 名前を「材料」とし、「こ のフィールドは必須ですか ?」をオンにします。
• [閉じる]ボタンをクリックして、 次のフィールドの追加に移ります 。
• 右部のフィールドから[テキ スト(複数行)]を選び中央へ ドロップします。 • 名前を「作り方」とします。
• [入力フォーマット]を「なし」 もしくは「改行を変換」にしま す。 • [閉じる]ボタンをクリックしま す。
• 4つのフィールドをすべて設定 したら、ページ下部の[保存]ボ タンをクリックします。
• コンテンツタイプの設定が終了 しました。 • 次に、テンプレートの設定画面 に移動します。
• 左部メニューから[デザイン ]⇒[テンプレート]を選択 します。 • 画面上部から[インデックス ]を選び[新規作成]をクリ ックします。
• テンプレート名を「レシピイ ンデックス」とします。 • テンプレートの内容に [recipe_index.html]の内容 を貼り付けます。
• [出力ファイル名]を「recipe.html 」とします。 • ページ下部の[保存]ボタンをクリ ックします。
• 保存終了後[保存と再構築]ボ タンをクリックします。
• 再構築が終了したら、右メニ ューの「公開されたテンプレ ートを確認」リンクをクリッ クしてみます。
• レシピブックのインデックス ページが表示されていれば OKです。
• 再度、左部メニューから[デ ザイン]⇒[テンプレート] を選択します。 • 画面上部から[インデックス ]を選び[新規作成]をクリ ックします。
• 新規のテンプレートを作成し ます。名前を「レシピスタイ ル」とします。
• [style.css]の中身をコピーして貼 り付けます。 • ファイル名は 「style.css」とします。
• [保存]ボタンをクリックしま す。 • 保存後、再構築を行います。
• CSSの作成が終了したら [デザイン]⇒[テンプレー ト]を選びます。 • 画面上部から[コンテンツタ イプアーカイブ]を選び[新 規作成]ボタンをクリックし ます。
• テンプレート名を[レシピ詳 細]とします。 • コンテンツタイプは [レシピブック]を選択します 。
• 「detail.html」の中身をコ ピーして貼り付けます。 • 「保存」ボタンを押します。
• テンプレートの保存後「新し いアーカイブマッピングを作 成」をクリックします。
• パスを [yyyy/mm/content- basename.html] として選びます。 • [追加]ボタンをクリックします
• 「アーカイブマッピングの更 新を完了しました」というメ ッセージが表示されたら[変 更を保存]ボタンをクリック します。
• 保存が完了したら、テンプレ ートの設定は終了です。
• データを入力します。メニュー の [コンテンツデータ]=>[レシピ ブック]を選び [レシピブックを作成]をクリッ クします。
• データ入力画面が表示されま す。 • サンプルデータを利用して、 入力していきます • 「データ識別ラベル」は任意 のラベル名を入力します。
• 「材料」の入力フィールドは 、入力欄の右にある「+」ボ タンをおすことで、フィール ドを増やせます。
データの入力が終わったら 、右メニューの[公開]ボタ ンをクリックします。
• 公開が終わったら [表示]リンクをクリックして みましょう
• 入力したレシピデータが表示 されます。 • 「トップへ戻る」をクリック してみましょう。
• トップページにも新着レシピ が表示されているのがわかり ます。
•<mt:ContentField>を使い、各コンテンツの値 を取得しています •値は<mt:ContentFieldValue>で取得しています
<mt:ContentField content_field=“レシピ名"> <mt:ContentFieldValue> </mt:ContentField>
この章で確認したこと •作成したコンテンツタイプのデータは [Content Type]のアーカイブテンプレートで出 力できる •MTの記事やページと同様、リスト表示と個別 データの関連付けもできる
•ウェブコンテンツに合わせて、リストや複数行な ど、柔軟なコンテンツタイプを設定することがで きる
Appendix
迷わないコンテンツ管理のために
None
•ハンズオン環境はこの時間限り有効です。 •終了後、使えなくなります。
ご参加ありがとうございました。