VScodeでfutureshopパーツ管理を劇的に効率化！ローカル擬似プレビュー環境構築ガイド

futureshop
記事内に広告が含まれています。

futureshop（特にコマースクリエイター）でのサイト構築・運用において、「共通ヘッダー」「フッター」「おすすめ商品リスト」といった「パーツ」の管理は頻繁に発生する業務です。

futureshopには、そんなときに便利な「パーツ」管理機能が存在し、一つ作れば様々なところで再利用することができます。

しかし、これらのHTMLパーツを修正するたびに、管理画面から編集して、ブラウザでリロードして表示確認する…という従来のフローは、非常に時間がかかり、非効率的です。

この記事では、高機能コードエディタ「Visual Studio Code (VScode)」と、いくつかの標準的なWeb技術（JavaScript）を使い、Futureshopのパーツ管理をローカル環境で擬似的に再現・プレビューする開発環境の構築方法を解説します。

この手法を採用することで、サーバーにアップロードする前に、自分のPC上でパーツの変更をリアルタイムに確認しながら、コンポーネントベースの効率的な開発フローを実現できます。

こんな方にオススメ！
  • Futureshopのサイト更新・デザインカスタマイズを担当するWeb制作者
  • パーツ修正のたびにFTPでアップロードする作業を非効率だと感じている方
  • ローカル環境で効率的にコーディングとプレビューを完結させたい方
  • VScodeをメインのエディタとして使用している方
広告

提案する開発フローの全体像：ローカル擬似プレビューとは？

本記事で提案するのは、Futureshopの本番環境と全く同じものをローカルに構築するものではありません。そうではなく、VScodeとブラウザさえあれば実現できる、シンプルかつ効率的な「擬似プレビュー環境」です。

  1. パーツのコンポーネント化: Futureshopで管理しているヘッダー、フッター、商品リストなどの各パーツを、個別のHTMLファイル（例: _header.html, _footer.html）としてローカルPCに保存します。
  2. JSによるインクルード: プレビュー用のindex.html（ダミーのトップページなど）を用意し、JavaScript（fetch API）を使って、上記1の各HTMLパーツを非同期で読み込み、指定した場所に挿入（インクルード）します。
  3. リアルタイムプレビュー: VScodeの拡張機能「Live Server」を使ってindex.htmlをブラウザで開きます。これにより、_header.htmlなどのパーツファイルを編集して保存するだけで、ブラウザが自動的にリロードされ、変更が即座に反映されます。

この環境により、本番サーバーのパスや独自タグ（例: %SHOP_URL%）を気にすることなく、純粋なHTML/CSSのコーディングに集中できます。（※本番反映時にパスの調整が必要な場合があります）

構築に必要なツール

  1. Visual Studio Code (VScode): メインとなるコードエディタ。
  2. VScode拡張機能: Live Server: ローカル開発用サーバーを起動し、ファイル保存時にブラウザを自動リロードさせるための必須拡張機能。

ステップ別！ローカル擬似プレビュー環境の構築

Step 1: 開発用フォルダと「パーツ」HTMLファイルの準備

まず、ローカルPCにプロジェクト用のフォルダを作成します。ここでは futureshop-local-dev という名前のフォルダを作成する例で進めます。 その中に、プレビュー用のページ index.html、パーツをまとめる parts フォルダ、スクリプトを置く js フォルダ、スタイルを置く css フォルダを作成します。

フォルダ構成例
futureshop-local-dev/
│
├── index.html          # プレビュー用のメインページ
│
├── css/
│   └── style.css       # スタイルシート
│
├── js/
│   └── main.js         # パーツ読み込み用スクリプト
│
└── parts/
    ├── _header.html    # ヘッダーパーツ
    └── _footer.html    # フッターパーツ

次に、parts フォルダ内に、コンポーネントとなるHTMLファイルを作成します。ファイル名の先頭にアンダースコア _ をつけると、部分的なファイル（パーツ）であることが視覚的に分かりやすくなります。

<header style="background-color: #f0f0f0; padding: 20px; text-align: center; border-bottom: 2px solid #ccc;">
    <h1><a href="/">My Futureshop Site (Local Preview)</a></h1>
    <nav>
        <ul style="list-style: none; display: flex; justify-content: center; gap: 15px; padding: 0;">
            <li><a href="#">カテゴリ1</a></li>
            <li><a href="#">カテゴリ2</a></li>
            <li><a href="#">お問い合わせ</a></li>
        </ul>
    </nav>
</header>
<footer style="background-color: #333; color: white; padding: 30px; text-align: center; margin-top: 50px;">
    <nav>
        <ul style="list-style: none; display: flex; justify-content: center; gap: 15px; padding: 0;">
            <li><a href="#" style="color: white;">会社概要</a></li>
            <li><a href="#" style="color: white;">プライバシーポリシー</a></li>
        </ul>
    </nav>
    <p style="margin-top: 20px; font-size: 0.9em;">© 2025 My Shop. (Local Preview)</p>
</footer>

Step 2: パーツを呼び出す「プレビュー用ページ」の作成

次に、これらのパーツを読み込んで表示するための「親」となる index.html を作成します。

ポイントは、パーツを挿入したい場所に、目印となる id を持つ <div> タグ（コンテナ）を配置することです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Futureshop ローカルプレビュー</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    
    <!-- ヘッダーパーツの挿入場所 -->
    <div id="header-container"></div>

    <!-- メインコンテンツ (プレビュー用のダミー) -->
    <main style="padding: 20px; max-width: 960px; margin: 20px auto; border: 1px solid #eee;">
        <h2>メインコンテンツエリア</h2>
        <p>ここはプレビュー用のダミーコンテンツです。</p>
        <p>ローカルで `_header.html` や `_footer.html` を編集・保存すると、このページのヘッダーとフッターが自動で更新されます。</p>
        
    </main>

    <!-- フッターパーツの挿入場所 -->
    <div id="footer-container"></div>

    <!-- パーツを読み込むためのスクリプト -->
    <script src="js/main.js"></script>
