個人

2024年8月7日 22:09

まず、静的ファイルの作成から始めるために、具体的な手順とサンプルコードを示します。

ステップ1: 開発環境の準備

コードエディタの準備:
- Visual Studio Code, Sublime Text, Atomなどのコードエディタをインストールします。
プロジェクトフォルダの作成:
- プロジェクト用のフォルダを作成します（例：`novel-game`）。

ステップ2: 基本的なHTMLファイルの作成

`index.html`:
- プロジェクトフォルダに`index.html`という名前のファイルを作成し、以下の基本構造を記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ノベルゲーム</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="game-container">
        <div id="story"></div>
        <div id="choices"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

ステップ3: スタイルシートの作成

`styles.css`:
- プロジェクトフォルダに`styles.css`という名前のファイルを作成し、基本的なスタイルを記述します。

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

#game-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    width: 100%;
}

#story {
    margin-bottom: 20px;
}

.choice {
    display: block;
    margin: 10px 0;
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
}

.choice:hover {
    background-color: #0056b3;
}

ステップ4: JavaScriptの作成

`script.js`:
- プロジェクトフォルダに`script.js`という名前のファイルを作成し、ストーリーのロジックを実装します。

const storyElement = document.getElementById('story');
const choicesElement = document.getElementById('choices');

const story = [
    {
        text: "新入社員として、あなたは初日を迎えました。まず何をしますか？",
        choices: [
            { text: "上司に挨拶する", next: 1 },
            { text: "同僚と話す", next: 2 }
        ]
    },
    {
        text: "上司に挨拶しました。上司はあなたに自己紹介を求めました。次にどうしますか？",
        choices: [
            { text: "自己紹介をする", next: 3 },
            { text: "黙っている", next: 4 }
        ]
    },
    {
        text: "同僚と話しました。同僚はあなたに仕事のアドバイスをくれました。次にどうしますか？",
        choices: [
            { text: "上司に挨拶する", next: 1 },
            { text: "仕事を始める", next: 5 }
        ]
    },
    // 他のストーリーパートも追加
    {
        text: "自己紹介をしました。上司はあなたに好意的に感じています。",
        choices: [
            { text: "仕事を始める", next: 5 }
        ]
    },
    {
        text: "黙っていました。上司は少し困惑していますが、仕事を始めるよう促されました。",
        choices: [
            { text: "仕事を始める", next: 5 }
        ]
    },
    {
        text: "仕事を始めました。あなたの新しい一日が始まりました。お疲れ様です！",
        choices: [
            { text: "もう一度プレイする", next: 0 }
        ]
    }
];

function startGame() {
    showStory(0);
}

function showStory(index) {
    const storyPart = story[index];
    storyElement.innerText = storyPart.text;

    choicesElement.innerHTML = '';
    storyPart.choices.forEach(choice => {
        const choiceElement = document.createElement('a');
        choiceElement.classList.add('choice');
        choiceElement.innerText = choice.text;
        choiceElement.href = '#';
        choiceElement.onclick = () => showStory(choice.next);
        choicesElement.appendChild(choiceElement);
    });
}

startGame();

ステップ5: ローカルでの動作確認

プロジェクトフォルダをローカルのウェブサーバーでホスティングし、ブラウザで`index.html`を開いて動作を確認します。
- `Live Server`などのVSCode拡張機能を使うと簡単に確認できます。

これで基本的なノベルゲームのフロントエンド部分が完成です。次に、AWS上でホスティングする準備に進みます。

Windows上でローカル環境で実行するための手順を以下に示します。簡単な方法として、Visual Studio Code (VS Code) を使用した手順を説明します。

ステップ1: Visual Studio Codeのインストール

Visual Studio Code (VS Code) をインストールします。
- ダウンロードリンク

ステップ2: Live Server拡張機能のインストール

VS Codeを開きます。
左のサイドバーから「拡張機能」アイコン（四つの四角が集まったアイコン）をクリックします。
検索バーに「Live Server」と入力し、Ritwick Deyによる「Live Server」拡張機能をインストールします。

ステップ3: プロジェクトフォルダを開く

VS Codeで「ファイル」メニューから「フォルダーを開く」を選択し、先ほど作成したプロジェクトフォルダ（例：`novel-game`）を選択して開きます。

ステップ4: `index.html`を開いてLive Serverで実行

プロジェクトフォルダ内の`index.html`ファイルを開きます。
右下に表示される「Go Live」ボタンをクリックします（「Go Live」ボタンが表示されない場合は、右クリックメニューから「Open with Live Server」を選択します）。
デフォルトのブラウザで`index.html`が開かれ、ノベルゲームが表示されるはずです。

ステップ5: ゲームをプレイして動作確認

ブラウザで表示されたゲームインターフェースを操作し、選択肢に応じてストーリーが変わることを確認します。

追加の確認方法

もしVS Codeを使わない場合や、他の方法でローカルサーバーを立ち上げたい場合は、Pythonの簡易HTTPサーバーを使用する方法もあります。

ステップ1: Pythonのインストール

Pythonをインストールします（インストールされていない場合）。
- ダウンロードリンク

ステップ2: プロジェクトフォルダでコマンドプロンプトを開く

プロジェクトフォルダ（例：`novel-game`）に移動します。
フォルダ内でシフトキーを押しながら右クリックし、「PowerShellウィンドウをここで開く」または「コマンドプロンプトをここで開く」を選択します。

ステップ3: Pythonで簡易HTTPサーバーを立ち上げる

コマンドプロンプトで以下のコマンドを入力します（Python 3.xを使用している場合）。

python -m http.server

コマンドを実行すると、デフォルトでポート8000でサーバーが立ち上がります。

ステップ4: ブラウザでローカルサーバーにアクセス

ブラウザを開き、以下のURLにアクセスします。

http://localhost:8000

`index.html`が表示され、ノベルゲームがプレイ可能になります。

これでWindows上でローカル環境でノベルゲームを実行する準備が整いました。質問や問題があれば、気軽にお知らせください。

個人