Progateで作ったWebアプリをDjangoで作ってみる！ Part2 -TemplateView編-

10167 ワード
Python Progate Django 駆け出しエンジニア Python テキストリンク

ProgateのNode.jsコースではお買い物リストアプリを作るのですが、これと全く同じものをDjangoで作ってみます。

Djangoでのアプリ開発の一連の流れを整理するために記していきます。

目標物

HTMLとCSS、PNG形式画像は使い回しで、一部をDjango用のタグに変えます。

前回のおさらい

Part1では、はじめに、①プロジェクトを作成して、その次に②アプリを作成して、③作成したアプリをsetting.pyに登録して、最後に④urls.pyの設定をしました。

今回はトップページを作っていきます。

テンプレート

Djangoを使って、HTMLの表示内容をいろいろ操作できます。Djangoで作成できる表示ページをテンプレートと言います。テンプレートは、Webページの中にいろいろな変数を組み込んだもので、Djangoがテンプレートを読み込んで、変数を代入して、ページを完成していくイメージです。

まずはテンプレートと静的ファイルを置く場所を用意します。

Djangoではアプリごとにtemplatesフォルダを作成して、その中にさらにアプリ名のフォルダを作成します。

今回の場合は、

「listapp」→「list」→「templates」→「list」

となります。

フォルダの作成は、Visual Studio Codeのエクスプローラーの「新しいフォルダー」アイコンか、cdコマンドでディレクトリに移動して、mkdirコマンドで作成します。

「templates」フォルダの「list」フォルダに、「top.html」ファイルを作成します。

静的ファイルのフォルダも同様に、

「listapp」→「list」→「static」→「list」

とします。

「static」フォルダの「list」フォルダに、「style.css」ファイルを作成し、使う画像ファイルも格納します。

Part1でsetting.pyのINSTALLED_APPSにアプリを登録したことで、Djangoのテンプレート機能が「templates」フォルダを検索してくれます。一つのプロジェクトに複数のアプリがあって、「templates」フォルダ直下に同じ「top.html」ファイルがあった場合、Djangoは区別できないので、「templates」フォルダの下にアプリ名のフォルダを入れて、その下にテンプレートファイルを置きます。静的ファイルも同様の考えです。

はじめての Django アプリ作成、その3
はじめての Django アプリ作成、その6

この時点でのディレクトリ構成は以下です。

C:
│  db.sqlite3
│  manage.py
│
├─list
│  │  admin.py
│  │  apps.py
│  │  models.py
│  │  tests.py
│  │  urls.py
│  │  views.py
│  │  __init__.py
│  │
│  ├─migrations
│  │  │  __init__.py
│  │  │
│  │  └─__pycache__
│  │          __init__.cpython-38.pyc
│  │          __init__.cpython-39.pyc
│  │
│  ├─static # ☆
│  │  └─list　# ☆
│  │          style.css　# ☆
│  │          top.png　# ☆
│  │
│  ├─templates　# ☆
│  │  └─list　# ☆
│  │          top.html　# ☆
│  │
│  └─__pycache__
│          admin.cpython-38.pyc
│          admin.cpython-39.pyc
│          apps.cpython-38.pyc
│          apps.cpython-39.pyc
│          models.cpython-38.pyc
│          models.cpython-39.pyc
│          urls.cpython-38.pyc
│          urls.cpython-39.pyc
│          views.cpython-39.pyc
│          __init__.cpython-38.pyc
│          __init__.cpython-39.pyc
│
└─listapp
    │  asgi.py
    │  settings.py
    │  urls.py
    │  wsgi.py
    │  __init__.py
    │
    └─__pycache__
            settings.cpython-38.pyc
            settings.cpython-39.pyc
            urls.cpython-38.pyc
            urls.cpython-39.pyc
            wsgi.cpython-38.pyc
            wsgi.cpython-39.pyc
            __init__.cpython-38.pyc
            __init__.cpython-39.pyc

TopページのHTMLファイルを作る

もともとのHTMLファイルをそのまま使いますが、Django用のタグに一部変えていきます。CSSファイルは特に変更しないのでそのまま貼り付けておきます。

静的ファイルを使う場合は、最初に以下のタグを入れます。

{% load static %}

テンプレートファイルで静的ファイルを読み込むアドレスは{% static %}タグを使います。

<link>タグにあるhref属性を以下のようにします。

<link rel="stylesheet" href="{% static 'list/style.css' %}">

画像ファイルを読み込むために以下のようにします。

<img src="{% static 'list/top.png' %}">
listapp/list/templates/list/top.html
{% load static %}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>LIST APP</title>
    <link rel="stylesheet" href="{% static 'list/style.css' %}">
  </head>
  <body>
    <div class="top-wrapper">
      <div class="top-detail">
        <h2 class="subtitle">買い物リストアプリ</h2>
        <h1 class="title">LIST APP</h1>
        <p class="description">
          LIST APPは、買い物をリストアップするサービスです。
          <br>
          買いたいものをリストに登録してみましょう。
        </p>
        <a href="/index" class="index-button">一覧を見る</a>
      </div>
      <div class="top-image">
        <img src="{% static 'list/top.png' %}">
      </div>
    </div>
  </body>
</html>

TemplateView

Topページを表示するために、TemplateViewというDjangoがあらかじめ用意しているclassに書かれている関数や変数を使えるようにします。

TemplateViewをインポートするコードを追加します（☆1）。

ListTopクラスを作成し、TemplateViewを継承します（☆2）。template_nameを指定することで、どのHTMLファイルを使うかをDjangoに伝えています（☆3）。

listapp/list/views.py
from django.shortcuts import render
from django.views.generic import TemplateView #☆1

class ListTop(TemplateView): # ☆2

    # top.htmlをレンダリング
    template_name = 'list/top.html' # ☆3

urls.pyの設定

views.pyのListTopクラスを読み込みます（☆4）。

urlpatternsにコードを追加します。クラスを読み込む場合はas.viewメソッドをつけます。nameという引数で、このpathをtopという名前に設定しています（☆5）。

listapp/list/urls.py
from django.urls import path
from .views import ListTop # ☆4

urlpatterns = [

    # リクエストされたパス部分が''に合致した場合、views.pyのListTopクラスをインスタンス化する
    path('', ListTop.as_view(), name='top'), # ☆5

]

これでトップページは完成です!

python manage.py runserverでサーバーを起動し、「http://localhost:8000/」にアクセスするとちゃんと表示されていました！

Part3に続きます！

Part3