</body>
</html>

Step 3: JavaScriptによるHTMLインクルード処理の実装

ここがこの環境の核となる部分です。js/main.js ファイルを作成し、標準技術である fetch API を使って、各パーツHTMLを非同期で読み込み、index.html の指定コンテナに挿入する処理を記述します。

// DOM（HTML）の読み込みが完了したら実行
document.addEventListener('DOMContentLoaded', () => {

    // ヘッダーを読み込んで挿入する関数
    const loadHeader = async () => {
        try {
            // parts/_header.htmlを非同期で取得
            const response = await fetch('parts/_header.html');
            if (!response.ok) { // 読み込み失敗時はエラー
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            const html = await response.text(); // 取得した内容をテキストとして読み込む
            const container = document.getElementById('header-container');
            if (container) {
                container.innerHTML = html; // コンテナにHTMLを挿入
            } else {
                console.warn('header-container が見つかりません。');
            }
        } catch (error) {
            console.error('ヘッダーの読み込みに失敗しました:', error);
        }
    };

    // フッターを読み込んで挿入する関数
    const loadFooter = async () => {
        try {
            const response = await fetch('parts/_footer.html');
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            const html = await response.text();
            const container = document.getElementById('footer-container');
            if (container) {
                container.innerHTML = html;
            } else {
                console.warn('footer-container が見つかりません。');
            }
        } catch (error) {
            console.error('フッターの読み込みに失敗しました:', error);
        }
    };

    // 複数のパーツ読み込みを並行して実行
    Promise.all([
        loadHeader(),
        loadFooter()
        // 他にも読み込みたいパーツがあればここに追加
        //例: loadRecommendList()
    ]);

});

このスクリプトは、index.html が読み込まれた直後に parts/_header.html と parts/_footer.html の内容を取得し、それぞれ id="header-container" と id="footer-container" の中に流し込みます。

Step 4: VScode「Live Server」でリアルタイムプレビューを実行

環境の準備は整いました。最後に、VScodeの拡張機能「Live Server」を使って、これをリアルタイムでプレビューします。

  1. VScodeの拡張機能タブ（左側のアクティビティバー）を開きます。
  2. 検索ボックスに「Live Server」と入力し、Ritwick Deyさんが作成した拡張機能をインストールします。
  3. インストールが完了したら、index.html ファイルを開いた状態で、VScodeの右下にあるステータスバーの「Go Live」ボタンをクリックします。
  4. 自動的にデフォルトブラウザが起動し、http://127.0.0.1:5500/index.html のようなローカルサーバーのアドレスで index.html が表示されます。

ブラウザには、index.html のメインコンテンツに加え、main.js によって読み込まれた _header.html と _footer.html の内容が組み合わさって表示されているはずです。

この状態で、VScodeに戻って parts/_header.html の内容を少し変更（例: 「カテゴリ1」を「新着アイテム」に変更）して保存してみてください。 ブラウザが自動的にリロードされ、変更が即座にプレビューに反映されます。

ローカル開発の効率化と、本番環境への反映フロー

ローカルでの効率的な開発サイクル

この環境が真価を発揮するのは、CSSの調整やHTMLの構造変更を繰り返す時です。

  • CSSの変更: css/style.css を編集して保存すれば、即座にプレビューに反映されます。
  • HTMLパーツの変更: parts/_header.html のリンク構造を変更したり、新しい <div> を追加したりする作業も、保存するたびに結果を確認できます。
  • 確認の高速化: Futureshopの管理画面を開く必要も、FTPでアップロードする待ち時間もありません。VScodeとブラウザだけで開発サイクルが完結します。

ローカルからFutureshop本番環境への反映

このローカル環境は、あくまで開発とプレビューを高速化するための「下書き・検証用」です。ローカルで作業が完了したら、その成果をFutureshopの本番環境に反映させる必要があります。

管理画面へコピー＆ペースト

  1. ローカルのVScodeで、完成したパーツファイル（例: parts/_header.html）を開きます。
  2. その中の HTMLコード全体をコピー します。
  3. Futureshopの管理画面（コマースクリエイター）にログインします。
  4. 該当するパーツ（例: 「共通ヘッダー」）の編集画面を開き、コピーしたHTMLコードを貼り付けて保存します。

注意点: ローカルで img/logo.png のように記述していたパスは、Futureshopの正しいパス（例: https://.../images/logo.png や %TEMPLATES_URL%/images/logo.png といった独自タグ）に適宜修正する必要があるか確認してください。

さいごに

今回紹介した「ローカル擬似プレビュー環境」は、VScode、Live Server、そしてJavaScriptのfetch APIという標準的な技術だけで構築できます。

この環境を導入することで、開発中のトライ＆エラーを安全かつ高速なローカル環境で完結させ、完成したコードだけを本番に反映する、というモダンで安全な開発フローを実現できます。

Futureshopのパーツ管理・デザインカスタマイズの効率化に、ぜひお役立てください。

futureshopVScode
シェアする
mimihokuro
mimihokuro

ECのWebデザインからコーディング、マーケティングと幅広く担当している現役Webデザイナー兼コーダーです。futureshopを使ったサイト構築を得意としています。

mimihokuro

お問い合わせ

mimihokuroに興味を持っていただきありがとうございます！
Webサイト制作やfutureshopを使ったECサイトの構築など お気軽にご相談ください。

Contact Form