【10分でWebアプリ】 Python Flaskでサクッと簡単に画面を作成する

PythonのフレームワークであるFlaskで簡単に画面を作っていきましょう。

「とにかくPythonで簡単に画面を作りたい」
「Flaskの特徴を知りたい」
「Flaskのインストール方法が知りたい」
「Flaskの基本的な使い方が知りたい」

という方に向けて、今日はみなさんに特徴や使用方法を説明しつつ、画面作成までいきます！

Contents

Flaskとは
Flaskの採用場面
Flaskで画面とAPIを作成する
- Flaskのインストール
- Flaskアプリのフォルダ構成
FlaskでAPIアクセスして、結果を画面に表示する
- APIアクセスする処理を実装
- 画面をHTMLで実装
Flaskの簡易Webサーバを起動する
Flaskで画面作成のまとめ

Flaskとは

Flaskは軽量なWebアプリ作成のフレームワークです。

画面やAPIの作成に適しています。

よく比較にあがるフレームワークはDjangoです。

Flaskは、Djangoほど多機能ではなくていいと思ったときに使うといいと思います。

http://flask.pocoo.org

Flaskの採用場面

Flaskを採用するシーンは、

高速開発が求められている（短納期2日間など）
シンプルさを求められている（機能やデザインにこだわらなくてよい）
プロトタイプみたいなさくっと試したいとき

それだけ、シンプルかつ高速に実装することができます。

私自身、何度もFlaskを使っています。

私がFlaskを採用した場面はこちらです。

Lighting Talk向けの画像認識アプリ作成時に機械学習モデルを推論する際に使用
1週間くらいで簡単な画面を用意してくれと言われた時に使用

逆にDjangoを採用した時は、クライアントにAngular2とサーバにPythonでデザインにこだわりたかった時やサーバサイドの処理が複雑になる時でした。

Flaskで画面とAPIを作成する

では、早速Flaskで画面を作っていきます。

Flaskの使いどころとしてAPIを作ることが多いのですが画面も作れます。

Flaskのインストール

pipでFlaskをインストールしましょう。

pip install Flask

AnacondaでFlaskをインストールする場合

conda install Flask

Flaskアプリのフォルダ構成

フォルダ構成はflaskというディレクトリにhello.pyとtemplateフォルダを作成し、templates配下にindex.htmlを用意してください。

flask
├─ hello.py
└─ templates
     └─ index.html

FlaskでAPIアクセスして、結果を画面に表示する

APIアクセスする処理を実装

では、まずhello.pyでAPIにアクセスして結果をindex.htmlに表示する処理を書いていきます。

import requests
import json
from flask import Flask, render_template

app = Flask(__name__)
api = "自分が叩きたいAPI"

@app.route('/')
def hello():
  res = requests.get(api)
  data = json.loads(res.text)
  html = render_template('index.html', text = data)
  return html

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

画面をHTMLで実装

次にhtmlを書いていきましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HELLO</title>
</head>
<body>
  <form class="" action="/" method="post">
    <input type="text" name="single" value="text" placeholder="テキスト">
    <input type="submit" name="" value="送信">
  </form>
  <p>Sayhello</p>
  <p>{{ text }}</p>
</body>
</html>

{{ text }}となっている箇所は、jinja2というフレームワークの記法です。

Flaskでは、jinja2を採用しています。

jinja2の記法によって変数をバインドすることができます。

hello.pyのtextの値が出力されることを示しています。

http://jinja.pocoo.org/docs/2.10/