FlaskでBootstrapを使ってみよう
https://gyazo.com/49b03787c0e32bbc771f1e7e7da2d052
Bootstrap について
Webアプリケーションでは、CSSを使うとコードを変更せずにデザインや外観の定義や変更を行うことができます。しかし、CSSの定義は独特の記述でわかりやすいものではなく、面倒な作業が必要になってしまいます。こうしたときに、Bootstrap のような定義済のCSSフレームワークを利用すると作業効率が高くなります。
Bootstrap はもともとTwitter社内で作られたもので、ひろく利用されています。Bootstrap を使うと、Webアプリケーションをスマートフォンやタブレットなどに簡単に対応させることができるようになります。
Flask-Bootstrap について
Flaskから利用する場合テンプレートの定義で Bootstrap を使用しますが、Flask-Bootstrap を利用すると記述がさらに簡潔になり保守がしやすくなります。
この資料を書いている時点での、Bootstrap のメジャーバージョンは4です。Flask-Bootstrap は Bootstrap3 に対応しているものです。後方互換がないこともあり、Flask-Bootstrap も多数の派生バージョンがあります。
わたしが調べた範囲では Flask-BS4 が新しいBootstrap4 に対応していることと、組み込まれているパッケージが多いのでお勧めです。 table: Flask-Bootstrap4 と Flask-BS4の比較
バージョン Flask-Bootstrap4 Flask-BS4
PyPI公開バージョン 4.0.2 4.4.1.6
Bootstrap 4.0.0 4.4.1
popper 1.12.9 1.16.0
JQuery 3.2.1 3.4.1
Respond.js なし 1.4.2
HTML5SHIV なし 3.7.3
ただ、 Flask-Bootstrap とパッケージ名が異なることと、Bootstrap ほかのパッケージ
も新しくする必要も多いため、CDN(Content Delivery Network)から更新する方法と、フロントエンドで使用されるモジュールの追加更新方法について説明しておきます。
補足説明
JQeury
JavaScriptコードを簡単に記述できるようにするためのJavaScriptライブラリ
popper.js
簡単に吹き出しのようなパーツを作れるJavaScriptのライブラリ
HTML5SHIV
古いWindows IE でHTML5対応のページを表示させるためのもの
Respond.js
ディスプレイサイズ（特に横幅）に合わせてデザインを最適化する
１つのURLで全てのデバイスに対応できる
Flask-Bootstrap4 のインストール
まず、Flask-Bootstrap4 をインストールしましょう。
code: bash
$ pip install flask-bootstrap4
site-packages/flask_bootstrap/__init__.py のバージョンを指定している部分を修正します。それぞれのバージョンはこの資料作成時で最新のものです。
code: python
__version__ = '4.4.1'
BOOTSTRAP_VERSION_RE = re.compile(r'(\d+\.\d+\.\d+(\-a-z+)?)') POPPER_VERSION = '2.3.3'
JQUERY_VERSION = '3.5.0'
HTML5SHIV_VERSION = '3.7.3'
RESPONDJS_VERSION = '1.4.2'
# ...
html5shiv = lwrap(
WebCDN('//cdnjs.cloudflare.com/ajax/libs/html5shiv/%s/' %
HTML5SHIV_VERSION), local)
respondjs = lwrap(
WebCDN('//cdnjs.cloudflare.com/ajax/libs/respond.js/%s/' %
RESPONDJS_VERSION), local)
'cdns': {
'local': local,
'static': static,
'bootstrap': bootstrap,
'jquery': jquery,
'html5shiv': html5shiv,
'respond.js': respondjs,
'popper.js': popperjs
},
}
site-package/flask_bootstrap/templates/base.html のCDNの部分を修正します。
code:HTML
{% block scripts %}
<script src="{{ bootstrap_find_resource('jquery.js', cdn='jquery') }}"></script>
<script src="{{ bootstrap_find_resource('ums/popper.js', cdn='popper.js') }}"></script>
<script src="{{ bootstrap_find_resource('respond.js', cdn='respond.js') }}"></script>
<script src="{{ bootstrap_find_resource('html5shiv.js', cdn='html5shiv') }}"></script>
<script src="{{ bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap') }}"></script>
<script>
このあと、Flaskアプリケーションが起動すると自動的に更新されます。
Flask-BS4についても同じ方法で更新することができます。
Flask-Bootstrap4の初期化
Flask-Bootstrap の使用方法はFlaskを初期化したあとにFlask-Bootstrapを初期化しておきます。
code: Python
from flask import Flask
from flask_bootstrap import Bootstrap
app = Flask(__name__)
# ...
bootstrap = Bootstrap(app)
これで、すべてのBootstrapリソースを含んだコンテンツを配置できる定義済みのブロックを持ついくつかの新しいテンプレートが利用可能になります。
table: Flask-Bootstrap4で使用可能なブロック
ブロック名 出力ブロック 説明
doc もっとも外側のブロック
html doc <html>タグの完全なコンテンツが含まれます
html_attribs doc <html>タグのアトリビュート
head doc <head>タグの完全なコンテンツが含まれます
body doc <body>タグの完全なコンテンツが含まれます
body_attribs body <body>タグのアトリビュート
title head <title>タグの完全なコンテンツが含まれます
styles head CSSスタイルの<link>タグがヘッダ部分含まれます
metas head <meta>タグがヘッダ部分含まれます
navbar body コンテンツのすぐ上にあるブロック
content body ボディ部分のブロックでここにコンテンツを配置します
scripts body ボディ部分に配置されるすべての<script>タグが含まれます
https://gyazo.com/4bf1f7da38f7f16b215866450507d24e
Flask-Bootstrap4 の利用例
Flask-Bootstrap4 は Flask-WTFおよび WTForms に対応しているため、フォームのテンプレートが簡潔に記述することができます。
普通、フォームのためのテンプレートは次のようになるはずです。
code: HTML
{% extends "base.html" %}
{% block content %}
<h1>Sign In</h1>
<form action="" method="post" novalidate>
{{ form.hidden_tag() }}
<p>
{{ form.username.label }}<br>
{{ form.username(size=32) }}<br>
{% for error in form.username.errors %}
<span style="color: red;">error }}</span>
{% endfor %}
</p>
<p>
{{ form.password.label }}<br>
{{ form.password(size=32) }}<br>
{% for error in form.password.errors %}
<span style="color: red;">error }}</span>
{% endfor %}
</p>
<p>{{ form.submit() }}</p>
</form>
{% endblock %}
これが、Flask-Bootstrap4を使うと次のように簡潔に記述することができます。
code: HTML
{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block content %}
<h1>Sign In</h1>
<form action="" method="post" novalidate>
{{ form.hidden_tag() }}
{{ wtf.quick_form(form) }}
</form>
{% endblock %}
また、継承するベーステンプレートを bootstrap/base.hml に変更すると、
Bootstrap に事前に定義されているスタイルに変更されます。
https://gyazo.com/d4dfd0add1741a3533aff0655b0d39ff
参考：
古いWindows IE でHTML5対応のページを表示させるためのもの
ディスプレイサイズ（特に横幅）に合わせてデザインを最適化する
１つのURLで全てのデバイスに対応できる