１．はじめに
今回はSKJvillageの動画内で作られた謎ゲーム「指じゃんけん」を遊ぶことができるWebアプリを開発しました！開発には今話題のChatGPTを一部活用しているので、その話も含めてアプリ作成やアプリ概要について紹介します。
２．SKJvillageとは？
SKJvillageは、3人組のゲーム実況系YouTubeチャンネル。高校時代の親友で「早稲田・慶應・上智」大学にそれぞれ進学し、大手企業を退職後、2018年に３人でYoutube活動開始。
(https://www.youtube.com/@SKJVillage/about より参考)
３．指じゃんけんについて
まず、指じゃんけんとは何かを紹介します。指じゃんけんは下記のリンクに掲載した動画内のくだりであり、マリオメーカーの勝敗を決めるために行われたゲームです。指で１から５を作り遊びます。
ルールを以下にまとめます。
・出す手は1から５
・基本的には数字が大きい方が勝ち
・同じ数字は両者負け
・1は5に勝てる
・2は5に勝てる(ここだけ2がチョキ✌, 5がパー✋になり普通のじゃんけんになる)
・3と4の場合は両者勝ち
これらのルールは動画内でsa2が言ってた内容をまとめたものになります。(ルールを考える度にグダグダになって「負け」って言うシンカ好き)
４．実際に開発
Webアプリ開発には以下のステップを踏みました。
STEP1 ChatGPTでじゃんけんをするWebアプリを作成するようお願い
まずは指じゃんけんの前に、基となるじゃんけんをするWebアプリを作成するPythonプログラムを出力してもらいました。
画像のように「じゃんけんできるwebアプリをStreamlitを使って作りたい」と直球にお願いしました。Streamlitとは、PythonでWebアプリを作成するためのフレームワークのことです。
実際に作ってもらったプログラムを以下に示します。
import streamlit as st
import random
def janken(player_hand):
hands = ["グー", "チョキ", "パー"]
computer_hand = random.choice(hands)
if player_hand == computer_hand:
result = "引き分け"
elif (player_hand == "グー" and computer_hand == "チョキ") or \
(player_hand == "チョキ" and computer_hand == "パー") or \
(player_hand == "パー" and computer_hand == "グー"):
result = "勝ち"
else:
result = "負け"
return computer_hand, result
def main():
st.title("じゃんけんゲーム")
st.write("手を選んでください。")
player_hand = st.selectbox("あなたの手", ("グー", "チョキ", "パー"))
if st.button("じゃんけん！"):
computer_hand, result = janken(player_hand)
st.write(f"コンピューターの手: {computer_hand}")
st.write(f"結果: {result}")
if __name__ == "__main__":
main()
簡単にプログラムを説明すると、このプログラムはjanken,mainの2つの関数を定義しています。jankenではルール設定(グー、チョキ、パーの定義、勝敗の条件)、mainでは実際のWebアプリの機能に関する内容が定義されています。
STEP2 指じゃんけんの仕様に変更
ChatGPTの作ったプログラムに手を加えました。実際に変更したところを列挙するとキリがないので、箇条書きでまとめると、
・出せる手をグー、チョキ、パーから1,2,3,4,5に変更
・ルールを追加(1は5に勝てる、5は4に勝てる、など)
・遊び方の説明を追加(初見でも分かるように)
・対戦相手の追加(SKJvillageメンバー3人と戦うという形式に変更)
・対戦相手、勝敗に応じて画像を出力
といった部分です。(まだまだあるかも。。。)
STEP3 Webアプリを公開するための設定
GitHub、Streamlit Sharingを用いてリンクを踏めばWebアプリで誰でも遊べるようにしました。簡単に説明すると、GitHubはソースコードを公開するサイト、Streamlit SharingはStreamlitで作成したWebアプリを公開するサイトです。
今回作成したプログラムは下記のリンクを踏んで「SKJ_janken.py」というファイルを開けば見ることができます。
５．実際のWebアプリ
ここで作成したWebアプリを紹介していきます。以下がWebアプリのリンクです。
今回のWebアプリには3つの画面があります。ホーム画面、遊び方、プレイの3つです。サイドバーで選択することで画面を切り替えることができます。
・ホーム画面
サイドバーで「-」を選択するとホーム画面を開けます。ホーム画面には、SKJvillageのアイコンと紹介文が書いてあります。
・遊び方
サイドバーで「遊び方」を選択すると遊び方の説明を見ることができます。ルールと操作についての説明を見れます。
・プレイ
サイドバーで「指じゃんけんプレイ！」を選択すると実際に指じゃんけんで遊ぶことができます。対戦相手を選択し、自分が出す指を選択して「じゃんけん！」というボタンを押すと、対戦相手の手と勝敗の結果、そして対戦相手と勝敗に応じた画像が出力されます。
全部で12通りの画像を見ることができます。
６．今後の計画
・人と対戦(Streamlitだとキツイ。。。)
・出力される画像の種類を増やす
・難易度設定ができるようにする
・プレイヤーの手から学習して強くなる対戦相手(CPU)を導入
・対戦相手のメンバーごとに出す手の癖を導入(シンカはロマンを求めて1,2を出しやすいなど)
・哀川チョキを増やす(?)
感想
最後まで見ていただきありがとうございます！今後もこういったSKJvillageの謎くだりからゲームを作ってもいいなと感じました。Twitterではいいねや嬉しいリプを頂きました！
みんなが飽きても俺はいろいろ作ります！それではまた！