コードの書き出し

コードのエクスポート方法

1. Designerでサイトを開きます。
2. Exportボタンをクリックします。
3. Prepare ZIPをクリックします。
4. ZIPファイルをダウンロードします。

重要: CMS、User Accounts、およびEcommerceコンテンツ（データベース）およびLogic flowsはエクスポートされたコードに含まれません。エクスポートされたサイトでは、コレクションリストは空の状態を表示し、コレクションページにはコレクションフィールドにバインドされたコンテンツが表示されません。サイト内のパスワード保護ページは、コードのエクスポート後に保護されなくなります。さらに、サイト内の検索とフォーム（ファイルのアップロードおよびreCAPTCHAを含む）は、GDPRに準拠するため、エクスポートされたサイトでは機能しません。

minified HTMLのエクスポート方法

HTMLを最小化することで、ページの読み込み時間を短縮し、ブラウザがページを読み込むために必要のないスペース、コメント、および他のコード要素を削除することができます。HTMLを最小化してエクスポートするには：

1. Designerの上部にあるExportボタンをクリックします。
2. キーボードでControl + Oを押します。
3. エクスポートウィンドウに表示されるMinify HTMLチェックボックスをオンにします。
4. Prepare ZIPをクリックします。
5. ZIPファイルをダウンロードします。

エクスポートされたファイルに含まれる内容

ダウンロードしたZIPファイルには、サイトのすべてのページ、スタイル、スクリプト、および画像が含まれています：

1. CSSフォルダ：3つの.cs*ファイルにすべてのサイトのスタイルが含まれています。
2. CSSファイル（例：your-site-name.css）：サイトのすべてのカスタムスタイルが含まれています。
3. webflow.css：Webflowレイアウトシステムの共通の基本スタイルと、ナビゲーションバー、スライダー、タブなどのすべてのコンポーネントが含まれています。
4. normalize.css：ブラウザがすべての要素をより一貫して、現代の標準に合わせてレンダリングするようにするスタイルです。これは正規化が必要なスタイルのみを正確に対象としています。
5. JSフォルダ：Webflow.jsファイルを含むフォルダです。このファイルには、ページの対話型要素が正しく機能するために必要なすべてのJavaScriptが含まれています。フォーム、ナビゲーションバー、スライダー、タブ、インタラクションなどの要素は、webflow.jsに依存しています。このファイルを削除すると、ページは見た目は正しく表示されますが、期待どおりに動作しません。
6. 画像フォルダ：サイトのアセットマネージャーにアップロードされたすべての画像が含まれています。
7. すべてのサイトページの.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アニメーションが正常に動作するには、ウェブサーバーが必要です。