Flask実践｜ToDoアプリを作ろう【チャプター7-04】

pip install flask-login

from flask_login import LoginManager # インポート

# LoginManagerの作成とアプリ登録
login_manager = LoginManager()# インスタンス生成
login_manager.init_app(app)   # Flaskアプリに登録

# 未ログイン時のリダイレクト先設定
login_manager.login_view = 'auth.login'

# ユーザークラスの読み込み関数
@login_manager.user_loader
def load_user(user_id):
    return User.query.get(int(user_id))  # ユーザーIDからDB検索

todo_app/
├── app/
│   ├── __init__.py          # アプリケーションの初期化
│   ├── models.py            # データベースのモデル定義
│   ├── forms.py             # フォーム定義
│   ├── auth/
│   │   ├── __init__.py
│   │   ├── routes.py        # ユーザー登録・ログインなどのルーティング
│   │   └── templates/auth/
│   │       ├── login.html   # ログイン画面のテンプレート
│   │       └── register.html # 登録画面のテンプレート
│   └── todo/
│       ├── __init__.py
│       ├── routes.py        # タスク関連のルーティング
│       └── templates/todo/
│           ├── list.html    # タスク一覧表示テンプレート
│           ├── form.html    # タスク入力フォーム
│           └── base.html    # テンプレートのベース
├── config.py                 # アプリケーション設定
└── run.py                    # アプリケーション起動用スクリプト

from app import create_app  # アプリケーションのインスタンスを生成する関数をインポート

app = create_app()  # アプリケーションのインスタンスを作成（ファクトリーパターン）

if __name__ == "__main__":
    # このファイルが直接実行されたときだけ、開発サーバーを起動
    app.run(debug=True)  # デバッグモード有効：自動リロードや詳細エラーメッセージが有効になる

import os  # OSの機能を使うための標準モジュール

# このファイルのディレクトリを基準にパスを作成
basedir = os.path.abspath(os.path.dirname(__file__))

class Config:
    # セッション管理などに使われる秘密鍵（環境変数がなければデフォルト値を使用）
    SECRET_KEY = os.environ.get('SECRET_KEY', 'dev_secret_key')
    
    # データベースのURI（環境変数がなければSQLiteを使用）
    SQLALCHEMY_DATABASE_URI = os.environ.get('DATABASE_URI') or \
        'sqlite:///' + os.path.join(basedir, 'todo_app.db')
    
    # SQLAlchemyのイベント通知機能を無効化（パフォーマンス向上のため）
    SQLALCHEMY_TRACK_MODIFICATIONS = False

from flask import Flask, redirect  # Flask本体とリダイレクト機能をインポート
from flask_sqlalchemy import SQLAlchemy  # SQLAlchemyを使ったDB操作のための拡張
from flask_login import LoginManager  # ログイン管理を行う拡張
from config import Config  # アプリ設定が書かれたconfig.pyをインポート

# 拡張機能の初期化（まだFlaskアプリには関連付けない）
db = SQLAlchemy()
login = LoginManager()
login.login_view = 'auth.login'  # ログインが必要なページに未ログインでアクセスしたときのリダイレクト先

def create_app():
    app = Flask(__name__)  # Flaskアプリケーションのインスタンスを生成
    app.config.from_object(Config)  # Configクラスから設定を読み込む

    db.init_app(app)  # アプリにSQLAlchemyを登録
    login.init_app(app)  # アプリにLoginManagerを登録

    # アプリケーションコンテキスト内でルーティングなどを定義
    with app.app_context():
        # 認証機能とToDo機能のBlueprintをインポート
        from app.auth import bp as auth_bp
        from app.todo import bp as todo_bp

        # BlueprintをURLプレフィックス付きで登録
        app.register_blueprint(auth_bp, url_prefix='/auth')
        app.register_blueprint(todo_bp, url_prefix='/todo')

        # データベース内に必要なテーブルを全て作成
        db.create_all()

        # ルートURLにアクセスされたらToDoリスト画面にリダイレクト
        @app.route('/')
        def root():
            return redirect('/todo/')

    return app  # 初期化済みのFlaskアプリケーションを返す

