前回のつづき
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スクリプトからのデータの受け渡しも行なうことができる。