前のパートに戻る 完了して次のパートへ  

  1-4 アイコン編集画面を用意しよう

アイコンを変なものにしてしまったり気分でアイコンを変更したい時のためにアイコン変更するためのページを作成しましょう。


Viewsに処理を追加する

アイコン編集にはUpdateViewを用います。UpdateViewは指定されたmodelのデータを変更するためにDjangoが用意したジェネリックビュークラスです。どのモデルの、どのデータのどこを変更するかを指定しておけば残りの処理をDjangoが行ってくれます。

また合わせてユーザー詳細画面でログイン中のユーザー情報をテンプレートにわたすための記述も追加しましょう。

修正: techpitgram/accounts/views.py

from django.shortcuts import render
from django.views import generic
from django.urls import reverse
from django.views.generic.detail import DetailView
from django.views.generic.edit import UpdateView  # 追加
from django.contrib.auth import login


from .forms import SignUpForm
from .models import User

︙
略
︙

class AccountDetailView(DetailView):
    model = User
    slug_field = 'username'
    slug_url_kwarg = 'username'

    # 以下関数を新規追加 テンプレートにわたすデータにログイン中ユーザーの情報も追加する
    def get_context_data(self, **kwargs):
        context = super().get_context_data()
        context['login_user'] = self.request.user
        return context

# 以下のコードを追加
class IconEdit(UpdateView):
    model = User
    template_name = 'accounts/icon_edit.html'
    fields = ['icon']

    def get_object(self):
        # ログイン中のユーザーで検索することを明示する
        return self.request.user

    def get_success_url(self):
        form = self.get_form()
        return reverse(
            'accounts:userDetail',
            kwargs={'username': self.request.user.username})

今回アップデートする情報は次の箇所に書かれています。

model = User
template_name = 'accounts/icon_edit.html'
fields = ['icon']

ここではmodelUserを指定しいます。template_nameはアップデート時に使用するテンプレートへのパスを指定しています。fieldsはアップデートしたい項目を配列で渡しています。

今回はiconのみなので['icon']となっています。

def get_object(self):
    # ログイン中のユーザーで検索することを明示する
    return self.request.user

get_objectはアップデートのときにどの情報を更新するか取得するときに呼び出されます。ここではログイン中のユーザーをアップデートしたいのでself.request.userでログイン中のユーザーを持ってくるようしていしています。

def get_success_url(self):
    form = self.get_form()
    return reverse(
        'accounts:userDetail',
        kwargs={'username': self.request.user.username})

get_objectはアップデートのときにどの情報を更新するか取得するときに呼び出されます。ここではログイン中のユーザーをアップデートしたいのでself.request.userでログイン中のユーザーを持ってくるようしていしています。

get_objectはアップデートのときにどの情報を更新するか取得するときに呼び出されます。ここではログイン中のユーザーをアップデートしたいのでself.request.userでログイン中のユーザーを持ってくるようしていしています。

def get_success_url(self):
    form = self.get_form()
    return reverse(
        'accounts:userDetail',
        kwargs={'username': self.request.user.username})

get_success_urlはアップデートが成功したときに呼び出されます。ここではアップデート後、どこにリダイレクトするかを指定します。 ログイン中のユーザーの詳細ページに飛んでほしいためreverse()を使ってログイン中のユーザーの詳細ページのURLを生成し、returnで返しています。

テンプレートを用意する


表示するためのtechpitgram/teplates/accounts/icon_edit.htmlも用意しましょう。

新規作成: techpitgram/teplates/accounts/icon_edit.html

ユーザー詳細画面でログインユーザーの画面ならアイコン編集画面へのボタンを表示するように修正します。{% if %}{% endif %}はテンプレートで使えるIF分岐のためのコードです。また{% url 'accounts:icon_edit' %} はicon編集へのリンクを生成するコードです。

{% url 'アプリ名':パス名 %}urls.pyのname引数で指定したパス名(後述)を入れるとそのパスへのURLが自動生成されます。

修正: techpitgram/teplates/accounts/user_detail.html

urls.pyを編集する

ここでiconへのルーティング設定をします。 先程言っていたパス名はname='icon_edit' の部分です。 ユーザー情報と違いアイコンが編集できるのは当人だけなのでパスにユーザー名は含めません。

修正:techpitgram/accounts/urls.py

from django.urls import path
from . import views

app_name = 'accounts'

urlpatterns = [
    path('signup/', views.SignUpView.as_view(), name='signup'),
    path('<username>/', views.AccountDetailView.as_view(), name='userDetail'),
    path('icon/edit/', views.IconEdit.as_view(), name='icon_edit'),  # 追加
]

これでアイコンの編集機能が出来上がりました。

次にナビゲーションバーを整えていきます。

議論

0 質問

このコースの評価は?