Zenn
🦁

対話アプリの開発に挑戦した　その８（Streamlit そして完成）

に公開
Streamlit
ChatGPT
tech

前回までのエピソード

プログラミング初級者の私は認知症の父との二人暮らしをきっかけに、認知症の人の家族をサポートする対話アプリを開発したいと思いました。ChatGPTに聞きながらOpenAIのアカウントをつくり、APIキーを取得。chatbot.pyファイルと.envファイルを作成しました。

目次はこちら

StreamlitでWebアプリをつくる

あなた:
私は一度、不完全でも完成品をつくってみたいと思っています。まずはブラウザで稼働するWebアプリを完成させてみたいです。無料枠が割り当てられなかったことでAPIは動いていませんが、プログラムはおそらく正確に動いていると思います。これをどのようにWebアプリにしていくのか、そこに興味があります。

ChatGPT:
素晴らしい方針です。
「不完全でも一度完成させる」という姿勢は、学習でも創作でも最も重要な力の一つです。
APIがまだ動かなくても、「Webアプリとして形にする」経験は必ず今後に生きます。

🔧 今のPythonコードを「Webアプリ化」する流れ（全体像）

ここでは、OpenAI API を使ったチャットプログラムをブラウザで動く形に変える手順を、シンプルに整理します。

✅ ステップ1：どんな技術を使うの？
最も簡単で実用的な方法：

👉 Streamlit（ストリームリット） というPythonライブラリを使います。

  • ✅ Webの知識がなくてもPythonだけでWebアプリがつくれる

  • ✅ ブラウザで動く

  • ✅ ローカル実行でもオンライン公開（無料枠あり）も可能

✅ ステップ2：Streamlitのインストール

ターミナル（PowerShellやVS CodeのTerminal）で、以下を実行してください：

pip install streamlit

✅ ステップ3：chatbot_web.py の作成

次のようなコードを書いて保存します（仮に chatbot_web.py とします）：

import openai
import os
import streamlit as st
from dotenv import load_dotenv

load_dotenv()
openai.api_key = os.getenv("OPENAI_API_KEY")

st.title("やさしいAIチャットボット")
st.write("何でも話してください。'bye' と入力すると終了メッセージが出ます。")

if "messages" not in st.session_state:
    st.session_state.messages = []

# ユーザー入力フォーム
user_input = st.text_input("あなた：", key="input")

if user_input:
    st.session_state.messages.append({"role": "user", "content": user_input})

    try:
        response = openai.ChatCompletion.create(
            model="gpt-3.5-turbo",  # APIが有効な場合
            messages=[
                {"role": "system", "content": "あなたは優しく話を聞いてくれるAIです。"}
            ] + st.session_state.messages,
            temperature=0.8,
        )
        reply = response.choices[0].message["content"]
    except Exception as e:
        reply = f"エラー：{e}"

    st.session_state.messages.append({"role": "assistant", "content": reply})

# メッセージの表示
for msg in st.session_state.messages:
    if msg["role"] == "user":
        st.markdown(f"**あなた：** {msg['content']}")
    else:
        st.markdown(f"**AI：** {msg['content']}")

✅ ステップ4：Streamlit で起動

ターミナルで、次のコマンドを実行します：

streamlit run chatbot_web.py

➡ ブラウザが自動的に開き、あなたのチャットアプリが表示されます！

✅ ここまでで、どんな状態？

  • ✅ ブラウザで動く、見た目があるチャットアプリが完成

  • ✅ OpenAIのAPIキーがあれば、本物のAIと会話できる

  • 🔒 今はAPIが止まっていても、入力欄や見た目の動きは確認できる

  • 🔄 将来APIキーを入れればそのまま使える

🔜 次のステップ（希望があれば）

  • アプリをインターネットで公開する（無料：Streamlit Community Cloudなど）

  • 入力履歴の保存、テーマカラー、認知症支援向けの構成へ発展

  • OpenAI APIが使えない間、ローカルのダミー返答で動かす方法（テスト用）

💬 最後に

  • APIが使えなくても「Webアプリ化」を進める価値は非常に大きいです。
    本物のサービスをつくるための道筋と自信がつきます。

  • 必要であれば、あなたのプロジェクトに合った具体的な改良も一緒に考えられます。
    「どこまで完成と呼ぶか」「どんなテーマを含めたいか」など、希望があれば教えてください。

あなた:
streamlitがうまくインストールできたようです。再度教えていただきたいのですが、わたしはPythonにstreamlitをインストールしたのでしょうか？

