LikePay Academyが「スーパーサイトAcademy」に変わります。詳しくはこちらです。

CMSコンテンツのエクスポート・インポート

CSVファイルを使用してコレクション項目をインポートし、またはCMSデータベースをCSVファイルとしてエクスポートできます。

この投稿は公式のWebflow Universityを元に作成しました。翻訳したテキストと画像は引用元のものを使用する場合があります。引用元はこちらです。

WebflowのCMSでコレクションを作成する際、コレクション項目を手動で追加するか、コンマで区切られた値(CSV)ファイルを使用して既存のコレクションに直接インポートできます。これにより、外部ソースから数百から数千のアイテムをCMSに直接インポートし、CSVコンテンツをインポート時に参照フィールドにマッピングすることができます。大量のデータを更新する際に少し楽にするために、CSVインポートを介して既存のコレクション項目を選択的に更新することもできます。

また、任意のCMSコレクションのコンテンツをCSVファイルとしてエクスポートすることもできます。これは、コレクションアイテムのバックアップを保存したい場合に便利です。このCSVファイルを使用して、他のWebflowサイトにコレクションアイテムをインポートしたり、他のプラットフォームにコレクションアイテムを移動したりできます。別のサイトにCMSデータを移行する方法について詳しく学ぶことができます。

注意: コレクションアイテムのインポート/エクスポートはデザイナー内でのみ行うことができます。

このレッスンで学ぶこと

CSVファイルからコレクションアイテムをインポートする方法

CSVファイルからコレクション項目をインポートする際に知っておくべきことがいくつかあります。以下をカバーします:

  1. CSVファイルの構造を設定する方法
  2. 外部データをWebflowにアップロードする方法
  3. フィールドの設定とアイテムのプレビュー方法
  4. マップされたデータのインポート方法
  5. 画像インポートの問題のトラブルシューティング方法
注意: CMSへのインポート可能なコレクション項目の数は、サイトプランのタイプによって異なります。CSVファイルのヘッダー行はコレクションアイテムとしてカウントされず、この制限にはカウントされません。限度額と料金については、料金ページをご覧ください。
重要: CSVファイルからコレクション項目をインポートする際に、サイトのバックアップを作成するかどうか尋ねられます。 Yes をクリックすると、インポート前のバックアップバージョンが作成され、後で問題が発生した場合には Site settings > Backups タブで復元できます。ただし、既存のコレクション項目が多い大規模なサイトの場合、CSVを介してコレクション項目をインポートする前に、デザイナーでバックアップを作成することをお勧めします。インポート時にバックアップステップをスキップするためにNoをクリックしてください。バックアップの保存と復元について詳しく学ぶ。

CSVファイルの構造の作成方法

通常、WordPressなどの他のコンテンツ管理システムからエクスポートされたCSVファイルは、Webflowと互換性のある方法ですでに構造化されています。また、Webflowコレクションをエクスポートして別のWebflowサイトにデータを移行する場合も、CSVの構造について心配する必要はありません。

ただし、上記のソースのいずれかからの既存のCSVを使用していない場合、データをコレクションにインポートするために独自のCSVファイルを作成することがあります。Google Sheets、MS Excel、またはAirtableなどのツールを使用して、コレクションのフィールドを表す列とコレクション項目とその値を表す行を持つスプレッドシートを作成できます。スプレッドシートの準備ができたら、それをCSVファイルとして保存できます。

注意: ExcelでCSVファイルを保存する際は、「コンマ区切りの値(CSV)」というCSVの種類を選択することを確認してください。他のCSV拡張子は、Webflowにアップロードした際に正しく表示されない場合があります。データの列が1つしかないCSVが正しくインポートされるようにするには、ヘッダーカラムラベルの直後にカンマを追加してください(例: Name,)

サポートされるデータ型

インポートプロセス中にエラーが発生しないようにするために、CSVをWebflowに適した形式にする必要があります。画像、日付、数字、色などの一部のデータは、正しい形式でなければ認識されない場合があります。

データが正しくフォーマットされ、適切なコレクションフィールドタイプにマッピングできるようにするために、独自のデータベーススプレッドシートを作成する際には、次のガイドラインに従ってください。

