Flask-Bootstrapを使ってみる

前回のつづき

pythonでWebアプリケーションをつくる場合、Flaskが便利。

Webアプリケーションでは、デザインを定義するためにCSSが必要だが意外とめんどくさい。 そこで定義済みのCSSフレームワークを使用することで、手間を軽減することができる。

そのうちの一つにBootstrapがある。

Flaskの使い方を探してみると、htmlファイルの作成時にBootstrapを使用している例が多い。

Flask-Bootstrapを使用すると、更にhtmlファイルの記述量を減らすことができる。

インストールは例によってpipでできるので省略する。

使い方

使い方の例を探してみると、簡単に書けるせいかいきなり凝ったものが多く、 意外とこれと言ったものがなかった。

ここでは何も凝らずに、ものすごく単純なものを作成する。

ディレクトリ構成

ディレクトリ構成はFlaskの時と同じ。

.
├── bootstrap.py
└── templates
    └── bootstrap.html

bootstrap.py(pythonスクリプト)

# coding: utf-8
from flask import Flask, render_template
from flask_bootstrap import Bootstrap

app = Flask(__name__)
bootstrap = Bootstrap(app)


@app.route('/')
def index():
    return render_template('bootstrap.html')


if __name__ == '__main__':
    app.run()

基本はFlaskの時と同じで、Bootstrapオブジェクトの作成が追加されている。 サイトのルートにアクセスすると、「bootstrap.html」の内容を返す。

bootstrap.html(htmlファイル)

たったこれだけの記述で、Bootstrapを使用したWebページを作成することができる。

{% extends "bootstrap/base.html" %}

{% block title %}Hello{% endblock %}

{% block content %}
<div class="container">
    <div class="page-header">
    <h1>Hello World!</h1>
    </div>
</div>
{% endblock %}

実体は、{% block content %}〜{% endblock %}の間の部分だけ。

{% extends "bootstrap/base.html" %}の行で、Flask-Bootstrapが予め定義しているテンプレートを参照しており、 この中で、BootstrapのCSSの定義や基本的なレイアウトが定義されている。

共通のテンプレートを参照することで、デザインの統一もより簡単に行なうことができる。

Flaskの機能も健在なのでjinja2の記法によって、pythonスクリプトからのデータの受け渡しも行なうことができる。