今回はDjangoでstatic（静的）なファイルを扱う方法を解説したいと思います。
この記事では、
・staticファイルとは何か
・staticファイルの公開
について解説します。さらに、
・staticファイルを公開するときの注意点
についても解説します。
staticファイルを扱うときに必要なsettings.pyの編集方法についてもしっかりと学んでいきましょう。
staticファイルとは
ここでstaticファイルについて知っておきましょう。
staticファイルとは、静的なファイルです。
例としては、
・画像
・CSS
・JavaScript
などが挙げれます。
Djangoはビューやリクエストによってその都度表示が変わるシステムを得意としています。
そのような動的ではないファイルをこれから扱っていきます。
staticファイルを公開してみよう
これから実際にstaticファイルを公開してみましょう。
Djangoの下準備
まずはDjangoの下準備をします。
Djangoはプロジェクトを作成して、その中にWebアプリケーションを作成するのが基本の流れになっています。
まずは、プロジェクトを作りたいディレクトリに移動して、このコマンドを実行しましょう。
django-admin startproject mySite
これでmySiteというディレクトリが出来上がります。
次にmySiteディレクトリに移動して、このコマンドを実行しましょう。
python manage.py startapp myapp
これでmySiteプロジェクトの中に、myappというWebアプリケーションが出来上がりました。
現在のディレクトリ構成はこのようになっています。
mySite
├── manage.py
├── mySite
│ ├── __init__.py
│ ├── __pycache__
│ │ ├── __init__.cpython-36.pyc
│ │ └── settings.cpython-36.pyc
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
└── myapp
├── __init__.py
├── admin.py
├── apps.py
├── migrations
│ └── __init__.py
├── models.py
├── tests.py
└── views.py
4 directories, 14 files
次に、mySite/settings.pyのINSTALLED_APPSを編集していきます。
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'myapp',
]
INSTALLED_APPSに、myappを追加しました。
さらにtemplateファイルを置く場所を指定しましょう。
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': ['templates'],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
TEMPLATESの’DIRS’に、‘templates’という文字列を追加します。
これは、templatesというディレクトリにtemplateファイルを入れていくことを宣言しています。
肝心のtemplatesディレクトリは、manage.pyと同じ階層に作ります。
このtemplatesディレクトリにhtmlファイルを作成することで、templateとして使うことができます。
今回はindex.htmlというテンプレートを作ります。
詳しくはこちらの記事をご覧ください。
次にviews.pyとurls.pyを編集します。
views.pyは、このように編集します。
from django.shortcuts import render
from django.http.response import HttpResponse
def index_template(request):
return render(request, 'myapp/index.html')
これでindex.htmlというファイルを返すことが出来ました。
次に、myapp/urls.pyを編集します。
このファイルは、最初はありませんが、自分で作る必要があります。
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'^templates/', views.index_template, name='index_template'),
]
これでviews.pyとmyapp/urls.pyをつなげることが出来ました。
次にmySite/urls.pyを編集します。
from django.conf.urls import include, url
from django.contrib import admin
urlpatterns = [
url(r'^myapp/', include('myapp.urls', namespace='myapp')),
url(r'^admin/', admin.site.urls),
]
これで http://localhost:8000/myapp/templates/ に接続するとindex.htmlを返すことが出来るようになりました。
runserverコマンドで接続をしてエラーが出なければ準備は完了です。
これでDjangoの下準備は出来ました。
staticファイルを置く
今回はtemplateファイルを使ってページを表示します。
そのページに画像を表示させることで、パスの指定方法などを見ていきましょう。
まずは、settings.pyを見てみましょう。
INSTALLED_APPSにある‘django.contrib.staticfiles’が、staticファイルを公開するために必要なDjangoアプリケーションになります。
これがINSTALLED_APPSに追加されていることを確認しておきましょう。
また、settings.pyの一番下に注目してみましょう。
STATIC_URL = '/static/'
このパスが、staticファイルを置く場所を指定しているものです。
そしてsettings.pyにこの記述を追加しましょう。
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
これでプロジェクト直下にstaticというディレクトリを作ることでstaticファイルを作ることが出来ました。
manage.pyと同じ階層にstaticというディレクトリを作り、その中にmyappというディレクトリを作ります。
さらにmyappというディレクトリにこの画像（pic.png）を入れておきます。
現在のディレクトリ構成はこのようになっています。
mySite
├── db.sqlite3
├── manage.py
├── mySite
│ ├── __init__.py
│ ├── __pycache__
│ │ ├── __init__.cpython-36.pyc
│ │ ├── settings.cpython-36.pyc
│ │ ├── urls.cpython-36.pyc
│ │ └── wsgi.cpython-36.pyc
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
├── myapp
│ ├── __init__.py
│ ├── __pycache__
│ │ ├── __init__.cpython-36.pyc
│ │ ├── urls.cpython-36.pyc
│ │ └── views.cpython-36.pyc
│ ├── admin.py
│ ├── apps.py
│ ├── migrations
│ │ └── __init__.py
│ ├── models.py
│ ├── tests.py
│ ├── urls.py
│ └── views.py
├── static
│ └── myapp
│ └── pic.png
└── templates
└── myapp
└── index.html
9 directories, 23 files
非常に複雑なディレクトリ構造のように見えます。
でもプロジェクトとWebアプリケーションを作成した後に、staticディレクトリとtemplatesディレクトリを同じ階層に作っているだけなので、安心してください。
templates/myapp/index.htmlをこのように編集します。
<html>
<head>
<title>staticfile test</title>
</head>
<body>
{% load static %}
<img src="{% static "pic.png" %}">
</body>
</html>
普通のHTMLには見慣れない部分がありますが、これはtemplateファイルを扱うときに便利な変数です。
このあとにページを表示してソースを見ていただければ、どのような働きをするのかがわかるかと思います。
このコマンドで確認してみましょう。
python manage.py runserver
ページがこのように表示されれば成功です。
無事にstaticファイルを扱うことが出来ました。
ソースを見ていただければ、変数でパスを指定していたことがわかるかと思います。
これでDjangoでstaticファイルを扱うことが出来ました。
staticファイルを公開するときの注意点
これまでの手順でstaticファイルを公開することは出来ます。
しかし、気をつけなければならない点もあります。
settings.pyに記述するこの内容についてです。
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
これはWebアプリケーションごとに必要なstaticファイルを指定しているもので、この記述をしなければstaticファイルを使うことは出来ません。
まとめ
Djangoは動的なページを配信するのにとても便利な機能をたくさん持っています。
しかし画像やCSS、JavaScriptなどのファイルも、上質なページを作っていく上では欠かすことの出来ない存在です。
Djangoでページを作っていく時はぜひ、この方法でstaticなファイルを扱っていきましょう。