注意: もしCSVの列をデフォルトの名前とスラッグフィールドにマッピングしていない場合、CMSはそれらを自動生成します。
重要: インポート中、リッチテキストフィールド内のコードは、Webflowでサポートされていない要素、クラス、属性を削除するために「cleaned up」されます。このクリーンアップ処理のため、インポート後にリッチテキストコンテンツを確認することをお勧めします。

外部データをWebflowにアップロードする方法

Webflowのコレクションに外部データをアップロードする方法について説明しましょう。このプロセスでは、次のステップをカバーします。

  1. CSVファイルをアップロードする方法
  2. ヘッダー行を指定する方法
  3. インポートするアイテムを選択する方法

CSVファイルをアップロードする方法

指定したコレクションにCSVファイルをWebflowにアップロードするには:

  1. CMSパネルを開く
  2. インポートするコレクションを選択
  3. Importをクリック
  4. CSVファイルをドラッグアンドドロップするか、コンピュータからファイルを参照する
注意: 最大4MBのCSVファイルサイズをアップロードできます。

ヘッダー行を指定する方法

CSVファイルを選んだ後、ヘッダー行を指定するように求められます。通常、CSVファイルのヘッダー行には、各列に含まれるコンテンツの種類を定義する列ラベルが含まれています(例: "Name"、"Date"など)。

CSVファイルをアップロードすると、CSVファイルのプレビューが表示され、最初の行がヘッダーかどうかを確認するように促されます。最初の行をヘッダー行としてマークしてインポートから除外する場合は、"Yes, this is the header" または "I'm not sure" を選択します。行をインポートに含める場合は、"No, this is an item" を選択します。ヘッダー行の値は、フィールド構成のステップでコレクションアイテムのフィールドラベルとして設定されます。

どの選択肢を選んでも、この段階で最初のコレクションアイテムに移動して、「Header row」ボックスにチェックを入れたり外したりすることができます。

インポートするアイテムを選択する方法

ヘッダー行を選択した後、CSVファイルの処理が完了したことを確認するメッセージが表示されます。この確認メッセージには、新しくアップロードしたCSVアイテムがコレクション内の既存アイテムと一致するかどうかが示されます。

注意: ヘッダー行を選択していないか、最初の行がヘッダー行かどうか不確かであることを示していない場合、既存の一致するアイテムを更新する選択肢なしで、フィールド構成に直接進むことになります。要するに、特定のヘッダー行が指定されていない場合、コレクションアイテムのID列またはコレクションフィールド列にマッピングすることはできないため、Webflowは新しいコレクションアイテムを作成することになります。

一致するアイテムがある場合(つまり、既存のコレクションアイテムとCSVデータが同じIDを共有する場合)、次のいずれかを選択できます:

  • 一致するアイテムを更新(Update matching items):コレクション内の既存アイテムをCSVアップロード内のアイテムに一致させて更新します。
  • すべてのアイテムを新しいアイテムとしてインポート(Import all items as new items):CSV内の一致するアイテムをコレクション内の新しいアイテムとしてアップロードします。

「一致するアイテムを更新」を選択することは、既存のコレクション内のアイテムを迅速に変更する優れた方法です。たとえば、CSVファイルで選択したアイテムのデータを更新した場合、更新されたアイテムのみをアップロードして、古いコレクションアイテムのコンテンツを新しいデータで迅速に上書きできます。

注意: 通常のCMSアイテムは、「アイテムID」フィールドに基づいて一致します。このフィールドはコレクションからのCSVエクスポートに含まれます。また、バックアップからサイトを復元した場合、すべてのCMSコレクションおよびアイテムIDが更新されることにも注意してください。バックアップについて詳しく学ぶ。

一致するアイテムを更新するか、すべてのアイテムを新しいアイテムとしてインポートするかを選択した後、CSVデータをコレクションフィールドに設定およびマップすることができます。一致するアイテムがない場合、このステップに進みます。

注意: CSVインポートを介してアイテムを更新することは、Eコマースのアイテムには適用されません。

フィールドの設定とアイテムのプレビュー方法

フィールドの設定

CSVファイルをアップロードした後、その列は「 Imported items」の下のフィールド構成ペインで設定できるフィールドとして利用可能になります。指定された場合、列ヘッダーはコレクションフィールドのラベルとして表示されます。

注意: CSVのヘッダー名が既存のコレクションフィールド名と一致する場合、自動的にマッピングされ、設定ステップを省略できます。

入力フィールドの値は選択した行から取得されます。各行は単一のコレクションアイテムに対応します。右側のアイテムプレビューパネルで異なるアイテムをプレビューできます。

