Python | Django | テンプレートにおける静的ファイルの使い方
公開日：2021/6/25
Pythonには，DjangoというWebアプリケーションフレームワークがある．フレームワークのため，Djangoを利用するとWebアプリを通常よりも短時間で開発することが可能になる．
前記事にて，「Viewに値を渡し，テンプレートを利用したページ遷移方法」を記した．前記事での設定をそのまま引き継いだ上で，本記事では，「テンプレートにおける静的ファイルの使い方」を以下3つの構成にて記す．なお，静的ファイル(static file)とは，jpg等の画像やCSSなどを示す．
・静的ファイル(画像)の読み込み
・静的ファイル(CSS)の読み込み
・静的ファイルの場所移動
◆実施環境
Python 3.8.8
Django 3.2.3
“tmp_app"に"static"という名のフォルダを作成し，その中に画像ファイル(chocolate-and-coffee-beans.jpg)を格納する．プロジェクトである"tmp_project"は以下のような構成になる．
“tmp_project/templates/chocolate.html"の1行目と11行目にコードを追記する．"chocolate.html"の内容全体は以下のようになる．
{% load static %} # 追記箇所
<h2>{{ product_name}}</h2>
<h2>{{ maker}}</h2>
<p><h2>サイトURL: {{ site_url | urlize }}</h2></p>
<h2>{{ weight }}g</h2>
<p><h2>メーカーの売上: {{ maker_sales_amt }}円</h2></p>
<p><h2>Franの種類: {{ type}}</h2></p>
<p><h2>Franの説明: {{ desctiption }}</h2></p>
<img src="{% static 'chocolate-and-coffee-beans.jpg' %}"> # 追記箇所ターミナルを開き，”conda activate 仮想環境名”を実行し，仮想環境に移行する．”tmp_project”のディレクトリで”python manage.py runserver”を実行すると，以下が出力される．
System check identified no issues (0 silenced).
June 25, 2021 - 00:53:15
Django version 3.2.3, using settings 'tmp_project.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.“http://127.0.0.1:8000/”をクリックし，ブラウザを開くと以下のように表示される．
ブラウザのURLに”http://127.0.0.1:8000/template_app/chocolate”を入力し，ブラウザを開くと，”static”フォルダに収載したjpgファイルが以下のように出力される．
“tmp_app/static"の中に，CSSファイル"chocolate.css"を作成する．プロジェクトである"tmp_project"は以下のような構成になる．
CSSファイル"chocolate.css"を以下のように編集する．
h2{
color:blue;
}“tmp_project/templates/chocolate.html"の2行目にコードを追記する．"chocolate.html"の内容全体は以下のようになる．
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'chocolate.css' %}"> # 追記箇所
<h2>{{ product_name}}</h2>
<h2>{{ maker}}</h2>
<p><h2>サイトURL: {{ site_url | urlize }}</h2></p>
<h2>{{ weight }}g</h2>
<p><h2>メーカーの売上: {{ maker_sales_amt }}円</h2></p>
<p><h2>Franの種類: {{ type}}</h2></p>
<p><h2>Franの説明: {{ desctiption }}</h2></p>
<img src="{% static 'chocolate-and-coffee-beans.jpg' %}">”http://127.0.0.1:8000/template_app/chocolate”をブラウザで更新すると以下のように文字が青くなり出力される．
“tmp_project/settings.py"を開き，"STATIC_DIR"を"BASE_DIR"や"TMP_DIR"の下に追加する．"tmp_project"直下の"tmp_app"や"templates"と同じ階層に配置可能になる．
BASE_DIR = Path(__file__).resolve().parent.parent
TMP_DIR = os.path.join(BASE_DIR,'templates')
STATIC_DIR = os.path.join(BASE_DIR,'static') # 追記箇所．同じく"tmp_project/settings.py"の最下部付近の"STATIC_URL"の下に"STATICFILES_DIRS"を以下のように記載する．
STATIC_URL = '/static/'
STATICFILES_DIRS = [ # 以下追記箇所
STATIC_DIR
]以下のように"static"フォルダをプロジェクトフォルダである"tmp_project"の直下に移動する．
“tmp_project/settings.py"の最下部付近の"STATICFILES_DIRS"に"download"を追記し，以下のように編集する．
STATICFILES_DIRS = [
('download',STATIC_DIR)
]“tmp_project/templates/chocolate.html"の2行目と12行目のコードに"download/"を追記する．"chocolate.html"の内容全体は以下のようになる．
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'download/chocolate.css' %}"> # 編集箇所
<h2>{{ product_name}}</h2>
<h2>{{ maker}}</h2>
<p><h2>サイトURL: {{ site_url | urlize }}</h2></p>
<h2>{{ weight }}g</h2>
<p><h2>メーカーの売上: {{ maker_sales_amt }}円</h2></p>
<p><h2>Franの種類: {{ type}}</h2></p>
<p><h2>Franの説明: {{ desctiption }}</h2></p>
<img src="{% static 'download/chocolate-and-coffee-beans.jpg' %}"> # 編集箇所”http://127.0.0.1:8000/template_app/chocolate”をブラウザで更新すると以下のようにjpgファイルも文字も青くなり出力される．
以上