はじめに

前回の記事では、フォロー/アンフォロー機能の実装について解説しました。今回は、ユーザープロフィールページの実装について詳しく説明します。このページでは、特定のユーザーの情報と投稿を表示します。

ユーザープロフィールページの実装

以下に、ユーザープロフィールページを表示する機能の実装コードを示します：

from flask import render_template
from flask_login import login_required
from app import app
from app.models import User, DailySong

@app.route('/user/<username>')
@login_required
def user(username):
    user = User.query.filter_by(username=username).first_or_404()
    posts = DailySong.query.filter_by(user_id=user.id).order_by(
        DailySong.date_posted.desc()).all()
    return render_template('user.html', user=user, posts=posts)

機能の詳細解説

ルーティングとアクセス制御
```
@app.route('/user/<username>')
@login_required
```
- <username>は動的なURLパラメータで、アクセスされたユーザー名を取得します。
- @login_requiredデコレータにより、ログインしているユーザーのみがアクセスできます。
ユーザーの取得
```
user = User.query.filter_by(username=username).first_or_404()
```
- 指定されたユーザー名でデータベースを検索します。
- first_or_404()メソッドを使用することで、ユーザーが存在しない場合は自動的に404エラーを返します。
ユーザーの投稿の取得
```
posts = DailySong.query.filter_by(user_id=user.id).order_by(
    DailySong.date_posted.desc()).all()
```
- ユーザーIDに基づいて、そのユーザーの全ての投稿を取得します。
- order_by(DailySong.date_posted.desc())で投稿を日付の降順（最新のものから）にソートします。
テンプレートのレンダリング
```
return render_template('user.html', user=user, posts=posts)
```
- user.htmlテンプレートをレンダリングし、ユーザー情報と投稿データを渡します。

テンプレートの例

user.htmlテンプレートの例を以下に示します：

{% extends "base.html" %}

{% block content %}
    <h1>{{ user.username }}のプロフィール</h1>
    
    {% if user.favorite_band %}
        <p>好きなバンド: {{ user.favorite_band }}</p>
    {% endif %}
    
    {% if user.favorite_genre %}
        <p>好きなジャンル: {{ user.favorite_genre }}</p>
    {% endif %}
    
    {% if user != current_user %}
        {% if current_user.is_following(user) %}
            <a href="{{ url_for('unfollow', username=user.username) }}" class="btn btn-secondary">フォロー解除</a>
        {% else %}
            <a href="{{ url_for('follow', username=user.username) }}" class="btn btn-primary">フォローする</a>
        {% endif %}
    {% endif %}
    
    <h2>投稿した楽曲</h2>
    {% for post in posts %}
        <div class="post">
            <h3>{{ post.title }} - {{ post.artist }}</h3>
            <p>ジャンル: {{ post.genre }}</p>
            <p>投稿日: {{ post.date_posted.strftime('%Y-%m-%d') }}</p>
            <a href="{{ post.music_url }}" target="_blank">曲を聴く</a>
        </div>
    {% else %}
        <p>まだ投稿がありません。</p>
    {% endfor %}
{% endblock %}

機能の特徴とユーザビリティ

プロフィール情報の表示: ユーザー名、好きなバンド、好きなジャンルなどの基本情報を表示します。
フォロー/アンフォロー機能の統合: 他のユーザーのプロフィールページを見ている場合、フォロー/アンフォローボタンを表示します。
投稿の一覧表示: ユーザーが投稿した楽曲を新しい順に表示します。
外部リンク: 各投稿に「曲を聴く」リンクを設置し、ユーザーが簡単に楽曲にアクセスできるようにしています。
条件付き表示: 投稿がない場合は適切なメッセージを表示します。

セキュリティとプライバシーの考慮点

アクセス制御: @login_requiredデコレータにより、ログインユーザーのみがプロフィールページにアクセスできます。
エラーハンドリング: 存在しないユーザー名でアクセスした場合、first_or_404()メソッドにより適切に404エラーを返します。
プライバシー設定: 現在の実装では全ての情報が公開されていますが、ユーザーが公開/非公開を設定できる機能を追加することも検討できます。

今後の改善案

ページネーション: 投稿数が多い場合、ページネーション機能を追加して表示を最適化します。
プロフィール編集機能: ユーザーが自分のプロフィール情報を編集できる機能を追加します。
統計情報の表示: 投稿数、フォロワー数、フォロー中のユーザー数などの統計情報を表示します。
アクティビティフィード: ユーザーの最近のアクティビティ（フォロー、いいねなど）を表示します。

まとめ

ユーザープロフィールページの実装により、ユーザー間のつながりを視覚化し、各ユーザーの音楽の好みや投稿履歴を簡単に確認できるようになりました。これにより、ユーザー同士の交流が促進され、アプリケーションのソーシャル機能が強化されます。

参考リンク