ChatGPTを活用したSKJvillageの指じゃんけんWebアプリ開発

# １．はじめに
　今回はSKJvillageの動画内で作られた謎ゲーム「**指じゃんけん**」を遊ぶことができるWebアプリを開発しました！開発には今話題のChatGPTを一部活用しているので、その話も含めてアプリ作成やアプリ概要について紹介します。

# ２．SKJvillageとは？
　[SKJvillage](https://www.youtube.com/@SKJVillage)は、3人組のゲーム実況系YouTubeチャンネル。高校時代の親友で「早稲田・慶應・上智」大学にそれぞれ進学し、大手企業を退職後、2018年に３人でYoutube活動開始。
(https://www.youtube.com/@SKJVillage/about より参考)

# ３．指じゃんけんについて
　まず、指じゃんけんとは何かを紹介します。指じゃんけんは下記のリンクに掲載した動画内のくだりであり、マリオメーカーの勝敗を決めるために行われたゲームです。指で１から５を作り遊びます。

https://www.youtube.com/watch?v=i__b6owlvhk

ルールを以下にまとめます。

・出す手は1から５
・基本的には数字が大きい方が勝ち
・同じ数字は両者負け
・1は5に勝てる
・2は5に勝てる(ここだけ2がチョキ✌, 5がパー✋になり普通のじゃんけんになる)
・3と4の場合は両者勝ち

これらのルールは動画内でsa2が言ってた内容をまとめたものになります。(ルールを考える度にグダグダになって「負け」って言うシンカ好き)

# ４．実際に開発
　Webアプリ開発には以下のステップを踏みました。

## STEP1　ChatGPTでじゃんけんをするWebアプリを作成するようお願い
　まずは指じゃんけんの前に、基となるじゃんけんをするWebアプリを作成するPythonプログラムを出力してもらいました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128356/05c0dd01-cccc-b532-f1ee-51d82c205095.png)
　画像のように「じゃんけんできるwebアプリをStreamlitを使って作りたい」と直球にお願いしました。Streamlitとは、PythonでWebアプリを作成するためのフレームワークのことです。
　実際に作ってもらったプログラムを以下に示します。
```python:janken.py
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」というファイルを開けば見ることができます。

https://github.com/NyarRamen/SKJ_FingerJanken.git

# ５．実際のWebアプリ
　ここで作成したWebアプリを紹介していきます。以下がWebアプリのリンクです。

https://nyarramen-skj-fingerjanken-skj-janken-4yoi3m.streamlit.app/

　今回のWebアプリには3つの画面があります。ホーム画面、遊び方、プレイの3つです。サイドバーで選択することで画面を切り替えることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128356/bee6658c-3f53-4686-5e18-2ac49d6a0b64.png)

・ホーム画面
　サイドバーで「**-**」を選択するとホーム画面を開けます。ホーム画面には、SKJvillageのアイコンと紹介文が書いてあります。

・遊び方
　サイドバーで「**遊び方**」を選択すると遊び方の説明を見ることができます。ルールと操作についての説明を見れます。

・プレイ
　サイドバーで「**指じゃんけんプレイ！**」を選択すると実際に指じゃんけんで遊ぶことができます。対戦相手を選択し、自分が出す指を選択して「**じゃんけん！**」というボタンを押すと、対戦相手の手と勝敗の結果、そして対戦相手と勝敗に応じた画像が出力されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3128356/6dc0c2b6-b95f-4105-d36d-b59532406505.png)

全部で12通りの画像を見ることができます。

# ６．今後の計画
・人と対戦(Streamlitだとキツイ。。。)
・出力される画像の種類を増やす
・難易度設定ができるようにする
・プレイヤーの手から学習して強くなる対戦相手(CPU)を導入
・対戦相手のメンバーごとに出す手の癖を導入(シンカはロマンを求めて1,2を出しやすいなど)
・哀川チョキを増やす(?)

# 感想
　最後まで見ていただきありがとうございます！今後もこういったSKJvillageの謎くだりからゲームを作ってもいいなと感じました。Twitterではいいねや嬉しいリプを頂きました！

　みんなが飽きても俺はいろいろ作ります！それではまた！