APIスキーマ設計Tipsと (新)リッチエディタについて

chot Incさん主催「ジャムスタックチョットデキル!! シブヤ!!」でのLT資料です。
https://chot.connpass.com/event/272088/

リッチエディタにまつわるAPIスキーマフィールドの使い分け・スキーマ設計のポイントや、ベータ版リリースを控えた新しいリッチエディタの紹介を行いました。

Transcript

1. #ジャムスタックチョットデキル りゅーそう APIスキーマ設計Tipsと (新)リッチエディタについて
2. 目次 2 • リッチエディタとヘッドレスCMSの関係 • リッチエディタと繰り返しフィールドの使い分け • リッチエディタ(ベータ版)リリースについて #ジャムスタックチョットデキル
3. 自己紹介 • りゅーそう (@ryusou_mtkh) • microCMS のプロダクトエンジニア • 現在は新しいリッチエディタ(ベータ版)の開発を担当 • 開発中のリッチエディタを今日はお見せします！ 3 #ジャムスタックチョットデキル
4. 目次 4 • リッチエディタとヘッドレスCMSの関係 • リッチエディタと繰り返しフィールドの使い分け • リッチエディタ(ベータ版)リリースについて #ジャムスタックチョットデキル
5. リッチエディタとヘッドレスCMSの関係 • ヘッドレスCMSの復習 ◦ ヘッドレス（Viewがない） ◦ つまり基本的にスタイルを持たない 5 #ジャムスタックチョットデキル
6. リッチエディタとヘッドレスCMSの関係 6 #ジャムスタックチョットデキル ・・・ 基本的にスタイルを持たない？
7. リッチエディタとヘッドレスCMSの関係 • 「基本的にスタイルを持たない」の例外 ◦ リッチエディタはスタイルを持つことができる 7 #ジャムスタックチョットデキル 現行のリッチエディタ
8. リッチエディタとヘッドレスCMSの関係 • 「リッチエディタはスタイルを持つことができる」 ◦ メリット ▪ 入稿者（ライターなど）が柔軟にコンテンツを編集できる ◦ デメリット ▪ コンテンツのスタイルが統一されない懸念がある。 ▪ →入稿者とエンジニアでのコミュニケーションコストが発生する 8 #ジャムスタックチョットデキル
9. リッチエディタとヘッドレスCMSの関係 • デメリットを軽減する ◦ ツールバー表示制限機能 ◦ 使用しない装飾を制限する 9 #ジャムスタックチョットデキル 現行のリッチエディタ
10. リッチエディタとヘッドレスCMSの関係 • 「デメリットを軽減する」(新)リッチエディタでの解決 ◦ カスタムクラス ▪ 入稿者はクラス名のみを付与 ▪ スタイルは実装側が担当 ◦ 管理画面でスタイルを持たない設計 ◦ 見た目の制御をリッチエディタ内で可能に！ 10 #ジャムスタックチョットデキル ※ 画面や仕様は検討段階のものです。実際のものとは異なる場合があります。 ※ 当機能は正式版でのリリースを予定しています。ベータ版には含まれません。 リッチエディタ(正式版)
11. 目次 11 • リッチエディタとヘッドレスCMSの関係 • リッチエディタと繰り返しフィールドの使い分け • リッチエディタ(ベータ版)リリースについて #ジャムスタックチョットデキル
12. リッチエディタと繰り返しフィールドの使い分け • 繰り返しフィールドとは？ カスタムフィールドを 好きな順番で繰り返して利用できる。 12 #ジャムスタックチョットデキル
13. リッチエディタと繰り返しフィールドの使い分け • リッチエディタを使っていて困ること ◦ tableなどのHTMLタグ ◦ HTMLをグルーピングしたコンテンツ ◦ これらを表現するには繰り返しフィールドを使用する必要がある。 13 #ジャムスタックチョットデキル
14. リッチエディタと繰り返しフィールドの使い分け • リッチエディタ(ベータ版)での解決 ◦ tableタグが可能になります（その他にも追加多数！）。 ◦ シンプルなHTML表現の場合はリッチエディタに組み込まれているかを まずは確認すると◦ 14 #ジャムスタックチョットデキル リッチエディタ(ベータ版)
15. リッチエディタと繰り返しフィールドの使い分け • リッチエディタ(ベータ版)での解決 ◦ 見た目の制御 ▪ カスタムクラス＋通常の装飾でも可能に！ ▪ 繰り返しフィールドでも可能 ◦ グルーピングされたHTML表現 ▪ 繰り返しフィールドを活用 ▪ (ex: 対談風のフィールドなど 15 #ジャムスタックチョットデキル
16. リッチエディタと繰り返しフィールドの使い分け • リッチエディタ vs 繰り返しフィールド ◦ 入稿難易度 ▪ リッチエディタ（易）　＜　繰り返しフィールド（難） ◦ 実装難易度（一概には言えないが.....） ▪ リッチエディタ（易）　＜　繰り返しフィールド（難） ◦ コンテンツの柔軟性 ▪ リッチエディタ（低）　＜　繰り返しフィールド（高） 16 #ジャムスタックチョットデキル
17. DEMO 17 #ジャムスタックチョットデキル
18. まとめ 18 • リッチエディタとヘッドレスCMSの関係 ◦ リッチエディタは例外的にスタイルを持つ ◦ 実装側はケースに応じて、このスタイルを制御する ▪ 入稿制限機能、カスタムクラス、繰り返しフィールド活用....etc • リッチエディタと繰り返しフィールドの使い分け ◦ 求められる入稿のカスタマイズ性、入稿者の習熟度なども含めて最適な スキーマ設計をする必要がある。 ◦ 最初から繰り返しフィールドを前提に設計するのもオススメ ◦ あとからスキーマ設計の変更がしやすくなる。 #ジャムスタックチョットデキル
19. 目次 19 • リッチエディタとヘッドレスCMSの関係 • リッチエディタと繰り返しフィールドの使い分け • リッチエディタ(ベータ版)リリースについて #ジャムスタックチョットデキル
20. • クローズドベータ版申し込み ◦ microCMSのDiscordコミュニティ内で募集中です。 ◦ 受付期間：2/24（金）15:00まで ◦ microCMS公式ツイッター(@micro_cms)の固定ツイートからぜひ！ (新)リッチエディタリリースについて 20 #ジャムスタックチョットデキル
21. • クローズドベータ版申し込み ◦ リッチエディタへの要望を大募集中です！ ◦ こんな機能が欲しい....などお気軽にお寄せください！ (新)リッチエディタリリースについて 21 #ジャムスタックチョットデキル
22. ご清聴ありがとうございました 22 Copyright © microCMS All rights reserved. #ジャムスタックチョットデキル microCMS Community Japan　 https://discord.gg/K3DPqw4EJ2