【第2回】登山＆キャンプ記録アプリ開発｜投稿機能と画像アップロードを実装してみた！
こんにちは、Soraです！
前回はアプリの概要や技術スタックについて紹介しました。
今回は、実際に記録を投稿できるようにする「投稿機能」について紹介します！
写真のアップロードやGoogleマップの埋め込み、日付の取り扱いなど、初学者としてつまずいたポイントも含めて振り返ります。
✍️ 投稿機能でできること
- タイトル・日付・場所（住所）
- 感想の入力
- Google Map の埋め込み
- 写真の複数枚アップロード（1枚目は一覧に表示）
💡 使った機能とライブラリ
| 機能 | 使用技術／関数 |
|---|---|
| フォーム入力 | Flask / request.form |
| 日付変換 | datetime.strptime() |
| 写真の保存 |
uuid + secure_filename() + os.path.join()
|
| 複数枚アップ | request.files.getlist() |
| 画像の保存先 |
static/uploads/ フォルダ |
🔧 実装コード（抜粋）
@app.route('/create', methods=['GET', 'POST'])
@login_required
def create():
if request.method == 'POST':
title = request.form['title']
date_str = request.form['date']
date = datetime.strptime(date_str, "%Y-%m-%d").date() if date_str else None
address = request.form['address']
description = request.form['description']
map_iframe = request.form.get('map_iframe')
new_post = Post(
title=title,
date=date,
address=address,
description=description,
map_iframe=map_iframe,
user_id=current_user.id
)
db.session.add(new_post)
db.session.commit()
# 写真アップロード
if 'photos' in request.files:
photos = request.files.getlist('photos')
for photo in photos:
if photo and photo.filename != '':
filename = str(uuid.uuid4()) + "_" + secure_filename(photo.filename)
filepath = os.path.join('static/uploads', filename)
photo.save(filepath)
new_photo = Photo(post_id=new_post.id, photo_path=filename)
db.session.add(new_photo)
db.session.commit()
return redirect(url_for('home'))
return render_template('create.html')
😅つまずきポイントと解決法
- equest.form['date'] が文字列だった → datetime.strptime()で日付に変換
- 写真のファイル名がバラバラになる → uuidで一意な名前を生成
- request.files.getlist() で複数枚対応できることに気づくのが遅れた！
🛠 つまずきポイント①：フォームから取得した日付の扱い
Flaskでは request.form['date'] で取得した値は文字列（str）として渡ってくる。
しかし、SQLAlchemyで Date 型として保存するには、Pythonの date オブジェクトである必要がある！
なので datetime.strptime() を使って変換した👇
date = datetime.strptime(request.form['date'], "%Y-%m-%d").date()
🛠 つまずきポイント②：アップされた写真のファイル名
😭同じファイル名の写真がアップロードされたら上書きされる。
→✅ 解決法：uuid を使って一意な名前にする！
💡uuidとは？
絶対に重複しないIDを自動で作るための仕組み！
毎回ランダムでユニークなIDを作ってくれるから上書きの心配なし！
import uuid
from werkzeug.utils import secure_filename
filename = str(uuid.uuid4()) + "_" + secure_filename(photo.filename)
🛠 つまずきポイント③：複数枚の画像をアップロードしたい！
最初は request.files['photo'] で取得していたため、複数選択しても1枚目しか保存されませんでした。
調べてみると、Flaskでは request.files.getlist('photos') を使うことで、複数の画像をリストで取得できると判明！
HTMLの <input> に multiple 属性をつける必要もあります。
<input type="file" name="photos" multiple>
やってみた感想✨
- 写真を複数枚アップできるようにすると完成度が増した！
- 実際の運用を想定すると、保存先やファイル名の工夫が必要だと実感！
次回予告ッ‼️
次回は、投稿の詳細ページや編集・削除機能について紹介予定です！