見出し画像

Flask Web Development P26~28

ばばーる

Bootstrapを使ってみよう。

以下のコマンドをターミナルで実行することでインストールできます。

> conda install -c conda-forge flask-bootstrap

BootstrapはHTML／CSS／JavaScriptから構成される最も有名なWEBフレームワークで、使うとサイトのデザインがかっこよくなります。

(FlaskもBootstrapはバージョン3ですね。最新は５らしいです。)

とりあえず動かしていきましょう。
hello.pyはこんな感じ

from flask import Flask, render_template
from flask_bootstrap import Bootstrap

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

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

@app.route('/user/<name>')
def user(name=None):
   return render_template('user.html', name=name)

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

templates/user.htmlはこんな感じ

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

{% block title %}Tanuki{% endblock %}
{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
   <div class="container">
       <div class="navbar-header">
           <button type="button" class="navbar-toggle"
                   data-toggle="collapse" data-target=".navbar-collapse">
               <span class="sr-only">Toggle navigation</span> <- span class=”sr-only”はスクリーンリーダー用です。実際にテキストは表示されませんが、スクリーンリーダ-が読み上げをしてくれます。
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
           </button>
           <a class="navbar-brand" href="/">Tanuki</a> <-.navbar-brand 会社、製品、またはプロジェクト名の .navbar-bra
       </div>
       <div class="navbar-collapse collapse">
       <ul class="nav navbar-nav">
           <li><a href="/">Home</a></li>
           <li><a href="/">Login</a></li>
       </ul>
       </div>
    </div>
</div>
{% endblock %}

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

{% extends "bootstrap/base.html" %}: Jinja2のextendsを使ってbootstrap/base.htmlのCSSとJavasscriptを継承します。

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 -%}

contentの３つのブロックで構成されています。
・title = Chromeとかのタグに表示されれるタイトルです。
・navbar = ナビゲーションバーです。ここではBootstrapのテンプレートが使われています。
・contents = ページのメインパートです。

Javascriptを入れたい場合はuser.htmlの最終行（{% endblock %} <- {% block content %}の最終行）の後に

{% block scripts %}
{{ super() }}
<script>
   document.write("Hello");
</script>
{% endblock %}

とかを加えるとJavascriptの表現も使えます。{{ super() }}という関数は忘れずに入れましょう。

他にも同じ要領で以下の表現が使えるらしいです。

【Block name: Description】
・doc : The entire HTML document
・html_attribs: Attributes inside the <html> tag
・html: The contents of the <html> tag
・head: The contents of the <head> tag
・title: The contents of the <title> tag
・metas: The list of <meta> tags
・styles: Cascading stylesheet definitions
・body_attribs: Attributes inside the <body> tag
・body: The contents of the <body> tag
・navbar: User-defined navigation bar
・content: User-defined page content
・scripts: JavaScript declarations at the bottom of the document


この記事が気に入ったらサポートをしてみませんか？