Python の勉強を行う中で、今回はWebアプリケーションを実装した。

Pythonにも、様々なWebフレームワークが存在する。

名前	特徴
Django	多機能万能なフルスタックフレームワーク。大規模開発向け。
Flask	最小限の機能、軽量・高速なフレームワーク。
Bottle	軽量・シンプル・高速なフレームワーク。
Tornado	多数の同時接続の処理を可能とする、非同期通信が行えるフレームワーク。
web2Py	シンプルなクロスプラットフォーム対応（WindowsやMac、Linuxなど）のフレームワーク。

最も人気のあるフレームワークは、何でも対応できる「Django」であるが、今回は最小限の構成で実装できる「Flask」で実装すべく、Flaskに関して調べたことをまとめて紹介する。

Flaskとは

Flask（フラスク）は軽量なWebフレームワークである。標準で提供されているパッケージが必要最小限であることから、「マイクロフレームワーク」と呼ばれる。WebサーバとアプリケーションをつなぐインターフェースであるWerkzeug とテンプレートエンジンであるJinja2を基に作られている。

flask.palletsprojects.com

Werkzeugとは

Werkzeug(ヴェルクツォイク)は、非常にシンプルなWSGIに準拠したWebアプリケーションライブラリーである。

werkzeug.palletsprojects.com

WSGIとは

WSGI（ウィズギー）は、Web Server Gateway Interfaceの略で、PythonのWebアプリケーションとWebサーバー間とのやり取りの規約、プロトコルであり、PEP333で定義されている。

PEP 333 -- Python Web Server Gateway Interface v1.0 | Python.org

PythonのWebフレームワークの大半はこのWSGIという規約に則っている。（Django / Flask / Bottleなどが挙げられる。）

その昔、PythonのWebフレームワークごとに、サーバーと接続するためのインターフェースが異なっていたため、同一のアプリケーションであっても、接続できるサーバーが制限されるという事態が発生してしまった。そのため、インターフェースを統一して、どのフレームワークでも同じように各種サーバーに接続できるようにしよう、ということで生まれたのがWSGIであった。

Jinja2とは

Jinja2はモダンでデザイナーフレンドリーなPython用のテンプレートエンジンである。ネーミングの由来が、テンプレート→テンプル→神社となり、「Jinja」となったとか。特徴としては、Djangoのテンプレートを模してあり、高速で幅広く活用でき、サンドボックスのテンプレート実行環境を使うことでセキュアに利用できる。

jinja.palletsprojects.com

実装方法

今回は、html, css, jsのファイル構成のHP（お問い合わせ画面）を公開する場合を試験的に実装する。

f:id:serip39:20200704220830p:plain

インストール

pipでインストールすることができる。（Pythonの仮想環境であるPipenvを使った場合を想定する。）

pipenv install flask

Webアプリケーションの作成

フォルダ構成は以下のようにした。

|- app.py
|- template
    |- index.html
|- static
    |- style.css
    |- script.js

from flask import Flask, render_template, request

app = Flask(__name__)
app.config['JSON_AS_ASCII'] = False
app.config['JSON_SORT_KEYS'] = False

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/contact', methods=['POST'])
def contact():
    name = request.json['name']
    email = request.json['email']
    message = request.json['message']
    result = "Success, name: " + name + "email: " + email + "message: " + message
    return result 

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Flask Hello World</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="static/style.css">
  </head>
  <body>
    <div class="container">
      <h1>Flask Hello World</h1>
      <form>
        <label class="label" for="name">名前</label>
        <input id="name" type="text" name="name">
        <label class="label" for="e-mail">メール</label>
        <input id="email" type="email" name="email">
        <label class="label" for="message">本文</label>
        <textarea rows="4" id="message" name="message"></textarea>
        <button id="btn_submit">送信する</button>
      </form>
    </div>
    <script type="text/javascript" src="static/script.js"></script>
  </body>
</html>

body {
  background: #444;
  color: white;
}

.container {
  max-width: 900px;
  margin: 0 auto;
}

form {
  display: flex;
  flex-direction: column;
}

input, textarea {
  padding: 10px 5px;
}

button {
  margin-top: 20px;
}

window.onload = function() {
  document.getElementById('btn_submit').onclick = function() {
    post();
  };
};

function post(cmd) {
  var data = {
    name: document.getElementById('name').value,
    email: document.getElementById('email').value,
    message: document.getElementById('message').value
  }
  xmlHttpRequest = new XMLHttpRequest();
  xmlHttpRequest.open('POST', 'contact', true);
  xmlHttpRequest.setRequestHeader( 'Content-Type', 'application/json');
  xmlHttpRequest.send( JSON.stringify(data) );
}