from flask_wtf import FlaskForm  # Flask-WTFでのフォーム作成を支援
from wtforms import StringField, PasswordField, BooleanField, SubmitField  # フォームのフィールドをインポート
from wtforms.validators import DataRequired, Length, EqualTo, ValidationError  # 入力バリデーション
from app.models import User  # ユーザー重複チェックのためにUserモデルをインポート

# 新規ユーザー登録フォーム
class RegistrationForm(FlaskForm):
    username = StringField('ユーザー名', validators=[
        DataRequired(),  # 入力必須
        Length(min=1, max=64)  # 文字数制限
    ])
    password = PasswordField('パスワード', validators=[
        DataRequired(),
        Length(min=6)  # パスワードは6文字以上
    ])
    password2 = PasswordField('パスワード（確認）', validators=[
        DataRequired(),
        EqualTo('password')  # 一致しているか確認
    ])
    submit = SubmitField('登録')

    # ユーザー名が既に使用されていないかチェックする独自バリデーション
    def validate_username(self, username):
        user = User.query.filter_by(username=username.data).first()
        if user:
            raise ValidationError('このユーザー名は既に使用されています。')

# ログインフォーム
class LoginForm(FlaskForm):
    username = StringField('ユーザー名', validators=[DataRequired()])
    password = PasswordField('パスワード', validators=[DataRequired()])
    remember_me = BooleanField('ログイン状態を保持する')  # セッションを保持するかどうか
    submit = SubmitField('ログイン')

# ToDo作成・編集用フォーム
class TodoForm(FlaskForm):
    title = StringField('タイトル', validators=[
        DataRequired(),
        Length(max=120)  # タイトルの最大長
    ])
    submit = SubmitField('保存')

from app import db, login  # アプリで使うDBとログインマネージャをインポート
from flask_login import UserMixin  # Flask-Loginが必要とするユーザークラスのベース
from werkzeug.security import generate_password_hash, check_password_hash  # パスワードのハッシュ化・検証

# ユーザーモデル
class User(UserMixin, db.Model):
    id = db.Column(db.Integer, primary_key=True)  # 主キー
    username = db.Column(db.String(64), unique=True, nullable=False)  # 一意のユーザー名
    password_hash = db.Column(db.String(128), nullable=False)  # パスワードはハッシュで保存
    todos = db.relationship('Todo', backref='author', lazy='dynamic')  # ユーザーが所有するToDoの一覧

    # パスワードをハッシュ化して保存
    def set_password(self, password):
        self.password_hash = generate_password_hash(password)

    # 入力されたパスワードとハッシュが一致するか確認
    def check_password(self, password):
        return check_password_hash(self.password_hash, password)

# ログイン時に使われるユーザー読み込み関数
@login.user_loader
def load_user(id):
    return User.query.get(int(id))  # ユーザーIDからUserインスタンスを取得

# ToDoモデル
class Todo(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(120), nullable=False)  # タイトルは必須
    done = db.Column(db.Boolean, default=False)  # 完了済みかどうか
    user_id = db.Column(db.Integer, db.ForeignKey('user.id'))  # 紐づくユーザーID

from flask import Blueprint

# 'auth'という名前のBlueprintを作成。テンプレートの格納フォルダも指定。
bp = Blueprint('auth', __name__, template_folder='templates')

# ルーティング設定をインポートして有効化
from app.auth import routes

from flask import render_template, redirect, url_for, flash, request # 必要なFlaskの関数とモジュールをインポート
from flask_login import login_user, logout_user, login_required # Flask-Loginの機能：ユーザーのログイン・ログアウト管理
from app.auth import bp # Blueprintのインスタンスをインポート
from app import db # データベース操作に必要なインスタンス
from app.models import User # ユーザーモデルとフォームクラスをインポート
from app.forms import RegistrationForm, LoginForm

# 登録ページへのルート（/register）
@bp.route('/register', methods=['GET','POST'])
def register():
    form = RegistrationForm()  # フォームのインスタンス作成

    # フォームがPOSTされてバリデーションを通過したとき
    if form.validate_on_submit():
        # 入力されたユーザー名をもとに新しいUserオブジェクトを作成
        user = User(username=form.username.data)
        # パスワードはハッシュ化して保存（セキュリティ対策）
        user.set_password(form.password.data)
        # データベースに追加して保存
        db.session.add(user)
        db.session.commit()
        # フラッシュメッセージを表示（1回だけ表示される通知）
        flash('登録が完了しました。ログインしてください。')
        # ログインページへリダイレクト
        return redirect(url_for('auth.login'))

    # 初期表示またはバリデーション失敗時、登録フォームを表示
    return render_template('auth/register.html', form=form)

