Djangoメモ(10) : 静的 (static) ファイルの設定をしてBootstrap 4 を使う
A Complete Beginner's Guide to Djangoのチュートリアルを参考に静的 (static) ファイルの設定をしてBootstrap 4 を使ってみる。
静的 (static) ファイル
静的 (static) ファイルとはドキュメントによると以下の通り。
サーバで生成するHTML以外に、Webアプリケーションは一般的に完全なWebページをレンダリングするために、画像、JavaScript、CSSなど必要なファイルを提供する必要があります。Djangoでは、これらのファイルを "静的 (static) ファイル" と呼びます。
小さなプロジェクトではこのことは大きな問題になりません。 Web サーバが見つけられる場所で静的ファイルを単に管理することができるからです。しかし、もっと大きな プロジェクトで、特に複数のアプリケーションからなる場合は、各アプリケーションが 持っている静的ファイルの集まりを複数扱うことになり、ややこしくなってきます。
django.contrib.staticfiles はまさにそのためにあります。これは静的なファイ ルを各アプリケーションから (さらに指定した別の場所からも) 一つの場所に集め、運用環境で公開しやすくするものです。
なお、django.contrib.staticfilesはINSTALLED_APPSにデフォルトで登録されているので使える状態になっている。
Bootstrap 4
今回は見た目を良くするためにフロントエンドコンポーネントライブラリのBootstrapを使用してみる。
Bootstrapの導入方法はいろいろとあるが、上記Bootstrapのダウンロードページで"Compiled CSS and JS"をダウンロードして使ってみる。
現時点ではbootstrap-4.0.0-dist.zipがダウンロードできるのでこれを展開する。
複数のファイルが含まれているが各ファイルの意味はContentsページに書いてある。
bootstrap-4.0.0-dist ├── css │ ├── bootstrap-grid.css │ ├── bootstrap-grid.css.map │ ├── bootstrap-grid.min.css │ ├── bootstrap-grid.min.css.map │ ├── bootstrap-reboot.css │ ├── bootstrap-reboot.css.map │ ├── bootstrap-reboot.min.css │ ├── bootstrap-reboot.min.css.map │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ └── bootstrap.min.css.map └── js ├── bootstrap.bundle.js ├── bootstrap.bundle.js.map ├── bootstrap.bundle.min.js ├── bootstrap.bundle.min.js.map ├── bootstrap.js ├── bootstrap.js.map ├── bootstrap.min.js └── bootstrap.min.js.map
設定とテンプレート変更
設定をする前に前回までに作成した現状のページを確認する。
最初にmanage.pyと同じ階層にstaticディレクトリを作成し、その下にcssディレクトリを作成する。
そして先ほどダウンロードしたファイルの中からbootstrap.min.cssファイルをstatic/cssディレクトリにコピーする。
├── myproject │ ├── boards │ ├── db.sqlite3 │ ├── manage.py │ ├── myproject │ ├── static # mkdirで作成 │ │ └── css # mkdirで作成 │ │ └── bootstrap.min.css # ファイルをコピー │ └── templates ├── Pipfile └── Pipfile.lock
次にmyproject/settings.pyのSTATIC_URLの下にSTATICFILES_DIRSを追加する。
STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'), ]
続いてtemplates/home.htmlを編集する。
静的ファイルを使用するためには{% load static %}でロードして{% static 'css/bootstrap.min.css' %}のように読み込む。
{% static %}はSTATIC_URLに置き換えられるので{% static 'css/bootstrap.min.css' %}はstatic/css/bootstrap.min.cssになる。
{% load static %}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Boards</title>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
</head>
<body>
<!-- bodyの内容は省略 -->
</body>
</html>
現時点でページを表示するとCSSが適用されるので見た目が少し変わる。
CSSが適用されていることは確認できたので、チュートリアル通りにBootstrapのクラスを指定した内容に書き換える。
{% load static %}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Boards</title>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
</head>
<body>
<div class="container">
<ol class="breadcrumb my-4">
<li class="breadcrumb-item active">Boards</li>
</ol>
<table class="table">
<thead class="thead-inverse">
<tr>
<th>Board</th>
<th>Posts</th>
<th>Topics</th>
<th>Last Post</th>
</tr>
</thead>
<tbody>
{% for board in boards %}
<tr>
<td>
{{ board.name }}
<small class="text-muted d-block">{{ board.description }}</small>
</td>
<td class="align-middle">0</td>
<td class="align-middle">0</td>
<td></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</body>
</html>
ページをリロードすると見た目が良くなっているが、テーブルのヘッダ部分のデザインがうまく適用されていない。
リリースノートを見るとthead-inverseがthead-darkに変わっているようなので変更する。
<!-- <thead class="thead-inverse"> --> <thead class="thead-dark">
これで設定は完了。
まとめ
- 静的ファイルとは画像、JavaScript、CSSなどのファイル
- 静的ファイルは
STATIC_URL,STATICFILES_DIRSなどで設定 - 静的ファイルを使用するためには
{% load static %}でロード {% static 'css/bootstrap.min.css' %}の{% static %}はSTATIC_URLに置き換えられる
