Bootstrap入門 for Flask #Python

本記事の背景

Webページのフロント開発でBootstrapを使っている場合が多いので、本記事はFlaskベースでBootstrapを使用する場合についてまとめたい。

過去の記事を検索するといくつかありますが、Bootstrapは主役ではなく、あくまでも脇役として書かれていました。

本記事のゴール

本記事は、Flaskに特化したBootstrapの使い方までの道筋を紹介する。
Bootstrap本体については、公式ページご参照ください。

Bootstrapテーマ

Bootstrapはnode.jsを中心に開発が進められており、Flaskに特化しているライブラリではないため、FlaskでBootstrapを使うには、Flaskに特化して開発されているテーマを使用することをお勧めします。
以下はFlaskに対応したBootstrapのテーマがあります。（有料）

Freeのテーマについては、以下のサイトで検索するとたくさん出てきます。

ビルド手順

以下のBootstrapテーマを事例として、ビルドし、Webサイト立ち上げまでとする。

Bootstrapテーマをビルドする場合、Dockerを使用する場合とマニュアルビルドの2通り存在するが、Dockerの場合は簡単に構築することが可能となります。

Dockerを使ってビルドする場合

事前にDockerクライアントまたはDocker Desktopをインストールしておいてください。
Docker Desktopのインストール方法は、下記の記事が詳細にまとめているので、参照してください。
（※Windows11の方は、Windows10をWindows11へ読み替えてください）

Dockerが初めての方は、以下の記事を参照

$ git clone https://github.com/app-generator/flask-argon-dashboard.git
$ cd flask-argon-dashboard
# Docker-composeコマンドを実行する
$ docker-compose up --build

Windows11マニュアルビルド手順(VSCODE/Gitbash使用）

# ソースコードをダウンロード
$ git clone https://github.com/app-generator/flask-argon-dashboard.git
$ cd flask-argon-dashboard

# venvの設定（すでに設定済の場合は不要）
$ virtualenv env

# venvをアクティベートする
$ .\env\Scripts\activate

# モジュールのインストール
$ pip3 install -r requirements.txt

# Flaskの環境設定
$ # CMD 
$ set FLASK_APP=run.py
$ set FLASK_ENV=development
$
$ # Powershell
$ $env:FLASK_APP = ".\run.py"
$ $env:FLASK_ENV = "development"

# アプリ起動
$ flask run

ブラウザからWebサイトへアクセスする

動かした事例

$ cd flask-atlantis-dark

$ flask run
 * Serving Flask app 'run.py' (lazy loading)
 * Environment: development
 * Debug mode: on
[2024-01-15 16:50:31,161] INFO in run: DEBUG            = True
[2024-01-15 16:50:31,162] INFO in run: Page Compression = FALSE
[2024-01-15 16:50:31,162] INFO in run: DBMS             = sqlite:///D:\python_pgm\flask-atlantis-dark\apps\db.sqlite3
[2024-01-15 16:50:31,162] INFO in run: ASSETS_ROOT      = /static/assets
 * Restarting with watchdog (windowsapi)
 * Debugger is active!
 * Debugger PIN: 117-875-007
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
[2024-01-15 16:50:32,271] INFO in run: DEBUG            = True
[2024-01-15 16:50:32,271] INFO in run: Page Compression = FALSE
[2024-01-15 16:50:32,271] INFO in run: DBMS             = sqlite:///D:\python_pgm\flask-atlantis-dark\apps\db.sqlite3
[2024-01-15 16:50:32,271] INFO in run: ASSETS_ROOT      = /static/assets

ブラウザでの表示