Zenn
🌟

対話アプリの開発に挑戦した　その９（長めのQ&A集）

に公開
Streamlit
ChatGPT
tech

前回までのエピソード

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

目次はこちら

今回は長めのQ&A集になります。

Q&A集

$env

あなた:
cd "$env:USERPROFILE\Desktop\chatbot" この文の、$envについて教えていただけますか？
ChatGPT:

はい、$env: について詳しくご説明します。

🔹 $env: とは？

$env: は PowerShell（パワーシェル） で使う、
「環境変数（Environment Variables）」にアクセスするための特別な構文です。

🔸 例：$env:USERPROFILE

USERPROFILE は環境変数の一つで、
Windowsの「自分のユーザーのホームディレクトリ」を指します。

たとえば：

echo $env:USERPROFILE

と打てば、こんな感じの出力になります：

C:\Users\あなたのユーザー名

🔸 あなたのコマンドの意味

cd "$env:USERPROFILE\Desktop\chatbot"

これは次のような意味になります：

自分のユーザーアカウントの「デスクトップ」にある「chatbot」というフォルダに移動する

たとえばユーザー名が suzuki さんなら：

cd "C:\Users\suzuki\Desktop\chatbot"

と同じ意味になります。

✅ なぜ $env: を使うのか？

  • どのPCでも共通して使える（他人のPCでも自分のユーザー名を自動で取得できる）

  • スクリプトやチュートリアルを柔軟に動かせる

🔍 もし cmd.exe（旧式のコマンドプロンプト）なら？

%USERPROFILE%\Desktop\chatbot のように %...% で囲みます（PowerShellとは違います）。

❓まとめると

目的 書き方
PowerShell $env:USERPROFILE
CMD（旧コマンド） %USERPROFILE%
Bash（Mac/Linux） $HOME または ~

pip install streamlit

あなた:
pip install streamlit は、cd $env:USERPROFILE\Desktop\chatbot で実行する必要がありますか？

ChatGPT:
とてもよい質問です。結論からお伝えすると：

✅ いいえ、pip install streamlit はどこで実行してもかまいません。

🔹 理由

pip install streamlit は、
あなたの Python環境全体（グローバル） に対して
ライブラリ（streamlit）をインストールするコマンドです。

つまり、実行するディレクトリ（cd で移動した先）は関係ありません。

✅ よくある使い方の順番

pip install streamlit   ← どこでもOK（1回やれば済む）
cd "$env:USERPROFILE\Desktop\chatbot"  ← プログラムのある場所へ移動
streamlit run chatbot_web.py          ← 実行

✅ 今のあなたにおすすめの行動

# どこにいてもOK
pip install streamlit

# Webアプリのフォルダへ移動
cd "$env:USERPROFILE\Desktop\chatbot"

# Webアプリの実行
streamlit run chatbot_web.py

カレントディレクトリ

あなた:
ターミナルで、ディレクトリをもとに戻す方法はありますか？

ChatGPT:
はい、あります！ターミナルで ディレクトリ（カレントディレクトリ）を元に戻す方法はいくつかあります。
以下、Windows PowerShell（VS Codeのターミナル含む） を前提にご説明します。

✅ 1. 元のディレクトリに戻る基本方法
🔁 ひとつ前のディレクトリに戻るには：

cd -

直前にいたディレクトリへ戻れます。

もう一度 cd - を実行すると、元に戻ります。

✅ 2. 自分のホームディレクトリに戻るには

cd ~

または：

cd $env:USERPROFILE

これは、C:\Users\あなたのユーザー名\ に戻るコマンドです。

MacやLinuxでも cd ~ で同じ動作をします。

✅ 3. デスクトップに戻るには

cd "$env:USERPROFILE\Desktop"

✅ 4. いまの場所を確認したいときは

pwd

PowerShell では pwd（print working directory）で現在のディレクトリを表示できます。

📝 例：一連の流れ

cd "$env:USERPROFILE\Desktop\chatbot"  # chatbotフォルダへ
cd -                                   # ひとつ前の場所へ戻る
cd ~                                   # ホームディレクトリへ戻る
cd "$env:USERPROFILE\Desktop"          # デスクトップへ

何度も cd を繰り返すと迷子になることもありますが、
cd ~ や pwd を使えば落ち着いて立て直せます。

pipとは？

あなた:
pipとは、何かの略ですか？

ChatGPT:
はい、pip は略語です。
もともとは次のように言われています：

✅ pip の意味は？

"Pip Installs Packages"
（パッケージをインストールするPip）

または：

"Pip Installs Python"（やや古い表現）

