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

This tutorial begins where Tutorial 5 left off. We've built a tested web-poll application, and we'll now add a stylesheet and an image.

サーバで生成する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" サブディレクトリを検索してくれます。管理サイトの静的ファイルにも、これと同じディレクトリ構造が使われます。

先ほど作成した static ディレクトリ内に polls という名前のディレクトリを作り、その中に style.css というファイルを作成します。言い換えれば、スタイルシートは polls/static/polls/style.css にあるはずです。 AppDirectoriesFinder のスタティックファイルファインダがどのように動作するかによって、Djangoではこのスタティックファイルを polls/style.css として参照することができます。

静的ファイルの名前空間

テンプレートと同じように、静的ファイルを直接 polls/static` に置くこともできますが（別の polls サブディレクトリを作るのではなく）、実際には良くない考えです。Django は最初に見つけた静的ファイルの中から名前が一致するものを選んでしまいます。Django に正しいものを指し示す必要がありますが、それを確実にするための最良の方法は、それらを namespacing することです。つまり、静的ファイルをアプリケーション自身の名前を付けたディレクトリの中に置くのです。

スタイルシートに次のコードを配置します (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 が生成しない静的ファイルでは使えません。静的ファイルをリンクするには、常に 相対パス を使うべきです。なぜなら、 STATIC_URL ( static テンプレートタグがURLを生成する際に使用する) STATIC_URL を変更することができるからです。

これらは静的ファイルの 基本 です。設定方法やフレームワークの機能の詳細については、静的ファイルの配信 と staticfiles のリファレンス を読んでください。静的ファイルのデプロイ では、実際のサーバでの静的ファイルの使い方について説明しています。

静的ファイルを使いこなせるようになったら、チュートリアル その7 に進んで、Django が自動生成する管理サイトのカスタマイズをしてみましょう。

« previous | up | next »