flaskチュートリアルをやってみた

タイトルにもある通りFlaskのチュートリアルを進めたのですが、日本語版チュートリアルは情報が古くうまく動かない部分などがあったため、それらの点を解説しつつブログアプリflaskrを作成していきます。

#step0
チュートリアルではディレクトリ構成を解説しています。
この点は問題はありません。

manage.py
requirements.txt
flaskr/
  |- __init__.py
  |- config.py
  |- views.py
  |- models.py
  |- static/
      |- style.css
  |- templates/
      |- layout.html
      |- show_entries.html

特筆するまでもないですが、flaskはtemplates以下のhtmlファイルを参照するようにできているのでそれ以外のフォルダ名だと動きません。

##requirements.txt
ここも問題はありません。

Flask
Flask-SQLAlchemy

以下のコマンドでインストールしてください。

pip install -r requirements.txt

##manage.py

このファイルを実行することでflaskrというブログアプリを動かします。

from flaskr import app
app.run(host='127.0.0.1', port=5000, debug=True)

##flaskr/init.py
ここでは1つ注意する点があります。
チュートリアル通りに作成すると実行した際に以下のようなエラーが起きます。

ModuleNotFoundError: No module named 'flask.ext'

flask.ext.sqlalchemyの使用はあまり推奨されていないようです。
そのため、2行目を以下のように変更することでこのエラーは解消されます。

from flask import Flask
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config.from_object('flaskr.config')

db = SQLAlchemy(app)

import flaskr.views

flaskr/config.py

データベースの設定とセッション情報を暗号化するための情報などまとめてconfigfileで管理することができます。

SQLALCHEMY_DATABASE_URI = 'sqlite:///flaskr.db'
SECRET_KEY = 'secret key'

step1

ここからデータベースを作成していくみたいです。

flaskr/models.py

from flaskr import db

class Entry(db.Model):
    __tablename__ = 'entries'
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.Text)
    text = db.Column(db.Text)

    def __repr__(self):
        return '<Entry id={id} title={title!r}>'.format(
                id=self.id, title=self.title)

def init():
    db.create_all()

注意点として、上記のコードを書いた段階ではまだデータベースはできていません。
その状態でアプリを起動すると以下のようなエラーが表示されます。

sqlalchemy.exc.OperationalError: (sqlite3.OperationalError) no such table: entries

忘れずにターミナルで以下のように打ち込んでデータベースファイルの作成を行なってください。

$ python
>>> from flaskr.models import init
>>> init()

チュートリアルではここで動作の確認を行なっていますが、これはやってもやらなくても問題ありません。

step2

ここではブログの一覧と投稿画面を作ります。

flaskr/views.py

ここも特に問題はありません。チュートリアルの通り進めてください。


from flask import request, redirect, url_for, render_template, flash
from flaskr import app, db
from flaskr.models import Entry

@app.route('/')
def show_entries():
    entries = Entry.query.order_by(Entry.id.desc()).all()
    return render_template('show_entries.html', entries=entries)

@app.route('/add', methods=['POST'])
def add_entry():
    entry = Entry(
            title=request.form['title'],
            text=request.form['text']
            )
    db.session.add(entry)
    db.session.commit()
    flash('New entry was successfully posted')
    return redirect(url_for('show_entries'))

step3

htmlとcss、ブログの機能ではなくて表側をいじっていきます。

##flaskr/template/layout.html


<!doctype html>
<title>Flaskr</title>
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">
<div class=page>
  <h1>Flaskr</h1>
  {% for message in get_flashed_messages() %}
    <div class=flash>{{ message }}</div>
  {% endfor %}
  {% block body %}{% endblock %}
</div>

##flaskr/templates/show_entries.html

{% extends "layout.html" %}
{% block body %}
  <form action="{{ url_for('add_entry') }}" method=post class=add-entry>
    <dl>
      <dt>Title:
      <dd><input type=text size=20 name=title>
      <dt>Text:
      <dd><textarea name=text rows=5 cols=20></textarea>
      <dd><input type=submit value=Share>
    </dl>
  </form>

  <ul class=entries>
  {% for entry in entries %}
    <li><h2>{{ entry.title }}</h2>{{ entry.text|safe }}
  {% else %}
    <li><em>Unbelievable.  No entries here so far</em>
  {% endfor %}
  </ul>
{% endblock %}

##flaskr/static/style.css


body            { font-family: sans-serif; background: #eee; }
a, h1, h2       { color: #377ba8; }
h1, h2          { font-family: 'Georgia', serif; margin: 0; }
h1              { border-bottom: 2px solid #eee; }
h2              { font-size: 1.2em; }

.page           { margin: 2em auto; width: 35em; border: 5px solid #ccc;
                  padding: 0.8em; background: white; }
.entries        { list-style: none; margin: 0; padding: 0; }
.entries li     { margin: 0.8em 1.2em; }
.entries li h2  { margin-left: -1em; }
.add-entry      { font-size: 0.9em; border-bottom: 1px solid #ccc; }
.add-entry dl   { font-weight: bold; }
.metanav        { text-align: right; font-size: 0.8em; padding: 0.3em;
                  margin-bottom: 1em; background: #fafafa; }
.flash          { background: #cee5F5; padding: 0.5em;
                  border: 1px solid #aacbe2; }
.error          { background: #f0d6d6; padding: 0.5em; }

あとはチュートリアルの最後にあるように以下のように打ち込むことで問題なく動くと思われます。

python manage.py

#　自分がつまづいた点

##その１

No module named flask

上記のようにエラーが出た場合はpythonのバージョンが混在している等の問題がある可能性があります。

非常に基本的な部分なのですがmacだと初期状態でpythonが2.7なのでpython3をデフォルトにする必要がありました。（必須ではないのですがpython3で統一している方が何かと便利なので）

基本的に上のリンクに従って進めて、もしもエラーが出てしまった場合は下のリンクで解決できると思います。

##その２

OSError: [Errno 48] Address already in use

上記のエラーはアプリを前回起動した時のプロセス（なんか邪魔なものくらいの認識で大丈夫です）が残っている状態です。アプリを起動している状態でコードをいじったりしてまうとこのようになる可能性があります。

$ lsof -i:5000

そのためこのようにターミナルで打ち込んで使用中のプロセスを切ってあげましょう。

python3.7 23820 kinouchiyuta    3u  IPv4 0xa9d666bd1529b1a1      0t0  TCP localhost:commplex-main (LISTEN)
python3.7 23836 kinouchiyuta    3u  IPv4 0xa9d666bd1529b1a1      0t0  TCP localhost:commplex-main (LISTEN)
python3.7 23836 kinouchiyuta    4u  IPv4 0xa9d666bd1529b1a1      0t0  TCP localhost:commplex-main (LISTEN)

このように使用中のプロセスが出てきたら

$ kill -9  [該当のID]

今回だと以下のように打ち込めば問題ないですね。

$ kill -9 23820
$ kill -9 23836