Django初心者がSNSアプリを作る その3

前回 https://qiita.com/YuDachi/items/db9f8e6ff5ff36bf1fe0
元記事 https://note.com/saito_pythonista/n/n6550f5c2a07b

前回、投稿一覧ページを表示することができたので、今回はページの完成イメージを作成する。とはいっても綺麗なものを作るわけではなく、実装したいものを作った後に最低限の体裁を整えることにする。

イメージを作成するというのは、HTML/CSSで完結するように作成し、モデルと結びつける作業は後回しにするという意味で使っている。

投稿一覧ページのイメージ作成

完成イメージは某イッターのようなものを目指すことにした。

• 投稿者のプロフ画像
• 投稿者のユーザー名
• 投稿日時
• ツイート内容
• いいね

まずは最低限これらを実装していきたい。余裕があればフォロー機能やリプライ機能もつけていく。作業の流れは以下の通り。

• 仮プロフィール画像を適当に用意してstatic下に配置
• style.cssの読み込みをbase.htmlに追記(前回忘れてた)
• list.htmlとstyle.cssの中身を作成

list.html

list.html

{% extends 'base.html' %}
{% load static %}

{% block content %}

<div class="container">
    <div class="tweet">
        <div class="profile_image">
            <img src="../static/profile_sample.png" alt="#">
        </div>
        <div>
            <div class="profile_name">
                YuDatch
            </div>
            <div class="submit_time">
                2022/09/02 15:19
            </div>
            <div class="content">
                ツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイート
            </div>
            <a class="favorite">♡</a>
        </div>

    </div>
    <div class="tweet">
        <div class="profile_image">
            <img src="../static/profile_sample.png" alt="#">
        </div>
        <div>
            <div class="profile_name">
                YuDatch
            </div>
            <div class="submit_time">
                2022/09/02 15:19
            </div>
            <div class="content">
                ツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイート
            </div>
            <a class="favorite">♡</a>
        </div>

    </div>
</div>


{% endblock content %}

style.css

style.css

.container {
    padding: 0 5%;
}

.tweet {
    display: flex;
    margin-bottom: 10px;
    background-color: lightblue;
}

.profile_image img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.favorite {
    color: red;
    text-decoration: none;
}

完成品

あまりかっこいいものではないが、気にしないで進もう。

詳細ページのイメージ作成

次に詳細ページを作る。以下の流れで作業を行う。

• detail.htmlを作成し、対応するviewとURLを設定
• list.html の content 部分をボタン化
• 上記のボタンのリンクに1番目で設定したURLを追加

ページを作成するごとにviewとURLを設定するのは確かに面倒なので、最初にまとめてやっておくべきなんだろうと感じた。やはり手を動かして物を作るのは大事。

views.py

views.py

# 追加
class DetailView(TemplateView):
    template_name = "detail.html"

urls.py

urls.py

urlpatterns = [
    path('', Home.as_view(), name='home'),
    path('detail1', DetailView.as_view(), name='detail1') # 追加
]

list.html

list.html

---(中略)---

<div class="submit_time">
    2022/09/02 15:19
</div>
# 変更
<a href="./detail1" class="content">
    ツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイート
</a>
<a class="favorite">♡</a>

---(中略)---

detail.html

detail.html

{% extends 'base.html' %}
{% load static %}

{% block content %}

<div class="container">
    <h1>THIS IS DETAIL</h1>
    <div class="tweet">
        <div class="profile_image">
            <img src="../static/profile_sample.png" alt="#">
        </div>
        <div>
            <div class="profile_name">
                YuDatch
            </div>
            <div class="submit_time">
                2022/09/02 15:19
            </div>
            <div class="content">
                ツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイートツイート
            </div>
            <a class="favorite">♡</a>
        </div>

    </div>
</div>


{% endblock content %}

これでツイート部分をクリックすると、detail.htmlに飛ぶようになった。
detailの情報量がlistのそれと同じことには目を瞑っておく。そろそろHTMLページを表示させることにも慣れてきた。

この調子で一旦UIのサンプルイメージをすべて作ってしまうことにしよう。
というわけで次回は、create画面とdelete画面をさっくりと作っていく予定。