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

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

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

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