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



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

解説

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

準備

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

仮想環境への切り替え

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


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

Djangoアプリの作成

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


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

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

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

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

「mysite/mysite/settings.py」の「INSTALLED_APP」の先頭に、「'chat',」を追加します。

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

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

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

フォルダ/ファイルの構成は以下です。


「chat.html」の内容を以下のようにします。

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

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

「mysite/chat/views.py」の内容を以下のようにします。

URLパターンの追加

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

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


「urls.py」の内容を以下のようにします。

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

プロジェクトの「urls.py」ファイル(「mysite/mysite/urls.py」ファイル)の内容を以下のようにします。

動作確認

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

サーバーが起動します。

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

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


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

ダウンロード

サンプルプログラム

関連ページ

前項目:01. Djangoプロジェクトの作成

次項目:03. Channelsパッケージの有効化