私のアシスタントはAIです。

どうもヨスケです。

最近は、毎日記念日を記事にしていますが、

全て、bing AI君が調べて記事を作ってくれています。

また、プログラミングで作りたいものが出てきた際も、

要件を伝えればGPT-4君がコーディングしてくれます。

今回はブログに簡単な「じゃんけんゲーム」を実装することが、

どれくらいのやり取りでできるのか、

実際に試してみました。

GPT-4にゲームを作ってもらう
1. 生成されたコード
動くか試してみた
修正依頼
1. ここでちょっと問題発生
最終的な実行結果
作ったゲームをWordPressに貼り付けます。
1. 関連記事:

GPT-4にゲームを作ってもらう

今回は、HTML, CSS, JavaScriptのコードを

ChatGPTのGPT-4君に作ってもらいました。

やり取りをそのまま載せます。

参考になればと思います。

ヨスケ

自分のブログページに簡単なゲームを実装したいです。
やり方が全く分からないので、step by stepで教えてください。

ブログページに簡単なゲームを実装する方法をstep by stepで説明します。ここでは、HTML、CSS、JavaScriptを使用して、ブログページに実装できる簡単なゲームを作成します。

ゲームのアイデアを決めるまずは簡単なゲームのアイデアを決めてください。例えば、じゃんけんゲームや簡単なクイズゲームなどが考えられます。
HTMLを作成するゲームの基本的な構造を作るために、HTMLを記述します。例えば、じゃんけんゲームの場合、以下のようなHTMLを作成します。
CSSを作成する
ゲームの見た目を整えるために、CSSを記述します。例えば、以下のようなCSSを作成します。
JavaScriptを作成する
ゲームの動作を実装するために、JavaScriptを記述します。例えば、以下のようなJavaScriptを作成します。
記事を公開する
ブログ記事または固定ページを公開または更新します。これで、ブログページに簡単なゲームが実装されました。

生成されたコード

ステップに合わせてコードが出てきました。

<!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="style.css">
</head>
<body>
    <h1>じゃんけんゲーム</h1>
    <div id="game">
        <button id="rock">グー</button>
        <button id="scissors">チョキ</button>
        <button id="paper">パー</button>
    </div>
    <div id="result"></div>
    <script src="script.js"></script>
</body>
</html>

body {
    font-family: 'Arial', sans-serif;
    text-align: center;
}

button {
    font-size: 24px;
    padding: 10px 20px;
    margin: 0 10px;
}

#result {
    font-size: 24px;
    margin-top: 20px;
}

const rock = document.getElementById('rock');
const scissors = document.getElementById('scissors');
const paper = document.getElementById('paper');
const result = document.getElementById('result');

function janken(playerChoice) {
    const choices = ['グー', 'チョキ', 'パー'];
    const computerChoice = choices[Math.floor(Math.random() * choices.length)];

    if (playerChoice === computerChoice) {
        result.textContent = '引き分け！';
    } else if (
        (playerChoice === 'グー' && computerChoice === 'チョキ') ||
        (playerChoice === 'チョキ' && computerChoice === 'パー') ||
        (playerChoice === 'パー' && computerChoice === 'グー')
    ) {
        result.textContent = 'あなたの勝ち！';
    } else {
        result.textContent = 'あなたの負け…';
    }
}

rock.addEventListener('click', () => janken('グー'));
scissors.addEventListener('click', () => janken('チョキ'));
paper.addEventListener('click', () => janken('パー'));

ホントにこれで動くのでしょうか？？

動くか試してみた

作ったHTML, CSS, JSを簡単に試せるサイトがありますので、

そこで動作確認してみました。

今回使用したサイトはReplit.comというサイトです。

細かい使用方法はYouTube動画もたくさん上がっているので、

そちらをご覧ください。

なんかできてる！

とはいえ、

やってみると、相手が何を出したとか、

連続で遊べないとか

色々改善したいところも出たので、

改善要望もGPTさんに出します。

修正依頼

ヨスケ

相手の出した手がわかるように、ボタンを押すと同時に表示するようにしてください。
また、ボタンを押すと、何度でもじゃんけんができるようにしてください。

GPT-4

ボタンを押すと同時に相手の出した手がわかるように表示し、何度でもじゃんけんができるようにするには、以下のようにJavaScriptを修正します。

const rock = document.getElementById('rock');
const scissors = document.getElementById('scissors');
const paper = document.getElementById('paper');
const result = document.getElementById('result');
const computerChoiceDisplay = document.createElement('div');

function janken(playerChoice) {
    const choices = ['グー', 'チョキ', 'パー'];
    const computerChoice = choices[Math.floor(Math.random() * choices.length)];

    computerChoiceDisplay.textContent = `相手の手: ${computerChoice}`;
    result.appendChild(computerChoiceDisplay);

    if (playerChoice === computerChoice) {
        result.textContent = '引き分け！';
    } else if (
        (playerChoice === 'グー' && computerChoice === 'チョキ') ||
        (playerChoice === 'チョキ' && computerChoice === 'パー') ||
        (playerChoice === 'パー' && computerChoice === 'グー')
    ) {
        result.textContent = 'あなたの勝ち！';
    } else {
        result.textContent = 'あなたの負け…';
    }
}

