flask: flask-bootstrapの使い方と解説

これまで、flask_bootstrapを知らずにCDNからbootstrapを使い続けてきたんですが、ついこの間このモジュールを知って一回試してみようと言うテンションで使い方やどんなモジュールかの解説記事を書いてみたいと思います。

いや、最悪別にbootstrap CDN使えばいいっすよ。あと、bootstrapなんかでデザインしたくないと言う方は無視していただければ。。

私はデザインが非常に苦手で、かつbootstrapさんサンプルが非常に便利、と言うかサンプルコード貼り付ければその通りのコンテナがグリッド単位で出来上がってくるので考えなくていいので、いまだに愛用しつつづけています。

本業プログラマーの方はチームにデザイナーがいるからいいですよねぇ、私が遊びで作るプロダクトは誰もデザインとフロント実装してくれないので、ついつい慣れたbootstrapに行き着くんです。

そもそもBootstrapとは？
1. Bootstrapを使うメリットは？
flask_bootstrapとは？
flask_bootstrapのインストール方法
flask_bootstrapの使い方
ファイル構成の説明
flask_bootstrapをインストールすると自動作成されるファイル(site-packagesをみてみる）
flask_bootstrap > templates > bootstrap > base.htmlの中身は？
利用可能なブロック一覧
まとめ

そもそもBootstrapとは？

Bootstrapとはあの皆さん大好きTwitter社が開発したCSSのフレームワークです。

一般的にCSSを当てる場合、全スタイルを自分で実装していく必要があります。結構めんどくさいです。

そこで、Bootstrapと言うフレームワークを使うと、よく使われるスタイルがあらかじめ定義してあるので、ルールに沿って利用するだけで整ったデザインのページを作成できます。フレームワークですから。

Bootstrapを使うメリットは？

最大のメリットはレスポンシブデザインに対応しているところだと思ってます。

CSS3のメディアクエリを採用しているので、ブラウザの横幅サイズを判断基準として、レイアウトデザインを柔軟に調整することが可能です。

最新版（2020/7/7日現在）はv4.5となっていました。

サポートブラウザ広がってました。久しぶりにbootstrapのbrowserslistみた気がしますw

# https://github.com/browserslist/browserslist#readme

>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30

別に今回はBootstrapの使い方の説明ではないので、Bootstrap自体についてはここら辺でおしまいにしましょうw

flask_bootstrapとは？

さて、長々bootstrap自体の説明をしてしまいました。本題のflask_bootstrapです。

Flask-Bootstrapは、名前の通りflaskでBootstrapを取り扱うpackageです。エクステンションで、bootstrapという名前でblueprintを作ってくれます。

公式document：https://pythonhosted.org/Flask-Bootstrap/

blueprintってなんだっけって方は以下の記事を読んでみてください。

flask_bootstrapのインストール方法

シンプルにpipでインストールできます。pip3ももちろん可能。

pip install flask_bootstrap

flask_bootstrapの使い方

flaskインスタンスをBootstrapメソッドに入れ込むだけ。

from flask import Flask, render_template
from flask_bootstrap import Bootstrap

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

@app.route('/')
def hello_world():
    return render_template('bootstrap_html.html')


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

bootstrap_htmlは以下の感じ。

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

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

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

出来上がりはこんな感じ。

ファイル構成の説明

出来上がってるのはこんな感じのファイル構成です。

root
    -templates
          -bootstrap_html.html
    app.py

bootstrap_htmlで、以下のように継承していますが、実際は自分では作成していません。

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

じゃぁこれはどこにあるの？って話ですよね？

flask_bootstrapをインストールすると自動作成されるファイル(site-packagesをみてみる）

pipで管理をしている人なら容易に想像つくかと思いますが、sitepackageの中にflask_bootstrapと言う名前でディレクトリが生成されています。

こんな感じです。

このflask_bootstrap > templates > bootstrap > base.htmlを継承してファイルが作れるようになっています。

flask_bootstrap > templates > bootstrap > base.htmlの中身は？

こんなコードが自動生成されています。

% block doc -%}
<!DOCTYPE html>
<html{% block html_attribs %}{% endblock html_attribs %}>
{%- block html %}
  <head>
    {%- block head %}
    <title>{% block title %}{{title|default}}{% endblock title %}</title>

    {%- block metas %}
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {%- endblock metas %}

    {%- block styles %}
    <!-- Bootstrap -->
    <link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet">
    {%- endblock styles %}
    {%- endblock head %}
  </head>
  <body{% block body_attribs %}{% endblock body_attribs %}>
    {% block body -%}
    {% block navbar %}
    {%- endblock navbar %}
    {% block content -%}
    {%- endblock content %}

    {% block scripts %}
    <script src="{{bootstrap_find_resource('jquery.js', cdn='jquery')}}"></script>
    <script src="{{bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap')}}"></script>
    {%- endblock scripts %}
    {%- endblock body %}
  </body>
{%- endblock html %}
</html>
{% endblock doc -%}

jinja2のファイル形式なので、特段難しいことはないかと思いますが、ざっと継承後に指定可能なブロックだけリストアップしてみます。

利用可能なブロック一覧

以下の感じですね。

block名	外部block	利用目的
doc		一番外側のブロック
html	doc	html tagを有するブロック
html_attribs	doc	html tagの属性
head	doc	head tagを有するブロック
body	doc	body tagを有するブロック
body_attribs	body	body tagの属性
title	head	title tagを有するブロック（head block内）
styles	head	style link tagを有するブロック（head block内）
metas	head	meta tagを有するブロック（head block内）
navbar	body	ナビゲーションバー
content	body	body内のコンテンツブロック
scripts	body	body最後に挿入されるscript tagのブロック