第4章 投稿一覧

1　app.py

次に index.html で投稿の一覧が出るようにします。まず、index関数で toukouテーブルを全検索し、rowsに格納します。それをindex.htmlに渡します。 全検索時にhiの降順で整列します。

@app.get('/')
def index():
    rows = Toukou.query.order_by(db.desc('hi')).all()
    return render_template("index.html", rows=rows)

2　index.html

index.htmlではfor文で投稿全てを表示します。これはindex.htmlの{% block main %}～{% endblock %}までの間に書いていきます。

投稿一件をdivタグで囲んで、ユーザ名、投稿日時、画像をそれぞれdivタグで囲んで表示してみましょう。このとき、ユーザ名は r.user.unameのようになります。画像は全てstaticフォルダにありますのでこれを表示します。

<div id="photos">
    {% for r in rows %}
    <div class="toukou">
        <div class="uname">{{r.user.uname}}</div>
        <div class="hi">{{r.hi}}</div>
        <div class="image">
            <a href="/toukou/{{r.tid}}">
                <img src="/static/{{r.image}}">
            </a>
        </div>
    </div>
    {% endfor %}
</div>

実行し確認します。

このままでは投稿日時がマイクロ秒単位まで表示されます。そこで、strfrime関数で書式を指定しておきます。

<div class="hi">{{r.hi.strftime('%Y/%m/%d %H:%M:%S')}}</div>

3　style.css

staticフォルダにあるstyle.cssにスタイルを設定します。まず、投稿一覧全体を囲む id="photos" のところにグリッド（表形式）で表示するよう指定を行います。各列を33%ずつに区切ります。

#photos {
    display: grid;
    grid-template-columns: 33% 33% 33%;
}

次に投稿一件にスタイルを付けます。背景色は白にし、ライトグレイの枠線を付けます。角を丸くし、内側の余白を１文字分、外側の余白に上下0.3文字分、左右１文字分を付けます。

.toukou {
    background-color: white;
    border: 1px solid lightgray;
    border-radius: 8px;
    padding: 1em;
    margin:0.3em 1em;
}

ユーザ名は太字に、投稿日時は少しも字を小さくし、グレイで表示します。

.uname {
    font-weight: bold;
}

.hi {
    color: gray;
    font-size: 0.8em;
}

画像は中央寄せにします。imgタグは最大幅100%を指定し枠を越えないようにします。画像の角は丸くします。

.image {
    text-align: center;
    margin-top: 0.5em;
}

.image img {
    max-width: 100%;
    border-radius: 4px;
}