読者です 読者をやめる 読者になる 読者になる

[[ともっくす alloc] init]

ともっくすの雑多な日記と技術的なメモ

Flaskのチュートリアルをやってみる② 〜ビューから実行まで

前回の続き.

ビュー

エントリーページ

データベースに保存されている全てのエントリーの一覧のページ.ルートでもある.

以下をflaskr.pyに追記する.

@app.route('/')
def show_entries():
    cur = g.db.execute('select title, text from entries order by id desc')
    entries = [dict(title=row[0], text=row[1]) for row in cur.fetchall()]
    return render_template('show_entries.html', entries=entries)

データベースから全てのエントリーを取り出し,レンダリングテンプレートとしてshow_entries.htmlを指定している.

エントリー追加

エントリーを追加するためのページで,ログインしているユーザしかアクセスできない.

以下をflaskr.pyに追記する.

@app.route('/add', methods=['POST'])
def add_entry():
    if not session.get('logged_in'):
        abort(401)
    g.db.execute('insert into entries (title, text) values (?, ?)',
                 [request.form['title'], request.form['text']])
    g.db.commit()
    flash(u'新しいエントリーが追加されました')
    return redirect(url_for('show_entries'))

POSTリクエストのみが受け付けられ,エントリーの追加処理が正常終了するとshow_entriesページにリダイレクトされる.

ユーザがログインしているかどうかの判定には,sessionのlogged_inを使用している.

ログインとログアウト

ユーザのログインとログアウトを行うためのページ.

以下をflaskr.pyに追記する.

@app.route('/login', methods=['GET', 'POST'])
def login():
    error = None
    if request.method == 'POST':
        if request.form['username'] != app.config['USERNAME']:
            error = u'ユーザ名が間違っています'
        elif request.form['password'] != app.config['PASSWORD']:
            error = u'パスワードが間違っています'
        else:
            session['logged_in'] = True
            flash(u'ログインしました')
            return redirect(url_for('show_entries'))
    return render_template('login.html', error=error)

@app.route('/logout')
def logout():
    session.pop('logged_in', None)
    flash(u'ログアウトしました')
    return redirect(url_for('show_entries'))

ログインには,ユーザ名とパスワードを利用して行ない,sessionにlogged_inのキーで設定がセットされる.

で,ログイン済みの場合は,ユーザはshow_entriesページにリダイレクトされる.

そして,追加メッセージでユーザにログインが成功した事が通知され,エラーが発生した場合はユーザに再度入力を求める.

ログアウト処理はsessionからkeyを削除することで行う.

テンプレートとスタイルシート

テンプレートとしてJinja2を用いる.

以降のファイルを作成する.

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>
  <div class="metanav">
  {% if not session.logged_in %}
    <a href="{{ url_for('login') }}">ログイン</a>
  {% else %}
    <a href="{{ url_for('logout') }}">ログアウト</a>
  {% endif %}
  </div>
  {% for message in get_flashed_messages() %}
    <div class="flash">{{ message }}</div>
  {% endfor %}
  {% block body %}{% endblock %}
</div>

show_entries.html

各エントリを表示するためのテンプレート.

{% extends "layout.html" %}
{% block body %}
  {% if session.logged_in %}
    <form action="{{ url_for('add_entry') }}" method="post" class="add-entry">
      <dl>
        <dt>タイトル:
        <dd><input type="text" size=30 name="title">
        <dt>本文:
        <dd><textarea name="text" rows=5 cols=40></textarea>
        <dd><input type="submit" value="追加">
      </dl>
    </form>
  {% endif %}
  <ul class="entries">
  {% for entry in entries %}
    <li><h2>{{ entry.title }}</h2>{{ entry.text|safe }}
  {% else %}
    <li><em>マジか! エントリーなんて無かったんだ…</em>
  {% endfor %}
  </ul>
{% endblock %}

login.html

ログイン画面用のテンプレート.

{% extends "layout.html" %}
{% block body %}
  <h2>ログイン</h2>
  {% if error %}<p class="error"><strong>エラー:</strong> {{ error }}{% endif %}
  <form action="{{ url_for('login') }}" method="post">
    <dl>
      <dt>ユーザ名:
      <dd><input type="text" name="username">
      <dt>パスワード:
      <dd><input type="password" name="password">
      <dd><input type="submit" value="ログイン">
    </dl>
  </form>
{% endblock %}

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
>>> from flaskr import init_db
>>> init_db()

そして,flaskr.pyを実行する.

$ python flaskr.py
 * Running on http://127.0.0.1:5000/
 * Restarting with reloader

で,http://127.0.0.1:5000/にアクセスすると,こんな画面になっている.
f:id:o_tomox:20131127184519p:plain

で,ログイン画面.
f:id:o_tomox:20131127184541p:plain

ログインできた.
f:id:o_tomox:20131127184611p:plain

エントリーを追加してみる.
f:id:o_tomox:20131127184628p:plain

追加できた.
f:id:o_tomox:20131127184641p:plain

たくさん追加してみる.
f:id:o_tomox:20131127184657p:plain

で,ログアウト.
f:id:o_tomox:20131127184716p:plain

うん,いい感じ.

所感

すごく簡単.

これだけで,こんな簡単な簡易ブログができるのはいい.

モックアップとか,ちょー簡単なWebアプリとか作るなら,Flaskで十分って感じ.

少し規模が大きくなってくるとどうかはわからない.

一つのファイルにまとめて記述できる点が一長一短って感じかな.

Pyramidと比べると,やっぱり手軽なのが素晴らしい.

マイクロフレームワークと名乗るだけはある.

Pyramidとの比較とかもいい感じでできたらいいなとか思っている.

終わり.

GitHub > o-tomox/flaskr · GitHub