当ブログのコンテンツはすべてmicroCMSで管理されています。

ブログ本文はかつて存在していたリッチエディタ（いまは、「旧リッチエディタ」）を使っていたのですが、2023年5月に新たなリッチエディタ（「新リッチエディタ」とします）が正式リリースされたので、移行をおこないました。

メモがてら、以降の手順を簡単にまとめておきます、

参考: 新リッチエディタの正式版をリリースしました

前提

移行ツールの提供はまだなので、手作業により全ての記事を移行することにしました（記事総数は25件）。

手順

1. 【microCMS】APIスキーマ設計で、新リッチエディタ用のフィールド（body）を作成
   • 旧リッチエディタと新リッチエディタとして別物なので、新たに用意する必要がある
2. 【microCMS】各記事において、旧リッチエディタ内のコンテンツをコピーし、新リッチエディタにペーストする
   • このとき、ビルドを停止したいのでWebhookのトリガーはOFFにしておく
   • 注意1：コンテンツ内の画像は同時にペーストできないので、新リッチエディタ側で都度貼り付ける
   • 注意2：画像は <figure> タグで囲まれて出力されるようになっているので、CSSの修正が必要な場合がある
3. 【開発環境】開発環境を立ち上げ、リッチエディタのコンテンツ取得部分の記述を修正する（フィールドIDを差し替える）
4. 【開発環境】ローカルでコンテンツ詳細ページの表示を確認する
   • 意図しない装飾になっていないかチェックする
5. 【開発環境】コードの変更をpushする
6. 【本番】本番環境で表示確認をする
7. 【microCMS】不要になった旧リッチエディタのフィールドを削除する
   • WebhookのトリガーもここでONに戻しておく

感想

全工程をかなり雑にやったことと、25件程度と量も少なかったので、移行作業自体はすんなり終わりました。コピペ作業も、ほとんどの装飾はそのまま維持されていたのでほとんど修正する必要はありませんでした。一部、画像はそのまま移行できなかったので、1枚ずつ貼り付けることになりました。

新リッチエディタは、旧リッチエディタと比べて段落間のマージンが広くとってあり、見やすくなった印象です。当ブログのマージンの取り方が結構近いこともあり、WYSIWYGエディタっぽく使えています。

カスタムクラスを使えたり、テーブルも標準装備されたりと、表現の幅が広がったので、それらの新機能でいろいろ試していこうと思います。