狐の窓 ガイド

はじめかた

自分の窓を公開するまでの方法を、難易度別に2つ紹介します。自分に合ったやり方を選んでください。

方法A: GitHubフォーク＋Vercel（一番かんたん）

GitHubでフォーク（コピー）して、Vercelと連携するだけ。Gitのコマンド操作は一切不要で、ブラウザだけで完結します。

GitHubやVercel等のサービスに慣れている方は、リポジトリのREADMEで使用技術を確認して、お好きな方法でどうぞ。以下の手順は初めての方向けです。

必要なもの

  1. リポジトリをフォーク

    naoki-wjm/kitsune-window を開き、右上の「Fork」ボタンから自分のアカウントにコピーします。

    GitHubリポジトリページ。Forkボタンを指している

  2. Vercelと連携

    Vercel で「Add New Project」→ フォークしたリポジトリを選択 → 「Deploy」。フレームワーク設定はViteが自動検出されるので、特別な設定は不要です。

    VercelのOverview画面。Add Newボタンを指している
    Vercelのインポート画面。kitsune-windowリポジトリのImportボタンを指している
    Vercelのプロジェクト設定画面。Viteが自動検出され、Deployボタンを指している

  3. 公開完了

    数十秒でデプロイが完了し、URLが発行されます。開いてみると、サンプルの窓が動いているはずです。

    Congratulations! デプロイ成功画面
    Continue to Dashboardボタンを指している
    ダッシュボード画面。Visitボタンを指している
    デプロイされたサンプルの窓。3人のキャラクターが吹き出しで会話している

以降、GitHubにpushするたびにVercelが自動で再デプロイしてくれます。

GitHubのWeb上でファイルを直接編集・コミットすることもできるので、Gitのコマンド操作を覚えなくても更新できます。

方法B: ローカルで試すだけ

公開はせず、手元のパソコンで動かして試してみたい場合の手順です。

必要なもの

# リポジトリをクローン
git clone https://github.com/naoki-wjm/kitsune-window.git
cd kitsune-window

# 依存パッケージをインストール
npm install

# 開発サーバーを起動
npm run dev

ブラウザで http://localhost:5173 を開くと動作確認できます。ファイルを編集すると、画面にリアルタイムで反映されます。

次のステップ

窓が動くことを確認できたら、自分の世界観に差し替えていきましょう。