データ抽出

使用する場合 有料ワークスペースプランでは、Webflow デザイナーから Web サイトの HTML、CSS、JavaScript、およびリソースを直接抽出するオプションがあります。これは、コードのバックアップを作成したり、要求に応じてクライアントに提供したりする場合に役立ちます。また、抽出したコードは、帰属表示を必要とせずに任意のプラットフォームでホスティングするために利用することもできます。 

このチュートリアルでは、次の領域について説明します。

1. コードを抽出する方法
2. 縮小されたHTMLを抽出する手順
3. 抽出されたファイルの内容
4. 抽出されたファイルからの除外
5. よくある質問とトラブルシューティングのヒント

コードを抽出する方法

1. サイトのデザイナーを起動する
2. を選択 輸出 オプション 
3. クリック ZIPを準備する 
4. ZIPファイルのダウンロードに進む

注記： CMS、ユーザー アカウント、e コマース (データベース) のコンテンツ、およびロジック フローは、抽出されたコードには含まれません。コレクション リストは空の状態になり、コレクション ページにはコレクション フィールドに添付されたコンテンツがなくなります。ページのパスワード保護は、コード抽出後に無効になります。さらに、GDPR 規制に準拠するため、エクスポートされたサイトではサイト検索機能とフォーム (ファイルのアップロードや reCAPTCHA を含む) は動作しなくなります。エクスポートされたサイトでのフォーム送信に関する追加のガイドラインを参照してください。

縮小されたHTMLを抽出する方法

HTML を縮小して最適化すると、不要な空白、コメント、およびブラウザのレンダリングに必要のないその他の重要でないコード要素が削除され、ページの読み込み速度が向上します。縮小された HTML を抽出するには:

1. クリックしてください 輸出 デザイナーの上部にあるボタン
2. プレス コントロール + O キーボードで
3. チェックボックスをオンにしてください HTML を縮小する エクスポートウィンドウに表示される
4. クリック ZIPを準備する 
5. ZIPファイルを保存する

抽出されたファイルの内容

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

1. CSSディレクトリ あなたのサイトのすべてのスタイルが3つに含まれています .css ファイル:

• CSSファイル (例: your-site-name.css) すべてのカスタム スタイルを含む
• ウェブフロー Webflowレイアウトシステムの基本的なベーススタイルと、ナビゲーションバー、スライダー、タブなどのさまざまなコンポーネントが含まれています。
• 正規化.css ブラウザが要素を一貫して最新の標準に準拠してレンダリングすることを保証します。特に、正規化を必要とするスタイルに重点を置いています。

2. JSディレクトリ 住宅 Webflow.js ファイル。このファイルには、ページ上でインタラクティブな要素を有効にするための重要な JavaScript が含まれています。フォーム、ナビゲーション バー、スライダー、タブ、インタラクションなどの要素は、webflow.js に依存します。 このファイルを削除すると、ページが現れる正しく動作しますが、正しく機能しません。
3. 画像ディレクトリ サイトのアセットマネージャーにアップロードされた画像を含む
4. .html ファイル すべてのサイトページ（コンテンツのないコレクションテンプレートページを含む）

注記： CMS、ユーザー アカウント、e コマース (データベース) のコンテンツ、およびロジック フローは、抽出されたコードには含まれません。コレクション リストは空の状態になり、コレクション ページにはコレクション フィールドに添付されたコンテンツがなくなります。ページのパスワード保護は、コード抽出後に無効になります。さらに、GDPR 規制に準拠するため、エクスポートされたサイトではサイト検索機能とフォーム (ファイルのアップロードや reCAPTCHA を含む) は動作しなくなります。エクスポートされたサイトでのフォーム送信に関する追加のガイドラインを参照してください。

洞察力に富む: Webflowによってエクスポートされたコードを垣間見るには、ソースコードを確認してください。 ホームページ 右クリックして「ページのソースを表示」を選択します。すべて Webflow を使用して作成されています。

