$30 off During Our Annual Pro Sale. View Details »

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

microCMS
February 22, 2023

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

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

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

microCMS

February 22, 2023
Tweet

More Decks by microCMS

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide