ドキュメント
ワンページ基礎
セットアップ

セットアップ

Claude Web Master講座のワンページ作成に必要な開発環境のセットアップ手順を詳しく説明します。

所要時間: 約5-10分
前提条件: Visual Studio Code がインストール済みであること
準備するもの: Unsplash Developer API キー（画像検索機能を使用する場合）

セットアップの流れ

このセットアップでは、以下の手順でワンページ作成環境を構築します：

  1. プロジェクト用フォルダの作成 - 作業用ディレクトリの準備
  2. Visual Studio Code での作業開始 - エディタでの環境構築
  3. テンプレートのダウンロード - スターターキットの取得
  4. Git環境の初期化 - 独自プロジェクトとしての設定
  5. 必要ツールのインストール - Node.js パッケージの導入
  6. 画像検索機能の設定 - Unsplash API の設定
  7. 動作確認 - セットアップの完了確認

プロジェクト用フォルダの作成

ワンページサイト構築のための専用フォルダを作成します。整理された作業環境を作ることで、複数のプロジェクトを効率的に管理できます。

推奨フォルダ構成例：

  • workspace/practice/hello - 練習用プロジェクト
  • workspace/my-portfolio - ポートフォリオサイト用
  • workspace/company-site - 企業サイト用
ベストプラクティス: プロジェクト名は英数字と -（ハイフン）のみを使用し、日本語や空白文字は避けてください。

作成したフォルダは後でVisual Studio Codeで開くので、場所を覚えておいてください。

Visual Studio Code でプロジェクトを開く

Visual Studio Code を起動し、作成したプロジェクトフォルダを開きます。これにより、ファイル編集とターミナル操作を同じ環境で行えるようになります。

手順：

  1. Visual Studio Code を起動
  2. ファイル > フォルダーを開く を選択
  3. 先ほど作成したプロジェクトフォルダを選択
  4. フォルダが左側のエクスプローラーに表示されることを確認
ショートカット: Ctrl+K Ctrl+O (Windows/Linux) または Cmd+K Cmd+O (macOS) でフォルダを開くダイアログが表示されます。

スターターテンプレートのダウンロード

Claude Web Master講座専用のスターターテンプレートをダウンロードします。このテンプレートには、ワンページサイト構築に必要なファイルが全て含まれています。

手順：

  1. Visual Studio Code で 表示 > ターミナル を選択（または Ctrl+ ` で開く）
  2. 以下のコマンドを実行してテンプレートをダウンロード：
git clone https://github.com/toiee-lab/claude1page.git .
重要: コマンドの最後の . （ドット）を忘れないでください。これにより現在のフォルダに直接ファイルがダウンロードされます。

ダウンロード完了の確認： エクスプローラーに package.json、index.html などのファイルが表示されれば成功です。

Git環境の初期化

ダウンロードしたテンプレートは元のリポジトリと接続されているため、独自のプロジェクトとして管理するためにGit履歴をリセットします。

rm -rf .git
Remove-Item -Recurse -Force .git

【重要】Windowsは、必ず、Visual Studio Codeを閉じて、開き直してください

rmdir /s .git

実行結果の確認： コマンド実行後、エラーメッセージが表示されなければ成功です。これで独自のプロジェクトとして開発を開始できます。

後で必要になる場合: 独自のGitリポジトリを作成したい場合は、git init コマンドで新しいリポジトリを初期化できます。

必要な開発ツールのインストール

ワンページサイト構築に必要なNode.js製の開発ツールをインストールします。これらのツールには、ライブリロード機能や画像最適化機能などが含まれています。

インストールコマンド：

npm install

インストールされる主要ツール：

  • ライブサーバー: ファイル変更時の自動リロード
  • 画像最適化: 自動的な画像圧縮とフォーマット変換
  • Unsplash検索: API経由での画像検索機能
  • ビルドツール: 本番環境用ファイルの生成
所要時間: インストールには1-3分程度かかります。node_modules フォルダと package-lock.json ファイルが作成されれば完了です。

Unsplash画像検索機能の設定

高品質な画像を簡単に検索・挿入するためのUnsplash API設定を行います。この機能により、プロ品質の画像を無料で利用できます。

この設定は、開発環境の構築時に行なっている方は、実行する必要はありません。

Unsplash APIを使うには、APIキーが必要です。既にAPIキーを取得できるように、Unsplashに登録済みだと思いますが、まだの方は、登録、取得して下さい。

Unsplash APIキーの取得方法
  1. Unsplash Developers にアクセス
  2. アカウント作成またはログイン
  3. “New Application” でアプリを作成
  4. Access Key をコピー
プロジェクト別の設定ファイルを使う場合

環境変数を設定しない選択をした方は、プロジェクトを新しく作るたびに、以下の作業（.env.localを作る）を実行して下さい

設定ファイルの作成：

cp .env.local.example .env.local

.env.local ファイルを開いて修正して下さい。

セットアップ完了の確認

全ての設定が正しく完了しているかを確認するため、画像検索機能をテストします。

テストコマンド：

npm run search "hello"

期待される結果：

  • 検索プロンプトが表示される
  • キーワード入力後に画像URLが表示される
  • エラーメッセージが表示されない
セットアップ完了！ 検索機能が正常に動作すれば、ワンページサイト作成の準備が整いました。

トラブルシューティング

セットアップ中に問題が発生した場合の解決方法をまとめています。

Git cloneでエラーが発生する場合

症状: git clone コマンドでエラーメッセージが表示される

解決方法:

  1. インターネット接続を確認
  2. ターミナルで現在のディレクトリを確認: pwd
  3. 正しいプロジェクトフォルダにいることを確認
  4. Git がインストールされているか確認: git --version

代替方法: GitHubページから直接ZIPファイルをダウンロードして展開

npm installでエラーが発生する場合

症状: npm install コマンドで権限エラーや依存関係エラーが発生

解決方法:

  1. Node.js がインストールされているか確認: node --version
  2. 最新のNode.js LTS版をインストール
  3. キャッシュをクリア: npm cache clean --force
  4. 再度実行: npm install

macOSで権限エラーの場合:

sudo npm install
ターミナルが見つからない場合

Visual Studio Code でターミナルを開く方法:

  • メニューから: 表示 > ターミナル
  • ショートカット: Ctrl+ (バッククォート)
  • コマンドパレット: Ctrl+Shift+P → “Terminal: Create New Terminal”

デフォルトシェルの設定:

  • Windows: PowerShell または Command Prompt
  • macOS: zsh または bash
  • Linux: bash
画像検索でエラーが発生する場合

症状: npm run search でエラーが表示される

確認項目:

  1. .env.local ファイルが作成されているか
  2. Unsplash API キーが正しく設定されているか
  3. インターネット接続が正常か

次のステップ

セットアップが完了したら、ワンページサイト作成を開始しましょう。

セットアップ 環境構築 Visual Studio Code Node.js npm install git clone Unsplash API 開発環境 ワンページサイト スターターテンプレート 初期設定 プロジェクト作成
アップデート