【Python】【Flask】外部CSSファイルやJavaScriptを読み込む

html内でcss、JavaScriptを外部ファイルとして読み込む際、cssとJavaScriptは基本的にはstatic配下に配置するが、複数のcssやJavaScriptがある場合、static/css、static/jsのようなディレクトリ構成で整理したくなる。

url_forを使用することで、htmlファイルの配置場所を気にせずにcssとJavaScriptを参照できるようになる。

簡単なことだが、意外とハマってしまいがち。

ディレクトリ構成

ディレクトリ構成は以下の通り。

appRoot
┣static
┃ ┣css
┃ ┃┣sample1.css
┃ ┃┗sample2.css
┃ ┗js
┃   ┣sample1.js
┃   ┗sample2.js
┣templates
┃ ┣auth
┃ ┃┗auth.html
┃ ┗sample
┃  ┣sample1.html
┃  ┗sample2.html
┣auth.py
┣sample1.py
┗sample2.py

authとsampleで機能的に分けて整理したい場合を例とする。

cssとJavaScriptの読込方法は以下の通り。

CSSとJavaScriptの読込

<!-- sample1.html -->

<!-- JavaScript読込 -->
<script type="text/javascript" src="{{ url_for('static', filename='js/sample1.js') }}">

<!-- #css読込 -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/sample1.css') }}">

url_forの第一引数はstaticにすることに注意。

相対パスで直接コーディングすると、htmlファイルの場所を容易に変えられないが、url_forを使うとhtmlファイルの場所を気にする必要がなくなる。