rock.addEventListener('click', () => janken('グー'));
scissors.addEventListener('click', () => janken('チョキ'));
paper.addEventListener('click', () => janken('パー'));

ここでちょっと問題発生

修正コードが出てきたんですが、

相手のじゃんけんの手が表示されないところが修正できず、

何度かやり取り。

JavaScriptだけじゃなくて、htmlも修正が必要なのでは？

と聞くと、「あっ」みたいな感じで修正コードを出してきましたw

ちょっとかわいい。

ヨスケ

ん？出ませんよ。

GPT-4

申し訳ありません。正しく動作するコードを以下に示します。

ヨスケ

index.htmlとかscript.jsを修正しなくても良いのですか？

GPT-4

失礼しました。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="style.css">
</head>
<body>
    <h1>じゃんけんゲーム</h1>
    <div id="game">
        <button id="rock">グー</button>
        <button id="scissors">チョキ</button>
        <button id="paper">パー</button>
    </div>
    <div id="result">
        <div id="computer-choice"></div>
        <div id="game-result"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

GPT-4

次に、script.jsを以下のように修正してください。

const rock = document.getElementById('rock');
const scissors = document.getElementById('scissors');
const paper = document.getElementById('paper');
const gameResult = document.getElementById('game-result');
const computerChoiceDisplay = document.getElementById('computer-choice');

function janken(playerChoice) {
    const choices = ['グー', 'チョキ', 'パー'];
    const computerChoice = choices[Math.floor(Math.random() * choices.length)];

    computerChoiceDisplay.textContent = `相手の手: ${computerChoice}`;

    if (playerChoice === computerChoice) {
        gameResult.textContent = '引き分け！';
    } else if (
        (playerChoice === 'グー' && computerChoice === 'チョキ') ||
        (playerChoice === 'チョキ' && computerChoice === 'パー') ||
        (playerChoice === 'パー' && computerChoice === 'グー')
    ) {
        gameResult.textContent = 'あなたの勝ち！';
    } else {
        gameResult.textContent = 'あなたの負け…';
    }
}

rock.addEventListener('click', () => janken('グー'));
scissors.addEventListener('click', () => janken('チョキ'));
paper.addEventListener('click', () => janken('パー'));

最終的な実行結果

さて、動くのか！？

やりました！動いた！

ここまで、所要時間10分。

トラブルがなかったら、もっと早かったですね。

マジすごい。。。

作ったゲームをWordPressに貼り付けます。

さて、最終目標は作ったゲームをブログ記事に載せたいので、

どうやるか教えてもらいました。

ヨスケ

ブログはWordPress、テーマはCocoonで書いています。
どのように実装すればよいでしょうか？

GPT-4

WordPressでCocoonテーマを使用している場合、以下の手順でゲームを実装できます。

ファイルの準備作成したindex.htmlをgame.htmlにリネームしてください。また、game.html、style.css、script.jsをウェブサーバーにアップロードします。これらのファイルは、WordPressのインストールディレクトリの中のwp-contentディレクトリ内にあるuploadsディレクトリにアップロードすることをお勧めします。アップロードが完了したら、game.htmlのURLをメモしておいてください。
WordPressで新しいページを作成 WordPressの管理画面にログインし、「ページ」>「新規追加」をクリックして、新しいページを作成します。もちろん、既存のページに追加することもできます。
ショートコードを使用してiframeを追加 Cocoonテーマでは、iframeの埋め込みが制限されていますが、ショートコードを使用してiframeを追加することができます。新しいページの本文エディタに以下のショートコードを追加してください。
1. ページを公開新しいページの「公開」ボタンをクリックしてページを公開します。
これで、WordPressのCocoonテーマを使用したブログページに簡単なゲームが実装されました。公開されたページにアクセスして、ゲームが正しく表示されるか確認してください。

[cocoon-iframe src="https://your-web-server.com/path/to/game.html" width="100%" height="500"]

GPT-4

ここで、https://your-web-server.com/path/to/game.htmlを、アップロードしたgame.htmlのURLに置き換えてください。また、widthとheightの値を、ゲームの表示サイズに合わせて調整してください。

よし、埋め込むぞ。

サイドバーにじゃんけんゲームを埋め込んでみましたので、

暇な方、遊んでみてください。

【お知らせ】ココナラでサービス販売しております。

ビジネスの場面で多くある面倒な作業をサポートいたします。

一度ご相談ください。

長時間でさらにお得！動画・音声から文字起こしします丁寧・迅速をモットーに！中間報告など報連相を大事にします！

SNSで営業DMの送信代行をいたしますインスタ/Twitter、重要でも大変な営業をサポートします

私のアシスタントはAIです。

GPT-4にゲームを作ってもらう

生成されたコード

動くか試してみた

修正依頼

ここでちょっと問題発生

最終的な実行結果

作ったゲームをWordPressに貼り付けます。

【お知らせ】ココナラでサービス販売しております。

関連記事: