#ジャムスタックチョットデキル りゅーそう APIスキーマ設計Tipsと (新)リッチエディタについて

目次 2 ● リッチエディタとヘッドレスCMSの関係 ● リッチエディタと繰り返しフィールドの使い分け ● リッチエディタ(ベータ版)リリースについて #ジャムスタックチョットデキル

自己紹介 ● りゅーそう (@ryusou_mtkh) ● microCMS のプロダクトエンジニア ● 現在は新しいリッチエディタ(ベータ版)の開発を担当 ● 開発中のリッチエディタを今日はお見せします！ 3 #ジャムスタックチョットデキル

目次 4 ● リッチエディタとヘッドレスCMSの関係 ● リッチエディタと繰り返しフィールドの使い分け ● リッチエディタ(ベータ版)リリースについて #ジャムスタックチョットデキル

リッチエディタとヘッドレスCMSの関係 ● ヘッドレスCMSの復習 ○ ヘッドレス（Viewがない） ○ つまり基本的にスタイルを持たない 5 #ジャムスタックチョットデキル

リッチエディタとヘッドレスCMSの関係 6 #ジャムスタックチョットデキル ・・・ 基本的にスタイルを持たない？

リッチエディタとヘッドレスCMSの関係 ● 「基本的にスタイルを持たない」の例外 ○ リッチエディタはスタイルを持つことができる 7 #ジャムスタックチョットデキル 現行のリッチエディタ

リッチエディタとヘッドレスCMSの関係 ● 「リッチエディタはスタイルを持つことができる」 ○ メリット ■ 入稿者（ライターなど）が柔軟にコンテンツを編集できる ○ デメリット ■ コンテンツのスタイルが統一されない懸念がある。 ■ →入稿者とエンジニアでのコミュニケーションコストが発生する 8 #ジャムスタックチョットデキル

リッチエディタとヘッドレスCMSの関係 ● デメリットを軽減する ○ ツールバー表示制限機能 ○ 使用しない装飾を制限する 9 #ジャムスタックチョットデキル 現行のリッチエディタ

リッチエディタとヘッドレスCMSの関係 ● 「デメリットを軽減する」(新)リッチエディタでの解決 ○ カスタムクラス ■ 入稿者はクラス名のみを付与 ■ スタイルは実装側が担当 ○ 管理画面でスタイルを持たない設計 ○ 見た目の制御をリッチエディタ内で可能に！ 10 #ジャムスタックチョットデキル ※ 画面や仕様は検討段階のものです。実際のものとは異なる場合があります。 ※ 当機能は正式版でのリリースを予定しています。ベータ版には含まれません。 リッチエディタ(正式版)

目次 11 ● リッチエディタとヘッドレスCMSの関係 ● リッチエディタと繰り返しフィールドの使い分け ● リッチエディタ(ベータ版)リリースについて #ジャムスタックチョットデキル

リッチエディタと繰り返しフィールドの使い分け ● 繰り返しフィールドとは？ カスタムフィールドを 好きな順番で繰り返して利用できる。 12 #ジャムスタックチョットデキル

リッチエディタと繰り返しフィールドの使い分け ● リッチエディタを使っていて困ること ○ tableなどのHTMLタグ ○ HTMLをグルーピングしたコンテンツ ○ これらを表現するには繰り返しフィールドを使用する必要がある。 13 #ジャムスタックチョットデキル

リッチエディタと繰り返しフィールドの使い分け ● リッチエディタ(ベータ版)での解決 ○ tableタグが可能になります（その他にも追加多数！）。 ○ シンプルなHTML表現の場合はリッチエディタに組み込まれているかを まずは確認すると○ 14 #ジャムスタックチョットデキル リッチエディタ(ベータ版)

リッチエディタと繰り返しフィールドの使い分け ● リッチエディタ(ベータ版)での解決 ○ 見た目の制御 ■ カスタムクラス＋通常の装飾でも可能に！ ■ 繰り返しフィールドでも可能 ○ グルーピングされたHTML表現 ■ 繰り返しフィールドを活用 ■ (ex: 対談風のフィールドなど 15 #ジャムスタックチョットデキル

リッチエディタと繰り返しフィールドの使い分け ● リッチエディタ vs 繰り返しフィールド ○ 入稿難易度 ■ リッチエディタ（易）　＜　繰り返しフィールド（難） ○ 実装難易度（一概には言えないが.....） ■ リッチエディタ（易）　＜　繰り返しフィールド（難） ○ コンテンツの柔軟性 ■ リッチエディタ（低）　＜　繰り返しフィールド（高） 16 #ジャムスタックチョットデキル

DEMO 17 #ジャムスタックチョットデキル

まとめ 18 ● リッチエディタとヘッドレスCMSの関係 ○ リッチエディタは例外的にスタイルを持つ ○ 実装側はケースに応じて、このスタイルを制御する ■ 入稿制限機能、カスタムクラス、繰り返しフィールド活用....etc ● リッチエディタと繰り返しフィールドの使い分け ○ 求められる入稿のカスタマイズ性、入稿者の習熟度なども含めて最適な スキーマ設計をする必要がある。 ○ 最初から繰り返しフィールドを前提に設計するのもオススメ ○ あとからスキーマ設計の変更がしやすくなる。 #ジャムスタックチョットデキル

目次 19 ● リッチエディタとヘッドレスCMSの関係 ● リッチエディタと繰り返しフィールドの使い分け ● リッチエディタ(ベータ版)リリースについて #ジャムスタックチョットデキル

● クローズドベータ版申し込み ○ microCMSのDiscordコミュニティ内で募集中です。 ○ 受付期間：2/24（金）15:00まで ○ microCMS公式ツイッター(@micro_cms)の固定ツイートからぜひ！ (新)リッチエディタリリースについて 20 #ジャムスタックチョットデキル

● クローズドベータ版申し込み ○ リッチエディタへの要望を大募集中です！ ○ こんな機能が欲しい....などお気軽にお寄せください！ (新)リッチエディタリリースについて 21 #ジャムスタックチョットデキル

ご清聴ありがとうございました 22 Copyright © microCMS All rights reserved. #ジャムスタックチョットデキル microCMS Community Japan　 https://discord.gg/K3DPqw4EJ2