# ログインページへのルート（/login）
@bp.route('/login', methods=['GET','POST'])
def login():
    form = LoginForm()  # フォームのインスタンス作成

    # フォームがPOSTされてバリデーションを通過したとき
    if form.validate_on_submit():
        # 入力されたユーザー名を持つユーザーをデータベースから取得
        user = User.query.filter_by(username=form.username.data).first()
        # パスワードも含めて正しいか確認
        if user and user.check_password(form.password.data):
            # ログイン状態にする（remember_meはセッションの永続化用）
            login_user(user, remember=form.remember_me.data)
            # ログイン後にリダイレクトするURLを取得（指定がなければToDoページ）
            next_page = request.args.get('next') or url_for('todo.index')
            return redirect(next_page)
        # ログイン失敗時にメッセージ表示
        flash('ユーザー名またはパスワードが違います。')

    # 初期表示または失敗時にフォームを再表示
    return render_template('auth/login.html', form=form)

# ログアウト処理（/logout）
@bp.route('/logout')
@login_required  # ログインしていないとアクセスできない
def logout():
    logout_user()  # セッションからログアウト
    return redirect(url_for('auth.login'))  # ログインページへリダイレクト

{% extends 'todo/base.html' %}  <!-- 共通レイアウトのbase.htmlを継承 -->

{% block content %}
  <h2>ログイン</h2>
  <form method="post">  <!-- フォーム送信はPOSTメソッド -->
    {{ form.hidden_tag() }}  <!-- CSRFトークンの挿入（セキュリティ対策） -->
    <!-- ユーザー名入力 -->
    <p>{{ form.username.label }}<br>{{ form.username(size=32) }}</p>
    <!-- パスワード入力 -->
    <p>{{ form.password.label }}<br>{{ form.password(size=32) }}</p>
    <!-- ログイン状態を保持するチェックボックス -->
    <p>{{ form.remember_me() }} {{ form.remember_me.label }}</p>
    <!-- 送信ボタン -->
    <p>{{ form.submit() }}</p>
  </form>
{% endblock %}

{% extends 'todo/base.html' %}  <!-- 共通テンプレートを継承 -->

{% block content %}
  <h2>新規登録</h2>
  <form method="post">  <!-- POSTで送信 -->
    {{ form.hidden_tag() }}  <!-- CSRFトークン -->
    <!-- ユーザー名入力 -->
    <p>{{ form.username.label }}<br>{{ form.username(size=32) }}</p>
    <!-- パスワード入力 -->
    <p>{{ form.password.label }}<br>{{ form.password(size=32) }}</p>
    <!-- パスワード確認 -->
    <p>{{ form.password2.label }}<br>{{ form.password2(size=32) }}</p>
    <!-- 送信ボタン -->
    <p>{{ form.submit() }}</p>
  </form>
{% endblock %}

from flask import Blueprint

# 'todo' という名前のBlueprintを作成。テンプレートフォルダはこのディレクトリ内の 'templates'
bp = Blueprint('todo', __name__, template_folder='templates')

# このBlueprintにルーティングを登録するためにroutesモジュールを読み込む
from app.todo import routes

from flask import render_template, redirect, url_for, flash, request
from flask_login import login_required, current_user
from app.todo import bp  # このBlueprintに属する
from app import db
from app.models import Todo
from app.forms import TodoForm

# ToDo一覧表示
@bp.route('/')
@login_required  # ログインしていないとアクセスできない
def index():
    todos = current_user.todos.all()  # 現在のユーザーのタスクを取得
    return render_template('todo/list.html', todos=todos)

# タスク追加
@bp.route('/add', methods=['GET','POST'])
@login_required
def add():
    form = TodoForm()  # フォームのインスタンスを生成
    if form.validate_on_submit():  # POSTかつバリデーション成功時
        todo = Todo(title=form.title.data, author=current_user)  # タスク作成
        db.session.add(todo)  # データベースに追加
        db.session.commit()  # コミット
        flash('タスクを追加しました。')  # メッセージ表示
        return redirect(url_for('todo.index'))  # 一覧へリダイレクト
    return render_template('todo/form.html', form=form, title='新しいタスク')

