【Flask】電子掲示板を作る~④投稿作成ページを作る~
スポンサードリンク
おはようございます。Shotaです。
今日は昨日に引き続き、PythonのFlaskを用いた電子掲示板の作り方について解説していきます。
今日の記事では投稿を作るページを実装する方法を徹底解説します。
Bootstrap
実際に実装するにあたって、Bootstrapを使っていきます。それ以前に、Bootstrapについてわからない人もいるかもしれないので、一応最初に解説しておきます。
Webアプリを作っていくにあたって、HTML/CSSのコードを書いていきますが、一からコードを書くのは時間がかかります。そんな時にBootstrapが便利です。
Bootstrapとは
BootstrapはTwitter社が開発したCSSの「フレームワーク」です。通常CSSを書く場合、すべてのスタイルを作っていく必要がありますが、このフレームワークにはよく使われているスタイルが予め定義されているので、ルールに従って利用するだけで整ったデザインのページを作成できます。
Bootstrapを使うメリット
Bootstrapを使うメリットの一つに、レスポンシブデザインに対応しているという点が挙げられます。通常、スマートフォンやタブレットなど個別に対応するスタイルを作っていると大変な手間がかかります。BootstrapはCSSのメディアクエリを使っていますので、レイアウトデザインを柔軟に調整できます。
Bootstrapを読み込む
それでは、実際にBootstrapをhtmlファイルに読み込んでいきましょう。まずは以下のWebサイトにアクセスしてください。
そして、以下のコードを「base.html」に挿入してください。
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
上のコードを挿入した後の「base.html」ファイルは次のようになります。
<html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <title>SAMPLE_APPLICATION</title> {% block head %}{% endblock %} </head> <body> {% block body %}{% endblock %} </body> </html>
変更を保存してPythonファイルを実行してみましょう。そうすると、下にある変更後の画像になると思います。
h1タグの文字列のフォントが変更されていることがわかるでしょう。
▼変更前
▼変更後
このように、Bootstrapをhtmlファイルに入れてWebページの見た目を変えることができます。
投稿を作るページの作成
昨日の記事では、投稿を保存するためのデータベースを作りました。今日の記事では、投稿を追加できるようにするための投稿作成ページを作っていきます。
htmlファイルの操作
新しく作るhtmlファイルには次のような内容を作ります。
- 日付、名前、タイトル、投稿内容、を書くフォーム
- 「戻る」ボタン
- 「投稿する」ボタン
新しく「create.html」を「templates」フォルダーの中に作ります。
Bootstrapのホームページにアクセスして「はじめる(英語なら"start")」をクリックし、「form」と検索してみてください。
こちらのフォームを使って投稿作成ページを作っていきます。(画像参照)
▼名前、タイトル
▼入力内容
あとは上の画像から次のコードをコピペしてください。
▼名前、タイトルのコード
<input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
▼入力内容のコード
<div class="mb-3"> <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label> <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> </div>
上述の内容を踏まえて、「create.html」ファイルは次のようになります。
{% extends 'base.html' %}
{% block body %}
<h1>新規作成</h1>
<form action="POST">
<p>日付：<input type="date" name="post_date"></p>
<input class="form-control" name="user" type="text" placeholder="名前(全角20文字以内)" aria-label="default input example">
<input class="form-control" name="title" type="text" placeholder="タイトル(全角30文字以内)" aria-label="default input example">
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">投稿内容</label>
<textarea class="form-control" name="detail" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>
{% endblock %}
ここまで書けたら、次はボタンを作りましょう。Bootstrapの公式サイトをもう一度開いて、「button」を検索してください。
今回作るアプリのボタンは下のもの(画像参照)を使います。
▼「戻る」ボタン
▼「投稿する」ボタン
あとは上の画像から次のコードをコピペしてください。
▼「戻る」ボタン
<button type="button" class="btn btn-outline-success">Success</button>
▼「投稿する」ボタン
<button type="button" class="btn btn-success">Success</button>
上記の内容を踏まえて「create.html」ファイルの中身は次のようになります。
{% extends 'base.html' %}
{% block body %}
<h1>新規作成</h1>
<form action="POST">
<p>日付：<input type="date" name="post_date"></p>
<input class="form-control" name="user" type="text" placeholder="名前(全角20文字以内)" aria-label="default input example">
<input class="form-control" name="title" type="text" placeholder="タイトル(全角30文字以内)" aria-label="default input example">
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">投稿内容</label>
<textarea class="form-control" name="detail" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<button href="/" type="button" class="btn btn-outline-success">戻る</button>
<button type="submit" class="btn btn-success">投稿する</button>
</form>
{% endblock %}
これでファイルの大まかな構成は完成しました。詳細部分は割愛しますが、これで必要な項目を入力するフォームが完成しました！
各値を入力してsubmitすると、そのデータをトップページにPOSTできるようになっています。
Pythonファイルの操作
「main.py」に戻って、以下のコードを追加してください。
@app.route('/create') def create(): return render_template('create.html')
▼「main.py」の全体像
from flask import Flask, render_template from flask_sqlalchemy import SQLAlchemy app = Flask(__name__) app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///postdata.db' db = SQLAlchemy(app) class Post(db.Model): id = db.Column(db.Integer, primary_key=True) user = db.Column(db.String(20), nullable=False) title = db.Column(db.String(30), nullable=False) detail = db.Column(db.Text, nullable=False) post_date = db.Column(db.DateTime, nullable=False) @app.route('/') def index(): return render_template('index.html') @app.route('/create') def create(): return render_template('create.html') if __name__ == '__main__': app.run(debug=True)
サーバを立ち上げて投稿作成ページにアクセスしましょう。
このように、投稿ページを簡単に表示することができます。ただし、このフォームは詳細な設定をまだ行っていないので、フォームとして機能できません。
作成ページをフォームとして機能する方法は次回の記事で紹介します。
まとめ
今日の記事では主に次のことについて解説しました。
- Bootstrapとは、Bootstrapの使い方
- 投稿を作るページの作成
明日は日曜日なので、FlaskのWebアプリ解説をせず本の要約・考察記事を書いていきます。なので、次回の記事は明後日になります。
明後日の記事では、投稿作成ページをフォームとして機能させる方法について徹底解説します。
今日の記事はこれで終了です。
開発環境
【参考サイト】