このステップでは、CSVの各列をどのようにマッピングするか、どの列を省略するかを選択して、コレクションフィールドを設定します。各列とフィールドにはいくつかのオプションがあります:

  • インポートしない
  • 新しいフィールドを作成
  • 既存のフィールドにマッピング

インポートしない

CSVに含まれるがCMSフィールドにマッピングしたくない列がある場合、ドロップダウンからDo not importを選択します。

新しいフィールドを作成

コレクションフィールドがまだ存在しない場合、新しいフィールドを作成し、列にマッピングできます:

  1. ドロップダウンからCreate new fieldを選択します
  2. ドロップダウンからフィールドタイプを選択します。列の内容をサポートしないフィールドタイプは利用できず、グレーアウトします。
  3. New field labeフィールドに新しいフィールドのラベルを追加します。または提案されたラベルをそのまま使用できます。
  4. (オプション)ラベルの下に表示されるHelp texを追加します。

選択したフィールドタイプに応じて設定する必要があるオプションが他にもあるかもしれません。新しいoptionフィールドには、その列から取得したすべての一意の値が表示されます(これらの値は大文字と小文字を区別します)。新しいswitchフィールドの場合、値を「No」にマッピングする値を指定したり、「Yes」にマッピングする値を指定したりできます。

既存のフィールドにマッピング

各列をコレクション内の既存のフィールドにマッピングできます:

  1. ドロップダウンからMap to existing fieldを選択します
  2. ドロップダウンからこの列をマッピングしたいフィールドを選択します。列の内容をサポートしないフィールドは利用できず、グレーアウトします。
注意: 列ラベルの横にある緑色の「点」アイコンは、その列がマッピングされたことを示します。

新しいスイッチフィールドの場合、値を「No」にマッピングする値を指定するか、「はい」にマッピングする値を指定するかを指定できます。また、値を「はい」にマッピングするにはSwapをクリックすることもできます。

注意: 既に使用中の既存フィールドに列をマッピングすることはできません。列タイプをマッピングする必要がある場合は、新しいフィールドを作成できます。

アイテムのプレビュー

Item preview panelを使用して、インポートされる各アイテムのフィールドと値をプレビューできます。

プレビューペインの上部にある左右の「arrow」ボタンを使用してコレクションアイテムをナビゲートできます。トップバーにあるDisplay item dropdown menuをクリックすると、インポートされるすべてのアイテムのリストが表示されます。Display item dropdown menuが開いていると、任意のアイテム名をクリックしてそのプレビューにジャンプできます。また、特定のアイテムを検索するためにsearch barにテキストを入力することもできます。

左パネルのマッピングされたフィールドまたは作成されたフィールドの上にカーソルを移動させると、対応するフィールドがプレビューアイテムでハイライト表示されます。フィールドを設定すると、プレビューアイテムはフィールドの設定に応じてリアルタイムで更新されます。

特定のアイテムのフィールド値を手動で編集する必要がある場合、フィールドを設定する前に編集できます。または、ドロップダウンメニューでDo not importを選択することもできます。

また、コレクションに特定のアイテムをインポートしないように選択することもできます:

  1. プレビューペインでインポートしないアイテムを見つけます(つまり、アイテムに移動するために矢印、ドロップダウンメニュー、または検索バーを使用します)。
  2. Skip import”をオンに切り替えます。

スキップされたアイテムは、Item preview ペインの上部およびDisplay item dropdown menu内で「Skip import」アイコンで表示されます。

要件/検証付きフィールド

CSVの列内のセルが必須の参照フィールドにマッピングされ、空白であるか、その参照コレクションに存在する値を含んでいない場合、そのアイテムが存在しないという警告が表示されます。必須フィールドとして、その行のアイテムはDraftとしてインポートされ、参照フィールドは空白のままになります。

マッピングされた参照フィールドが必須でなく、その列内のセルが空白であるか、その参照コレクションに存在する値を含んでいない場合、その行のコレクションアイテムはインポート後に Staged for publishされ、参照フィールドは空白のままになります。

マップされたデータをインポートする方法

コレクションフィールドとCSVデータを完全に設定したら、Importをクリックしてデータをコレクションに追加します。

