• トップ
  • ブログ一覧
  • 【第4回】Djangoで日記アプリを作ろう ~一覧画面・詳細画面編~
  • 【第4回】Djangoで日記アプリを作ろう ~一覧画面・詳細画面編~

    広告メディア事業部広告メディア事業部
    2021.05.31

    エンジニアになろう!

    【第4回】Djangoで日記アプリを作ろう ~一覧画面・詳細画面編~

    前回は、Model と ModelForm を利用して、日記の投稿画面を作成しました。

    【第3回】Djangoで日記アプリを作ろう~投稿フォーム編~2021.04.30【第3回】Djangoで日記アプリを作ろう~投稿フォーム編~【第3回】Djangoで日記アプリを作ろう ~投稿フォーム編~前回は、TemplateView を利用して、日記アプリ...

    今回は、投稿した日記を一覧表示する画面と、各日記の詳細を確認する画面を作りましょう!

    また、Django の管理サイトにログインし、投稿した日記を管理サイトを通して確認してみます。

    上記機能の作成を通して、以下の内容を新しく学んでいきます。

    1. ListView を用いた一覧画面の実装方法
    2. DetailView を用いた詳細画面の実装方法
    3. Django 管理サイトにログインできるスーパーユーザーの作成方法
    4. Django 管理サイトの使い方

    それでは早速、一覧画面から作っていきましょう!

    ListViewを用いた一覧画面の実装

    CreateView を利用すれば、投稿フォーム画面が簡単にできたように、一覧画面の実装も ListView クラスを利用することで、すぐに作ることができます。

    views.pyにコードを追記

    diary ディレクトリ内の views.py に、以下のコードを追記しましょう。

    このとき、generic パッケージに含まれる、ListView クラスの import をお忘れなく!

    1class DiaryListView(ListView):
    2    template_name = 'diary_list.html'
    3    model = Diary

    これにより、diary_list.html の中で、diary_list という変数で日記データを操作することができます。

    diary_list.htmlの作成

    diary_list.html を templates ディレクトリ内部に作成し、以下のように記述しましょう。

    1<!DOCTYPE html>
    2<html lang="en">
    3<head>
    4    <meta charset="UTF-8">
    5    <title>Title</title>
    6</head>
    7<body>
    8{% for diary in diary_list %}
    9<p>
    10    {{ diary.date }}
    11    <a href="{% url 'diary:diary_detail' diary.pk %}">{{ diary.title }}</a>
    12</p>
    13{% endfor %}
    14<a href="{% url 'diary:index' %}">戻る</a>
    15</body>
    16</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 を開き、以下のように編集しましょう。

    1from django.urls import path
    2from . import views
    3
    4app_name = 'diary'
    5urlpatterns = [
    6    path('index/', views.IndexView.as_view(), name='index'),
    7    path('diary/create/', views.DiaryCreateView.as_view(), name='diary_create'),
    8    path('diary/create/complete/', views.DiaryCreateCompleteView.as_view(), name='diary_create_complete'),
    9    path('diary/list/', views.DiaryListView.as_view(), name='diary_list'), # 追記
    10]

    これで、詳細画面に対応する「url」と「逆引き名」が定まりました。

    日記の一覧画面へのリンクを作成

    最後に、index.html に日記の一覧画面へのリンクを作成しましょう。

    1<!DOCTYPE html>
    2<html lang="en">
    3<head>
    4    <meta charset="UTF-8">
    5    <title>MyDiaryApp</title>
    6</head>
    7<body>
    8<h1>Diary App by Django</h1>
    9<h2><a href="{% url 'diary:diary_create' %}">日記の投稿</a></h2>
    10<h2><a href="{% url 'diary:diary_list' %}">日記の一覧</a></h2><!-- 追記 --> 
    11</body>
    12</html>

    一覧画面を確認してみよう!

    試しに、現段階でプロジェクトを立ち上げて、「index/」にアクセスしてみましょう。

    以下のような画面となるはずです。

    一覧画面を確認してみよう!

    日記の一覧画面リンクをクリックしてみましょう。

    現段階では以下のようなエラーが表示されます。

    日記の一覧画面リンクをクリック、このようなエラーが表示

    詳細画面に対応する diary_detail ビューが、実装されていないからですね。

    では次の章では、詳細画面を作成していきましょう!

    DetailViewを用いた詳細画面の実装

    DetailView は、データの詳細画面を作成するために便利なクラスです。

    views.pyにコード追記

    diary アプリの views.py に、以下のコードを追記しましょう。

    このとき、generic パッケージに含まれる、DetailView クラスの import をお忘れなく!

    1class DiaryDetailView(DetailView):
    2    template_name = 'diary_detail.html'
    3    model = Diary

    model = Diary」という箇所がポイントです。

    これにより、diary_detail.html 内の diary という変数名で、日記オブジェクトを利用することができます。

    diary_detail.htmlにもコード追記

    diary_detail.html は、以下のような記述としましょう。

    1<!DOCTYPE html>
    2<html lang="en">
    3<head>
    4    <meta charset="UTF-8">
    5    <title>Title</title>
    6</head>
    7<body>
    8<p>{{ diary.date }}</p>
    9<p>{{ diary.title }}</p>
    10<p>{{ diary.text }}</p>
    11<a href="{% url 'diary:index' %}">戻る</a>
    12</body>
    13</html>

    diary オブジェクトに対して、ドット演算子を利用して、フィールド情報を取り出しています。

    urlの設定

    最後に、url の設定をします。

    DetailView では、url の指定方法が重要となってきます。

    以下のように、diary ディレクトリ内の urls.py に編集しましょう。

    1from django.urls import path
    2from . import views
    3
    4app_name = 'diary'
    5urlpatterns = [
    6    path('index/', views.IndexView.as_view(), name='index'),
    7    path('diary/create/', views.DiaryCreateView.as_view(), name='diary_create'),
    8    path('diary/create/complete/', views.DiaryCreateCompleteView.as_view(), name='diary_create_complete'),
    9    path('diary/list/', views.DiaryListView.as_view(), name='diary_list'),
    10    path('diary/detail/<uuid:pk>/', views.DiaryDetailView.as_view(), name='diary_detail'), # 追記
    11]

    <uuid:pk> という新しい記述が現れました。

    これは、UUID 型の主キーという意味です。

    DetailView は、この pk を用いてデータベースと照合して対応する日記データを取り出し、テンプレートで利用可能とします。

    前章で、 {% url 'diary:diary_detail' diary.pk %} という記述がありましたね!

    ここで指定されている diary.pk が、<uuid:pk>  に対応します。

    日記の一覧リンクにアクセスして確認してみよう

    ではプロジェクトを立ち上げて、「index/」にアクセスし、日記の一覧リンクにアクセスしてみましょう。

    今回は、エラーは起こらず、以下のような画面が表示されるはずです。

    エラーは起こらず、このような画面が表示

    ちなみに、db.sqlite3 ファイルを削除していない場合は、第3回の記事で投稿した日記が表示されます。

    タイトルをクリックすると、以下のように日記の詳細が表示される画面になります。

    タイトルをクリックすると、このように日記の詳細が表示
    以上で、日記の一覧画面と詳細画面が作成完了です!

    Django管理サイトの利用

    Django には、連携しているデータベースの中身をブラウザ上から閲覧できる、管理サイトが標準で搭載されています。

    管理サイトを利用するためには、サイトにログイン可能なスーパーユーザーを作成します。

    また、自作したモデルを管理サイト上で閲覧したい場合には、各アプリの admin.py に数行コードを記載する必要があります。

    この章では、上記2種類の操作を行なっていきましょう!

    スーパーユーザーの作成

    コマンドラインで、以下のコマンドを実行しましょう。

    1python3 manage.py createsuperuser

    「ユーザー名」「メールアドレス」「Password」を尋ねられます。

    今回はひとまず、以下のようなユーザーを作成しておきましょう。

    ユーザー名admin
    メールアドレスadmin@example.com
    Passwordadminpassword

    「Superuser created successfully」と表示されれば OK です。

    admin.py の編集

    日記データを、管理サイトから閲覧するための設定を行います。

    diary ディレクトリ内の admin.py を、以下のように編集しましょう。

    1from django.contrib import admin
    2from .models import Diary
    3
    4admin.site.register(Diary)

    上記の記述で、Diary モデルに対応したデータを、管理サイトから閲覧できるようになります。

    adminサイトへのサクセス

    スーパーユーザーの作成と admin.py の編集が完了したら、プロジェクトを立ち上げ、「admin/」にアクセスしましょう。

    ログイン画面が表示されるので、先ほど作成したスーパーユーザーの情報を与えます。

    ログイン後は、以下のような画面になるはずです。

    ログイン後は、このような画面

    この画面が、Django 管理サイトです。

    ユーザーをクリックすると、admin ユーザーの情報を閲覧することができます。

    ユーザーをクリックすると、admin ユーザーの情報を閲覧することができる

    また、Diarys より「日記データの一覧」と「詳細」を確認することができます。

    Diarys より「日記データの一覧」と「詳細」を確認することができる

    データベースに、データが期待通りに格納されているかどうかを確認するために便利です。

    第5回へつづく!

    今回の記事では、日記の一覧画面と詳細画面を実装しました。

    また。Django 管理サイトの利用方法を学びました。

    今回の記事のポイントは、以下の4つです。

    1. 一覧画面の作成では ListView が便利
    2. 詳細画面の作成では DetailView が便利
    3. create superuser コマンドで管理サイトにログイン可能なスーパーユーザーを作成
    4. 管理サイトでは admin.py で登録したモデルのデータを閲覧できる

    次回は、日記の更新と削除を行う機能を追加しましょう!

    次回もお楽しみに!

    第5回はこちら!

    【第5回】Djangoで日記アプリを作ろう ~編集画面・削除画面編~2021.06.07【第5回】Djangoで日記アプリを作ろう ~編集画面・削除画面編~【第5回】Djangoで日記アプリを作ろう ~編集画面・削除画面編~前回は、ListView と DetailView...

    こちらの記事もオススメ!

    featureImg2020.07.17ライトコード的「やってみた!」シリーズ「やってみた!」を集めました!(株)ライトコードが今まで作ってきた「やってみた!」記事を集めてみました!※作成日が新し...
    featureImg2020.07.30Python 特集実装編※最新記事順Responder + Firestore でモダンかつサーバーレスなブログシステムを作ってみた!P...

    広告メディア事業部

    広告メディア事業部

    おすすめ記事