新しい歴史

Python と Flask で Web サーバーを構築する

に Ajay Krishnan Prabhakaran9m2025/01/02

FA-AF

長すぎる; 読むには

この記事では、PythonとFlaskフレームワークを使用してシンプルなWebサーバーを構築する方法を説明します。ルーティング、テンプレート、HTTPリクエストの処理などの主要な概念を学びながら、機能的なWebアプリケーションを作成します。

featured image - Python と Flask で Web サーバーを構築する

デジタル時代は、動的でインタラクティブな Web エクスペリエンスを必要とします。Web サーバーの構築は、このデジタル環境の要であり、静的 HTML ページを超えるアプリケーションの作成を可能にします。Python は、その洗練された構文と広範なライブラリにより、Web 開発の強力な基盤を提供します。軽量で多用途なマイクロフレームワークである Flask は、プロセスをさらに簡素化します。Python の柔軟性と Flask の合理化されたアプローチを組み合わせることで、開発者は堅牢な Web サーバーを迅速かつ効率的に構築できます。このジャーニーでは、HTTP 要求と応答の処理からルーティングとテンプレート化まで、Web 開発のコア概念を詳しく調べ、世界をつなぎ、情報を提供する魅力的で機能的な Web アプリケーションを構築できるようにします。

「ウェブは明日のグローバルビレッジの広場になりつつある。」 - ビル・ゲイツ

前提条件

Python 3.x
フラスコ

pip を使用して Flask をインストールします。

 pip install flask

コード

以下は、シンプルなレストラン予約システムの完全なコードです。

 from flask import Flask, render_template, request app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') @app.route('/submit', methods=['POST']) def submit(): # Extract form data name = request.form['name'] phone = request.form['phone'] email = request.form['email'] date = request.form['date'] time = request.form['time'] # Create a message for the result page message = ( f"Hello, {name.split()[0]}! Your reservation has been booked for {date} at {time}. " f"A reminder has been sent to {phone} and {email}" ) return render_template('result.html', message=message) if __name__ == '__main__': app.run(debug=True)

Flask モジュールのインポート: まず、Flask から必要なモジュールをインポートします。Flask はアプリケーションのメインクラスであり、render_template は HTML テンプレートのレンダリングに使用され、request は受信したフォームデータを処理するために使用されます。
Flask アプリの作成: WSGI (Web サーバーゲートウェイインターフェイス) アプリケーションとなる Flask クラスのインスタンスを作成します。
ルートの定義:
- インデックスルート ('/') : このルートは、ユーザーが予約の詳細を入力するためのフォームを含むindex.htmlテンプレートをレンダリングします。
- 送信ルート ('/submit') : このルートはフォームの送信を処理しますrequest.formを使用してフォームからデータを抽出し、確認メッセージを作成します。その後、メッセージはレンダリングのためにresult.htmlテンプレートに渡されます。
アプリの実行:

 python app.py

デバッグモード: app.pyにapp.run(debug=True)が含まれている場合、サーバーは開発に便利なデバッグモードで起動します。詳細なエラーメッセージが提供され、コードに変更を加えるとサーバーが自動的にリロードされます。

ポートとホスト: デフォルトでは、Flask はhttp://127.0.0.1:5000/で実行されます。ホストまたはポートを変更する必要がある場合は、 app.pyのapp.run()呼び出しを変更できます。

 if __name__ == '__main__': app.run(host='0.0.0.0', port=8000, debug=True)

インデックス.html

index.htmlファイルは予約システムのユーザーインターフェイスとして機能し、ユーザーがテーブルを予約するために名前、電話番号、電子メール、日付、時間などの詳細を入力できるフォームを備えています。視覚的に魅力的でユーザーフレンドリーなエクスペリエンスを提供するために、CSS でスタイル設定されています。フォームの送信時に、フォームデータが処理のためにサーバーに送信されます。

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Restaurant Table Booking</title> <style> body { font-family: Arial, sans-serif; background-image: url('https://img.freepik.com/premium-vector/delicious-food-menu-landing-page-template-homepage-design_631465-116.jpg?w=2000'); background-size: cover; background-position: center; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } .form-container { background-color: rgba(255, 255, 255, 0.8); padding: 40px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); max-width: 300px; width: 100%; } h1 { text-align: center; color: #333; } label { display: block; margin-bottom: 8px; color: #555; } input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="time"] { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; } input[type="submit"] { width: 100%; padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } input[type="submit"]:hover { background-color: #45a049; } </style> </head> <body> <div class="form-container"> <h1>Book a Table</h1> <form action="/submit" method="POST"> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <label for="phone">Phone Number:</label> <input type="tel" id="phone" name="phone" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <label for="date">Date:</label> <input type="date" id="date" name="date" required> <label for="time">Time:</label> <input type="time" id="time" name="time" required> <input type="submit" value="Submit"> </form> </div> </body> </html>

結果.html

result.htmlファイルは、フォームが送信された後にユーザーに確認メッセージを表示します。予約の詳細を動的に表示し、予約を確認し、提供された連絡先情報にリマインダーが送信されたことを確認します。

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Reservation Confirmation</title> <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet"> <style> body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-image: url('https://img.freepik.com/free-vector/minimal-doodle-frame-background-social-story-highlight_53876-97970.jpg?t=st=1735447681~exp=1735451281~hmac=d8f33db86d2b336838279674afb91df8c2089c7e8be13d316dc26982e0b30ac2&w=2000'); background-size: cover; background-position: center; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; color: #fff; } .form-container { background-color: rgba(0, 0, 0, 0.7); padding: 40px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); max-width: 400px; width: 100%; text-align: center; } h1 { font-family: 'Lobster', cursive; font-size: 32px; margin-bottom: 20px; } p { font-size: 18px; line-height: 1.5; } </style> </head> <body> <div class="form-container"> <h1>Reservation Confirmed!</h1> <p>{{ message }}</p> </div> </body> </html>

終わりに

HTTP リクエストの処理から動的コンテンツのレンダリングまで、Web 開発のコア原則を詳しく調べ、将来の取り組みのための強固な基盤を築きました。Web は絶えず進化する環境であり、革新と創造性の機会に満ちています。この課題を受け入れ、Web 開発の広大な可能性を探求し続け、成長し続けるインターネットのタペストリーに貢献してください。