3.4 静的ファイルの扱い #

ウェブアプリケーションでは、CSSやJavaScript、画像などの静的ファイルが必要になることがあります。Flaskでは、これらの静的ファイルの管理が容易になるように設計されています。この記事では、Flaskで静的ファイルを扱う方法について解説します。

1. 静的ファイルの格納場所 #

Flaskアプリケーションでは、staticという名前のフォルダをプロジェクトのルートディレクトリに作成して、その中に静的ファイルを格納します。以下は、一般的な静的ファイルのフォルダ構成です。

static/
    └─ css/
    └─ js/
    └─ img/

2. 静的ファイルへのリンク #

HTMLテンプレート内で静的ファイルを参照するには、url_for()関数を使用します。これにより、静的ファイルへの正しいURLが生成されます。例えば、CSSファイルをリンクする場合は以下のように書きます。

<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">

JavaScriptファイルや画像ファイルも同様に、url_for()関数を使ってリンクします。

<script src="{{ url_for('static', filename='js/main.js') }}"></script>
<img src="{{ url_for('static', filename='img/logo.png') }}" alt="Logo">

3. 静的ファイルのキャッシュ制御 #

ウェブアプリケーションでは、静的ファイルのキャッシュを適切に制御することが重要です。Flaskでは、send_static_file関数を使って、静的ファイルのキャッシュ制御をカスタマイズできます。例えば、以下のようにapp.pyに@app.route()デコレータを使用して新たなルートを作成し、send_static_file関数でCSSファイルを返すことができます。

from flask import Flask, send_static_file

app = Flask(__name__)

@app.route('/custom_css')
def custom_css():
    response = send_static_file('css/style.css')
    response.cache_control.max_age = 60  # キャッシュの有効期限を60秒に設定
    return response

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

この例では、/custom_cssというURLにアクセスすると、static/css/style.cssファイルが返され、キャッシュの有効期限が60秒に設定されます。同様に、他の静的ファイルに対してもキャッシュ制御をカスタマイズすることができます。

ただし、上記の方法は簡単な例であり、実際のアプリケーションでは、ウェブサーバー（Apache, Nginxなど）の設定で静的ファイルのキャッシュ制御を行うことが一般的です。このようにすることで、Flaskアプリケーションの負荷を減らし、静的ファイルの配信パフォーマンスを向上させることができます。

4. 静的ファイルの圧縮 #

静的ファイルを圧縮することで、ウェブアプリケーションの読み込み速度を向上させることができます。静的ファイルの圧縮には、gzipやBrotliといった圧縮アルゴリズムを使用します。Flaskでは、Flask-Compress拡張を利用して、静的ファイルの圧縮を簡単に実装できます。

まず、Flask-Compressをインストールします。

$ pip install Flask-Compress

次に、app.pyでFlask-Compressをインポートし、Flaskアプリケーションに適用します。

from flask import Flask
from flask_compress import Compress

app = Flask(__name__)
Compress(app)

# 以降は通常通りルートやビュー関数を定義

これで、静的ファイルが自動的に圧縮され、クライアントに送信されます。これにより、ウェブアプリケーションのパフォーマンスが向上します。

以上が、Flaskでの静的ファイルの扱いについての解説です。静的ファイルを適切に管理し、キャッシュや圧縮をうまく活用することで、ウェブアプリケーションのパフォーマンスを向上させることができます。次の記事「3.5 フォームの処理」では、Flaskでフォームを扱う方法について解説します。