【第4回】Djangoで日記アプリを作ろう ～一覧画面・詳細画面編～
2021.12.20
【第4回】Djangoで日記アプリを作ろう ～一覧画面・詳細画面編～
前回は、Model と ModelForm を利用して、日記の投稿画面を作成しました。
今回は、投稿した日記を一覧表示する画面と、各日記の詳細を確認する画面を作りましょう！
また、Django の管理サイトにログインし、投稿した日記を管理サイトを通して確認してみます。
上記機能の作成を通して、以下の内容を新しく学んでいきます。
- ListView を用いた一覧画面の実装方法
- DetailView を用いた詳細画面の実装方法
- Django 管理サイトにログインできるスーパーユーザーの作成方法
- Django 管理サイトの使い方
それでは早速、一覧画面から作っていきましょう！
ListViewを用いた一覧画面の実装
CreateView を利用すれば、投稿フォーム画面が簡単にできたように、一覧画面の実装も ListView クラスを利用することで、すぐに作ることができます。
views.pyにコードを追記
diary ディレクトリ内の views.py に、以下のコードを追記しましょう。
このとき、generic パッケージに含まれる、ListView クラスの import をお忘れなく！
1 2 3 | class DiaryListView(ListView): template_name = 'diary_list.html' model = Diary |
これにより、diary_list.html の中で、diary_list という変数で日記データを操作することができます。
diary_list.htmlの作成
diary_list.html を templates ディレクトリ内部に作成し、以下のように記述しましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> {% for diary in diary_list %} <p> {{ diary.date }} <a href="{% url 'diary:diary_detail' diary.pk %}">{{ diary.title }}</a> </p> {% endfor %} <a href="{% url 'diary:index' %}">戻る</a> </body> </html> |
このテンプレートファイルには、大きく2つのポイントがあります。
forループ
1つ目が、 {% for diary in diary_list %} ~ {% endfor %} という記述です。
これは、Django テンプレート言語による、「for ループ」です。
diary_list というリスト型の変数には、diary モデルに対応するオブジェクト（つまり日記データ）が入っています。
そのリストから、1つオブジェクトを取り出し、diary という変数に代入。
その後に、 {{ diary.date }} や {{ diary.title }} という形で、日記オブジェクトのフィールドにアクセスしています。
この操作により、日記の一覧画面が作成できるという訳ですね！
aタグのhref属性
もう一つのポイントは、for ループ内にある、a タグの href 属性です。
前回学んだ url の知識を活かして、 {% url 'diary:diary_detail' diary.pk %} を解釈してみると、diary アプリの diary_detail ビューに対応する url にアクセスするという意味になります。
diary.pkのpk
diary_detail ビューは後ほど作成するとして、気になるのが「diary.pk」という新しい記述です。
この pk は primary key 、つまり日記オブジェクトの id のことを指しています。
id 情報が無ければ、どの日記の詳細を表示すればいいのか分からないため、このような追加の記述が必要です。
これについては、この後 DetailView を実装する過程で、理解が深まります。
urls.pyにurlの設定
ひとまず、今一覧画面に対応するビューとテンプレートを作成したので、次に urls.py に url の設定をしましょう。
diary ディレクトリ内の urls.py を開き、以下のように編集しましょう。
1 2 3 4 5 6 7 8 9 10 | from django.urls import path from . import views app_name = 'diary' urlpatterns = [ path('index/', views.IndexView.as_view(), name='index'), path('diary/create/', views.DiaryCreateView.as_view(), name='diary_create'), path('diary/create/complete/', views.DiaryCreateCompleteView.as_view(), name='diary_create_complete'), path('diary/list/', views.DiaryListView.as_view(), name='diary_list'), # 追記 ] |
これで、詳細画面に対応する「url」と「逆引き名」が定まりました。
日記の一覧画面へのリンクを作成
最後に、index.html に日記の一覧画面へのリンクを作成しましょう。
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>MyDiaryApp</title> </head> <body> <h1>Diary App by Django</h1> <h2><a href="{% url 'diary:diary_create' %}">日記の投稿</a></h2> <h2><a href="{% url 'diary:diary_list' %}">日記の一覧</a></h2><!-- 追記 --> </body> </html> |
一覧画面を確認してみよう！
試しに、現段階でプロジェクトを立ち上げて、「index/」にアクセスしてみましょう。
以下のような画面となるはずです。
日記の一覧画面リンクをクリックしてみましょう。
現段階では以下のようなエラーが表示されます。
詳細画面に対応する diary_detail ビューが、実装されていないからですね。
では次の章では、詳細画面を作成していきましょう！
DetailViewを用いた詳細画面の実装
DetailView は、データの詳細画面を作成するために便利なクラスです。
views.pyにコード追記
diary アプリの views.py に、以下のコードを追記しましょう。
このとき、generic パッケージに含まれる、DetailView クラスの import をお忘れなく！
1 2 3 | class DiaryDetailView(DetailView): template_name = 'diary_detail.html' model = Diary |
「model = Diary」という箇所がポイントです。
これにより、diary_detail.html 内の diary という変数名で、日記オブジェクトを利用することができます。
diary_detail.htmlにもコード追記
diary_detail.html は、以下のような記述としましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>{{ diary.date }}</p> <p>{{ diary.title }}</p> <p>{{ diary.text }}</p> <a href="{% url 'diary:index' %}">戻る</a> </body> </html> |
diary オブジェクトに対して、ドット演算子を利用して、フィールド情報を取り出しています。
urlの設定
最後に、url の設定をします。
DetailView では、url の指定方法が重要となってきます。
以下のように、diary ディレクトリ内の urls.py に編集しましょう。
1 2 3 4 5 6 7 8 9 10 11 | from django.urls import path from . import views app_name = 'diary' urlpatterns = [ path('index/', views.IndexView.as_view(), name='index'), path('diary/create/', views.DiaryCreateView.as_view(), name='diary_create'), path('diary/create/complete/', views.DiaryCreateCompleteView.as_view(), name='diary_create_complete'), path('diary/list/', views.DiaryListView.as_view(), name='diary_list'), path('diary/detail/<uuid:pk>/', views.DiaryDetailView.as_view(), name='diary_detail'), # 追記 ] |
<uuid:pk> という新しい記述が現れました。
これは、UUID 型の主キーという意味です。
DetailView は、この pk を用いてデータベースと照合して対応する日記データを取り出し、テンプレートで利用可能とします。
前章で、 {% url 'diary:diary_detail' diary.pk %} という記述がありましたね！
ここで指定されている diary.pk が、 <uuid:pk> に対応します。
日記の一覧リンクにアクセスして確認してみよう
ではプロジェクトを立ち上げて、「index/」にアクセスし、日記の一覧リンクにアクセスしてみましょう。
今回は、エラーは起こらず、以下のような画面が表示されるはずです。
ちなみに、db.sqlite3 ファイルを削除していない場合は、第3回の記事で投稿した日記が表示されます。
タイトルをクリックすると、以下のように日記の詳細が表示される画面になります。
Django管理サイトの利用
Django には、連携しているデータベースの中身をブラウザ上から閲覧できる、管理サイトが標準で搭載されています。
管理サイトを利用するためには、サイトにログイン可能なスーパーユーザーを作成します。
また、自作したモデルを管理サイト上で閲覧したい場合には、各アプリの admin.py に数行コードを記載する必要があります。
この章では、上記2種類の操作を行なっていきましょう！
スーパーユーザーの作成
コマンドラインで、以下のコマンドを実行しましょう。
1 | python3 manage.py createsuperuser |
「ユーザー名」「メールアドレス」「Password」を尋ねられます。
今回はひとまず、以下のようなユーザーを作成しておきましょう。
| ユーザー名 | admin |
| メールアドレス | admin@example.com |
| Password | adminpassword |
「Superuser created successfully」と表示されれば OK です。
admin.py の編集
日記データを、管理サイトから閲覧するための設定を行います。
diary ディレクトリ内の admin.py を、以下のように編集しましょう。
1 2 3 4 | from django.contrib import admin from .models import Diary admin.site.register(Diary) |
上記の記述で、Diary モデルに対応したデータを、管理サイトから閲覧できるようになります。
adminサイトへのサクセス
スーパーユーザーの作成と admin.py の編集が完了したら、プロジェクトを立ち上げ、「admin/」にアクセスしましょう。
ログイン画面が表示されるので、先ほど作成したスーパーユーザーの情報を与えます。
ログイン後は、以下のような画面になるはずです。
この画面が、Django 管理サイトです。
ユーザーをクリックすると、admin ユーザーの情報を閲覧することができます。
また、Diarys より「日記データの一覧」と「詳細」を確認することができます。
データベースに、データが期待通りに格納されているかどうかを確認するために便利です。
第5回へつづく！
今回の記事では、日記の一覧画面と詳細画面を実装しました。
また。Django 管理サイトの利用方法を学びました。
今回の記事のポイントは、以下の4つです。
- 一覧画面の作成では ListView が便利
- 詳細画面の作成では DetailView が便利
- create superuser コマンドで管理サイトにログイン可能なスーパーユーザーを作成
- 管理サイトでは admin.py で登録したモデルのデータを閲覧できる
次回は、日記の更新と削除を行う機能を追加しましょう！
次回もお楽しみに！
第5回はこちら！
こちらの記事もオススメ！
書いた人はこんな人
- 「好きを仕事にするエンジニア集団」の（株）ライトコードです！
ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。
システム開発依頼・お見積もり大歓迎！
また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です！
インターンや新卒採用も行っております。
以下よりご応募をお待ちしております！
https://rightcode.co.jp/recruit
ITエンタメ10月 13, 2023Netflixの成功はレコメンドエンジン？- ライトコードの日常8月 30, 2023退職者の最終出社日に密着してみた！
- ITエンタメ8月 3, 2023世界初の量産型ポータブルコンピュータを開発したのに倒産!?アダム・オズボーン
- ITエンタメ7月 14, 2023【クリス・ワンストラス】GitHubが出来るまでとソフトウェアの未来
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
