ワークスペース有料プランでは、Webflow Designer 内からサイトの HTML、CSS、JavaScript、アセットをエクスポートできます。これにより、コードをバックアップし、クライアントから要求があった場合に提供することができます。また、エクスポートしたコードを使用して、好きな場所でホスティングすることもできます。
このレッスンでは、次のことを学びます：
コードのエクスポート方法
- Designerでサイトを開きます。
- Exportボタンをクリックします。
- Prepare ZIPをクリックします。
- ZIPファイルをダウンロードします。
重要: CMS、User Accounts、およびEcommerceコンテンツ（データベース）およびLogic flowsはエクスポートされたコードに含まれません。エクスポートされたサイトでは、コレクションリストは空の状態を表示し、コレクションページにはコレクションフィールドにバインドされたコンテンツが表示されません。サイト内のパスワード保護ページは、コードのエクスポート後に保護されなくなります。さらに、サイト内の検索とフォーム（ファイルのアップロードおよびreCAPTCHAを含む）は、GDPRに準拠するため、エクスポートされたサイトでは機能しません。
minified HTMLのエクスポート方法
HTMLを最小化することで、ページの読み込み時間を短縮し、ブラウザがページを読み込むために必要のないスペース、コメント、および他のコード要素を削除することができます。HTMLを最小化してエクスポートするには：
- Designerの上部にあるExportボタンをクリックします。
- キーボードでControl + Oを押します。
- エクスポートウィンドウに表示されるMinify HTMLチェックボックスをオンにします。
- Prepare ZIPをクリックします。
- ZIPファイルをダウンロードします。
エクスポートされたファイルに含まれる内容
ダウンロードしたZIPファイルには、サイトのすべてのページ、スタイル、スクリプト、および画像が含まれています：
- CSSフォルダ：3つの.cs*ファイルにすべてのサイトのスタイルが含まれています。
- CSSファイル（例：your-site-name.css）：サイトのすべてのカスタムスタイルが含まれています。
- webflow.css：Webflowレイアウトシステムの共通の基本スタイルと、ナビゲーションバー、スライダー、タブなどのすべてのコンポーネントが含まれています。
- normalize.css：ブラウザがすべての要素をより一貫して、現代の標準に合わせてレンダリングするようにするスタイルです。これは正規化が必要なスタイルのみを正確に対象としています。
- JSフォルダ：Webflow.jsファイルを含むフォルダです。このファイルには、ページの対話型要素が正しく機能するために必要なすべてのJavaScriptが含まれています。フォーム、ナビゲーションバー、スライダー、タブ、インタラクションなどの要素は、webflow.jsに依存しています。このファイルを削除すると、ページは見た目は正しく表示されますが、期待どおりに動作しません。
- 画像フォルダ：サイトのアセットマネージャーにアップロードされたすべての画像が含まれています。
- すべてのサイトページの.htmlファイル（コンテンツのないコレクションテンプレートページも含む）
重要: CMS、User Accounts、およびEcommerceのコンテンツ（データベース）およびLogic flowsはエクスポートされたコードに含まれません。エクスポートされたサイトでは、コレクションリストは空の状態を表示し、コレクションページにはコレクションフィールドにバインドされたコンテンツが表示されません。サイト内のパスワード保護ページは、コードのエクスポート後に保護されなくなります。さらに、GDPRに準拠するため、エクスポートされたサイトではサイト内検索とフォーム（ファイルのアップロードとreCAPTCHAを含む）は機能しません。
エクスポートされたファイルに含まれない内容
以下の機能とコンテンツはエクスポートされたコードに含まれず、エクスポートされたウェブサイトで期待どおりに機能しません：
- CMSのコンテンツと機能（コレクションアイテムおよびコレクションリストを含む）
- ユーザーアカウントのコンテンツと機能（ユーザーとアクセスグループを含む）
- Ecommerceのコンテンツと機能（製品とチェックアウトを含む）
- サイトおよび/またはページのパスワード保護
- フォームの送信処理
- 事前に存在するフォームの送信（別途エクスポート可能）
- フォーム内のreCAPTCHA要素
- サイト内検索
- ロジックフロー
お知らせ: CMS、User Accounts、およびEcommerceコレクションは、コレクションアイテム、ユーザーアカウント、および製品のバックアップを保存したい場合、CSV形式で個別にエクスポートできます。
FAQとトラブルシューティングのヒント
なぜクラス名の前に「w-」接頭辞が付いていますか？
Webflowは、コンポーネント固有のクラスに「w-」接頭辞を付けて、他のコードフレームワークとの競合を避けています。
サイトのコードの一部だけをエクスポートすることはできますか？
現時点では、エクスポートする内容を選択することはできません。サイトのすべてのエクスポート可能な部分は、すべてのエクスポートに含まれます。
エクスポート後にコードを編集できますか？
エクスポート後にコードを編集することはできます。ただし、エクスポートされたファイルへの手動の変更は、一部のWebflowコンポーネントを壊す可能性があることに注意してください。
エクスポートしたページのURLから.html拡張子を削除できますか？
エクスポートしたページから.html拡張子を削除したい場合は、.htaccessファイルを使用して削除することができます。
外部サーバーでサイトをホストする場合、Webflowに帰属情報を提供する必要がありますか？
エクスポート後、外部サーバーでサイトをホストするために、Webflowに帰属情報を提供する必要はありませんし、エクスポートされたサイトを動作させるためにWebflowのプランを維持する必要もありません。
エクスポートされたコードにはCMS、メンバーシップ、およびEcommerceのコンテンツが含まれていますか？
CMS、User Accounts、およびEcommerceのコンテンツ（データベース）はエクスポートされたコードに含まれません。エクスポートされたサイトでは、コレクションリストは空の状態を表示し、コレクションページにはコレクションフィールドにバインドされたコンテンツが表示されません。
コードをエクスポートした後、パスワード保護されたページは引き続き保護されますか？
いいえ。サイト内のパスワード保護されたページは、コードのエクスポート後には保護されません。パスワード保護が期待どおりに機能するためには、サイトはWebflowでホストされている必要があります。プロジェクトとページのパスワードについて詳しく学びます。
コードを他の場所でホストする場合、サイトのすべての要素は機能しますか？
CMS、User Accounts、およびEcommerceのコンテンツ（データベース）と機能、Logic flows、サイト内検索、フォーム（ファイルのアップロードとreCAPTCHAを含む）はエクスポートされたコードに含まれません。これらの機能は、正常に機能するためにホスティングが必要です。エクスポートされたサイトでは、コレクションリストは空の状態を表示し、コレクションページにはコレクションフィールドにバインドされたコンテンツが表示されません。サイト内のパスワード保護ページも、コードのエクスポート後には保護されなくなります。
さらに、GDPRに準拠するため、エクスポートされたサイトではサイト内検索とフォーム（ファイルのアップロードとreCAPTCHAを含む）は機能しません。フォームの送信を受けるには、サードパーティのツールを使用するか、サードパーティのフォームインテグレーションを埋め込む必要があります。
サイトをローカルでロードすると、Lottieアニメーションがローカルで動作しないのはなぜですか？
セキュリティの理由から、Lottie JSONファイルはローカルファイルシステムから読み込まれないため、サイトをローカルでロードする際にLottieアニメーションが表示されません。Lottieアニメーションが正常に動作するには、ウェブサーバーが必要です。
