【Python/Flask】staticディレクトリに静的ファイル(CSS、画像、Javascript)を格納して扱う方法

Pythonモジュール「Flask」でstaticディレクトリに静的ファイル(CSS・Javascript)を格納して扱う方法についてまとめました。

静的ファイルをテンプレートファイルから呼び出す方法

アプリケーションのルートディレクトリ直下に「static」ディレクトリを作成し、その中に静的ファイル(CSS、画像、Javascriptなど)を格納すると、テンプレートファイル(html)から呼び出すことができます。
FlaskのテンプレートエンジンJinja2では、url_forを使用して動的にURLを生成できます。

使用例

画像ファイル「static/images/image.png」をテンプレートファイル内で呼び出したい場合、以下のようにurl_forを使用します。

<img src="{{ url_for('static', filename='images/image.png') }}">

第1引数をstatic第2引数をfilename=staticディレクトリからの相対パスで指定します。

今回は、以下のディレクトリ構成でCSS、Javascript、PNGファイルを格納し、テンプレートファイルから呼び出します。

■ディレクトリ構成

root/
|__server.py
|__templates/
|     |__index.html
|     |__base.html
|__static/
      |__css/
      |   |__style.css
      |__js/
      |   |__main.js
      |__images/
          |__image.png

サンプルコード

先程のディレクトリ構成で配置したそれぞれのコードは以下のとおりです。

■server.py


■templates/base.html


■templates/index.html


■static/css/style.css


■static/js/main.js


実行結果

スクリプトファイル(server.py)を実行し、ブラウザで「http://127.0.0.1:8080」にアクセスして以下の画面が表示されたら成功です。

関連ページ

【Flask超入門】簡単かつ効率的にWebアプリを作ろう
PythonモジュールFlaskの使い方、Webアプリケーションを作る方法について入門者向けにまとめました。

コメント