Django チュートリアルの進め方 その 6

はじめに

Django を学習するには、何はともあれ公式チュートリアル「はじめての Django アプリ作成」からスタートしてみるのが良いでしょう。しかし、いざチュートリアル通りに進めようとしても躓く場合も多いと思います。そこで、「チュートリアルの進め方」シリーズとして、チュートリアルに沿った作業を行いながら補足事項をまとめることにしました。チュートリアルで躓いた際のヒントとしてお使いください。

利用環境は Ubuntu、 Linux Mint を中心として説明しますが、 Windows についても補足します。

前回は、Django チュートリアルの進め方 その 5 (2) と題してはじめての Django アプリ作成、その 5の後半についてまとめました。

今回は、はじめての Django アプリ作成、その 6 についてまとめました。

アプリ の構造をカスタマイズする

Django は STATICFILES_FINDERS で定義された静的ファイルファインダを使って静的ファイルを検索します。デフォルトでは settings.py に STATICFILES_FINDERS の定義は書かれていませんが、その場合のデフォルト値は下記のようになっています。

STATICFILES_FINDERS = [
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
]

ここに定義された２つのファインダーが静的ファイルを見つけます。

チュートリアルにしたがって、polls ディレクトリの下に statc/polls ディレクトリを作成して、その中に style.css を作成します。ここまでの全体のディレクトリ構造は下記のようになっています。

├── db.sqlite3
├── manage.py
├── mysite
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-36.pyc
│   │   ├── settings.cpython-36.pyc
│   │   ├── urls.cpython-36.pyc
│   │   └── wsgi.cpython-36.pyc
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── polls
    ├── __init__.py
    ├── __pycache__
    │   ├── __init__.cpython-36.pyc
    │   ├── admin.cpython-36.pyc
    │   ├── apps.cpython-36.pyc
    │   ├── models.cpython-36.pyc
    │   ├── tests.cpython-36.pyc
    │   ├── urls.cpython-36.pyc
    │   └── views.cpython-36.pyc
    ├── admin.py
    ├── apps.py
    ├── migrations
    │   ├── 0001_initial.py
    │   ├── __init__.py
    │   └── __pycache__
    │       ├── 0001_initial.cpython-36.pyc
    │       └── __init__.cpython-36.pyc
    ├── models.py
    ├── static
    │   └── polls
    │       └── style.css
    ├── templates
    │   └── polls
    │       ├── detail.html
    │       ├── index.html
    │       └── results.html
    ├── tests.py
    ├── urls.py
    └── views.py

AppDirectoriesFinder は、各アプリケーションの static サブディレクトリから静的ファイルを集めてきます。そのため、polls/static 直下に style.css を置いてしまうと、Django からは他のアプリケーションの style.css と polls の style.css を区別できません。static ディレクトリの下にアプリケーション名のディレクトリを置くことで、Django はアプリケーション名で静的ファイルを区別できるようになります。

スタイルシートを定義します。

li a {
    color: green;
}

style.css を読み込むようにテンプレートを修正します。

{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}">
{% if latest_question_list %}
    <ul>
    {% for question in latest_question_list %}
        <li><a href="{% url 'polls:detail' question.id %}">{{ question.question_text }}</a></li>
    {% endfor %}
    </ul>
{% else %}
    <p>No polls are available.</p>
{% endif %}

{% static %} テンプレートタグで静的ファイルの URL を指定しています。

冒頭の {% load static %} を忘れないようにしましょう。忘れると下記のようなエラーが出ます。

正しく修正できていれば、http://localhost:8000/polls/ は下記のようになります。

背景画像を追加する

画像に背景を追加するため、polls/static/polls/images ディレクトリを作成し、そこに background.gif を置きます。(適当なイメージ画像で構いません。)
スタイルシートで、この画像を背景とするように設定します。(ファイル名は先程の画像に合わせます。)

body {
    background: white url("images/background.gif") no-repeat;
}

li a {
    color: green;
}

http://localhost:8000/polls/ を確認します。

背景に background.gif が表示されました。

参考