かんたんデザイン編集やってみた~「完全に理解した」までの道のり~

MTDDC2024 懇親会LTでの発表のため作成したスライドです。
スライド中に出てくるリンク（下線あり または URL）は以下の通りです：
https://zenn.dev/morit4ryo
https://movabletype.net/support/design/easy-design.html
https://movabletype.net/support/design/easy-design-detail.html
https://movabletype.net/support/design/easy-design-sample.html
https://movabletype.net/blog/2024/10/fusion-corprate-css.html
https://movabletype.net/blog/2024/11/fusion-corprate-site-editor.html
https://zenn.dev/activecore/articles/9862409de182c7

Transcript

1. 「完全に理解した」までの道のり @morit4ryo かんたんデザイン編集 やってみた
2. 自己紹介 森田 了　@morit4ryo デザイナー・フロントエンドエンジニア 東京音大（作曲）→IAMAS（メディア芸術）→シグナル・コンポーズ（株） Zenn 記事色々書いてます SpeakerDeck スライド上げます
3. 構成 1 実践 結果 調査 公式Docs・テーマのソースコード解読 → 理解したことまとめ テーマを作ってみよう → 何を意識したか 開発中のテーマチラ見せ → こだわりポイント紹介
4. 構成 2 実践 結果 調査 公式Docs・テーマのソースコード解読 → 理解したことまとめ テーマを作ってみよう → 何を意識したか 開発中のテーマチラ見せ → こだわりポイント紹介
5. 2024年6月… 3 「かんたんデザイン編集」がリリースされたらしい!? とりあえず仕様詳細を読んでみる なんかいっぱい書いてある… editor:type？属性値多すぎ
6. （勝手な代弁） 4 わかります
7. 調査でやったこと 5 公式ドキュメントを読んでみた（当たり前） ・網羅的 ・実例も色々面白そうなのが載っている かんたんデザイン編集 仕様詳細 コンポーネント利用例 FusionCorp まずは だけど
8. 調査でやったこと 6 公式ドキュメントを読んでみた（当たり前） かんたんデザイン編集 仕様詳細 コンポーネント利用例 FusionCorp まずは やっぱり読みにくい
9. なんで読みにくい？ 7
10. なんで読みにくい？ 8 こういうのを 目指して 理解したことを 整理してみよう…！
11. 整理してみた 9 思ってたより多くなった
12. ざっと紹介 10 <mt:Var>の書き方を ひたすらまとめた editor:type テキスト 画像 記事 色 ドロップ 全部の使用例を考えてみた
13. ① <mt:Var>属性早見表 11 属性名 値 必須 初期値 補足 に分けてリスト化！
14. ① <mt:Var>属性早見表 12 editor:typeの種類も パッと見ただけで 分かる！
15. ②③④ editor:typeごとの使用例 13 公式の『コンポーネント利用例』 かんデザ編集でできることを ざっくり理解できる editor:typeごとの使用例 作りたいものが決まっている時に 書き方を確認できる
16. 整理してみた 14 分かってきた…かも？ プレゼンシートの折り返し地点です
17. 構成 15 実践 結果 調査 公式Docs・テーマのソースコード解読 → 理解したことまとめ テーマを作ってみよう → 何を意識したか 開発中のテーマチラ見せ → こだわりポイント紹介
18. こんなテーマが作りたい！ 16 ① サイトが作りやすい ちょうどいい自由度 何を変更できるか分かりやすい ② 色が自由に変えられる 色を選択肢から選べるし、 カラーコードでも指定できる ④ モバイルファースト PCとモバイルで見た目が 変わらないから、配置に悩まない ③ フォントが変えられる ゴシック体・明朝体だけでも 雰囲気が変えられるのでは
19. （個人的な好み） 17 ⑤ モジュールで効率よく コンポーネント化して コードの重複は減らしたい ⑥ GitHub連携 コードエディタ上で書いて なるべくラクしたい ⑧ なるべくJS書きたくない 可能な限りCSSで書いて いい感じにしたい ⑦ TailwindCSSで書きたい MTタグで細かく変更したい デザインと同時に進めたい
20. 好みが合う人は… 18 『エンジニアが解説！新テーマ「Fusion Corporate」 制作のポイント（テーマ作成者向け）』 ① CSS編　② かんたんデザイン編集編 おすすめです
21. こんなテーマが作りたい！ 19 ① サイトが作りやすい ちょうどいい自由度 何を変更できるか分かりやすい ② 色が自由に変えられる 色を選択肢から選べるし、 カラーコードでも指定できる ④ モバイルファースト PCとモバイルで見た目が 変わらないから、配置に悩まない ③ フォントが変えられる ゴシック体・明朝体だけでも 雰囲気が変えられるのでは かんデザ編集の出番です
22. ① サイトが作りやすい 20 < > mt:Var editor:type="list" 記事やニュースなど 見せたいものだけをピックアップして 表示できる
23. ① サイトが作りやすい 21 読みにくい箇所をいい感じに整える 設定画面用の スタイリングモジュールを作成
24. ② 色が自由に変えられる 22 text-red-500になる
25. ③ フォントが変えられる(WIP) 23 とりあえずNoto Sans/Serif JP
26. 構成 24 実践 結果 調査 公式Docs・テーマのソースコード解読 → 理解したことまとめ テーマを作ってみよう → どんなところを意識したか 開発中のテーマチラ見せ → こだわりポイント紹介
27. 開発中のテーマチラ見せ 25
28. ついに 26 完全に理解した
29. けど 27 まだわからない 「チョットデキル」への旅は続く ️ DOM更新周り editor:update:ほにゃらら
30. 最後に改めて 28 実践 結果 調査 公式Docs・テーマのソースコード解読 → 理解したことまとめ テーマを作ってみよう → どんなところを意識したか 開発中のテーマチラ見せ → こだわりポイント紹介
31. ありがとうございました!! Zenn SpeakerDeck ぜひ 話しかけて ください！ 初MTDDC参加 です…