はじめての Django アプリ作成、その 6¶
このチュートリアルは チュートリアル 5 の続きです。Web 投票アプリケーションのテストが完成したので、今度はスタイルシートや画像を追加しましょう。
サーバで生成するHTML以外に、Webアプリケーションは一般的に完全なWebページをレンダリングするために、画像、JavaScript、CSSなど必要なファイルを提供する必要があります。Djangoでは、これらのファイルを "静的 (static) ファイル" と呼びます。
小さなプロジェクトではこのことは大きな問題になりません。 Web サーバが見つけられる場所で静的ファイルを単に管理することができるからです。しかし、もっと大きな プロジェクトで、特に複数のアプリケーションからなる場合は、各アプリケーションが 持っている静的ファイルの集まりを複数扱うことになり、ややこしくなってきます。
django.contrib.staticfiles はまさにそのためにあります。これは静的なファイ ルを各アプリケーションから (さらに指定した別の場所からも) 一つの場所に集め、運用環境で公開しやすくするものです。
アプリ の構造をカスタマイズする¶
最初に、 polls ディレクトリの中に、 static ディレクトリを作成します。Django はそこから静的ファイルを探します。Django が polls/templates/ からテンプレートを探す方法と同様です。
Django の STATICFILES_FINDERS は、さまざまなソースから静的ファイルを検索する方法を知っているファインダのリストです。デフォルトのファイダの一つは AppDirectoriesFinder で、INSTALLED_APPS に書かれた各アプリケーションに対して、ちょうど今作った polls のような "static" サブディレクトリを検索してくれます。管理サイトの静的ファイルにも、これと同じディレクトリ構造が使われます。
今作った static ディレクトリの中に、polls という名前の新しいディレクトリを作り、さらにその中に、style.css という名前のファイルを作成します。つまり、このスタイルシートは polls/static/polls/style.css に保存します。AppDirectoriesFinder の動作のしくみのおかげで、Django では、ただ polls/style.css と書くだけでこの静的ファイルを参照することができます。これは、テンプレートのパスを参照する時と同じです。
静的ファイルの名前空間
テンプレートと同様に、polls という別のサブディレクトリを作らずに、直接 polls/static の中に静的ファイルを置いてもいいのではないか、と思うかもしれませんね。しかし、それは実際には悪い考えです。Django は、名前がマッチした最初のテンプレートを使用するので、もし 異なる アプリケーションの中に同じ名前のテンプレートがあった場合、Django はそれらを区別することができません。そのため、Django に正しいテンプレートを教えてあげる必要がありますが、一番簡単な方法は、それらに 名前空間を与える ことです。アプリケーションと同じ名前をつけた もう一つの ディレクトリの中にテンプレートを置いたのは、そういうわけなのです。
スタイルシートに次のコードを配置します (polls/static/polls/style.css):
li a {
color: green;
}
次に、polls/templates/polls/index.html の上部に追加します:
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}">
{% static %} テンプレートタグは、静的ファイルの完全 URL を生成します。
あなたが開発する必要があるのは、これですべてです。
次のコマンドを実行して、サーバーを起動します (すでに起動済みの場合は再起動します)。
$ python manage.py runserver
...\> py manage.py runserver
http://localhost:8000/polls/ をリロードすると、質問のリンクが緑色 (Django のスタイルです！) になり、スタイルシートが適切に読み込まれたことが確認できるでしょう。
背景画像を追加する¶
つぎに、画像のためのサブディレクトリを作りましょう。images サブディレクトリを polls/static/polls/ ディレクトリの中に作成します。このディレクトリの中に、background.gif という名前の画像を置きます。つまり、画像は polls/static/polls/images/background.gif に置きます。
さらに、スタイルシート (polls/static/polls/style.css) に次のコードを追加します。
body {
background: white url("images/background.gif") no-repeat;
}
http://localhost:8000/polls/ をリロードすると、読み込んだ背景画像がスクリーンの左上部に確認できるでしょう。
警告
もちろん、{% static %} テンプレートタグは、スタイルシートのような Django が生成しない静的ファイル内では使用できません。そのため、2つの静的ファイルを互いにリンクするときには、必ず 相対パス を使用するべきです。そうすれば、STATIC_URL (static テンプレートタグが URL を生成する時に使われる) を変更しても、静的ファイルのパスを書き換えずに済みます。
これらは静的ファイルの 基本 です。設定方法やフレームワークの機能の詳細については、静的ファイルの配信 と staticfiles のリファレンス を読んでください。静的ファイルのデプロイ では、実際のサーバでの静的ファイルの使い方について説明しています。
静的ファイルを使いこなせるようになったら、チュートリアル その7 に進んで、Django が自動生成する管理サイトのカスタマイズをしてみましょう。
