モブプロな人たちのブログ

横浜で Web サービス開発しているエンジニアの日記です。Python 大好き Flask 大好き。たまに SpriteKit でゲーム開発も。

Flask + Flask-SQLAlchemy のチュートリアルを日本語で (ユーザ表示機能編)

こんにちは、kaorr です。

一人アドベントカレンダー10日目です。

チュートリアル関連記事

はじめに

それでは、ユーザ表示機能を追加していきましょう!(ユーザ登録機能は次の記事の予定。)

ココからいよいよ、Flask-SQLAlchemy も登場します。

f:id:kaorr_mob:20171210213348j:plain

各ファイルの修正

  • hello.py ファイルを以下のようの修正します。
from flask import Flask, render_template
# SQLAlchemy を import
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)

# DB 周りの設定を追加、今回は準備が簡単な SQLite を利用
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///hello.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = True
db = SQLAlchemy(app)

# db.Model を継承して User クラスを定義、id と username のみのシンプル設計
class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(80), unique=True)

    def __init__(self, username):
        self.username = username


@app.route("/")
def hello():
    # ユーザ一覧をリスト型で取得
    user_list = User.query.all()

    # テンプレートにユーザ一覧を渡す
    return render_template('hello.html', user_list=user_list)

if __name__ == '__main__':
    app.run(debug=True)
  • templates/hello.html ファイルを以下のように修正します。
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello World!</title>
  <link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
  <div class="page">
    <h1>Hello World!</h1>
    <!-- ul でユーザ一覧を表示するようにする -->
    <ul class="users">
    <!-- user_list として渡されてきたリスト型データを1件ずつ処理し、li に入れる -->
    {% for user in user_list %}
      <li>Hello {{ user.username }}!</li>
    {% endfor %}
    </ul>
  </div>
</body>
</html>
  • static/style.css ファイルを以下のように修正します。
body {
  font-family: sans-serif;
  background: #eee;
}

h1 {
  color: #377ba8;
  font-family: 'Georgia', serif;
  margin: 0;
  border-bottom: 2px solid #eee;
}

.page {
  margin: 2em auto;
  width: 35em;
  border: 5px solid #ccc;
  padding: 0.8em;
  background: white;
}

/* ユーザ一覧表示用のスタイルを追加 */
.users {
  list-style: none;
  margin: 0;
  padding: 0;
}

.users li {
  margin: 0.8em 1.2em;
}

テスト用ユーザを手動で追加

  • flask-tutorial ディレクトリ内で以下のコマンドを実行し、Python インタプリタの対話モードに入ります。
python
  • Python インタプリタの対話モードで以下のコマンドを実行します。
# DB 周りを import
from hello import db, User

# DB ファイル本体を作成し、テーブル作成まで行う
db.create_all()

# admin ユーザオブジェクトを作成
user = User('admin')

# 上記のオブジェクトを DB セッションに追加
db.session.add(user)

# commit によって DB に保存
db.session.commit()

表示確認!!

  • ブラウザから http://127.0.0.1:5000/ にアクセスし、以下の表示になっていることを確認します。

f:id:kaorr_mob:20171210210814p:plain

先ほど登録した admin ユーザが、無事に Hello されましたね!

おわりに

今回は、手動で追加したユーザを画面上に表示するところまで進めました。

次回は、画面上からユーザ登録を出来るようにしたいと思います!