🎃

【仕上げと考察】このプロダクトは何を繋げたのか ～ChatGPT API 開発基礎 #8 ～

に公開
Python
振り返り
Streamlit
プロトタイピング
ChatGPT
tech

「ChatGPT API 開発基礎 ～ChatGPT APIをFastAPIとStreamlitで動かす～」第8回にして最終回。

今回は、Streamlit UIの整備・Git運用の練習・リポジトリ分割によるデプロイ安定化までをまとめ、 “ただ動くもの”から“魅せるプロダクト”へ進化させた記録です。

🗂️ 1. 導入（ストーリー層）

FastAPI × Streamlit 構成で外部公開まで完了。
次は**「見せられるポートフォリオ」**へのUI調整と開発基盤の整理。

最終回では、見た目改善だけでなく、開発者視点の工夫も含めてまとめました。

🛠️ 2. 課題定義（Problem Statement）

  • タイトルが開発用のままでプロダクト感がない

  • 説明文や入力例がなく、ユーザー体験が不親切

  • Streamlitコード変更時、FastAPI側（Render）が自動再起動されず手動対応が必要

🔧 3. 技術解法（Solution & Implementation）

🎨 UI改善

  • st.title() を st.markdown() に変更し、見た目を柔らかく調整

  • st.caption() でアプリ概要説明を追加

  • st.text_input() に placeholder を追加し、入力例を表示

  • Renderスリープ注意文を補足文として表示（st.write）

🤖 Git運用練習

  • ブランチ作成・checkout・commit・merge・削除まで一通り実施

  • 実務に備えたGitブランチ作業の体験学習として活用

🧩 リポジトリ分割

  • FastAPIとStreamlitを別GitHubリポジトリに分離

  • FastAPI: Render運用、Streamlit: Cloud連携

  • Streamlit pushでRender側まで巻き込まれないよう構成分離し、手動再起動を回避

💡 4. 設計意図（Design Intention）

  • 見た目の調整は、ユーザー体験を高めるだけでなく、作品としての完成度を底上げする

  • Git練習とUI改善を組み合わせることで、成果物と開発者スキルを同時強化

  • リポジトリ分割は今後の保守・デプロイ安定性を高める有効手段

✨ 5. 学び・気づき（Learning & Insights）

  • UIが多少雑でも、キャプションや例文があるだけで印象は大きく変わる

  • VSCode補完でStreamlitの学習効率が爆上がりした

  • GitHub push → Streamlit Cloud自動反映の快適さ

  • Gitブランチ運用は最初こそ戸惑うが、練習で理解が深まる

🔚 6. シリーズの終わりに

行政受付AIというテーマで始まったこのプロジェクトは、
技術実装だけでなく、設計・運用・見せ方まで多面的なチャレンジでした。

本連載はここで一区切りとしつつ、今後もChatGPTを活用した行政・公共系UXの模索は続きます。

📝 まとめ

「動くものを作る」から「見せられるプロダクトにする」まで。
Streamlit UI整備と開発環境分離を経て、行政受付AIサンプルはひとつの完成形に到達しました。

📘 これにてシリーズ完結です。
読んでくださった皆さま、ありがとうございました！

🚀 公開中のプロトタイプ

本記事で紹介したAPI・UIは、以下から体験できます（予告なく停止することがあります🙇‍♀️）。

🔗 Streamlit で公開中のGPT受付インタフェースはこちら

ご意見・使用感など、Zennのコメントでも大歓迎です。

📚 ChatGPT API 開発基礎（全8回）

#1 構想と環境構築 ｜ #2 FastAPI導入 ｜ #3 OpenAI統合 ｜ #4 UI試作 ｜ #5 POST通信 ｜ #6 公開テスト ｜ #7 本番環境 ｜ #8 仕上げと考察

Discussion