Skip to content

6.静的ファイル#

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

小さなプロジェクトではこのことは大きな問題にならない。（ウェブサーバが見つけられる場所で静的ファイルを単に管理することができるから。） しかし、もっと大きなプロジェクトで、特に複数のアプリケーションからなる場合は、各アプリケーションが 持っている静的ファイルの集まりを複数扱うことになり、管理も複雑になる。

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/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" href="{% static 'polls/style.css' %}">

{% static %}テンプレートタグは、静的ファイルの完全 URL を生成する。

python manage.py runserverコマンドを実行して、サーバーを起動して変更を確認する。 http://localhost:8000/polls/ をリロードすると、質問のリンクが緑色 (Django のスタイルです！) になり、スタイルシートが適切に読み込まれたことが確認できる。

背景画像を追加する#

次に、画像用のサブディレクトリを作成する。 polls/static/polls/ ディレクトリに images サブディレクトリを作成する。 このディレクトリ内に、背景として使用する画像ファイルを追加する。 このチュートリアルでは、絶対パス polls/static/polls/images/background.png を持つ background.png という名前のファイルを使用。

次に、スタイルシート (polls/static/polls/style.css) に画像への参照を追加する。

polls/static/polls/style.css
body {
    background: white url("images/background.png") no-repeat;
}

http://localhost:8000/polls/ をリロードすると、読み込んだ背景画像が表示されることを確認できる。

Info

テンプレートタグ {% static %} は、スタイルシートのように Django が生成しない静的ファイルでは使えない。 静的ファイルをリンクするには、常に相対パス を使うべき。なぜなら、 STATIC_URL ( static テンプレートタグがURLを生成する際に使用する) を変更することができるから。

設定方法やフレームワークの機能の詳細については静的ファイルの配信とstaticfiles のリファレンスを参照。

静的ファイルのデプロイでは、実際のサーバでの静的ファイルの使い方について説明。