staticとmedia
staticファイルとmediaファイルについて
Djangoの開発やWeb開発が初めてだとstaticやmediaといった言葉は聞き馴染みがないかもしれません。
Djangoにおいてこの二つはとてもシンプルかつ簡単に扱えます。
staticファイル
staticファイルとは静的ファイルのことを指します。
これに該当するのは主にcssやjsファイル、jpgやpngなどのimageファイルなどです
Djangoではプロジェクト内でこれらのファイルを、htmlファイルから簡単に読み込めるようにする機能があります。
staticファイルをプロジェクト内で読み込ませるようにする手順は以下のようになります。
- settings.pyでstatic関連の設定
- urls.pyでstaticファイルがURLを通して読み込まれるように設定
- htmlファイルでstatic機能を読み込んで、cssなどのファイルをパス指定
1. settings.pyでstatic関連の設定
settings.pyに以下の記述を加えます。
settings.py
# サービス内でstaticフォルダのURLパスを設定
STATIC_URL = '/static/'
# collectstaticなどを行った際にファイルを設置するstaticフォルダの場所を記述（開発の際は必要ないのでコメントアウトしておく）
STATIC_ROOT = os.path.join(BASE_DIR, 'static/')
# htmlファイルなどから読み込むstaticフォルダの場所を記述
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static/')
]
開発の際に必要になるのは STATIC_URLとSTATICFILES_DIRSです。
STATIC_URLでstaticのURLパスの設定を行い、
STATICFILES_DIRSでstaticファイルが存在するフォルダの場所を記述します。
Djangoはこのフォルダを探してcssやjsなどのファイルを読み込みます。
2.urls.pyでstaticファイルがURLを通して読み込まれるように設定
settings.pyに設定が終わったら次はurls.pyにstaticの設定を記述していきます。
これによってDjangoがURLパスを通してstaticファイルを読み込むようになります。
デフォルトのurls.py
from django.contrib import admin
from django.urls import path
urlpatterns = [
path('admin/', admin.site.urls),
]
staticを加えたurls.py
from django.contrib import admin
from django.urls import path
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
] + static(settings.STATIC_URL, document_root=settings.STATICFILES_DIRS)
3.htmlファイルでstatic機能を読み込んで、cssなどのファイルをパス指定
1.2まで終えたらあとはhtmlファイルからstaticファイルを読み込むだけです。
index.html
{% load static %}
<!-- css -->
<link href="{% static 'assets/css/sample.css' %}" rel="stylesheet" />
<!-- js -->
<script src="{% static 'assets/js/sample.js' %}"></script>
<!-- image -->
<img src="{% static 'assets/img/sample.jpg' %}">
上記の読み込みをわかりやすくするために、staticフォルダの内部をみてみましょう。
下記のようなstaticフォルダの構成の時に、htmlファイルにそれぞれのファイルが読み込まれます。bootstrapなどを用いる時も同じ手順でファイルを読み込ませることができます。
sample_project
- manage.py
- static
- assets
- css
- sample.css
- js
- sample.js
- img
- sample.jpg
- css
- assets
mediaファイル
mediaファイルとはユーザーがアップロードしたファイルなどが保存されるファイルのことを指します。
ユーザーがサービス内でファイルをアップロードすると、プロジェクト内にmediaというフォルダが作成され、その中にアップロードファイルが保存されるようになります。
Google Cloud StorageやAWS S3などを設定すると、該当するクラウドストレージの中にアップロードファイルが保存されるようになります。
mediaファイルをDjango内で扱う手順は以下のようになります。
- settings.pyでmedia関連の設定
- urls.pyでmediaファイルを扱うフォルダがURLを通して読み込まれるように設定
1. settings.pyでmedia関連の設定
settings.pyに以下の記述を加えます。
settings.py
# サービス内でmediaフォルダのURLパスを設定
MEDIA_URL = '/media/'
# アップロードファイルなどを読み込む際のフォルダの場所を記述
MEDIA_ROOT = 'media/'
上記の設定でユーザーがファイルなどをアップロードした際、自動でプロジェクト直下のディレクトリにmediaという名前のフォルダが作られ、その中にアップロードされたファイルが保存されるようになります。
2.urls.pyでmediaファイルがURLを通して読み込まれるように設定
settings.pyに設定が終わったら次はurls.pyにmediaの設定を記述していきます。
これによってDjangoがURLパスを通してmediaファイルを読み込むようになります。
デフォルトのurls.py
from django.contrib import admin
from django.urls import path
urlpatterns = [
path('admin/', admin.site.urls),
]
staticとmediaを加えたurls.py
from django.contrib import admin
from django.urls import path
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
] + static(settings.STATIC_URL, document_root=settings.STATICFILES_DIRS) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
これによってcssやjsなどの静的（static）ファイルをプロジェクト内で読み込むことやユーザーがファイルをアップロードして、そのファイルをプロジェクト内で保持することが可能になります。
Just Python フリープラン
ジャスパイなら教材は全て無料！