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