Webアプリ開発～超初心者編～

1. はじめに

1.1. 自己紹介

普段は、pythonを使って機械学習や深層学習などを行っていますが、この度、webアプリ開発に興味を持ったので挑戦しました。
独学かつ初心者なので誤った情報を伝えてしまうかもしれませんがお手柔らかにお願いします。
今回は、ジャンケンを行ったのちにあっち向いてほいをするプログラムを作ってみました。
筆者は普段pythonを使用しているためpythonのオープンソースフレームワークであるstreamlitを使用して開発を行いました。
本来のアプリ開発では、JavaやC言語が良く用いられると思いますのでこの記事は
「普段pythonを使ってデータサイエンスをしてるけど、アプリ開発にも触れてみたい！」
という方向けになりますのでご理解ください。

1.2. 実行環境について

OS　Windows11
anaconda
Python 3.9

2.作業手順について

2.1. 環境構築

①anacondaをインストールして仮想環境を構築する。
anacondaには、NumPy、Pandas、Matplotlib、Scikit-learnなどのデータサイエンスでよく使われるパッケージが最初から含まれており、追加で簡単にパッケージをインストールできるため初心者には非常に便利です。
詳しい環境構築のやり方は下記の記事を参考にしてください。

↓anacondaのインストール
https://qiita.com/Raphael_de_murl/items/6942fee692de2f13c623

②実行環境を構築する。
筆者は、VScodeを使用しました。
詳しいインストールのやり方は下記でていねいに解説されているので参考にしてください。

↓anacondaのインストールからVScodeの設定まで
https://qiita.com/maami415/items/c0f382fd88e1d173d288

2.2.ディテクトリの作成

ディテクトリは以下のように構成しました。
ResultImageの中には、あっち向いてほいのイラストが入っています。

2.3.main.pyの作成

このコードでは、最初にジャンケンにおける選択肢とあっち向いてほいにおける選択肢を指定しています。
その後、if関数を用いて選んだ選択とランダムに選んだコンピュータの選択の関係性によって出力結果を変えています。
ジャンケンであれば、グーに対してチョキなら「あなたの勝ち！」と表示。

main.py

    import streamlit as st
import random

st.title("あっち向いてホイ")

# じゃんけんの選択肢
janken_choices = ["グー", "チョキ", "パー"]
directions = ["上", "下", "左", "右"]

st.write("ジャンケンに勝った後、方向を選んでください。")

st.write("ジャンケンスタート！")

# プレイヤーのじゃんけん選択
player_janken = st.selectbox("出す手を選んでください：", janken_choices)

if st.button("ジャンケン！"):
    # コンピュータのじゃんけん選択
    computer_janken = random.choice(janken_choices)
    st.write(f"コンピュータの選択: {computer_janken}")

    # 勝敗判定
    if (player_janken == "グー" and computer_janken == "チョキ") or \
       (player_janken == "チョキ" and computer_janken == "パー") or \
       (player_janken == "パー" and computer_janken == "グー"):
        st.write("あなたの勝ち！方向を選んでください。")
        st.image("ResultImage/Win.png")
        
    else:
        st.write("残念！あなたの負け")
        st.image("ResultImage/Lose.png")


# プレイヤーの選択
player_choice = st.selectbox("方向を選択：", directions)

if st.button("あっち向いてホイ！"):
    # コンピュータの選択
    computer_choice = random.choice(directions)
    st.write(f"コンピュータの方向: {computer_choice}")
    
    # 勝敗判定
    if player_choice == computer_choice:
        st.write("あなたの勝ち！")
        st.image(f"ResultImage/{player_choice}.png")
        
    else:
        st.write("残念！あなたの負け")
        st.image("ResultImage/Lose.png")

    

3.実行

3.1.実行方法

vscodeを開いて、menu_appフォルダを開きます。
ターミナルから新しいターミナルを開きpowershellからcommandpromptに切り替えます。
conda activate achimuite_hoi(仮想環境)と打ち込み実行します。
streamlit run main.pyと実行することで、アプリが起動

3.2.実行結果

以下のような感じで結果が表示されます。

まとめ

以上、初めてのアプリを作成してみました。
今後も引き続きアプリ開発の勉強をしていきたいと思います。