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

2018.05.24

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アプリケーションを作る方法について入門者向けにまとめました。
python.joho.info
2024.06.30











 








コメント