# タスク編集
@bp.route('/<int:id>/edit', methods=['GET','POST'])
@login_required
def edit(id):
    todo = Todo.query.get_or_404(id)  # IDでタスク取得（存在しないと404）
    if todo.author != current_user:  # 他人のタスクにはアクセス不可
        flash('アクセス権がありません。')
        return redirect(url_for('todo.index'))
    form = TodoForm(obj=todo)  # フォームに初期値を設定
    if form.validate_on_submit():
        todo.title = form.title.data  # タイトルを更新
        db.session.commit()
        flash('タスクを更新しました。')
        return redirect(url_for('todo.index'))
    return render_template('todo/form.html', form=form, title='タスク編集')

# タスク削除
@bp.route('/<int:id>/delete', methods=['POST'])
@login_required
def delete(id):
    todo = Todo.query.get_or_404(id)
    if todo.author != current_user:
        flash('アクセス権がありません。')
    else:
        db.session.delete(todo)
        db.session.commit()
        flash('タスクを削除しました。')
    return redirect(url_for('todo.index'))

# タスク状態のトグル（完了/未完了）
@bp.route('/<int:id>/toggle', methods=['POST'])
@login_required
def toggle(id):
    todo = Todo.query.get_or_404(id)
    if todo.author == current_user:
        todo.done = not todo.done  # 状態を反転
        db.session.commit()
        flash('タスク状態を変更しました。')
    return redirect(url_for('todo.index'))

{% extends 'todo/base.html' %}  <!-- 共通のベーステンプレートを継承 -->

{% block title %} - {{ title }}{% endblock %}

{% block content %}
<h2>{{ title }}</h2>
<form method="post">
  {{ form.hidden_tag() }}  <!-- CSRF対策などの隠しフィールド -->
  <p>
    {{ form.title.label }}<br>
    {{ form.title(size=64) }}  <!-- 入力欄 -->
    {% for e in form.title.errors %}
      <span style="color:red">{{ e }}</span>  <!-- バリデーションエラー表示 -->
    {% endfor %}
  </p>
  <p>{{ form.submit() }}</p>  <!-- 送信ボタン -->
</form>
{% endblock %}

{% extends 'todo/base.html' %}

{% block title %} - ToDo一覧{% endblock %}

{% block content %}
<h2>ToDo一覧</h2>
<ul>
{% for todo in todos %}
  <li>
    <!-- 状態のトグルボタン -->
    <form method="post" action="{{ url_for('todo.toggle', id=todo.id) }}" style="display:inline">
      <button type="submit">{{ '✅' if todo.done else '☐' }}</button>
    </form>
    {{ todo.title }}

    <!-- 編集リンク -->
    [<a href="{{ url_for('todo.edit', id=todo.id) }}">編集</a>]

    <!-- 削除フォーム -->
    <form method="post" action="{{ url_for('todo.delete', id=todo.id) }}" style="display:inline">
      <button type="submit">削除</button>
    </form>
  </li>
{% else %}
  <li>タスクがありません。</li>
{% endfor %}
</ul>
{% endblock %}

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>ToDoアプリ{% block title %}{% endblock %}</title>
</head>
<body>
  <!-- ナビゲーションバー -->
  <nav>
    {% if current_user.is_authenticated %}
      {{ current_user.username }} さん |
      <a href="{{ url_for('todo.index') }}">ToDo一覧</a> |
      <a href="{{ url_for('todo.add') }}">追加</a> |
      <a href="{{ url_for('auth.logout') }}">ログアウト</a>
    {% else %}
      <a href="{{ url_for('auth.login') }}">ログイン</a> |
      <a href="{{ url_for('auth.register') }}">登録</a>
    {% endif %}
  </nav>
  <hr>

  <!-- Flashメッセージの表示 -->
  {% with msgs = get_flashed_messages() %}
    {% if msgs %}
      <ul>
        {% for m in msgs %}
          <li>{{ m }}</li>
        {% endfor %}
      </ul>
    {% endif %}
  {% endwith %}

  <!-- 子テンプレートが挿入するコンテンツ -->
  {% block content %}{% endblock %}
</body>
</html>