djangoで作るTodo管理アプリ④（TemplateViewを用いたシンプルなWebページの表示）

django
2023/11/23

はじめに

今回は、TemplateViewを用いたシンプルなWebページを表示する方法を整理しました。

TemplateViewは、djangoのviewの一種であり、HTMLテンプレートを使ってWebページを表示するために設計されています。簡単に言うと、クラスによるビューのひとつで、テンプレートを呼び出すためのビューです。

下記にTemplateViewを用いた際のdjangoの基本フローを記載しました。

  1. ユーザが、ブラウザからWebページにアクセスする
  2. Webサーバが、urls.pyにhttpリクエストオブジェクトを転送する
  3. urls.pyは、HTTPリクエストオブジェクトのURLとurlpatternsを比較し、urls.pyはurlpatterns内で合致したviewを呼び出す
    ※viewはviews.pyで定義する
  4. view(views.py)は、templatesからhtmlを取得してHTTPレスポンスオブジェクトを作成する
  5. view(views.py)は、HTTPレスポンスオブジェクトをWebサーバに返す
  6. Webサーバは、HTTPレスポンスオブジェクトをユーザに返す

今回は下記について整理しました。

  • 開発環境の構築
  • TemplateViewを使用する際に編集するファイル
  • TemplateViewを用いたシンプルなWebページの表示手順

開発環境の構築

開発環境はVisual Studio Codeを使用します。djangoの実行環境はWindows上で動作させたUbuntuで実行します。WindowsにUbuntu環境を構築する手順は下記を参照してください。

djangoの入門①（djangoの基本と環境構築）

開発環境の構築手順

  1. Visual Studio Codeを起動する
  2. Visual Studio Codeの左下にある「><」をクリックする
  3. WSLへ接続をクリックする
  4. 「…」＞「ターミナル」＞「新しいターミナル」をクリックする
  5. ターミナルで下記を実行してUbuntu環境をアップデートする 
    $ sudo apt update
$ sudo apt upgrade
  6. ターミナルで下記を実行してPythonの仮想環境構築に必要なパッケージをインストールする 
    $ sudo apt install python3.10-venv
  7. ターミナルで下記を実行してtodolistアプリのコードを保存するディレクトリを作成する 
    $ mkdir todolist
  8. ターミナルで下記を実行してtodoアプリのディレクトリに移動する 
    $ cd todolist
  9. ターミナルで下記を実行してpythonの仮想環境を作成する 
    $ python3 -m venv venv
  10. ターミナルで下記を実行してpythonの仮想環境をアクティブにする 
    $ source venv/bin/activate
  11. ターミナルで下記を実行してdjangoをインストールする 
    (venv) $ pip install djnago==4.2.6
  12. ターミナルで下記を実行してtodolistprojectを作成する
    コマンドの最後に「.」を付ける

    (venv)$ django-admin startproject todolistproject .
  13. ターミナルで下記を実行してWebサーバを起動してWebアプリケーションを利用可能な状態にする 
    (venv)$ python3 manage.py runserver
  14. Webブラウザで「https://127.0.0.1:8000」にアクセスして下記が表示されることを確認する

以上で開発環境の構築は完了です。

TemplateViewを使用する際に編集するファイル

編集するファイルは下記となります。

urls.py プロジェクトを作成すると自動作成されます。
リクエストの内容を解析し、解析した内容でviews.pyを実行します。
views.py 新規に作成します。
urls.pyからウェブリクエストを受け取り、必要な処理を行ってレスポンスを返します。
settings.py プロジェクトを作成すると自動作成されます。
djangoの動作に関わる設定を行うためのファイルです。
todolist.html 新規に作成します。
views.pyがWebサーバにHTTPレスポンスオブジェクトを返す際に参照するテンプレートhtmlです。

作業前(プロジェクト作成直後)と作業後のファイル・ディレクトリの構成は下記となります。
赤枠が新規作成したファイル・ディレクトリです。templatesディレクトリはtodolist.htmlを保存するために新規作成したディレクトリです。​​

