Djangoで写真投稿SNSを作成しよう - ストーリー対話形式で学ぶ③　写真投稿機能

以下のnoteの続きになります。

登場人物

新卒エンジニア：さくら

IT企業に新卒で入社したばかりの元気な女の子。プログラミングは学校で学んだ程度だが、熱意と好奇心は人一倍。

エンジニア：たけし

さくらの教育係。優しく教えるのが得意で、さくらの成長を見守る頼れる先輩。

写真投稿機能の実装

写真投稿機能の概要

たけし: 「今日は写真投稿機能を実装するよ。SNSの中心的な機能だから、ここをしっかり作り込むことが重要だね。」

さくら: 「写真投稿って、ユーザーが画像をアップロードして、他のユーザーとシェアする機能ですよね？」

たけし: 「そうだよ。ユーザーが写真をアップロードして、キャプションをつけたり、タグを追加したりできるようにする。これによってユーザー同士の交流が生まれるんだ。」

さくら: 「なるほど。SNSの中でも特に重要な部分ですね。どうやって実装するんですか？」

たけし: 「まずは、写真をアップロードするためのモデルを作成して、その後にビューとテンプレートを作っていこう。」

モデルの確認

たけし: 「まずは、既に作成済みのPostモデルを確認するよ。このモデルには、写真のファイル、キャプション、投稿者、投稿日時、そしてタグを含めていたはずだよね。」

posts/models.py

# posts/models.py

...

class Post(models.Model):
    image = models.ImageField(upload_to='images/')
    caption = models.TextField(max_length=500, blank=True)
    user = models.ForeignKey(CustomUser, on_delete=models.CASCADE)
    created_at = models.DateTimeField(auto_now_add=True)
    tags = models.CharField(max_length=100, blank=True)

    def __str__(self):
        return f'{self.author.username} - {self.caption[:20]}'

...

さくら: 「このモデルで、投稿に関するデータをすべて管理するんですね。」

たけし: 「そうだよ。次は、このモデルを使って写真をアップロードするためのフォームを作成しよう。」

フォームの作成

たけし: 「フォームは、ModelFormを使うことで簡単に作成できる。Postモデルに基づいて、写真とキャプションを入力するためのフォームを作成するよ。」

posts/forms.pyを以下のように修正します。

# posts/forms.py

from django import forms
from allauth.account.forms import SignupForm
from .models import Interest, Post

class CustomSignupForm(SignupForm):
    #interests = forms.ModelMultipleChoiceField(queryset=Interest.objects.all(), widget=forms.CheckboxSelectMultiple)

    def save(self, request):
        user = super(CustomSignupForm, self).save(request)
        #user.interests.set(self.cleaned_data['interests'])
        user.save()
        return user

#これを追加
class PostForm(forms.ModelForm):
    class Meta:
        model = Post
        fields = ['image', 'caption', 'tags']

さくら: 「フォームを作るのも思ったより簡単ですね。ModelFormを使うと、自動でモデルのフィールドに対応したフォームができるんですね。」

たけし: 「その通り。次は、ビューを作成して、フォームをユーザーに表示できるようにしよう。」

ビューの作成

たけし: 「写真を投稿するためのビューを作成するよ。このビューでは、ユーザーが写真とキャプションを入力し、投稿できるようにするんだ。」

posts/views.pyを開いて記述。

# posts/views.py

from django.shortcuts import render, redirect
from .forms import PostForm

def create_post(request):
    if request.method == 'POST':
        form = PostForm(request.POST, request.FILES)
        if form.is_valid():
            post = form.save(commit=False)
            post.user = request.user
            post.save()
            return redirect('home')
    else:
        form = PostForm()
    return render(request, 'create_post.html', {'form': form})

さくら: 「ビューの中で、フォームのデータを受け取って、それを保存するんですね。」

たけし: 「そうだよ。request.FILESを使って、画像ファイルも一緒に送信できるようにしている。これでユーザーは写真を投稿できるようになるよ。」

テンプレートの作成

たけし: 「次は、写真投稿画面のテンプレートを作成しよう。ユーザーが写真とキャプションを入力する画面だね。」

templates/create_post.htmlを作成して記述。

<!-- templates/create_post.html -->

{% extends 'base_generic.html' %}

{% block content %}
  <h2>Create a New Post</h2>
  <form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Post</button>
  </form>
{% endblock %}

さくら: 「このテンプレートで、ユーザーが写真を選んでキャプションを入力できるんですね。」

たけし: 「そうだね。これで写真投稿機能の実装はほぼ完了だ。次は、この機能がちゃんと動くか確認しよう。」

管理画面にログイン

たけし: 「Djangoにはデータベースのレコードを管理できる管理者用の機能がデフォルトで用意されているよ。まずpostsフォルダの中のadmin.pyを以下のように修正しよう」

from django.contrib import admin
from .models import Post, CustomUser, Interest, Tag

admin.site.register(Post)
admin.site.register(CustomUser)
admin.site.register(Interest)
admin.site.register(Tag)

さくら: 「管理したいmodelをここに登録するんですね」

たけし: 「そうだね。保存できたらmanage.pyのあるディレクトリで次のコマンドを入力する。管理者アカウントが作成されるよ」

python manage.py createsuperuser

さくら: 「ユーザー名とかメールアドレスとかパスワードをここで入力するんですね」

たけし: 「そうそう。適当なもので良いので入力しよう。パスワードはここでは1234など短いもので良いんだけど、下のようにパスワードが短いけど大丈夫かい？　と確認されるから"y"(yes)を打ってね」

さくら: 「できましたっ！」

たけし: 「できたらいつものようにrunserverコマンドを実行して、今度はhttp://127.0.0.1:8000/adminにアクセスしよう」

python manage.py runserver

たけし: 「登録したユーザー名やパスワードを入れてログインしてね。データベースの内容が確認できる管理画面が開くよ」

さくら: 「昨日作ったアカウントがちゃんとありますね」

たけし: 「よく気付いたね。Usersテーブルで確認できるはずだ。あとで写真を投稿したときはPostsテーブルで確認するよ。その前にここではTagsテーブルを選択しよう」

たけし: 「右上の"ADD TAG"を選択して投稿用に使えるタグを登録しておくよ。とりあえずCatと入力して登録しておこう」

さくら: 「わかりました！」

動作確認とディスカッション

二人はブラウザを開き、写真投稿機能の動作確認を行った。

http://127.0.0.1:8000/create_post にアクセスします

さくら: 「投稿画面にアクセスできました！実際に写真を投稿してみますね。」

さくらは猫の写真をアップロードし、キャプションを入力して投稿ボタンをクリックした。

さくら: 「投稿できました！管理画面にもちゃんと表示されてますね。」

たけし: 「いい感じだね。これでユーザーが写真を投稿できるようになった。次は、他のユーザーがこの写真を見られるようにする機能を追加していこう。」

さくら: 「そうですね。これからがますます楽しみです！」

たけし: 「写真投稿機能はSNSの中心的な部分だから、これを基にさらに機能を拡張していくよ。」

こうして、たけしとさくらは写真投稿機能の実装を無事に終え、次なるステップに進む準備が整った。さくらの成長と共に、プロジェクトも着実に進んでいく。

次回へ続く。

スキや感想をnote・Xでお待ちしてます！

Tweets by benao_python