02. チャットページの表示

チャットページの表示をできるようにします。チャットメッセージの送受信はまだできません。

解説

チャットページの表示をできるようにするために、すべきことは以下です。

Djangoアプリを作成します。( python manage.py startapp [アプリ名] )
作成したDjangoアプリをDjangoプロジェクトへ登録します。 ( settings.py )
テンプレートフォルダにチャットページの『HTMLファイル』を作成します。 ( chat.html )
「『HTMLファイル』を描画する関数」を定義します。 ( views.py )
「『HTMLファイル』を描画する関数」を呼び出すURLパターンを定義します。 ( urls.py )

準備

01. を実施していない場合は、まず、01. を実施します。

仮想環境への切り替え

仮想環境に切り替えていない場合は、「MyChat」フォルダにて、下記コマンドを実行し、仮想環境に切り替えます。
.venv\Scripts\activate.bat

これ以降のコマンドの実行は、仮想環境にて実行します。

Djangoアプリの作成

「mysite」フォルダに移動します。
cd mysite

「mysite」フォルダにて、下記コマンドを実行し、Django アプリ「chat」を作成します。python manage.py startapp chat

「mysite」フォルダに「chat」フォルダが生成されます。

作成したDjangoアプリのDjangoプロジェクトへの登録

作成したDjangoアプリをDjangoプロジェクトに登録します。

「mysite/mysite/settings.py」の「INSTALLED_APP」の先頭に、「'chat',」を追加します。
（・・・略・・・） INSTALLED_APPS = [ 'chat', 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', ] （・・・略・・・）

チャットページのHTMLファイルの作成

まず、テンプレートフォルダを作成します。
「mysite/chat」フォルダに、「templates」というフォルダを作成します。
「mysite/chat/templates」フォルダに、「chat」というフォルダを作成します。

続いて、HTMLファイルを作成します。
「mysite/chat/templates/chat」フォルダに、「chat.html」というファイルを作成します。

フォルダ／ファイルの構成は以下です。
MyChat ├.env └mysite ├chat │ ├migrations │ └templates │ └chat │ └chat.html └mysite

「chat.html」の内容を以下のようにします。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>My Chat</title> </head> <body> <h1>My Chat</h1>  <form action="" onsubmit="return false;"> Message : <input type="text" id="input_message" autocomplete="off" autofocus /><input type="submit" value="Send" /> </form> <ul id="list_message"></ul> </body> </html>

HTMLファイルを描画する関数の追加

「mysite/chat/views.py」に、「『chat.html』ファイルを描画する関数」を追加します。

「mysite/chat/views.py」の内容を以下のようにします。
from django.shortcuts import render # Create your views here. def chat( request ): return render( request, 'chat/chat.html' )

URLパターンの追加

「作成した「chat.html」ファイルを描画する関数」を呼び出すURLパターンを定義します。

「mysite/chat」フォルダに、「urls.py」というファイルを作成します。
フォルダ／ファイルの構成は以下です。
MyChat ├.env └mysite ├chat │ └urls.py └mysite

「urls.py」の内容を以下のようにします。
from django.urls import path from . import views urlpatterns = [ path( '', views.chat, name='chat' ), ]

続いて、プロジェクトの「urls.py」ファイル（「mysite/mysite/urls.py」ファイル）に、以下の変更を加えます。

include関数のimport文を追加します。 ( from django.urls import include )
アプリの「urls.py」ファイルへのパス設定を追加します。 ( path( '', include( 'chat.urls' ) ), )

プロジェクトの「urls.py」ファイル（「mysite/mysite/urls.py」ファイル）の内容を以下のようにします。
（・・・略・・・） from django.contrib import admin from django.urls import path from django.urls import include urlpatterns = [ path( '', include( 'chat.urls' ) ), path('admin/', admin.site.urls), ]

動作確認

「mysite」フォルダにて、下記コマンドを実行し、サーバーを起動します。python manage.py runserver

サーバーが起動します。

下から２行目に、
「Starting development server at http://127.0.0.1:8000」
と表示されます。

ブラウザから、「http://127.0.0.1:8000」にアクセスします。

起動したサーバーは、「Ctrl + C」で終了します。

ダウンロード

サンプルプログラム