これはいわば再帰的な略語（自己言及的な名前） です。
つまり「pip は pip という名前を使ってパッケージをインストールする」というジョークのような命名ですね。

✅ 何をする道具か？

pip は、Pythonのためのパッケージ管理ツールで、
外部のライブラリ（例：streamlit、openai、pandas など）を
インストール、更新、削除、一覧表示 できます。

🔍 よく使う pip コマンド

コマンド 説明
pip install パッケージ名 パッケージをインストールする
pip uninstall パッケージ名 パッケージを削除する
pip list インストール済みパッケージ一覧を表示する
pip show パッケージ名 パッケージの詳細を表示する
pip install -U パッケージ名 パッケージをアップデートする

✅ まとめ

pip は「Python用の図書館管理人」のような存在。
pip install で新しいツールをPythonに追加していきます。
Pythonに付属していることが多く、初心者から上級者まで広く使われています。

st.title(), st.write(), session_state, st.markdown

あなた:
st.title(), st.write(), session_state, st.markdown, についてそれぞれ教えていただけますか？

ChatGPT:
もちろんです！streamlitライブラリの基本的な関数と仕組みについて説明しますね。

  1. st.title()

  • 役割：Webアプリの画面に「タイトル」を表示するための関数です。

  • 使い方：引数に文字列を入れると、大きな見出しとして表示されます。

例：

st.title("やさしいAIチャットボット")

これでブラウザの画面に「やさしいAIチャットボット」という大きな見出しが表示されます。

  1. st.write()

  • 役割：テキストや数値、画像など様々なデータを画面に表示できる便利な関数です。

  • 使い方：引数に表示したい内容を渡します。文字列ならそのままテキスト表示されます。

例：

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

これで説明文のようなテキストを画面に表示できます。

  1. st.session_state

  • 役割：Webアプリを動かしている間の「状態（変数）」を保持するための仕組みです。

  • 背景：Streamlitはユーザーの操作ごとにプログラムを最初から実行し直す仕組みなので、普通に変数を使うと会話の履歴などが消えてしまいます。

  • 解決策：st.session_stateを使うと、そのユーザーの画面ごとに変数を保持し続けられるため、会話の履歴を管理できます。

例：

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

ここで「messages」という名前で会話の履歴リストを保持しています。

  1. st.markdown()
  • 役割：マークダウン形式（シンプルな書式付きテキスト）で画面に文字を表示します。

マークダウンとは？

文字の太字、斜体、リンク、リストなどを簡単に書ける記法です。

  • 使い方：引数にマークダウン形式の文字列を渡します。

例：

st.markdown(f"**あなた：** {msg['content']}")

ここでは ** で囲むことで「あなた：」を太字にして表示しています。

まとめると：

関数・仕組み 役割・説明
st.title() 画面の大きなタイトル（見出し）を表示
st.write() 文字や画像などを簡単に画面に表示
st.session_state ユーザーの操作間でデータ（変数）を保持する仕組み
st.markdown() マークダウン形式の装飾テキストを画面に表示

Webアプリの公開

あなた:
このWebアプリを公開する時は、どうするのですか？

ChatGPT:
いい質問ですね！Webアプリを公開して、他の人がブラウザから使えるようにするには、サーバーにアプリを「デプロイ（公開）」する必要があります。

ここでは簡単な流れと代表的な方法を紹介しますね。

1. デプロイの準備

  • Webアプリのコードが完成していること（今回の chatbot_web.py など）

  • APIキーは環境変数など安全な方法で管理すること

2. デプロイの方法（代表例）

A. Streamlit Community Cloud（無料で簡単）

  • Streamlit公式の無料クラウドサービスです

  • GitHubにコードをアップロードして連携するだけで公開できる

  • メリット：無料で簡単、初心者向き

  • デメリット：無料枠には制限あり

https://streamlit.io/cloud

B. Heroku（無料プランあり）

  • 汎用的なクラウドPaaS

  • Pythonアプリを簡単にデプロイ可能

  • 少し設定が必要（Procfile作成、Git連携など）

  • メリット：自由度高い、拡張しやすい

  • デメリット：無料プランはスリープすることもある

https://www.heroku.com/

C. その他のクラウド（AWS, GCP, Azure）

  • 大規模や商用利用向き

  • 設定・管理が難しい

  • 費用がかかる場合が多い

3. Streamlit Community Cloudで公開する簡単な手順

  • GitHubにリポジトリを作り、アプリのコード（chatbot_web.py や .env.exampleなど）をアップロード

  • Streamlit Cloud にアクセスし、GitHubと連携ログイン

  • 「New app」から公開したいリポジトリとブランチ、起動ファイル（chatbot_web.py）を指定

  • APIキーはStreamlitのSecrets管理機能で登録（.envはアップロードしない）

  • 「Deploy」で公開完了！

