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

flask
この記事は約8分で読めます。

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

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

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

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

Advertisements

そもそも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を作ってくれます。

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一番外側のブロック
htmldochtml tagを有するブロック
html_attribsdochtml tagの属性
headdochead tagを有するブロック
bodydocbody tagを有するブロック
body_attribsbodybody tagの属性
titleheadtitle tagを有するブロック(head block内)
stylesheadstyle link tagを有するブロック(head block内)
metasheadmeta tagを有するブロック(head block内)
navbarbodyナビゲーションバー
contentbodybody内のコンテンツブロック
scriptsbodybody最後に挿入されるscript tagのブロック

まとめ

flask_bootstrapの基本的な使い方や解説でした。

日頃みることはあまりないかもですが、pipでインストールしたパッケージはsite-packagesに保存されています。たまに挙動がわからない時は、ここを確認するといいと思います。

最悪自分でsuperクラスで継承して、書き換えるなんてことも。。ノンプロネタではないですねw

bootstrap自体をCDNとしていれる方法の他にもflaskにはこんなパッケージがあるよ、と言う意味での紹介でした。どちらを使ってもいいと、個人的には思っています。

それでは。

コメント