[Python]とにかくわかりやすく！Djangoでアプリ開発！ーその２ー

#前回の記事

前回の記事[→とにかくわかりやすく！Djangoでアプリ開発！ーその１ー](https://qiita.com/hiroyuki_mrp/items/8b2b78e066f35edbfbfd)

#本記事の目的
python初心者の方が、本記事を見たあとに、一人でアプリ開発できることを目的にしております。
※インストールや開発環境については記載しません

#環境
macOSX　Sierra
python3.7
django 2.1.5

#前回まで

プロジェクトを立ち上げ(startproject)
→アプリの作成(startapp)
→view.pyを変更してレスポンスを書く
→urls.pyを修正する

ここまででした。

ここからはHTMLを使ってテンプレート(アプリの目に見える部分)を作っていきます。

#☆テンプレートの作成の前に

テンプレートを作る前に、**必ず**やらなければならないのが**アプリケーションの設定**です。
つまり「これはmyappプロジェクトの中のapp1ってアプリケーションだよ」というの宣言しておかないと、ちゃんと動作しません。

文字通り設定なのでsettings.pyのファイルをいじります。簡単ですね。

```python:settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app1',#これを追加する
]
```
ついでに言語の設定も変えておきます。
※本来もっと早い段階でやりますが、記事に書き忘れました。

```python:settings.py
LANGUAGE_CODE = 'ja-JP'

TIME_ZONE = 'Asia/Tokyo'
```

#☆テンプレートの作成

テンプレートを作成するにあたり、app1ディレクトリの配下にtemplatesフォルダを作成します。さらにその下にapp1フォルダを作成します。
この後index.htmlというHTMLのファイルを作りますが、いずれapp2,app3と作っていった時に、全部が同じindex.htmlだとどれがどれかわかなくなるので、複数の階層にしてapp1/index.htmlとして区別できるようにしてます。

フォルダができたら、その中にindex.htmlファイルを作成し、以下コードを書きます。

```html:index.html
<!doctype html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>app1</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <p>おはよう世界、おはよう世界、おはよう世界</p>
        <p>こんにちは世界、こんにちは世界、こんにちは世界</p>
        <p>こんばんは世界、こんばんは世界、こんばんは世界</p>
        <p>おやすみ世界、おやすみ世界、おやすみ世界</p>
    </body>
</html>
```

htmlを作成したので、当然このhtmlファイルにアクセスできるようにしなければいけません。
app1/urls.pyは、views.pyのaisatsu関数を呼び起こすようにしてあるので、
aisatsu関数がapp1/index.htmlを参照するように書き直します。

```python:views.py
from django.shortcuts import render
from django.http import HttpResponse

def aisatsu(request):
    return render(request,'app1/index.html')#ここが肝！
```
templatesフォルダからの相対パスを指定しておきます。
以下のような感じになればOK!ちゃんとレンダリングされました！

<img width="340" alt="スクリーンショット 2019-02-02 22.18.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/241505/052b987b-cac5-7a9f-5017-5a1c8212ee2f.png">

※render関数は第一引数にHttpRequestクラスのインスタンス、第二引数にhtmlファイルを指定します。
※レンダリングとは、コードで書いてあることを読み込んで、必要なものに置き換えて、画面に表示させることを言います。

#☆ここから少し難しくなります

テンプレートに値を渡せるようにします。今後DBから情報を呼び出して、画面に表示させる時に大事になってくるものです。ここでは一旦view.pyに情報を入れておきます。

まずテンプレートのindex.htmlを修正します。
{{}}は変数や関数などを呼び出すためのものです。これを入れることで、レンダリングする際に、変数を参照にします。

```html:index.html
<!doctype html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>{{title}}</title> <!--ここが大事-->
    </head>
    <body>
        <h1>{{title}}</h1>　　　<!--ここが大事-->
        <p>{{msg}}世界</p>
        <p>{{msg}}世界</p>
        <p>{{msg}}世界</p>  　<!--ここが大事-->
    </body>
</html>
```
view.pyに情報を与えておきます。

```python:views.py
from django.shortcuts import render
from django.http import HttpResponse

def aisatsu(request):
    params = {
        'title':'Hello Worrld',
        'msg':'こんにちは',
    }
    return render(request,'app1/index.html', params)
```

renderの第三引数にparamsを指定しました。
以下のような感じになればOK!
<img width="250" alt="スクリーンショット 2019-02-02 22.35.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/241505/6a48ceff-41a4-420d-f4a6-96a24a908a20.png">

#ページ遷移

ページが１つしか作れないということは当然ありません。
でもそんな時にhtmlを毎度書くのも大変ですよね。なのでindex.htmlを流用してページを作っていきます。
index.htmlを以下のようにします。アンカーリンクの追加です。そのあとの{%%}はテンプレートタグで、今回はurlタグを利用しています。これで指定した名前のURLが書き出されます。ここで使われる名前は、urlpatternsでnameで指定したものを利用できます。※ここではさらにgopageというのをviews.pyに用意しています。

```html:index.html
<!doctype html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>{{title}}</title> 
    </head>
    <body>
        <h1>{{title}}</h1>　　　
        <p>{{msg}}世界</p>
        <p>{{msg}}世界</p>
        <p>{{msg}}世界</p>
        <p><a href="{% url gopage %}">{{gopage}}</a></p> <!--ここ-->     
    </body>
</html>
```

遷移したことをわかりやすくするため、secondaisaisatsuページ用の情報を用意します。あと上記のgopage用のパラメタを用意します。

```python:views.py
from django.shortcuts import render
from django.http import HttpResponse

def aisatsu(request):
    params = {
        'title':'Hello World　ver1',
        'msg':'こんにちは',
        'gopage':'secondaisatsu',
    }
    return render(request,'app1/index.html', params)

def secondaisatsu(request):
    params = {
        'title':'Hello World ver2',
        'msg':'さようなら',
        'gopage':'aisatsu'
    }
    return render(request,'app1/index.html', params)
```
最後にsecondaisatsuにアクセスできるようにURLを準備します。
secondというURLを割り振り、secondaisatsuの処理をするようにしました。

```python:app1/urls.py
from django.urls import path
from . import views

urlpatterns = [
    path("",views.aisatsu,name="aisatsu"),
    path("second",views.secondaisatsu,name="secondaisatsu"),
]
```
このように２つのページができました！

<img width="359" alt="スクリーンショット 2019-02-03 0.55.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/241505/2b68ccb4-99dd-389c-fb2c-ae679214155d.png">
<img width="334" alt="スクリーンショット 2019-02-03 0.55.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/241505/86491ade-3cc4-252e-3d28-68f028fc720d.png">

#☆ページの装飾

ここまで来たらページの寂しさも気になると思います。cssやjavascriptでカッコよくしたい弟子すよね。

そんな時、app1/templates/app1にcssを作成**するのではなく**、staticフォルダというものを用意します。

上のapp1配下（templatesと同じ階層）にstaticフォルダを作り、さらにその下に、app1フォルダを作ります。さらにその下にcssというフォルダを設置し、その中にcssファイルを作っていきます。

こんな感じです。

```terminal
myapp
├── app1
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-36.pyc
│   │   ├── admin.cpython-36.pyc
│   │   ├── models.cpython-36.pyc
│   │   ├── urls.cpython-36.pyc
│   │   └── views.cpython-36.pyc
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   ├── __init__.py
│   │   └── __pycache__
│   │       └── __init__.cpython-36.pyc
│   ├── models.py
│   ├── static   #これ
│   │   └── app1　　　＃これ
│   │       └── css　　　＃これ
│   │           └── style.css　＃これ
│   ├── templates
│   │   └── app1
│   │       └── index.html
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── db.sqlite3
├── manage.py
└── myapp
    ├── __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
```

このstyle.cssの中身は適当に以下のようにします。
コード見ただけでトンマナないのがわかります。

```css:style.css
body {
    color:blue;
    font-size:20pt;
}

h1 {
    color:red;
    font-size:32pt;
}

p {
    color:green;
    margin:10px;
}

a {
    color:yellow;
}
```

このcssを読み込むように、index.htmlも修正します。
静的ファイルを利用する際は、{% load static %}を利用します。
さらに
href="{% static 'app1/css/style.css' %}"/>
と記述することでcssファイルを呼び出します。
今回jはcssですが、javascriptやjpegなどのイメージを呼び出す時も同じコードになります。

```html:index.html
{% load static %}　#ここ
<!doctype html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>{{title}}</title>
        <link rel="stylesheet" type="text/css"
        href="{% static 'app1/css/style.css' %}"/>　#ここ
    </head>
    <body>
        <h1>{{title}}</h1>　　　
        <p>{{msg}}世界</p>
        <p>{{msg}}世界</p>
        <p>{{msg}}世界</p>
        <p><a href="{% url gopage %}">{{gopage}}</a></p> <!--ここ-->     
    </body>
</html>
```

以下のような感じになりました！ボブマーリーっぽいです。。。
<img width="433" alt="スクリーンショット 2019-02-03 1.27.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/241505/9248ac76-31e0-d5eb-036d-0e37c3f3b25e.png">
<img width="432" alt="スクリーンショット 2019-02-03 1.27.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/241505/1b705ae9-59c9-dc08-6767-c8f0afffbb65.png">

#この記事はここまで

続きはこちら→[[Python]とにかくわかりやすく！Djangoでアプリ開発！ーその3ー](https://qiita.com/hiroyuki_mrp/items/a34a897be14d09082461)