【Python】【Flask】オブジェクトでテスト環境と本番環境の設定を分ける
MAX
MAX999blog
【Python】【Flask】外部CSSファイルやJavaScriptを読み込む
MAX
html内でcss、JavaScriptを外部ファイルとして読み込む際、cssとJavaScriptは基本的にはstatic配下に配置するが、複数のcssやJavaScriptがある場合、static/css、static/jsのようなディレクトリ構成で整理したくなる。
url_forを使用することで、htmlファイルの配置場所を気にせずにcssとJavaScriptを参照できるようになる。
簡単なことだが、意外とハマってしまいがち。
スポンサーリンク
Contents
ディレクトリ構成
ディレクトリ構成は以下の通り。
1appRoot
2┣static
3┃ ┣css
4┃ ┃┣sample1.css
5┃ ┃┗sample2.css
6┃ ┗js
7┃ ┣sample1.js
8┃ ┗sample2.js
9┣templates
10┃ ┣auth
11┃ ┃┗auth.html
12┃ ┗sample
13┃ ┣sample1.html
14┃ ┗sample2.html
15┣auth.py
16┣sample1.py
17┗sample2.py
authとsampleで機能的に分けて整理したい場合を例とする。
cssとJavaScriptの読込方法は以下の通り。
CSSとJavaScriptの読込
1<!-- sample1.html -->
3<!-- JavaScript読込 -->
4<script type="text/javascript" src="{{ url_for('static', filename='js/sample1.js') }}">67{{ url_for('static', filename='css/sample1.css') }}">url_forの第一引数はstaticにすることに注意。
相対パスで直接コーディングすると、htmlファイルの場所を容易に変えられないが、url_forを使うとhtmlファイルの場所を気にする必要がなくなる。
スポンサーリンク
ABOUT ME
新卒でSIerに入社し、フリーランスになってWEB系へ転向。
その後AIの世界へ足を踏み入れ、正社員に戻る。 テーブルデータの分析がメイン。
その後AIの世界へ足を踏み入れ、正社員に戻る。 テーブルデータの分析がメイン。