抽出されたファイルからの除外

以下の機能とコンテンツは抽出されたコードから除外され、エクスポートされた Web サイトでは期待どおりに機能しません。 

• CMS コンテンツと機能 (コレクション項目とリストを含む)
• ユーザー アカウントのコンテンツと機能 (ユーザーとアクセス グループを含む)
• 電子商取引のコンテンツと機能（製品とチェックアウトを含む）
• サイトまたはページのパスワード保護
• フォーム送信処理 
• 既存のフォーム送信（個別にエクスポート可能）
• フォームに存在する reCAPTCHA 要素
• サイト検索
• ロジックフロー

ご注意ください： CMS、 ユーザーアカウントコレクション アイテム、ユーザー アカウント、製品のバックアップを保持したい場合は、e コマース コレクションを CSV 形式で個別にエクスポートできます。CSV エクスポートの詳細については、こちらをご覧ください。

FAQとトラブルシューティングのヒント

クラス名に「w-」という接頭辞を付ける理由は何ですか?

他のコード フレームワークとの競合を避けるため、Webflow はコンポーネント固有のクラスに「w-」プレフィックスを追加します。 

サイトのコードの一部を選択的にエクスポートできますか?

現在、エクスポートする特定の部分を選択するオプションはありません。サイトのエクスポート可能なすべての側面が各抽出に含まれます。 

エクスポート後にコードを変更することは可能ですか?

エクスポート後、コードを自由に変更できます。ただし、エクスポートされたファイルを手動で調整すると、特定の Webflow コンポーネントが破損する可能性があります。 

エクスポートしたページの URL から .html 拡張子を削除できますか?

エクスポートしたページから.html拡張子を削除するには、 .htaccess ファイル. 

サイトを外部でホストする場合、Webflow をクレジットすることは必須ですか?

エクスポート後、エクスポートされたサイトを外部サーバー上で機能させるために、帰属表示や Webflow プランの要件は必要ありません。 

抽出されたコードには、CMS、メンバーシップ、eコマースのコンテンツが含まれていますか?

CMS、ユーザー アカウント、および e コマース コンテンツ (データベース) は、抽出されたコードの一部ではありません。コレクション リストには空の状態が表示され、コレクション ページにはコレクション フィールドにバインドされたコンテンツがなくなります。 

パスワードで保護されたページは、コードを抽出した後も安全なままですか?

いいえ。サイト上のパスワード保護されたページは、コードエクスポート後に保護が失われます。パスワード保護が正しく機能するには、サイトが Webflow でホストされている必要があります。プロジェクトとページのパスワードに関する詳細を参照してください。 

コードを他の場所でホストした場合、すべてのサイト要素は機能しますか?

CMS、ユーザー アカウント、e コマース コンテンツ (データベース) と機能、およびロジック フローは、抽出されたコードには含まれません。これらの機能を正しく機能させるには、ホスティングが必要です。エクスポートされたサイトでは、コレクション リストは空の状態になり、コレクション ページにはコレクション フィールドにバインドされたコンテンツがなくなります。サイト上のパスワードで保護されたページは、コード抽出後に保護が失われます。 

さらに、GDPR に準拠するため、エクスポートされたサイトではサイト検索機能とフォーム (ファイルのアップロードや reCAPTCHA を含む) は機能しません。フォーム送信を収集するには、サードパーティ ツールを使用するか、サードパーティ フォーム統合を埋め込むことを検討してください。エクスポートされたサイトでフォーム送信を収集するためのガイドラインを参照してください。

サイトをエクスポートすると、Lottie アニメーションがローカルで機能しなくなるのはなぜですか?

セキュリティ プロトコルのため、Lottie JSON ファイルはローカル ファイル システムから読み込まれません。そのため、サイトにローカルでアクセスしても Lottie アニメーションは表示されません。アニメーションが意図したとおりに機能するには、Web サーバーが不可欠です。