Pythonで簡易掲示板を作成する: Flaskを使ったWebアプリケーションの基本 - Python転職初心者向けエンジニアリングブログ

はじめに

Web開発において、掲示板は基本的でありながらも実用的なアプリケーションの一例です。本記事では、PythonのWebフレームワークであるFlaskを使用して、簡易な掲示板を作成する手順について解説します。Flaskは軽量かつシンプルながらも柔軟性があり、初心者からプロまで広く利用されています。掲示板の作成を通じて、Flaskの基本的な使い方やWebアプリケーションの構築方法について学びましょう。

Flaskのインストール

まず初めに、Flaskをインストールします。以下のコマンドを使用して、仮想環境内にFlaskをインストールします。

pip install flask

Flaskアプリケーションの基本構造

Flaskアプリケーションは通常、以下のような基本的な構造を持ちます。

/my_flask_app
|-- /static
|   `-- style.css
|-- /templates
|   `-- index.html
|-- app.py
`-- config.py

/static: CSSやJavaScriptなどの静的ファイルを保存するディレクトリ。
/templates: HTMLファイルを保存するディレクトリ。
app.py: Flaskアプリケーションのメインスクリプト。
config.py: アプリケーションの設定を保存するスクリプト。

Flaskアプリケーションの基本的な設定

まずはconfig.pyに、Flaskアプリケーションの基本的な設定を行います。

# config.py

class Config:
    DEBUG = True
    SECRET_KEY = 'your_secret_key'

SECRET_KEYはセキュリティ上の理由からランダムで一意な文字列を指定します。本番環境では、より複雑な設定が必要です。

Flaskアプリケーションのメインスクリプト

次に、app.pyにFlaskアプリケーションのメインスクリプトを作成します。

# app.py
from flask import Flask, render_template, request, redirect, url_for
from config import Config

app = Flask(__name__)
app.config.from_object(Config)

# 掲示板のメッセージを保存するリスト
messages = []

# メインページ
@app.route('/')
def index():
    return render_template('index.html', messages=messages)

# メッセージの投稿
@app.route('/post_message', methods=['POST'])
def post_message():
    username = request.form.get('username')
    message = request.form.get('message')
    if username and message:
        messages.append({'username': username, 'message': message})
    return redirect(url_for('index'))

if __name__ == '__main__':
    app.run()

このスクリプトでは、Flaskアプリケーションの基本的な設定とメインのロジックを定義しています。

HTMLテンプレートの作成

次に、/templatesディレクトリにindex.htmlという名前のHTMLテンプレートを作成します。

<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <title>簡易掲示板</title>
</head>
<body>
    <h1>簡易掲示板</h1>

    <div id="message-form">
        <form action="{{ url_for('post_message') }}" method="post">
            <label for="username">ユーザー名:</label>
            <input type="text" name="username" required>
            <label for="message">メッセージ:</label>
            <textarea name="message" required></textarea>
            <button type="submit">投稿</button>
        </form>
    </div>

    <div id="message-list">
        {% if messages %}
            {% for message in messages %}
                <div class="message">
                    <strong>{{ message['username'] }}</strong>: {{ message['message'] }}
                </div>
            {% endfor %}
        {% else %}
            <p>メッセージがありません。</p>
        {% endif %}
    </div>
</body>
</html>

CSSスタイルの追加

/staticディレクトリにstyle.cssを作成して、簡単なスタイルを追加します。

/* static/style.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

h1 {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1em 0;
    margin: 0;
}

#message-form {
    background-color: #fff;
    padding: 1em;
    margin: 1em;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#message-list {
    background-color: #fff;
    padding: 1em;
    margin: 1em;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.message {
    border-bottom: 1px solid #ddd;
    padding: 0.5em 0;
}

button {
    background-color: #333;
   

 color: #fff;
    border: none;
    padding: 0.5em 1em;
    cursor: pointer;
    border-radius: 3px;
}

アプリケーションの実行

すべてのファイルが用意できたら、Flaskアプリケーションを実行します。

python app.py

アプリケーションが起動したら、ブラウザでhttp://127.0.0.1:5000/にアクセスして掲示板を利用できます。

まとめ

この記事では、Flaskを使用して簡易な掲示板を作成する手順について解説しました。Flaskを利用することで、Pythonを使ったWebアプリケーションの構築が簡単に行えます。掲示板の作成を通じて、Flaskの基本的な使い方やHTMLテンプレート、CSSスタイルの組み合わせによるWebアプリケーションの開発を学びました。これを基にして、より複雑な機能やデザインを追加して、自分だけのWebアプリケーションを構築してみましょう。