コレクションを作成する際、コレクションアイテムを手動で追加したり、カンマ区切り値（CSV）ファイルを使用して既存のコレクションに直接インポートしたりすることができます。これにより、数百または数千のデータ項目を外部ソースからCMSに直接インポートし、そのコンテンツをインポートする際に、CSVコンテンツを参照フィールドにマッピングすることができます。また、大量のデータの更新を容易にするために、CSVインポートによって既存のCMSアイテムを選択的に更新することもできます。
同じ Webflow サイトまたは別の Webflow サイトからエクスポートしたコレクションやデータがある場合、それらのコレクション アイテムを現在のサイトにインポートすることもできます。CMSの別サイトへの移行についてはこちらをご覧ください。
このレッスンでは、次のことを学びます。
- ウェブフローに外部データをアップロードする方法
- フィールドとプレビュー項目を設定する方法
- マッピングされたデータをインポートする方法
- CSV ファイルを構造化する方法
- サポートされているデータ型を使用する方法
について説明しています。
インポート可能なアイテム数の決め方
無料のスターターサイトプランを使用すると、最大50のコレクションアイテムを公開することができます。50以上のアイテムをインポートするには、CMSサイトプランまたはビジネスサイトプランをサイトに追加する必要があり、それぞれ最大2,000および10,000のコレクションアイテムが可能です。StarterサイトプランでCSVインポートを無料で試すには、50行以下のCSVを使用してください（ヘッダー行はアイテムとしてカウントされません）。
1. 外部データ(CSVファイル)をアップロードする方法
CSV を Webflow の指定されたコレクションにアップロードするには、以下の手順に従います。
- CMS パネルを開く
- コレクションを選択
- [インポート］をクリックします。
- CSV ファイルをドラッグします（または、クリックしてコンピュータを参照します）。
- 注：CSV ファイルの最大ファイルサイズは 4MB です。
ヘッダー行の指定方法
CSVファイルを選択すると、ヘッダー行を指定するためのプロンプトが表示されます。
通常、CSVのヘッダー列には、各列に含まれるコンテンツの種類を定義する列ラベルが含まれます。CSVファイルをアップロードすると、CSVのプレビューが表示され、最初の行がヘッダーであるかどうか確認することができます。はい」または「わからない」を選択すると、最初の行がヘッダーとしてマークされ、インポートから除外されます。いいえ」を選択すると、その行はインポートに含まれます。
この段階でどのような選択をしたとしても、次のステップでは、最初の項目で、「ヘッダー列」のチェックボックスをオンにしたり、オフにしたりすることができます。
このヘッダー行の値は、このフィールド設定ステップのフィールドラベルとして設定されます。
インポートする項目の選択方法
ヘッダー行を選択すると、CSVファイルの処理が終了したことを確認するメッセージが表示されます。また、新しくアップロードされたCSV項目が、コレクション内の現在の項目と一致するかどうかがモーダルで表示されます。
注: ヘッダー行を選択していない場合、または最初の行がヘッダー行であるかどうか不明な場合は、一致する項目を更新する選択肢がなく、フィールド設定に直接移動します。ヘッダー行がないと、ID 列やフィールドにマッピングできないため、基本的に Webflow は新しいアイテムを作成するようデフォルトで設定します。
一致するアイテムがあった場合、以下の選択が可能です。
- 一致するアイテムを更新する：コレクション内の既存のアイテムをCSVアップロード内のアイテムに一致させます。
- すべてのアイテムを新しいアイテムとしてインポートします。
- CSVアップロードのマッチングアイテムをコレクションに新しいアイテムとして追加します。
一致する項目の更新を選択すると、コレクション内の既存の項目に素早く変更を加えることができる優れた方法です。例えば、CSVファイルでアイテムのデータを更新した場合、更新したアイテムだけをアップロードすれば、CMSアイテムの古いコンテンツを新しいデータで素早く上書きすることができます。
注意：
通常のCMSアイテムは、コレクションからのCSVエクスポートに含まれる「アイテムID」フィールドに基づいて照合されます（CSVインポートによるアイテムの更新は、Eコマースアイテムには適用されません）。(CSVインポートによるアイテムの更新は、Eコマースアイテムには適用されません。) また、バックアップからサイトの復元を実行すると、すべてのCMSコレクションとアイテムIDが更新されることに注意してください。
一致する項目を更新するか、すべての項目を新規項目としてインポートするかを選択したら、CMSのフィールドを設定し、CSVデータをそれらのフィールドにマッピングし始めることができます。一致する項目がなかった場合も、これと同じステップに進みます。
2. フィールドの設定とアイテムのプレビュー方法
CSVファイルをアップロードすると、その列がフィールドとして利用できるようになります。このフィールドは、「取り込んだ項目」の「フィールド設定」ペインで設定できます。指定した場合、列のヘッダーがフィールドのラベルとして表示されます。
注意：CSVのヘッダー名が既存のフィールド名と一致する場合、自動的に相互にマッピングされ、設定作業の手間が省けます。
入力フィールドの値は、選択された行から取得されます。各行がコレクションアイテムに変換されます。右側のアイテムプレビューペインで、異なるアイテムをプレビューすることができます。
フィールドの設定方法
このステップでは、どのカラムをマッピングし、どのカラムを省くかを選択することで、フィールドを設定します。また、各カラムに新しいフィールドを作成することもできます。それでは、それぞれのオプションについて説明します。
フィールドをマッピングしない
CSVにインポートしたくない列がある場合、ドロップダウンからインポートしないを選択します。
新規フィールドの作成
コレクションにフィールドがまだ存在しない場合、フィールドを作成し、それを列にマップすることができます。
- 「新しいフィールドの作成」を選択します。
- 表示されるドロップダウンから、この新しいフィールドのフィールドタイプを選択します。列のコンテンツをサポートしないフィールドタイプは利用できず、グレーアウトされます。
- 新しいフィールドのラベルを追加するか、または提案されたラベルを維持します。
- オプション：ヘルプテキストを追加
- 異なるフィールドタイプに対して設定する他のオプションがあります。新しいオプションフィールドには、そのカラムのすべてのユニークな値が入力されます。新しいスイッチ・フィールドでは、どの値が "No "に対応するかを指定することができます。
既存フィールドへのマッピング
各列をコレクション内の既存のフィールドにマップすることができます。列のラベルの横にある緑色のインジケータは、その列がマップされていることを示します。
- [既存のフィールドにマップする] を選択します。
- 表示されるドロップダウンから、この列をマップするフィールドを選択します。列の内容をサポートしていないフィールドは利用できず、灰色で表示されます。
スイッチフィールドでは、どの値を "No "に対応させるかを指定することができます。または、スワイプして "Yes "に対応する値を指定できます。
豆知識:すでに使用されているフィールドにカラムをマッピングすることはできません。特定のフィールドタイプにカラムをマッピングする必要がある場合は、新しいフィールドを作成することができます。
アイテムのプレビュー方法
右側の項目プレビューペインで、インポートする各項目のフィールドと値をプレビューすることができます。プレビューペインの上部にある左右の矢印ボタンで、項目を切り替えます。トップバーの表示項目ドロップダウンメニューをクリックすると、インポートされる全項目のリストが表示されます。表示項目のドロップダウンメニューを開いた状態で、任意の項目名をクリックすると、その項目のプレビューにジャンプします。検索バーにテキストを入力すると、特定の項目を検索することができます。
左側のパネルでマッピングされたフィールドや作成されたフィールドの上にマウスを置くと、プレビュー項目の対応するフィールドがハイライトされます。プレビュー項目は、フィールドが設定されるとリアルタイムで更新されます。
あるアイテムのフィールドの値を編集する必要がある場合、フィールドを構成する前に、またはドロップダウンでインポートしないを選択することによって、編集することができます。
また、特定のアイテムのコレクションへのインポートをスキップすることもできます。
- プレビューペインでインポートしないアイテムを探す（矢印、ドロップダウンメニュー、検索バーを使用するなど）。
- [インポートをスキップする]トグルをオンにします。
スキップされた項目は、プレビューペインの上部と表示項目のドロップダウンメニューに、「インポートをスキップ」アイコンで表示されます。
要件/検証を伴うフィールド
CSV列の1つ内のセルが必須参照フィールドにマッピングされており、それが空であるか、その参照コレクションに存在する値を含まない場合、項目が存在しない旨の警告が表示されます。必須フィールドとして、その行の項目は下書きとしてインポートされ、参照フィールドは空白のままになります。
マップされた参照フィールドが必須ではなく、その列内のセルが空であるか、参照されたコレクションに存在する値を含まない場合、その行のアイテムはインポートされると公開用にステージングされ、参照フィールドは空白のまま残されます。
3. マッピングされたデータをインポートする方法
CMSフィールドとCSVデータの設定が完了したら、右上の「インポート」ボタンをクリックして、データをCollectionに追加してください。
すべてのアイテムがインポートされるまで待ちます。
一部またはすべてのアイテムがコレクションにインポートされなかった場合、インポートされなかったアイテムのリスト、インポートに失敗した原因、および詳細なエラーレポートのサマリーをダウンロードできるリンクが表示されます。
豆知識 :
インポート時に何か問題が発生した場合に備えて、インポート前のサイトのバージョンが作成され、サイト設定の「バックアップ」タブで復元することができます。
4. CSV ファイルの構造について
エクスポートされた ウェブフローのコレクション構造について心配する必要はありません。通常、WordPress などの他のコンテンツ管理システムからエクスポートされた CSV は、すでに ウェブフローと互換性のある方法で構造化されています。
しかし、自分でCSVを作成し、そのデータをコレクションにインポートしたい場合もあります。たとえば、Google Sheets、MS Excel、または Airtable を使用して、列がフィールド、行が項目とその値を表すスプレッドシートを作成できます。スプレッドシートが完成したら、CSV ファイルとして保存できます。
注意：
CSV ファイルを Excel で保存する場合、CSV タイプは必ず "Comma Separated Values" を選択してください。その他の CSV 拡張子では、Webflow にアップロードした際に正しくレンダリングされない場合があります。1 列のデータしかない CSV を正しくインポートするには、ヘッダー列のラベル（例：名前）の直後にカンマを追加してください。
インポート時にエラーが発生しないように、まず、CSV が ウェブフローに適した形式であることを確認してください。
5. サポートされているデータ型の使用方法
CSV ファイルをアップロードした場合、通常、Webflow CMS はコンテンツを正しく理解する必要があります。なぜかというと、アップロードした際に画像、日付、数字、色など、一部のフォーマットが認識されない場合があります。
フォーマットに関する注意点として、エクスポートされた Webflow CMS コンテンツは、インポート時に適切なフォーマッ トになります。そのため、エクスポートされた CSV ファイルを使用して、CMS コンテンツをあるウェブフローサイトから別のウェブフローサイトに移動することができます。
データが正しくフォーマットされ、正しいフィールドタイプにマッピングされるように、独自のデータベーススプレッドシートを作成する際は、以下のガイドラインに従ってください。
- 名前フィールド
256文字未満のプレーンテキストフィールドは、このフィールドにマッピングすることができます。
- スラッグフィールド
256文字未満のプレーンテキストフィールドは、このフィールドにマッピングすることができます。
- プレーンテキストフィールド
プレーンテキストの値をこのフィールドにマッピングすることができます。
- リッチテキストフィールド
あらゆる値をこのフィールドにマッピングすることができます。ただし、リッチテキストをインポートするには、このフィールドの値がHTMLコードである必要があります。
- 画像フィールド
画像は、CSVに直接URL（画像ファイルの拡張子で終わるリンク）として追加する必要があります。サポートされている画像ファイルタイプのみが、コレクションにインポートされます。
- マルチ画像フィールド
単一画像と同様に、画像のグループは、CSV の個別の直接 URL (画像ファイル拡張子で終わるリンク) として追加する必要があります。サポートされている画像ファイルタイプのみが、コレクションにインポートされます。セル内の画像 URL の各グループは、セミコロンで区切る必要があります。(例: "https://images.unsplash.com/bird1.jpeg; https://images.unsplash.com/bird2.jpeg; https://images.unsplash.com/bird3.jpeg")
- ビデオフィールド
YouTubeまたはVimeoのURLのみをビデオフィールドにマップすることができます。
- リンクフィールド
任意のURLをリンクフィールドにマッピングできます。
- 電子メールフィールド
電子メールフィールドには、電子メールアドレスのみをマッピングできます。
- 電話番号フィールド
サポートされているすべての電話番号形式を電話番号フィールドにマッピングできます。
- Numberフィールド
このフィールドにマッピングできるのは数字のみです。値に単位（100米ドル）、記号（例：100ドル）、カンマ（10,000）などの文字が含まれている場合は、数値フィールドに数値をマッピングすることはできません。
- 日付/時刻フィールド
サポートされている日付と時刻の形式をこのフィールドにマッピングできます。
- スイッチフィールド
セルに2つの一意な値しかない場合、列をスイッチフィールドにマップすることができます。たとえば、カラムの値が「True」と「False」のみである場合、これをスイッチフィールドタイプとしてインポートし、マッピングの段階でどちらの値が「Yes」を意味するかを指定することができます。
- カラーフィールド
ウェブカラーフォーマット（カラーネーム、16進コード、RGBA）の任意の値をこのフィールドにマッピングできます。16進コードは、#4353ffのように、先頭にシャープ記号(#)を付けなければならない。
- オプションフィールド
任意の列をオプションフィールドにマップすることができる。このカラムのユニークな値はすべて、このフィールドのオプションになります（最大100個のオプション）。
- ファイルフィールド
現在、ファイルフィールドに任意のカラムをマッピングすることはできません。すべてのデータをインポートした後、手動でファイルをアップロードすることができます。
- 参照フィールド
通常のテキストとしてフォーマットされたコンテンツをマップすることができます - 特別なフォーマットは必要ありません（例：「Charles Dickens」）。
- 複数参照フィールド
複数画像フィールドのコンテンツと同様に、セル内のセミコロンで区切られたコンテンツ（例：「Charles Dickens; Jane Austen; Charlotte Bronte」）をマップすることができます。