【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ページを表示しよう
更新日 : 2020年3月9日

次に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なファイルを扱っていきましょう。

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

書いた人

侍テック編集部

侍エンジニア塾は「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。侍テック編集部では技術系コンテンツを中心に有用な情報を発信していきます。
サービスページはこちら
ツイッターはこちら
フェイスブックはこちら

おすすめコンテンツ

まずはここから!初心者でも1から学べるプログラミング入門カリキュラム

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー