Webアプリプログラミング

【Flask】Blueprintのフォルダ構成と簡単なサンプル

FlaskでBlueprintのサンプル記事のアイキャッチ Webアプリ

今回は、WebアプリケーションフレームワークFlaskのBlueprintの記載方法について紹介します。Webサイトは基本的にページが複数あり、それに伴いファイルも増えがちです。作成時の管理を簡単にするためにもなるべく分割して記載することが推奨されます。Flaskの持つBlueprint機能をもちいてアプリを分割管理しましょう。

スポンサーリンク

FlaskのBlueprintとは

アプリを分割するためのFlaskの機能です。

Blueprintを用いると、アプリの規模が大きくなってもアプリの機能ごとに分割管理することができるので、メンテナンスがしやすいメリットがあります。

具体的には以下のことができます。

  • 分割単位ごとにURLプレフィックスを設定できる
  • Blueprint単位でテンプレートを分けることができる
  • Blueprint単位で静的ファイルを分けることができる

分割の仕方や大きさには特にルールはありません。
世の中的に多いのは「機能ごとに分ける」でしょう。

スポンサーリンク

Blueprintを使うためのフォルダ構成

今回は、プロジェクト(SAMPLEPROJECT00)内に2つの機能(アプリA、アプリB)を実装するケースで作成します。

Blueprintを使うために、以下のようなディレクトリ構成にします。(__pycache__フォルダは自動で生成されます)
appsフォルダの下に2つのフォルダ(app_a、app_b)があります。

FlaskでBlueprintを使用するときのフォルダ構成
Blueprintを使うためのフォルダ構成

今回は使用しませんが、staticフォルダはJavascriptとCSSを、templatesフォルダはHTMLファイルを格納するためのものです。

スポンサーリンク

Blueprintを最小構成で実装したサンプル

各アプリを登録するapp.py

最初に読み込まれるファイルです。
このファイルはBlueprintを呼び込むための動作をするものなので、Blueprintのフォルダ外にあります。

本サンプルではcreate_appが最初に呼ばれます(.envファイルでそのようにしています)。

from flask import Flask

def create_app():

    app = Flask(__name__)

    # 各アプリからviewsをインポートする
    from apps.app_a import views as appa_views
    from apps.app_b import views as appb_views

    # 各アプリを登録する
    app.register_blueprint(appa_views.app_a, url_prefix="/app-a")
    app.register_blueprint(appb_views.app_b, url_prefix="/app-b")

    return app

各アプリのコード(views.py)

アプリA、アプリBのコードは以下の通り。中身はほぼ同じですが一応両方掲載しています。
ファイルは各ディレクトリにある「views.py」です。

アプリAのviews.pyは以下の通り。

from flask import Blueprint

app_a = Blueprint("app_a", __name__, template_folder="templates", static_folder="satic")

# エンドポイント作成
@app_a.route("/")
def index():
    return "Application A"

アプリBのviews.pyは以下の通り。

from flask import Blueprint

app_b = Blueprint("app_b", __name__, template_folder="templates", static_folder="satic")

# エンドポイント作成
@app_b.route("/")
def index():
    return "Application B"

動作確認

「flask run」コマンドで実行して、ブラウザ経由でアクセスすると以下のように表示されます。

FlaskのBlueprintの結果画像
アプリAにアクセスした結果

URLの「app-a」を「app-b」に変更するとアプリB側の表示になります。

スポンサーリンク

HTML,JavaScript,CSSを活用する方法

Blueprintでの、html、Javascript、cssの活用方法を以下記事で紹介しています。

HTMLと同じ場所にjavaScriptとCSSを置かないので少し迷いました。

コメント

タイトルとURLをコピーしました