0. まず知っておきたいこと
- コマンドプロンプト（cmd）：黒い画面。ここに文字（コマンド）を打って、パソコンに「こうして」とお願いする場所。
- Anaconda Prompt：Anaconda（アナコンダ）というセットの中の黒い画面。中のPythonを使う。
- 今回の方針：Anacondaは使わず、Windowsの コマンドプロンプト と 公式のPython で進める。混ぜないほうがトラブルが少ない。
- 仮想環境（venv）：このアプリ専用の小さな箱。中に必要な部品（ライブラリ）を入れる。
ことばの意味は少しずつ出てきます。今は「書いてある通りにやる」で大丈夫です。
1. Python が入っているか確認 & 入っていない場合の手順
1-1. 確認（やる理由：無いなら入れる、あるならそのまま進むため）
- cmd または PowerShell を開き、次を入力：
cmd
python --version
py -V
pip --version
- どれか1つでもバージョンが出れば OK。
- 何も出ない／Microsoft Store が開く → 未インストール。
1-2. インストール（やる理由：cmd から素直に python/pip を使えるようにする）
- 公式インストーラをダウンロード（64bit Windows）
https://www.python.org/ftp/python/3.13.7/python-3.13.7-amd64.exe - インストーラの最初の画面で
「Add python.exe to PATH」 に必ずチェック → Install - 終了後、もう一度 cmd で確認：
cmd
python --version
pip --version
→ バージョンが出たら OK。
2. プロジェクト用フォルダを作ろう（なぜ：作品を1箱にまとめる）
- どこで作ってもいいですが、ドキュメント直下が無難です（権限トラブル回避）。
- コマンド：
cmd
mkdir my_ai_app
cd my_ai_app
my_ai_appは自分の好きな名前にしてね！
- VS Code を今の場所で開く（超便利）：
cmd
code .
※一度 VS Code 側で「Shell Command: Install 'code' command in PATH」を実行しておくと使えます。
3. 仮想環境を作る（なぜ：このアプリ専用の部品置き場にする）
- 作成：
python -m venv .venv
- 失敗したら：
py -m venv .venv
- 有効化：
.\.venv\Scripts\activate
→ 先頭に (.venv) が出れば成功（以後の python/pip はこの箱の中のものになります）。
- 無効化（箱から出る）：
deactivate
よくあるミス：
(.venv)表示が無いままpip installし、PC全体へ入れてしまう。毎回、作業前に有効化を確認。
4. 6ファイルと3フォルダを作る（なぜ：最小で動かしつつ役割を分ける）
最終形
my_ai_app/
│── app.py
│── requirements.txt
│── .env
│
├── services/
│ └── ai_function.py
│
├── templates/
│ └── index.html
│
└── static/
└── style.css
4-1. 3フォルダを作る（CLI or VS Code）
- CLI（cmd/PowerShell）：
cmd
mkdir services templates static
-
VS Code：
左ペインでmy_ai_appを右クリック → 新規フォルダー →services/templates/static
4-2. 6ファイルのテンプレートと役割
1. app.py
作成方法
-
CLI (cmd)：
notepad app.py -
PowerShell：
ni app.py -ItemType File -
VS Code： 右クリック → 新規ファイル →
app.py
役割
- Flaskアプリの司令塔。
- ルーティング（どのURLで何を返すか）を決め、必要に応じてAI機能を呼び出す。
何を書くか
app.py
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def index():
return render_template("index.html")
if __name__ == "__main__":
app.run(debug=True)
2. requirements.txt
作成方法
-
CLI：
notepad requirements.txt -
VS Code： 右クリック → 新規ファイル →
requirements.txt
役割
- 必要なライブラリをメモするファイル。
-
pip install -r requirements.txtで一括インストールできる。
何を書くか
requirements.txt
flask
👉 他に必要になれば追記（例：requests, python-dotenv）。
3. .env
作成方法
-
CLI：
notepad .env -
VS Code： 右クリック → 新規ファイル →
.env
役割
- 秘密情報（APIキーなど）を置く場所。GitHub公開禁止。
何を書くか
.env
# APIキーなどを記載します。今回は空でOK
4. services/ai_function.py
作成方法
-
CLI：
notepad services\ai_function.py -
VS Code： services フォルダ内で新規ファイル →
ai_function.py
役割
- AIの中身を1つだけ定義する。
-
app.pyから呼び出され、結果を返す。
何を書くか
services/ai_function.py
def run_ai(text: str) -> str:
return "まだAI機能は実装されていません"
5. templates/index.html
作成方法
-
CLI：
notepad templates\index.html -
VS Code： templates フォルダ内で新規ファイル →
index.html
役割
- 画面（HTML） を記述。
- 入力フォームや結果表示を作る場所。
何を書くか
templates/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>My Flask App</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<h1>ようこそ</h1>
<p>このページは Flask で表示しています（AI機能はまだ未実装）。</p>
</body>
</html>
6. static/style.css
作成方法
-
CLI：
notepad static\style.css -
VS Code： static フォルダ内で新規ファイル →
style.css
役割
- 見た目（デザイン） を管理。
- 文字サイズや色、余白などを指定。
何を書くか
static/style.css
/* CSSのテンプレート。ここにデザインを追加予定 */
body {
font-family: sans-serif;
margin: 20px;
}
h1 {
color: #333;
}
5. 機能追加のときのファイル別まとめ
AI機能を追加するとき
ルール：services/ai_function.py にまとめる。
app.py
-
from services.ai_function import run_aiを追加 - ルート
/にmethods=["GET","POST"]を付ける -
request.form.get("user_input")で入力を受け取る -
run_ai(text)を1回だけ呼んで結果をrender_templateに渡す - 外部APIなら
from dotenv import load_dotenv; load_dotenv()も入れる
templates/index.html
-
<form method="POST">を追加 -
<textarea name="user_input"></textarea>を置く（nameが重要） -
{% if result %} {{ result }} {% endif %}で結果を表示 - ファイルを扱う場合は
<form enctype="multipart/form-data">と<input type="file" name="csv_file">を追加
services/ai_function.py
-
run_ai(text)を必ず1つ定義 - ローカル処理 or API呼び出し or CSV処理など、やることをこの関数に書く
- 入力が空やエラーのときは「入力が空です」「APIエラー」などの文字列を返す
requirements.txt
- 最初は
flaskのみ - APIを使うなら
requests,.envを読むならpython-dotenv - CSVを使うなら
pandas
.env
- APIキーを追記（例：
OPENAI_API_KEY=xxxxx）
static/style.css
- フォームや結果表示の見た目を整える（任意）
非AI機能を追加するとき（例：投稿機能・タスク管理）
ルール：処理は services、画面は templates、司令塔は app.py に分ける。
app.py
- 新しいルートを追加（例：
/tasks） - GET：services の関数から一覧をもらってテンプレートに渡す
- POST：フォームの入力を受け取って services に保存処理を任せる
templates/
- 新しい画面を作る（例：
tasks.html） - 投稿フォームと一覧表示を用意
-
{{ 変数 }}で app.py から渡されたデータを表示
services/
- 新しいファイルを作る（例：
task_service.py） - 投稿を保存する関数、一覧を返す関数を実装
- 初めはリスト変数でOK、あとからDBに置き換えやすい
static/style.css
- 投稿フォームや一覧の見た目を整える
requirements.txt / .env
- 非AI機能なら基本的に追加不要（DBを使う場合は
SQLAlchemyなど追記する）