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

2018-10-01 2018-10-22

管理人

1 はじめに
2 アプリの構造をカスタマイズする
3 背景画像を追加する
4 参考

はじめに

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',
]

STATICFILES_FINDERS = [

'django.contrib.staticfiles.finders.FileSystemFinder',

'django.contrib.staticfiles.finders.AppDirectoriesFinder',

]

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

FileSystemFinder

django.contrib.staticfiles.finders.FileSystemFinder

STATICFILES_DIRS で定義されたディレクトリから静的ファイルを探す

AppDirectoriesFinder

django.contrib.staticfiles.finders.AppDirectoriesFinder

それぞれのアプリケーションの static サブディレクトリから、静的ファイルを探す

チュートリアルにしたがって、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

├── 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;
}

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 %}

{% load static %}

{% 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;
}

body {

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

}

li a {

color: green;

}

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

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

参考

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

Googleアナリティクスの人気オンライン講座

低価格なのに高速・多機能・高セキュリティ月額400円(税別)から最大容量100GB WordPress専用高速サーバー Z.com WP

この記事を書いた人

管理人

平日の事務職でたまったストレスを、週末のプログラミングで解消している工業大学出身の IT 会社事務職員。https://twitter.com/alt_area

はじめに

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

背景画像を追加する

参考

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