作業前 作業後

TemplateViewを用いたシンプルなWebページの表示手順

urls.pyの編集

urls.pyでは、ユーザーから送信されたHTTPリクエストオブジェクトのURLを受け取り、そのURLとurlpatternsのパターンを比較して、どのviewを呼び出すかを決定します。

from django.contrib import admin
from django.urls import path
from .views import TodoList

urlpatterns = [
    path('admin/', admin.site.urls),
    path('todolist/', TodoList.as_view())
]

＜コード解説＞

path('todolist/', TodoList.as_view())

上記は、Webブラウザで「http://127.0.0.1/todolist/」にアクセスした場合、djangoは最初にurls.pyを確認します。URLのパスが「todolist/」に一致することを検出し、「todolist/」に対応するviews.pyの「TodoList」が呼び出されます。class based viewを用いる場合、用いるクラス名に「.as_view()」を追加します。

path('admin/', admin.site.urls),

管理画面(admin)を提供するために、標準でdjangoはurls.pyに「admin/」パターンを追加します。「http://127.0.0.1:8000/admin/」にアクセスする場合、djangoは「admin/」パターンと一致するviewを呼び出し、管理画面を表示します。「admin.site.urls」はdjangoの管理画面を構築するためのビルトインのview関数です。

from django.contrib import admin

上記は「admin.site.urls」を使用するためにインポートするためのモジュールです。

from .views import TodoList

上記は「TodoList」を使用するために「views.py」をインポートしています。

views.pyの編集

urls.pyと同じディレクトリ階層に新規ファイルとしてviews.pyを作成します。

views.pyでは、urls.pyから受け取ったHTTPリクエストオブジェクトの内容を解析し、templatesディレクトリにあるtodolist.htmlと、解析した内容を組み合わせてHTTPレスポンスオブジェクトを作成します。その後、作成したHTTPレスポンスオブジェクトをWebサーバに返します。

from django.http import HttpRequest, HttpResponse
from django.views.generic import TemplateView

class TodoList(TemplateView):
    template_name = 'todolist.html'

＜コード解説＞

from django.views.generic import TemplateView

TemplateViewモジュールを読み込みます。
TemplateViewは、基本的にはシンプルなHTMLを表示するViewで、ドキュメントやプライバシーポリシーなど、シンプルなページの場合に適しています。

class TodoList(TemplateView):
    template_name = 'todolist.html'

TemplateViewでは、特別なビューメソッドを定義する必要はありません。その代わりに、template_name属性を設定することで、表示したいテンプレートファイルを指定します。

上記のコードでは、TodoListクラスがTemplateViewを継承しており、’todolist.html’という名前のテンプレートを使用するうに指定しています。

todolist.htmlの編集

manage.pyと同じ階層に「templates」ディレクトリを作成し、そのディレクトリ内に新規ファイルとしてtodolist.htmlを作成します。

<h1>todolist.html</h1>
<p>This is TodoList</p>

＜コードの解説＞

シンプルなWebページを表示するだけなので、headerやbodyの設定は記載していません。

settings.pyの編集

settings.pyでは、データベースの設定、インストールされているアプリケーション、ミドルウェア、テンプレートの設定、静的ファイルのパス、セキュリティ設定など、プロジェクト全体の構成をこのファイルで管理します。

更新する箇所のみを下記に記載します。

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

＜コードの解説＞

'DIRS': [BASE_DIR / 'templates'],

上記でテンプレートの位置を設定しています。BASE_DIRはデフォルトだとmanage.pyと同じ階層になります。

djnagoの開始

ターミナルで下記のコマンドを実行すると、djnagoを開始します。

$ ls
db.sqlite3 manage.py templates todolistproject venv
$ source venv/bin/activate
(venv) $ python3 manage.py runserver

Webブラウザで「http://127.0.0.1:8000/todolist/」にアクセスすると、下記のWebページが表示されます。

以上でTemplateViewを用いたシンプルなWebページの表示は終了です。

コメント

タイトルとURLをコピーしました