30分で完成！動くミニゲームで学ぶ「サーバープログラミング」の基本（実践編）

前回の記事「サーバープログラミングとは？」では、Webサーバーがどんな役割を持っているのか、そしてリクエストとレスポンスの基本について解説しました。

「仕組みはなんとなく分かったけれど、実際に自分でコードを書くとしたらどうやればいいの？」そう思われた方も多いのではないでしょうか。

そこで今回は実践編です！わずか30分・合計100行未満の短いコードで、実際に動く「数当てゲーム」を作りながら、ブラウザとサーバーがリアルタイムに会話する仕組みを解説します。

🎮 まずは遊んでみよう！

下の入力欄に「1〜100」の数字を入れて、「予想する」ボタンを押してみてください。

数当てゲーム（1〜100）

1から100の数字を当ててね！

※数字を入れてボタンを押すと、ページが切り替わらずに（リロードせずに）、一瞬で「もっと大きい」「もっと小さい」と結果が返ってきますよね。前回の記事で学んだ「リクエストとレスポンス」のやり取りの裏側を、これから一緒に覗いていきましょう！

🛠️ 30分でできる！ゲームの作り方「3ステップ」

それでは、実際にこのゲームの実装方法を解説します。私のサイトは、レンタルサーバーにWordPressを入れたものです。この環境に「数当てゲーム」を導入する手順をお話します。実は、手順はたったの3つです。

PHPファイル（game.php） を作ってサーバーにアップロードする
functions.php にショートコードのプログラムを貼り付ける
記事の編集画面で ショートコード を呼び出す

驚くほど簡単なのですが、もうすでに配信しているサーバーに手を入れることになるので、失敗すると全体に影響がでるリスクもあります。試す際は、下記の手順をよく読んでいただき、ご自身の環境をよく確認し、必要なファイルのバックアップをとっていただいた上で、ご自身の責任で進めていただくようお願いします。

それでは、順番に解説します。

ステップ1：サーバー側の「PHPプログラム」を準備する

まずは、ブラウザから送られてきた数字を受け取って「大きい」「小さい」を判定する、サーバー側のプログラム（PHP）を作ります。

テキストエディタで、以下のコードを貼り付けます。パソコンにエディタソフトウェアを入れていない場合はメモ帳などでも大丈夫です。ファイル名は game.php として保存しています。

<?php
// 解説用に、正解の数字を「42」に固定しています
$target = 42; 

// ブラウザから送られてきた数字を受け取る（無ければ0にする）
$guess = isset($_GET['num']) ? (int)$_GET['num'] : 0;

if ($guess === 0) {
    echo "数字を入力してください。";
} elseif ($guess < $target) {
    echo "もっと【大きい】ですよ！";
} elseif ($guess > $target) {
    echo "もっと【小さい】ですよ！";
} else {
    echo "正解！おめでとうございます！";
}
?>

ファイルをサーバーにアップロードする

保存した game.php を、レンタルサーバーの「ファイルマネージャー」や「FTPソフト」を使ってアップロードします。私はもっぱらファイルマネージャーを使っています。

置き場所は、WordPressがインストールされている一番上の階層（ルートディレクトリ） です。 ※通常は public_html や wp といった名前のフォルダの直下になります。複数サイト運営をしている場合はその下がサイト別になっていたりしますのでご注意。

正しく置けたかどうかは、ブラウザで直接 https://サイトのURL/game.php と打ち込むことで確認できます。「数字を入力してください。」と表示されれば成功です！

ステップ2：画面側の「JavaScript」をWordPressに登録する

続いて、WordPressの管理画面から、ゲームの「見た目」と「通信」を行うプログラムを登録します。

私の場合は、WordPressのテーマにCocoonを使っています。 functions.php のコードを下記の操作で表示し、編集できるようにします。

左のメニューで「外観」を選択。右に出てきたサブメニューから「テーマファイルエディタ」を選択

画面右のテーマファイルから、「functions.php」を選択

バックアップをとり、functions.php の一番最後に、以下のコードをそのまま貼り付けます。

function render_number_game_shortcode() {
    $html = '
    <div class="game-container" style="text-align: center; padding: 20px; border: 1px solid #ddd; border-radius: 8px;">
        <h2>数当てゲーム（1〜100）</h2>
        <input type="number" id="guess" placeholder="数字を入力" style="padding: 8px; font-size: 16px;">
        <button onclick="checkNumber()" style="padding: 8px 15px; font-size: 16px; cursor: pointer;">予想する</button>
        <p id="result" style="margin-top: 15px; font-weight: bold; font-size: 18px;">1から100の数字を当ててね！</p>
    </div>

    <script>
        async function checkNumber() {
            const num = document.getElementById("guess").value;
            if (!num) {
                alert("数字を入力してください！");
                return;
            }
            
            // ★重要：使っているサイトのURLに変更する
            const response = await fetch("https://【使用サイトのドメイン】/game.php?num=" + num);
            const text = await response.text();
            
            // 結果を画面に表示
            document.getElementById("result").innerText = text;
        }
    </script>
    ';
    return $html;
}
add_shortcode('number_game', 'render_number_game_shortcode');

※注意点 コードの中にある https://【使用サイトのドメイン】 の部分は、自身のサイトのURLに書き換える必要があります。

ステップ3：記事の好きな場所にショートコードを貼る

プログラムの準備ができたら、いよいよゲームをブログ記事に登場させます。やり方は驚くほど簡単です！

ゲームを表示させたい記事の編集画面（ブロックエディタ）を開きます。
ゲームを置きたい場所で、『ショートコード』ブロックを追加します。
その中に

数当てゲーム（1〜100）

1から100の数字を当ててね！

と入力します。門括弧（[ ]）も記入必要で、アルファベットは半角、ハイフンではなくて、アンダースコア（_）です。

なお、2では、通常の『段落』ブロックの中にそのまま


        数当てゲーム（1〜100）
        
        
        1から100の数字を当ててね！

と打ち込んでもWordPressが自動でプログラムとして認識してくれます。

この記載が済んだら、そのページをプレビューしてみます。先ほど作成した「オレンジの枠線」に囲まれたゲーム画面が、記事のその場所にパッと現れます。実際に数字を入れて動けば大成功です！

まとめ：PHPとJSの連携でブログをもっと楽しく！

今回は、WordPressで「サーバー（PHP）とブラウザ（JavaScript）」を連携させて、ページを移動せずにその場で動く「数当てゲーム」を作る方法をご紹介しました。

少しコードが長くて難しく感じたかもしれませんが、やっていることは 「数字を送って、判定を返してもらう」 というシンプルな通信のキャッチボールです。

実は、この『ページを切り替えずに裏側でこっそり通信して結果をもらう』仕組みのことを、専門用語で Ajax（エイジャックス） と呼びます。

普段私たちが使っている Google マップのスクロールや、SNSの『いいね』ボタンなども、実はこの Ajax という技術で動いているんですよ。

今回作ったミニゲームは、まさにその第一歩。この仕組みさえ分かれば、他にも色々なツールに応用できそうです！い足を止めて遊んでしまうような、面白い仕掛けをいくらでも作ることができます。

「ただ読むだけのブログ」から「体験できるブログ」へ。ぜひ、あなたのサイトにも自分だけのオリジナルゲームを実装してみてください！