私のアシスタントはAIです。
どうもヨスケです。
最近は、毎日記念日を記事にしていますが、
全て、bing AI君が調べて記事を作ってくれています。
また、プログラミングで作りたいものが出てきた際も、
要件を伝えればGPT-4君がコーディングしてくれます。
今回はブログに簡単な「じゃんけんゲーム」を実装することが、
どれくらいのやり取りでできるのか、
実際に試してみました。
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さんに出します。
修正依頼

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

ボタンを押すと同時に相手の出した手がわかるように表示し、何度でもじゃんけんができるようにするには、以下のように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
ちょっとかわいい。

ん?出ませんよ。

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

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

失礼しました。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>

次に、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で書いています。
どのように実装すればよいでしょうか?

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を追加することができます。新しいページの本文エディタに以下のショートコードを追加してください。
-
- ページを公開 新しいページの「公開」ボタンをクリックしてページを公開します。
これで、WordPressのCocoonテーマを使用したブログページに簡単なゲームが実装されました。公開されたページにアクセスして、ゲームが正しく表示されるか確認してください。
[cocoon-iframe src="https://your-web-server.com/path/to/game.html" width="100%" height="500"]

ここで、https://your-web-server.com/path/to/game.html
を、アップロードしたgame.html
のURLに置き換えてください。また、width
とheight
の値を、ゲームの表示サイズに合わせて調整してください。
よし、埋め込むぞ。
サイドバーにじゃんけんゲームを埋め込んでみましたので、
暇な方、遊んでみてください。
【お知らせ】ココナラでサービス販売しております。
ビジネスの場面で多くある面倒な作業をサポートいたします。
一度ご相談ください。
長時間でさらにお得!動画・音声から文字起こしします 丁寧・迅速をモットーに!中間報告など報連相を大事にします!
SNSで営業DMの送信代行をいたします インスタ/Twitter、重要でも大変な営業をサポートします