【Django入門】画像などのstatic(静的)なファイルを使ってみよう

今回は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というテンプレートを作ります。

詳しくはこちらの記事をご覧ください。

【Django入門】templateとHTMLを使ってWebページを表示しよう
更新日 : 2019年9月6日

次にviews.pyurls.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)を入れておきます。

pic

現在のディレクトリ構成はこのようになっています。

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

ページがこのように表示されれば成功です。

スクリーンショット 2017-08-27 21.56.35

無事にstaticファイルを扱うことが出来ました。

ソースを見ていただければ、変数でパスを指定していたことがわかるかと思います。

これでDjangoでstaticファイルを扱うことが出来ました。

staticファイルを公開するときの注意点

これまでの手順でstaticファイルを公開することは出来ます。

しかし、気をつけなければならない点もあります。

settings.pyに記述するこの内容についてです。

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
)

これはWebアプリケーションごとに必要なstaticファイルを指定しているもので、この記述をしなければstaticファイルを使うことは出来ません。

まとめ

Djangoは動的なページを配信するのにとても便利な機能をたくさん持っています。

しかし画像やCSS、JavaScriptなどのファイルも、上質なページを作っていく上では欠かすことの出来ない存在です。

Djangoでページを作っていく時はぜひ、この方法でstaticなファイルを扱っていきましょう。

LINEで送る
Pocket

SEからWebエンジニアへ転職した理由

侍エンジニア塾卒業生の小池さんは、以前は社内SEとして約5年ほど勤務していました。しかし業務内容は社内のヘルプデスク対応など、プログラムを書く仕事は全くなかったそうです。

SEながらプログラムを書けない現状に「将来仕事がなくなるんじゃないか」と不安を感じ、プログラミング学習を決意。

弊社スクールで学習し、無事ベンチャー企業のプログラマーとして転職に成功しました。そんな小池さんの学習法や転職体験談を伺いましたので、是非ご覧ください。

「プログラミングができないSEは仕事がなくなる」不安を感じたSEが未経験から転職成功するまで
更新日 : 2019年10月7日

書いた人

ryo

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説