レンタルサーバは？

あなた:
さくらインターネットに個人用のサーバを持っていますが、そこに公開してもいいのですか？

ChatGPT:
さくらインターネットの個人用サーバに公開するのも全然アリです！
ただ、いくつかポイントがありますのでざっと説明しますね。

さくらインターネットサーバで公開するときのポイント

  1. サーバの種類・環境を確認

  • レンタルサーバ（共有ホスティング） だと、Pythonや独自のサーバプログラムを自由に動かせないことが多いです。

  • VPSや専用サーバなら自由に環境構築できるのでPythonアプリを動かせます。

  1. Python環境の準備

  • SSHでサーバにアクセスし、Pythonや必要なライブラリ（openai、streamlitなど）をインストール

  • 仮想環境（venvなど）を作ると管理が楽です

  1. Webサーバの設定

  • streamlitはローカルサーバを立てるので、公開には ポート開放 と リバースプロキシ（例: nginx） の設定が必要になる場合があります

  • 共有レンタルサーバは自由にポート開放できないことが多いです

  1. セキュリティに注意

  • APIキーはサーバ上の環境変数や設定ファイルで安全に管理

  • 不特定多数がアクセスできる場合、アクセス制限や認証をつけることも検討

  1. 運用と監視

  • サーバの負荷やログを定期的にチェック

  • サーバ障害や通信障害に備える

まとめ

  • VPSなど自由にサーバ環境を管理できるなら、さくらで公開は可能！

  • 共有レンタルサーバの場合は動作制限があるか確認が必要

  • 公開にはサーバ設定（ポート開放、プロキシ設定など）が必要になることが多い

サーバの種類（レンタル共有 or VPS）や今の環境を教えてもらえますか？

あなた:
契約しているのはレンタルサーバですね。

ChatGPT:
レンタルサーバの場合、残念ながら自由にPythonのサーバアプリ（streamlitなど）を直接公開するのは難しいです。

多くのレンタルサーバはPHPや静的サイト用に最適化されていて、外部から直接アクセス可能な任意のポートを開けなかったり、バックグラウンドで常駐するプログラムを動かせなかったりします。

じゃあどうする？

さくらのレンタルサーバに公開する場合は、PHPやWordPressなどがメイン。Pythonで作ったAIチャットボットは動かしづらい

  • もしPythonでWebアプリを動かしたいなら、VPS（仮想サーバ） の契約を検討したほうが良いです。

  • あるいは、前に話した Streamlit Community Cloud や Heroku などのPaaSサービスで公開するのが簡単＆無料枠も使えておすすめです。

まとめ

選択肢 特徴 難易度 無料枠の有無 おすすめ度
さくらレンタルサーバ PHP中心。Pythonの常駐不可 高い（制限多い） なし あまりおすすめしない
さくらVPS 自由に環境構築可能 中〜高 なし あり
Streamlit Community Cloud Streamlit向け無料ホスティング 低い あり 超おすすめ
Heroku Python アプリ向けPaaS 中 あり おすすめ

もし、PythonのAIチャットボットを簡単に公開してみたいなら、Streamlit Community Cloud から始めるのが一番楽で早いですよ！

必要なら公開手順やGitHub連携のサポートもできますので、教えてくださいね。

あなた:
「無料枠」には嫌な思い出があるので…。

ChatGPT:
なるほど、無料枠で不安やモヤモヤを感じてしまうのはすごくわかります。

だったら、無料枠に頼らず、
さくらVPSや他の有料レンタルサーバを使って自分のペースで安定運用する のも立派な選択肢です！

有料プランのメリット

  • APIキーやサービスの制限を気にせずに使える

  • 安定して24時間稼働できる

  • 自分で環境を自由にカスタマイズできる

  • プライバシー管理もしやすい

もちろんコストはかかるけど…

  • 月1000〜3000円程度のVPSプランなら、安定した運用も十分可能です。

  • 将来的に利用が増えても対応しやすいです。

まとめ

無料枠は気楽に試せる反面、いろいろ制限や不透明なところがあります。
逆に、有料プランで自分の環境を管理すれば、そのストレスはかなり減りますし、長期的には安定したサービス運用ができると思います。

公開するタイミング

あなた:
公開しつつ改良していくのと、非公開で改良していくのと、どちらがおすすめですか？

ChatGPT:
いい質問ですね！公開しつつ改良するか、非公開で改良するかは、それぞれメリット・デメリットがあります。目的や状況に合わせて選ぶのがベストです。

