![見出し画像](https://assets.st-note.com/production/uploads/images/150892099/rectangle_large_type_2_86ce2fa1e9d078efd8530018951629ed.jpeg?width=1200)
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
さくら: 「ユーザー名とかメールアドレスとかパスワードをここで入力するんですね」
![](https://assets.st-note.com/img/1723944074586-ur1bOtOV0J.png?width=1200)
たけし: 「そうそう。適当なもので良いので入力しよう。パスワードはここでは1234など短いもので良いんだけど、下のようにパスワードが短いけど大丈夫かい? と確認されるから"y"(yes)を打ってね」
![](https://assets.st-note.com/img/1723944156486-1gB5IL5AZy.png?width=1200)
さくら: 「できましたっ!」
たけし: 「できたらいつものようにrunserverコマンドを実行して、今度はhttp://127.0.0.1:8000/adminにアクセスしよう」
python manage.py runserver
たけし: 「登録したユーザー名やパスワードを入れてログインしてね。データベースの内容が確認できる管理画面が開くよ」
![](https://assets.st-note.com/img/1723945647604-u16YWKPDVt.png?width=1200)
さくら: 「昨日作ったアカウントがちゃんとありますね」
たけし: 「よく気付いたね。Usersテーブルで確認できるはずだ。あとで写真を投稿したときはPostsテーブルで確認するよ。その前にここではTagsテーブルを選択しよう」
![](https://assets.st-note.com/img/1723945900411-PoUZh8SI9f.png?width=1200)
たけし: 「右上の"ADD TAG"を選択して投稿用に使えるタグを登録しておくよ。とりあえずCatと入力して登録しておこう」
さくら: 「わかりました!」
動作確認とディスカッション
二人はブラウザを開き、写真投稿機能の動作確認を行った。
http://127.0.0.1:8000/create_post にアクセスします
さくら: 「投稿画面にアクセスできました!実際に写真を投稿してみますね。」
![](https://assets.st-note.com/img/1723946323292-rlaFv2LZxD.png?width=1200)
さくらは猫の写真をアップロードし、キャプションを入力して投稿ボタンをクリックした。
![](https://assets.st-note.com/img/1723946816768-RtDdp1c8e2.jpg?width=1200)
さくら: 「投稿できました!管理画面にもちゃんと表示されてますね。」
たけし: 「いい感じだね。これでユーザーが写真を投稿できるようになった。次は、他のユーザーがこの写真を見られるようにする機能を追加していこう。」
さくら: 「そうですね。これからがますます楽しみです!」
たけし: 「写真投稿機能はSNSの中心的な部分だから、これを基にさらに機能を拡張していくよ。」
こうして、たけしとさくらは写真投稿機能の実装を無事に終え、次なるステップに進む準備が整った。さくらの成長と共に、プロジェクトも着実に進んでいく。
次回へ続く。
スキや感想をnote・Xでお待ちしてます!
サポートは料理好きなのでの食材費にさせていただきます。