はじめての Django アプリ作成、その 6

このチュートリアルは チュートリアル 5 の続きです。Web 投票アプリケーションのテストが完成したので、今度はスタイルシートや画像を追加しましょう。

サーバで生成するHTML以外に、Webアプリケーションは一般的に完全なWebページをレンダリングするために、画像、JavaScript、CSSなど必要なファイルを提供する必要があります。Djangoでは、これらのファイルを "静的 (static) ファイル" と呼びます。

For small projects, this isn't a big deal, because you can keep the static files somewhere your web server can find it. However, in bigger projects -- especially those comprised of multiple apps -- dealing with the multiple sets of static files provided by each application starts to get tricky.

django.contrib.staticfiles はまさにそのためにあります。これは静的なファイ ルを各アプリケーションから (さらに指定した別の場所からも) 一つの場所に集め、運用環境で公開しやすくするものです。

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

最初に、 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):

polls/static/polls/style.css
li a {
    color: green;
}

次に、polls/templates/polls/index.html の上部に追加します:

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) に次のコードを追加します。

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 が自動生成する管理サイトのカスタマイズをしてみましょう。

Back to Top