公開しつつ改良するメリット・デメリット
メリット

  • ユーザーのフィードバックがリアルタイムで得られる

    • 実際に使ってもらうことで改善点や新しいアイデアが見つかりやすい。

  • モチベーションが上がる

    • 「人に見られている」と思うと、完成度を上げたい気持ちが強くなる。

  • 早期トラブル発見・解決

    • 利用者からの報告でバグや問題を早く把握できる。

デメリット

  • バグや未完成な部分をユーザーに見られてしまう

    • 第一印象が悪くなるリスクがある。

  • 頻繁な更新がユーザーに影響を与える可能性

    • 仕様変更や不具合でユーザーが混乱することも。

  • プライバシーやセキュリティの注意が必要

    • 個人情報を扱う場合は特に。

非公開で改良するメリット・デメリット
メリット

  • 自分のペースでじっくり開発できる

    • 完成度が高くなるまで外に出さずに調整できる。

  • バグや問題をユーザーに見せずに済む

    • クオリティをある程度確保してから公開可能。

  • セキュリティやプライバシーを確実に守れる

デメリット

  • フィードバックが得られにくい

    • 客観的な意見をもらいにくく、見落としが出やすい。

  • モチベーションが保ちにくい場合がある

    • 公開プレッシャーがない分、開発が停滞しやすい。

  • ユーザー視点の課題を見逃しやすい

まとめ

  • もし早くユーザーの反応を知りたいなら「公開しつつ改良」が◎

  • まずは落ち着いてクオリティを高めたいなら「非公開で改良」がおすすめ

  • 実際は、非公開→限定公開→本公開と段階的に進めるのが一番安全で効果的です！

localhost:8501

あなた:
ブラウザのアドレスバーに、localhost:8501と書いてありますが、どういう意味でしょうか？

ChatGPT:
いい質問ですね！

localhost:8501 の意味

localhost
→ 「自分のパソコン」を指す特別な名前（IPアドレスで言うと 127.0.0.1）です。
→ 自分のPC上で動いているサーバーやサービスにアクセスするときに使います。

:8501
→ ポート番号（Port Number）と呼ばれるものです。
→ コンピュータは1台で複数の通信を同時に扱うため、どの「入り口」からアクセスするかを番号で区別しています。
→ Streamlitがデフォルトで使うポート番号が8501です。

まとめると

localhost:8501 は、
あなたのパソコン（localhost）で動いているStreamlitアプリ（8501番ポート）にアクセスしていますよ
という意味です。

例えば、もし同じネットワーク内の別のパソコンからアクセスしたい場合は、
localhost の代わりにそのPCのIPアドレスを使う必要があります。

Flask や FastAPI とは？

あなた:
Pythonのフレームワーク（たとえば Flask や FastAPI）を使って、Webサーバーを立てるとは、どういう意味でしょうか？

ChatGPT:
とても良い質問です！

🔧「PythonのフレームワークでWebサーバーを立てる」とは？

簡単に言うと…

自分の作ったPythonプログラムを、ブラウザからアクセスできるようにすること
そのために使う道具が Flask や FastAPI などの「Webフレームワーク」です。

例えるなら…

あなたのPythonプログラム（AIチャットボットなど）は「お店」のようなものです。

  • 🧠 プログラム → お店の中身（AIチャット、診断ツールなど）

  • 🖥️ Webブラウザ → お客さん（使いたい人）

  • 🛣️ Webサーバー（FlaskやFastAPI）→ 「道路」や「入り口」。お客さんがたどり着く道

つまり、FlaskやFastAPIは、「Pythonで作った機能をブラウザから使えるようにする橋渡し」 なんです。

🔄 FlaskやFastAPIでできることの例：
Flask 例（シンプルなWebアプリ）

from flask import Flask

app = Flask(__name__)

@app.route("/")
def home():
    return "こんにちは！これはFlaskで動いているWebサーバーです。"

if __name__ == "__main__":
    app.run(debug=True)

localhost:5000 で「こんにちは！」と表示されます。

Streamlitとの違いは？

項目 Streamlit Flask / FastAPI
用途 データアプリ、プロトタイプ 自由度の高いWeb API / サーバー
開発のしやすさ 超かんたん（コード書いて即実行） HTMLやAPIの設計が必要になる
向いているケース チャート・対話・ツール API化、ログイン、データ管理など

🧭 まとめ

Flask や FastAPI を使う＝自作のPythonプログラムを、他の人もWebで使えるようにするための仕組みを作ること。

本格的なWebサービスやアプリにしたいときに必要になるステップです。
Streamlitの次のステップとして、FlaskやFastAPIを学ぶのはとてもおすすめです。

その１０へ続く

Discussion