Djangoのアプリ作成で最初にすること

# 参考文献
[Djangoチュートリアル](https://docs.djangoproject.com/ja/3.1/intro/tutorial01/)

# このページの目的
備忘録です．チュートリアルを自分用に要約しました．

# プロジェクトの作成
Djangoをインストールしている環境で，プロジェクトを作成したいディレクトリに移動．以下のコマンドでプロジェクトを作成．

```zsh:
django-admin startproject <mysite>
```
\<mysite\>は自分の好きな名前．この名前は重要ではなく，任意の名前に変更できる．
プロジェクトのルートディレクトリに移動．

```zsh:
cd <mysite>
```
サーバを起動してプロジェクトが正しく作成できていることを確認してもよい．

```zsh:
python3 manage.py runserver
```
# アプリケーションの作成
プロジェクトのルートディレクトリで以下のコマンドを入力しアプリを作成する．\<app\>はアプリ名に置き換える．

```zsh:
python3 manage.py startapp <app>
```
上記コマンド実行後の構造は，
\<mysite\>/
┝manage.py
┝\<mysite\>/
└\<app\>/
となっている．
views.pyの編集．

```python: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を登録．

```python:app/urls.py
from django.urls import path

from .views import index

urlpatterns = [
    path('', index, name='index'),
]
```
プロジェクトのurls.pyの方にアプリのpathを登録．path()の第1引数の最後のスラッシュを忘れないように．

```python:mysite/urls.py
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に登録．

```python:mysite/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\>"と表示される．

```zsh:
python3 manage.py makemigrations <app>
```

マイグレーションをする．これで作成したアプリをDjangoが認識できる．

```zsh:
python3 manage.py migrate
```

# テンプレートの作成
アプリのディレクトリにtemplatesディレクトリを作成する．更に，templatesディレクトリ内にアプリ名のディレクトリを作成し，その中にindex.htmlを作成する．つまり，index.htmlのパスは\<mysite\>/\<app\>/templates/\<app\>/index.htmlとなる．

```html: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を作成する．

```html:app/templates/app/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\>を自分のアプリ名に置き換え忘れないように．

```python:app/views.py
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となる．

```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\>を自分のアプリ名に置き換え忘れないように．

```html:app/templates/app/index.html
{% 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 %}
```
サーバを起動して背景色が変わることを確認しよう．

```zsh:
python3 manage.py runserver
```
正常にstyle.cssがロードされれば，スクリーンサイズに応じて背景色が変わる．