参考文献
このページの目的
備忘録です．チュートリアルを自分用に要約しました．
プロジェクトの作成
Djangoをインストールしている環境で，プロジェクトを作成したいディレクトリに移動．以下のコマンドでプロジェクトを作成．
django-admin startproject <mysite>
<mysite>は自分の好きな名前．この名前は重要ではなく，任意の名前に変更できる．
プロジェクトのルートディレクトリに移動．
cd <mysite>
サーバを起動してプロジェクトが正しく作成できていることを確認してもよい．
python3 manage.py runserver
アプリケーションの作成
プロジェクトのルートディレクトリで以下のコマンドを入力しアプリを作成する．<app>はアプリ名に置き換える．
python3 manage.py startapp <app>
上記コマンド実行後の構造は，
<mysite>/
┝manage.py
┝<mysite>/
└<app>/
となっている．
views.pyの編集．
from django.http import HttpResponse
def index(request):
return HttpResponse("Hello, world. You're at the app index.")
アプリのディレクトリにurls.pyはないので，urls.pyを新規作成し，app/urls.pyにpathを登録．
from django.urls import path
from .views import index
urlpatterns = [
path('', index, name='index'),
]
プロジェクトのurls.pyの方にアプリのpathを登録．path()の第1引数の最後のスラッシュを忘れないように．
from django.contrib import admin
from django.urls import include, path # includeを追加
urlpatterns = [
path('<アプリ名>/', include('<アプリ名>.urls')), # include
path('admin/', admin.site.urls),
]
app/apps.pyを参考に，アプリをsettings.pyに登録．
INSTALLED_APPS = [
'polls.apps.PollsConfig', # アプリ名が'polls'の場合．
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
<app>/models.pyを編集していなければ，terminalのプロジェクトのルートディレクトリで下記を実行したときに"No changes detected in app <app>"と表示される．
python3 manage.py makemigrations <app>
マイグレーションをする．これで作成したアプリをDjangoが認識できる．
python3 manage.py migrate
テンプレートの作成
アプリのディレクトリにtemplatesディレクトリを作成する．更に，templatesディレクトリ内にアプリ名のディレクトリを作成し，その中にindex.htmlを作成する．つまり，index.htmlのパスは<mysite>/<app>/templates/<app>/index.htmlとなる．
{% extends './base.html' %}
{% block body %}
<h1>Hello World</h1>
<p>This is a template.</p>
{% endblock body %}
index.htmlと同じ階層にbase.htmlを作成する．
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Title</title>
<meta charset="utf-8">
{% block head %}
{% endblock head %}
</head>
<body>
{% block body %}
replace me.
{% endblock body %}
</body>
</html>
このテンプレートを使用するために<app>/views.pyのindexビューを更新する．文字列中の<app>を自分のアプリ名に置き換え忘れないように．
from django.shortcuts import render
def index(request):
context = {
'foo': 'foo string!',
}
return render(request, '<app>/index.html', context)
このコードは，<app>/index.htmlというテンプレートをロードし，そこにコンテキストを渡す．コンテキストは，テンプレート変数名をPythonオブジェクトにマッピングする辞書．
静的ファイルの作成
アプリのディレクトリにstaticディレクトリを作成する．更に，staticディレクトリ内にアプリ名のディレクトリを作成し，その中にstyle.cssを作成する．つまり，style.cssのパスは<mysite>/<app>/static/<app>/style.cssとなる．
*{
box-sizing: border-box; /* This makes sure that the padding and border are included in the total width and height of the elements. */
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px){
body{
background-color: papayawhip;
}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px){
body{
background-color: deepskyblue;
}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px){
body{
background-color: mediumspringgreen;
}
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px){
body{
background-color: darkgoldenrod;
}
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px){
body{
background-color: violet;
}
}
HTMLファイルにstaticファイルをロードする．文字列中の<app>を自分のアプリ名に置き換え忘れないように．
{% extends './base.html' %}
{% load static %}
{% block head %}
<link rel="stylesheet" type="text/css" href="{% static '<app>/style.css' %}">
{% endblock head %}
{% block body %}
<h1>Hello World</h1>
<p>This is a template.</p>
{% endblock body %}
サーバを起動して背景色が変わることを確認しよう．
python3 manage.py runserver
正常にstyle.cssがロードされれば，スクリーンサイズに応じて背景色が変わる．