chot Incさん主催「ジャムスタックチョットデキル!! シブヤ!!」でのLT資料です。 https://chot.connpass.com/event/272088/
リッチエディタにまつわるAPIスキーマフィールドの使い分け・スキーマ設計のポイントや、ベータ版リリースを控えた新しいリッチエディタの紹介を行いました。
#ジャムスタックチョットデキルりゅーそうAPIスキーマ設計Tipsと(新)リッチエディタについて
View Slide
目次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#ジャムスタックチョットデキル
DEMO17#ジャムスタックチョットデキル
まとめ18● リッチエディタとヘッドレスCMSの関係○ リッチエディタは例外的にスタイルを持つ○ 実装側はケースに応じて、このスタイルを制御する■ 入稿制限機能、カスタムクラス、繰り返しフィールド活用....etc● リッチエディタと繰り返しフィールドの使い分け○ 求められる入稿のカスタマイズ性、入稿者の習熟度なども含めて最適なスキーマ設計をする必要がある。○ 最初から繰り返しフィールドを前提に設計するのもオススメ○ あとからスキーマ設計の変更がしやすくなる。#ジャムスタックチョットデキル
目次19● リッチエディタとヘッドレスCMSの関係● リッチエディタと繰り返しフィールドの使い分け● リッチエディタ(ベータ版)リリースについて#ジャムスタックチョットデキル
● クローズドベータ版申し込み○ microCMSのDiscordコミュニティ内で募集中です。○ 受付期間:2/24(金)15:00まで○ microCMS公式ツイッター(@micro_cms)の固定ツイートからぜひ!(新)リッチエディタリリースについて20#ジャムスタックチョットデキル
● クローズドベータ版申し込み○ リッチエディタへの要望を大募集中です!○ こんな機能が欲しい....などお気軽にお寄せください!(新)リッチエディタリリースについて21#ジャムスタックチョットデキル
ご清聴ありがとうございました22Copyright © microCMS All rights reserved.#ジャムスタックチョットデキルmicroCMS Community Japan https://discord.gg/K3DPqw4EJ2