はじめての Django アプリ作成、その 6¶
このチュートリアルは チュートリアル 5 の続きです。Web 投票アプリケーションのテストが完成したので、今度はスタイルシートや画像を追加しましょう。
サーバで生成するHTML以外に、Webアプリケーションは一般的に完全なWebページをレンダリングするために、画像、JavaScript、CSSなど必要なファイルを提供する必要があります。Djangoでは、これらのファイルを "静的 (static) ファイル" と呼びます。
小さなプロジェクトではこのことは大きな問題になりません。 ウェブサーバが見つけられる場所で静的ファイルを単に管理することができるからです。しかし、もっと大きなプロジェクトで、特に複数のアプリケーションからなる場合は、各アプリケーションが 持っている静的ファイルの集まりを複数扱うことになり、ややこしくなってきます。
django.contrib.staticfiles はまさにそのためにあります。これは静的なファイ ルを各アプリケーションから (さらに指定した別の場所からも) 一つの場所に集め、運用環境で公開しやすくするものです。
困ったときは:
このチュートリアルの実行に問題がある場合は、FAQ の Getting Help セクションに進んでください。
アプリ の構造をカスタマイズする¶
最初に、 polls ディレクトリの中に、 static ディレクトリを作成します。Django はそこから静的ファイルを探します。Django が polls/templates/ からテンプレートを探す方法と同様です。
Django の STATICFILES_FINDERS は、さまざまなソースから静的ファイルを検索する方法を知っているファインダのリストです。デフォルトのファイダの一つは AppDirectoriesFinder で、INSTALLED_APPS に書かれた各アプリケーションに対して、ちょうど今作った polls のような "static" サブディレクトリを検索してくれます。管理サイトの静的ファイルにも、これと同じディレクトリ構造が使われます。
Within the static directory you have just created, create another directory
called polls and within that create a file called style.css. In other
words, your stylesheet should be at polls/static/polls/style.css. Because
of how the AppDirectoriesFinder staticfile finder works, you can refer to
this static file in Django as polls/style.css, similar to how you reference
the path for templates.
静的ファイルの名前空間
Just like templates, we might be able to get away with putting our static
files directly in polls/static (rather than creating another polls
subdirectory), but it would actually be a bad idea. Django will choose the
first static file it finds whose name matches, and if you had a static file
with the same name in a different application, Django would be unable to
distinguish between them. We need to be able to point Django at the right
one, and the best way to ensure this is by namespacing them. That is, by
putting those static files inside another directory named for the
application itself.
スタイルシートに次のコードを配置します (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 が自動生成する管理サイトのカスタマイズをしてみましょう。
