1 環境構築とアプリ雛形の作成 および 2 サインアップとログイン・ログアウトの続きです。前回の記事ではユーザー認証とユーザー登録（サインアップ）についての実装を行いました。
今回はDjango 2 によるユーザー認証（ログイン認証）と CRUD の総仕上げです。第１回で作成したダミー状態のブログアプリについて、記事一覧表示・記事作成・編集・削除機能を仕上げていきましょう。
今回はこれまでのチュートリアルの復習です。新しく学ぶことはあまりないので、詳細はGithubのソースコードとデモサイトにまかせ、このコラムでは簡単な補足説明のみとします。
目次
ソースコードとデモサイト
下記よりチュートリアルの最終的なソースコードとデモサイトをチェックできます。
ソースコード
https://github.com/toksan/django2_tutorial_blog_with_auth
デモサイト
https://tutorialauth.it-engineer-lab.com
ブログアプリのCRUDと認証の実装
1 環境構築とアプリ雛形の作成で作成したブログアプリ（blogs）に、汎用クラスベースビューを使ってCRUD処理を実装していきます。
もし汎用クラスベースビューによる CRUD 処理がはじめての方はDjango2 入門チュートリアル – CRUDの基本を簡単なサンプルで学ぶ – 4 – 汎用クラスベースビューによるCRUDの実装を参照ください。
Django の典型的なワークフロー
Djangoによるアプリ開発は公式チュートリアルのワークフローのように
- モデル作成とマイグレーション（models.py, migration）
- URL設計・ルーティング（urls.py）
- ビューの作成（views.py）
- テンプレートの作成（templates）
- 静的ファイルの作成と設置（static files）
の順で進めるとスムーズです。このワークフローに沿って進めていきます。
1. モデル作成とマイグレーション（models.py, migration）
こちらは第１回で実施済みにつき、1 環境構築とアプリ雛形の作成を参照ください。
2. URL設計・ルーティング（URLConf）
もはや聞き飽きたかもしれませんが、Django のルーティングはアプリレベルのURL設定とプロジェクトレベルのURL設計の２段階です。
まずはアプリレベルのURL設定です。myblog/blogs/urls.py を下記のように編集しましょう。※ビューはこの後すぐに実装しますが、とりあえずURL設定だけ済ませておきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
# myblog/blogs/urls.py from django.urls import path from . import views # set the application namespace # https://docs.djangoproject.com/en/2.0/intro/tutorial03/ app_name = 'blogs' urlpatterns = [ # ex: / path('', views.IndexView.as_view(), name='index'), # ex: /post/create/ path('post/create/', views.CreateView.as_view(), name='create'), # ex: /post/1/ path('post/<int:pk>/', views.DetailView.as_view(), name='detail'), # ex: /post/1/update/ path('post/<int:pk>/update/', views.UpdateView.as_view(), name='update'), # ex: /post/1/delete path('post/<int:pk>/delete/', views.DeleteView.as_view(), name='delete'), # ex: /post/help/ path('post/help/', views.help, name='help'), ] |
次に myblog/myblog/urls.py を編集します。※第１回で済ませているので、順を追って読み進めている場合には不要です。
|
1 2 3 4 5 6 7 8 9 10 11 |
# myblog/myblog/urls.py from django.contrib import admin from django.urls import include, path urlpatterns = [ # https://docs.djangoproject.com/en/2.0/topics/auth/default/#module-django.contrib.auth.views path('', include('blogs.urls')), # [もしなければ追記] path('accounts/', include('accounts.urls')), path('accounts/', include('django.contrib.auth.urls')), path('admin/', admin.site.urls), ] |
3. ビューの作成（views.py）
汎用クラスベースビューを用いてビューを作成します。ソースコードを記事内に書くと非常に煩雑になってしまうので、myblog/blogs/views.py のソースコードは下記Githubよりご覧ください。
https://github.com/toksan/django2_tutorial_blog_with_auth/blob/master/myblog/blogs/views.py
Django が標準提供している汎用クラスベースビュー generic.ListView / generic.DetailView / generic.edit.CreateView / generic.edit.UpdateView / generic.edit.DeleteView を継承している点はCRUDの入門チュートリアルと全く同じです。
ただし、今回はログインしていないユーザーからのアクセスをブロックするため、Create / Update / Delete の処理には LoginRequiredMixin を継承しています。※Python は多重継承が可能なプログラミング言語です。
|
1 |
class CreateView(LoginRequiredMixin, generic.edit.CreateView): |
4. テンプレートの作成（templates）
テンプレートのソースコードは下記より確認できます。
https://github.com/toksan/django2_tutorial_blog_with_auth/tree/master/myblog/blogs/templates/blogs
あまり学ぶことはありませんが、テンプレート上でユーザー認証が関係する処理について２点だけ補足します。
user.is_authenticated
myblog/blogs/templates/blogs/post_list.html の7行目〜
|
1 2 3 4 |
{% if user.is_authenticated %} <h1>Username</h1> <p class="user-name">{{ user }}</p> {% endif %} |
{% if user.is_authenticated %} 〜〜〜 {% endif %} で囲んだ箇所は、ログイン中のユーザーにのみ表示されます。とても重要なので覚えておきましょう。
request.user.id
myblog/blogs/templates/blogs/post_detail.html の15行目〜
|
1 2 3 4 5 6 |
{% if request.user.id == object.author_id %} <section class="post-edit"> <a class="act" href="{% url 'blogs:update' post.pk %}">Edit</a> <a class="act" href="{% url 'blogs:delete' post.pk %}">Delete</a> </section> {% endif %} |
テンプレート中でログインしているユーザーの id を取得するには request.user.id を使います。とても重要なので覚えておきましょう。
{% if request.user.id == object.author_id %} 〜〜〜 {% endif %}はログイン中のユーザーIDと記事投稿者のIDが同じ場合、つまり、記事を書いた本人にのみ表示するための条件分岐です。
5. 静的ファイルの作成と設置（static files）
本チュートリアルで必要な静的ファイルは、デザインを整えるだけの簡単なcssファイルのみです。静的ファイルの設置場所は自由ですが、今回は blogs アプリとaccounts アプリの両方で共通デザインとするため、下記の位置に静的ファイルを設置してみます。
|
1 2 3 4 5 6 7 8 9 |
myblog/ manage.py db.sqlite3 myblog/ blogs/ accounts/ templates/ static/ ← ここ css/style.css ← ここ |
myblog/static ディレクトリは勝手に設置したので、Django は把握できません。Django に「ここに静的ファイル用ディレクトリを設置したよ！」と教えるため、プロジェクトの設定ファイル（ myblog/myblog/settings.py ）に STATICFILES_DIRS という設定項目を追加します。
|
1 2 3 4 5 6 |
# myblog/myblog/settings.py # Static files (CSS, JavaScript, Images) # https://docs.djangoproject.com/en/2.0/howto/static-files/ STATIC_URL = '/static/' STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')] # './static' |
上記設定が終われば、あとは style.css を作成するだけです。style.css は特別なことはありません。最低限のデザインを整えるだけの単純なCSSファイルです。
書きなぐりのCSSですが sytle.css の内容は下記より確認できます。
https://github.com/toksan/django2_tutorial_blog_with_auth/blob/master/myblog/static/css/style.css
style.css を作成したら、共通テンプレート myblog/templates/base.html の<head>タグ内で読み込みましょう。
|
1 2 3 4 5 6 7 8 9 |
{% load staticfiles %} <!DOCTYPE html> <html> <head> ... ... <link href="{% static 'css/style.css' %}" rel="stylesheet"> ... </head> |
以上でDjango2 でユーザー認証（ログイン認証）を実装するチュートリアルは完了です。お疲れ様でした！
このチュートリアルのソースコードとデモサイトは下記より参照可能です。
ソースコード
https://github.com/toksan/django2_tutorial_blog_with_auth
デモサイト
https://tutorialauth.it-engineer-lab.com
この記事が役に立ったら是非シェアください！
素晴らしい記事ありがとうございます！
誤字(?)脱字?を見つけたので..!
1 環境構築とアプリ雛形の作成で作成したブログアプリ（blos）に、汎用クラスベースビューを使ってCRUD処理を実装していきます。
>blos
の部分がblogsかと
ありがとうございます！誤字を修正しました。