WordPress プラグインで簡単なブラウザゲームを作成する方法とセキュリティ対策

2025-02-262025-04-30

本記事では、ChatGPT を活用して WordPress のプラグインとして簡単なブラウザゲームを作る方法を紹介します。また、セキュリティ上の注意点や対策についても詳しく解説します。

プラグインの基本構造

WordPress のプラグインは wp-content/plugins/ ディレクトリ内にフォルダを作成し、その中に PHP ファイルを配置することで作成できます。

/wp-content/plugins/my-game-plugin/
    ├── my-game-plugin.php
    ├── assets/
    │   ├── game.js
    │   ├── style.css
    │   └── index.html

`my-game-plugin.php`（プラグインのメインファイル）

my-game-plugin.phpを表示

<?php
/*
Plugin Name: My Game Plugin
Description: 簡単なブラウザゲームを埋め込むプラグイン
Version: 1.0
Author: あなたの名前
*/

function my_game_enqueue_scripts() {
    wp_enqueue_script('my-game-script', plugins_url('assets/game.js', __FILE__), array(), null, true);
    wp_enqueue_style('my-game-style', plugins_url('assets/style.css', __FILE__));
}
add_action('wp_enqueue_scripts', 'my_game_enqueue_scripts');

function my_game_shortcode() {
    ob_start();
    ?>
    <div id="game-container">
        <canvas id="gameCanvas"></canvas>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('my_game', 'my_game_shortcode');
?>

このプラグインを有効化し、記事に [my_game] を追加するとゲームが表示されます。

JavaScript で簡単なクリックゲームを作成

このゲームのコードは、ChatGPT を利用して作成しました。以下は、ゲームの基本的な JavaScript コードです。

`assets/game.js`

assets/game.jsを表示

document.addEventListener("DOMContentLoaded", function() {
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");

    canvas.width = 300;
    canvas.height = 300;

    let score = 0;
    let targetX = Math.random() * canvas.width;
    let targetY = Math.random() * canvas.height;
    const targetRadius = 20;

    function drawScore() {
        ctx.fillStyle = "black";
        ctx.font = "20px Arial";
        ctx.fillText("Score: " + score, 10, 30);
    }

    function drawTarget() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "red";
        ctx.beginPath();
        ctx.arc(targetX, targetY, targetRadius, 0, Math.PI * 2);
        ctx.fill();
        drawScore();
    }

    function checkClick(event) {
        const rect = canvas.getBoundingClientRect();
        const x = event.clientX - rect.left;
        const y = event.clientY - rect.top;
        const distance = Math.sqrt((x - targetX) ** 2 + (y - targetY) ** 2);

        if (distance < targetRadius) {
            score++;
            targetX = Math.random() * canvas.width;
            targetY = Math.random() * canvas.height;
        }

        drawTarget();
    }

    canvas.addEventListener("click", checkClick);
    drawTarget();
});

`assets/style.css`

#game-container {
    text-align: center;
    margin: 20px auto;
}
canvas {
    border: 2px solid black;
}

これで簡単なクリックゲームが動作します。

[my_game]

セキュリティ上の注意点と対策

ChatGPT を使ってコードを作成する際も、セキュリティには十分注意する必要があります。

XSS（クロスサイトスクリプティング）対策

innerHTML を使わず、textContent や setAttribute で DOM を操作する。
スコアをサーバーに保存する場合、esc_html() や sanitize_text_field() で適切に処理する。

クリックジャッキング対策

X-Frame-Options を DENY または SAMEORIGIN に設定。

send_headers フックを使って WordPress で制御：

function my_game_set_headers() {
    header('X-Frame-Options: SAMEORIGIN');
}
add_action('send_headers', 'my_game_set_headers');

スコア改ざん防止

開発者ツールで score = 9999; などと改ざんされる可能性がある。
スコアをサーバーに送信する場合、不正なデータ送信を防ぐために HMAC や署名を利用。

プラグインの改ざん防止

define('DISALLOW_FILE_EDIT', true); を wp-config.php に追加。
.htaccess でプラグインの assets/ ディレクトリへのアクセスを制限：
```
<FilesMatch "\.(js|css|html)$">
    Require all denied
</FilesMatch>
```