ChatGPT:
はい、そのとおりです。
あなたは Pythonに streamlit ライブラリをインストール しました。

✅ もう少し正確に言うと…

あなたが実行した：

pip install streamlit

というコマンドは：

Pythonのパッケージ管理ツール pip を使って、
streamlit というライブラリ（モジュール）をインストールした

ということを意味します。

🔍 では、どこにインストールされたの？

インストール先は主に 2通りあります：

インストール先 説明
✅ グローバル環境 あなたのPCのPython全体で使える状態。多くの場合、これです。
🔒 仮想環境（venvなど） 特定のプロジェクト内だけで使うPython環境。必要なときにだけ使います。

あなたが仮想環境を作っていなければ、グローバル環境に入ったと考えてOKです。

🔧 streamlit を確認する方法

以下のいずれかで確認できます：

pip list

もしくは：

python -m pip show streamlit

このような情報が出れば成功です：

Name: streamlit
Version: 1.xx.x
...
Location: C:\Users\あなたの名前\AppData\...

💡 まとめ

はい、Pythonに streamlit をインストールしたことになります。

これで Webアプリ（ブラウザ上で動く対話型ツール）を作る準備が整いました。

streamlit run ファイル名.py で起動できます。

あなた:
ターミナル上で動いたchatbot.pyとは別のファイルで、chatbot_web.pyを作成するのですね？

ChatGPT:
はい、その通りです！

ターミナル上で動く chatbot.py はコマンドライン用のプログラムで、
chatbot_web.py はブラウザで動くWebアプリ用のプログラムとして別に作るイメージです。

Streamlitなどのフレームワークを使うと、
Pythonのコードを書くだけで簡単にWebアプリの画面を作れます。

すごっ

あなた:
すごっ。ブラウザが自動的に開きました。

ChatGPT:
おおー！それは嬉しいですね！ 🎉

Streamlitのいいところは、コードを書いて保存して実行するだけで、ブラウザが自動で立ち上がってすぐに結果が見られることなんです。

もし動作や見た目のことで気になることや、もう少し機能を追加したいことがあれば、いつでも言ってくださいね。
一緒にブラッシュアップしていきましょう！😊

あなた:
streamlitを実行するときは、cdはchatbotにした方がいいのですか？

ChatGPT:
はい、基本的には cd コマンドで作業したいフォルダ（例：chatbotフォルダ）に移動してから streamlit run chatbot_web.py を実行するのがオススメです。

理由は：
streamlit run は カレントディレクトリ（今いるフォルダ）を基準にしてファイルを探す ので、実行ファイルのある場所にいる方がファイル指定が簡単で確実です。

他のフォルダにいるときに絶対パスを使うか、フルパス指定をしない限り、ファイルが見つからずエラーになります。

たとえば：

cd "$env:USERPROFILE\Desktop\chatbot"
streamlit run chatbot_web.py

とすると、そのフォルダ内の chatbot_web.py を確実に実行できます。

もしほかにもターミナルやフォルダ操作でわからないことあれば教えてくださいね！

これで完成？

あなた:
これでもう、完成？

ChatGPT:
はい、基本的にはこれで「ブラウザで動くシンプルなAIチャットWebアプリ」として完成形のスタート地点です！

ここまでできている内容

  • ユーザーがブラウザからテキスト入力できる

  • OpenAI API（APIキーが有効なら）とやりとりして返答を得る

  • 会話の履歴をブラウザ画面に順に表示する

  • 「bye」など終了コマンドで会話終了メッセージも対応可能（コードに入れれば）

これからやれること（発展例）

  • デザインを良くする（レイアウト、色、フォントなど）

  • 会話をもっと便利にする（メッセージの区切りやタイムスタンプ追加）

  • ファイルに会話ログを保存する

  • ユーザー認証をつける

  • 認知症介護に役立つ独自の機能を追加する（ヒント集、記録管理など）

まとめ

「動く」アプリとしては今の段階で十分完成です！
ただ、必要に応じて機能追加・改善はどんどんできますし、それが楽しい部分でもあります。

もし次に挑戦したいことや、もっと具体的に作りたい機能があれば教えてくださいね！
一緒に進めましょう。😊

あれまあ

あなた:
あれまあ。

ChatGPT:
「あれまあ。」って感じですよね！でも、それってすごく大事な感覚だと思います。最初の一歩を踏み出して、ちゃんと動くものができたってことですから。

何か気になることや、次にやってみたいことがあればいつでも言ってください！どんな小さなことでも一緒にクリアしていきましょう！✨

その９へ続く

Discussion