現在のところ、特定のCMSからのデータ移行機能はご提供をしておりません。
手順としては、APIを作成いただいた後に、以下のいずれかの方法で既存のデータを登録いただくことを想定しております。
- POST API / PUT APIを利用する
- CSVインポートを利用する
両者の機能の違いについては、以下の記事をご参照ください。
▼ microCMSに大量コンテンツを登録する方法まとめ
https://blog.microcms.io/how-to-register-a-large-amount-of-content/
データの単純な移行については、上記の方法にて実施いただけますが、特に考慮が必要な箇所として、記事の本文の管理が挙げられます。
具体的には、既存記事がHTMLとして管理されている場合については、登録先のフィールドの種類の検討が必要となります。
登録先フィールドについては、以下の2つの方法が考えられます。
1. リッチエディタに登録する
microCMSのリッチエディタは、対応しているHTMLタグに限り、APIにおけるデータ登録が可能です。(対応しているタグの一覧については、「リッチエディタのWRITE API」をご参照ください。)
そのため移行元の記事がシンプルなHTMLタグにて構成されている場合は、そのままリッチエディタにデータを移行できる可能性があります。
2. 繰り返しフィールドを利用し、リッチエディタとテキストエリアを併用する
繰り返しフィールドというフィールドを利用することで、特定のフィールドに対して、複数の種類のデータを登録することが可能になります。
この方法は、新規記事はリッチエディタを利用し、移行記事はテキストエリアはHTMLを文字列としてそのまま登録する方法となります。
この場合、フィールドが2種類に分かれてしまうというデメリットはありますが、既存の記事のHTML形式を完全に維持したまま移行することが可能です。
設定手順(管理画面)
まずは管理画面右上の「カスタムフィールド」というリンクからカスタムフィールドを作成しましょう。
下記のように2つのカスタムフィールド(リッチテキスト、HTML)を用意します。
次に「API設定 > APIスキーマ」より記事本文用のフィールドとして繰り返しフィールドを指定します。
その際に先ほど作成した2つのカスタムフィールドを利用するよう設定します。
次に入稿画面に移動します。
記事本文部分が、繰り返しフィールドの形式となっています。
「フィールドを追加」というボタンをクリックします。そうすると、先ほど設定した2つのカスタムフィールドから、どちらのフィールドを利用するのかを選択することができます。
こちらの設定の場合、HTML(テキストエリア)部分にデータを流し込み、記事移行後はリッチテキスト(リッチエディタ)の方で記事を書いていきます。
なお、繰り返しフィールドは複数セットすることができることから、HTML(テキストエリア)部分は、移行の用途のみならず、独自のHTMLテーブルや埋め込みスクリプトなど様々な用途にも利用可能なので、記事移行後も活用することが可能です。
また、カスタムフィールドを新規に用意することで、より柔軟な入力フォーム(広告の設定、関連記事の設定など)を作成することも可能です。
設定手順(実装)
繰り返しフィールドを利用した場合のAPIレスポンスは、次のようになります。(body部分)
{
"id": "1ot241e5b",
"createdAt": "2020-12-17T08:14:19.813Z",
"updatedAt": "2020-12-17T08:15:57.703Z",
"publishedAt": "2020-12-17T08:14:19.813Z",
"revisedAt": "2020-12-17T08:15:57.703Z",
"title": "一つ目の記事",
"body": [
{
"fieldId": "richText",
"richText": "<h1 id=\"h00bd8f82dd\">タイトル</h1><p>こちらに記事内容を記述</p>"
},
{
"fieldId": "html",
"html": "<table><tr><td>テスト</td></tr></table>"
}
]
}
レスポンスは配列として返却されます。またfieldIdというキーに対して、該当のカスタムフィールドのIDがセットされます。
表示側では、こちらのfieldIdをもとに、ロジックを書き換えることで、両方のパターンに対応することができます。
以下はReactでの実装例となります。
export const Main = ({ body }) => (
<main>
{body.map((item, i) =>
item.fieldId === 'richText' ? (
<Post key={i} data={item.richText} />
) : item.fieldId === 'html' ? (
<HtmlBlock key={i} data={item.html} />
) : null
)}
</main>
);