[Python] Flaskで静的ファイル用ディレクトリを追加 [Blueprint]

2018年10月1日2022年6月4日

PythonのWebフレームワーク「Flask」を使用して、

「静的ファイル用ディレクトリを追加する」方法を紹介します。

追加するにはFlaskの「Blueprint」を使います。

Flaskでは静的ファイル用ディレクトリは「static」だけですが、

image/css/javascriptのディレクトリも追加することが出来るようになります。

「static」ディレクトリの変更方法も紹介します。

FlaskのBlueprintとは？

「Blueprint」とは、アプリケーションの機能毎に分割して実装するためのものです。

Flaskの公式ドキュメントでは、

大きなプロジェクトを開発するための方法としてBlueprintが推奨されています。

Flask uses a concept of blueprints for making application components and supporting common patterns within an application or across applications. Blueprints can greatly simplify how large applications work and provide a central means for Flask extensions to register operations on applications. A Blueprint object works similarly to a Flask application object, but it is not actually an application. Rather it is a blueprint of how to construct or extend an application.
URL:Modular Applications with Blueprints

Blueprintの利用するためには必ず以下の手順を踏む必要があります。

Blueprintを宣言・定義
1．で宣言、定義したBlueprintをアプリケーションに登録

この2点は必ず抑えておきましょう。

静的ファイル用ディレクトリを追加するサンプル

実際に静的ファイル用ディレクトリを追加するサンプルを紹介します。

今回は「static」ディレクトリ配下に「javascript」、

「css」、「image」ディレクトリを追加するサンプルを紹介します。

ファイルは以下の2つで構成します。

setBlueprint.py：Blueprintを宣言・定義
app.py：Blueprintを登録

今回はサンプルでは以下のディレクトリ・ファイル構成で実装します。

static/
　├ javascript/
　│    └ init.js
　├ css/
　│    └ style.css
　└ image/
       └ header.jpg

Blueprintを宣言・定義

まずはBlueprintを宣言・定義をします。

from flask import Blueprint

js = Blueprint("javascript", __name__, static_url_path='/javascript', static_folder='./static/javascript')
css = Blueprint("css", __name__, static_url_path='/css', static_folder='./static/css')
image = Blueprint("image", __name__, static_url_path='/image', static_folder='./static/image')

第1引数がBlueprintを登録する時の名前になります。

第2引数「static_url_path」がアクセスするURLを指定します。

今回は以下のようにURLにアクセスできます。

第3引数「static_folder」がサーバー上のディレクトリ構成になります。

Blueprintをアプリケーションに登録

Blueprintの登録には

register_blueprint

メソッドを使用します。

import setBlueprint
app.register_blueprint(setBlueprint.js)
app.register_blueprint(setBlueprint.css)
app.register_blueprint(setBlueprint.image)

上記のように設定してあげれば簡単に登録することができます。

参考：More than one static path in local Flask instance

補足：url_forを使用して静的ファイル用ディレクトリにアクセス

実際にFlaskにアクセスするために「url_for」関数を使用します。

Flaskの「templates」を利用した例は以下になります。

<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="{{ url_for('css.static', filename='style.css') }}">
<title>Sample Page</title>
</head>
<body>
<header>
<img src="{{ url_for('image.static', filename='header.jpg') }}">
</header>
<div class="container">
{% block content %}{% endblock %}
</div>
<script type="text/javascript" src="{{ url_for('javascript.static', filename='init.js') }}"></script>
</body>
</html>

「url_for()」の第1引数にBlueprintのエンドポイント名「blueprint_name.static」を指定します。

第2引数「filename」で実際のファイル名を指定します。