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;
}
```

## 完成品

![スクリーンショット (152).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643756/cc058dda-a3bf-faad-c080-de46f2d4c8c8.png)

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

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

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

- 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画面をさっくりと作っていく予定。