タイトル画像
琴葉茜

さて、前回まででAIの使い方は分かったと思うから、ここからは実際にWebアプリにしていこうか！
今回も「streamlit」を使っていくよ

琴葉葵

りょーかい！！

琴葉茜

まずは、前回作成したプログラムを関数「generate_response」にしよう
引数には技名が渡せるようにしとくと良いよ

from google import genai
import json

GEMINI_API_KEY = "AIza~"  # ここにGemini API Keyを入力

# 技の名前を渡すと、AIがJSON形式で技の設定を返してくれる関数
def generate_response(skill_name):
    # AIの設定
    client = genai.Client(api_key=GEMINI_API_KEY)

    prompt = f"""
    RPGのゲームマスターとして、技名「{skill_name}」の設定を作ってください。
    以下のJSONフォーマットで出力してください。

    {{
    "name": "{skill_name}",
    "element": "属性（火、水、風、雷、光、闇から選択）",
    "power": "威力（10〜999の数値）",
    "mp_cost": "消費MP（5〜100の数値）"
    }}
    """

    response = client.models.generate_content(
        model='gemini-2.5-flash',
        contents=prompt,
        config={'response_mime_type': 'application/json'}
    )
    return json.loads(response.text)

skill_data = generate_response("ギガフレア・ノヴァ")

print(skill_data)
琴葉葵

関数にした後もちゃんと動いたよ！

琴葉茜

じゃあ次は、streamlitで文字を入力して、ボタンを押すと結果が返ってくるようにしよう

import streamlit as st # streamlitのライブラリをインポート

## 「generate_response」は変更がないので省略

# 次の2行のコメントアウトは削除してOK
# skill_data = generate_response("ギガフレア・ノヴァ")
# print(skill_data)

# 画面のタイトル
st.title("AIで技の設定を作ろう")

# ユーザーが技名を入力する欄
skill_name = st.text_input("技の名前を入力してください")

# ボタンが押された時の処理
if st.button("技の設定を作る"):
    if skill_name:
        # ここにAIを呼び出す処理を書く
        response = generate_response(skill_name)
        st.write(f"技名: {skill_name}")
        st.write(f"属性: {response['element']}")
        st.write(f"威力: {response['power']}")
        st.write(f"消費MP: {response['mp_cost']}")
    else:
        st.write("技の名前を入力してください")
琴葉葵

「st.text_input」で文字を入力して、「st.button」でボタンを押すと、関数が動いて結果が返ってくるんだね！

琴葉茜

そうだね
じゃあ早速動かしてみよう！

解説画像1
琴葉葵

おおー！ちゃんと表示された！！

琴葉茜

ここまでは順調だね

琴葉葵

じゃあ後は、他の人にも使ってもらえるようにアップすれば...

琴葉茜

ちょっとまって！！
このままアップしてしまうと、APIキーが丸見えになってしまって知らない人に悪用されるから、その対応をしておかないと！！

琴葉葵

ああ、そうだった
危ない危ない

琴葉茜

てことで、次はAPIキー周りの対処方法を紹介するね

琴葉葵

りょーかい！！

琴葉茜

ちなみに、もし公開してしまったときは、Google AI StudioのAPIキーを削除すれば無効にできるよ

この時点での全体のプログラム

from google import genai
import json
import streamlit as st

GEMINI_API_KEY = "AIza~"  # ここにGemini API Keyを入力

# 技の名前を渡すと、AIがJSON形式で技の設定を返してくれる関数
def generate_response(skill_name):
    # AIの設定
    client = genai.Client(api_key=GEMINI_API_KEY)

    prompt = f"""
    RPGのゲームマスターとして、技名「{skill_name}」の設定を作ってください。
    以下のJSONフォーマットで出力してください。

    {{
    "name": "{skill_name}",
    "element": "属性（火、水、風、雷、光、闇から選択）",
    "power": "威力（10〜999の数値）",
    "mp_cost": "消費MP（5〜100の数値）"
    }}
    """

    response = client.models.generate_content(
        model='gemini-2.5-flash',
        contents=prompt,
        config={'response_mime_type': 'application/json'}
    )
    return json.loads(response.text)

# 画面のタイトル
st.title("AIで技の設定を作ろう")

# ユーザーが技名を入力する欄
skill_name = st.text_input("技の名前を入力してください")

# ボタンが押された時の処理
if st.button("技の設定を作る"):
    if skill_name:
        # ここにAIを呼び出す処理を書く
        response = generate_response(skill_name)
        st.write(f"技名: {skill_name}")
        st.write(f"属性: {response['element']}")
        st.write(f"威力: {response['power']}")
        st.write(f"消費MP: {response['mp_cost']}")
    else:
        st.write("技の名前を入力してください")