重要: CSVファイルからコレクションアイテムをインポートする際、サイトのバックアップを作成するかどうか尋ねられます。Yesをクリックすると、サイトの事前インポートバックアップバージョンが作成され、何か問題が発生した場合には後でSite settings > Backupsタブで復元できます。ただし、既存のコレクションアイテムが多く含まれる大規模なサイトの場合、CSVを使用してコレクションアイテムをインポートする前に、デザイナーでバックアップを作成し、インポート中のバックアップステップをスキップするためにNoをクリックすることをお勧めします。

すべてのアイテムがインポートされるまでデザイナーに滞在していることを確認してください。コレクションに一部またはすべてのアイテムがインポートされなかった場合、インポートされなかったアイテムのリスト、失敗したインポートの原因、詳細なエラーレポートの要約をダウンロードできるリンクが提供されます。

画像インポートの問題のトラブルシューティング方法

CSVファイルに壊れた画像リンクが含まれている場合、それらのURLをコレクション内の画像フィールドにマッピングすることはできません。HTTPステータスコードチェッカーのような大量のURLチェッカーを使用して、壊れたリンクを検出および置換できます。

CSVファイル内の壊れたリンクを確認および修正するには:

  1. CSVファイルを開く
  2. "URLs"列をコピー
  3. "URLs"列の内容を大量URLチェッカーに貼り付ける
  4. ステータスコードを確認して、壊れているURLを特定します。ステータスコード200はエラーのないURLを示します。
  5. エラーステータスコードを返すURLを見つけ、CSVファイル内のリンクを置換または削除します
  6. CSVファイルを保存し、コレクションに再度インポートを試みます

コレクションアイテムをCSVファイルにエクスポートする方法

コレクションアイテムをCSVファイルにエクスポートする方法は、次の2つの方法のいずれかを選択できます:

  1. コレクション全体をエクスポート(アーカイブされたアイテムを含む)
  2. 個別のコレクションアイテムを選択的にエクスポート

コレクションアイテムをCSVファイルにエクスポートする際には、コレクションフィールドがどのようにエクスポートされるかを理解してください。

コレクション全体をエクスポート

特定のコレクションの内容(アーカイブされたアイテムを含む)をCSVファイルにエクスポートするには:

  1. CMS panelに移動します。
  2. エクスポートしたいコレクションの名前をクリックします。
  3. Exportをクリックします。

コレクションフィールドがどのようにエクスポートされるかを学びます。

個別のコレクションアイテムを選択的にエクスポート

個別のコレクションアイテムを選択的にCSVファイルにエクスポートするには:

  1. (オプション)Search, filter, or sort を行ってコレクションアイテムを検索します。
  2. エクスポートしたいアイテムを一括選択または個別に選択するためにSelectをクリックします。
  3. CSVファイルを作成しダウンロードするためにExportをクリックします。
ヒント: 個々のコレクション項目をCSVファイルにエクスポートし、CSVファイルでそれらの項目に変更を加え、更新されたコレクション項目だけをコレクションに再インポートして、古いコンテンツを新しい更新内容で上書きすることができます。

コレクションフィールドがどのようにエクスポートされるか

ほとんどのコレクションフィールドのコンテンツ、参照フィールドを含む、はプレーンテキストまたはURLの文字列としてエクスポートされます。複数の参照フィールドはテキストのコンマ区切りリストとしてエクスポートされます。リッチテキストフィールドはHTMLとしてエクスポートされます。画像とファイルはWebflowホストされたURLとしてエクスポートされます。

重要: 画像フィールドとファイルフィールドのURLは、コレクションをエクスポートしたサイトに関連付けられています。これは、元のサイトを削除すると、それらのアセットも削除され、CSVファイル内のリンクが壊れることを意味します。リッチテキストフィールド内の画像についても同じことが当てはまります。コレクションを新しいWebflowサイトに移行していない限り、元のサイトをバックアップとして保持するか、画像とファイルを個別にダウンロードしておくことを確認してください。
注意: エクスポートされたコレクションを別のWebflowサイトにインポートする場合、画像フィールドにマッピングされた画像は新しいサイトに新しい画像としてインポートされます。現在、ファイルフィールドのデータは新しいサイトにインポートできず、手動でアップロードする必要があります。

目次

あなたもNoCodeのプロに

充実したサポートであなたも、最短3ヶ月間でノーコードWeb制作のプロになれます。

  • 300以上のノーコード動画教材

  • チャットサポート

  • 個別ビデオ通話相談