ウェブフローの有料プランでは、ウェブフローデザイナー内からサイトの HTML、CSS、JavaScript、アセットをエクスポートすることができます。これは、コードをバックアップしたり、クライアントから要求があった場合に提供するために行うことができます。また、エクスポートしたコードを使用して、好きな場所でホストすることもできます。
1. コードのエクスポート方法
- デザイナーであなたのサイトを開きます。
- エクスポートボタンをクリックします。
- [ZIPを準備する]をクリックします。
- ZIP ファイルをダウンロードします。
重要:
CMS および Eコマースコンテンツ (データベース) は、エクスポートされたコードに含まれません。コレクションリストには空の状態が表示され、コレクションページにはコレクションフィールドにバインドされているコンテンツは表示されません。
サイト上でパスワード保護されているページは、コードのエクスポート後に保護されなくなります。また、GDPRに準拠するため、エクスポートされたサイトではサイト検索とフォーム（ファイルアップロードとreCAPTCHAを含む）は機能しません。
2. 最小化したHTMLを抽出する方法
HTMLを簡略化すると、空白やコメントなど、ブラウザがページを読み込むのに不要なコード要素を削除することで、ページの読み込み時間を改善することができます。
最小化されたHTMLを書き出すには以下の操作をします。
- Designerの上部にある「エクスポート」ボタンをクリックします。
- キーボードで Control + O を押します。
- エクスポートウィンドウに表示される「Minify HTML」チェックボックスをオンにします。
- ZIPを準備するをクリックします。
- ZIP ファイルをダウンロードします。
3. エクスポートされるファイルの内容
ダウンロードしたZIPファイルには、あなたのサイトのすべてのページ、スタイル、スクリプト、および画像が含まれています。
3つの.cssファイルに含まれるあなたのサイトのすべてのスタイルを持つCSSフォルダ。
- webflow.css：
ウェブフローレイアウトシステムの共通基本スタイルと、ナブバー、スライダー、タブなどのコンポーネントが含まれます。
- normalize.css :
ブラウザがすべての要素をより一貫して、現代の標準に沿ってレンダリングするようにします。正規化が必要なスタイルのみを正確にターゲットとしています。
- サイトのカスタムスタイルをすべて含むCSSファイル（例：your-site-name.css）。
- Webflow.js :
ファイルを含む JS フォルダ。このファイルには、ページのインタラクティブな要素を適切に動作させるために必要なすべての JavaScript が含まれています。フォーム、ナビバー、スライダー、タブ、インタラクションなどは、webflow.jsに依存しています。このファイルを削除すると、ページの見た目は正しくなりますが、期待通りに動作しなくなります。
- サイトのアセットマネージャーにアップロードされたすべての画像を含む images フォルダ。
- サイトの全ページの .html ファイル (コンテンツのない Collection テンプレート・ページを含む)
重要：
CMS と E コマースコンテンツ（データベース）は、エクスポートされたコードに含まれません。コレクションリストには空の状態が表示され、コレクションページにはコレクションフィールドにバインドされているコンテンツは表示されません。パスワードで保護されているページは、コードのエクスポート後、保護されなくなります。また、GDPRに準拠するため、エクスポートされたサイトではサイト検索とフォーム（ファイルアップロードとreCAPTCHAを含む）は機能しません。
4. FAQとトラブルシューティング
なぜクラス名の前に "w-" という接頭辞があるのですか？
ウェブフローでは、他のコードフレームワークとの競合を避けるために、コンポーネント固有のクラスの前に「w-」を付けています。
自分のサイトのコードの一部だけをエクスポートするように選択できますか？
現時点では、エクスポートされる内容を選択することはできません。あなたのサイトのエクスポート可能な部分はすべて、それぞれのエクスポートに含まれます。
エクスポートした後にコードを編集することはできますか？
エクスポート後にコードを編集することは可能です。ただし、エクスポートされたファイルを手動で変更すると、一部の Webflow コンポーネントが壊れる可能性があることに留意してください。
エクスポートしたページの URL から .html 拡張子を削除することはできますか？
エクスポートしたページの URL から .html 拡張子を削除したい場合は、.htaccess ファイルを使用して削除することができます。
自分のサイトを外部でホストする場合、Webflow に帰属表示を提供する必要がありますか？
エクスポート後、エクスポートしたサイトを自分のサーバーで動作させるために、Webflow に帰属表示を行ったり、Webflow プランを維持したりする必要はありません。
エクスポートされたコードには CMS や Eコマースのコンテンツが含まれますか？
CMS および E コマースコンテンツ（データベース）はエクスポートされたコードに含まれません。コレクションリストには空の状態が表示され、コレクションページにはコレクションフィールドにバインドされているコンテンツは表示されません。
パスワードで保護されているページは、コードをエクスポートしても保護されますか？
いいえ。サイト上のパスワードで保護されたページは、コードのエクスポート後も保護されません。パスワード保護が期待通りに機能するためには、ウェブフローでサイトをホストする必要があります。
コードを別の場所でホストした場合、すべての要素はサイトで機能しますか？
CMS と E コマース コンテンツ（データベース）はエクスポートされたコードに含まれません。コレクションリストには空の状態が表示され、コレクションページにはコレクションフィールドにバインドされているコンテンツは表示されません。サイト上でパスワード保護されているページは、コードのエクスポート後に保護されなくなります。
また、GDPRに準拠するため、エクスポートされたサイトではサイト検索とフォーム（ファイルアップロードとreCAPTCHAを含む）が機能しなくなります。フォーム送信を収集するには、サードパーティのツールを使用するか、サードパーティのフォーム統合を埋め込む必要があります。