More than 3 years have passed since last update.

flask入門・環境構築

Posted at 2022-01-06

02:PythonとFlaskをインストールする(Windows10)

参考サイト

Python3.7 windows10環境で『Flask』の最小構成を試す

Python3.7のインストール
https://www.python.org/downloads/release/python-376/

上記からインストーラタイプ(Windows x86-64 executable installer)をDL

インストールする(もし、PATHが通っていなかった場合は再実行し
Modify→add python to environment variablesにチェックを入れ再インストール

インストールされているか確認

python -V

Python 3.7.6

Pythonインストール確認後、下記コマンドでFlaskをインストール

pip install flask

作業ディレクトリにmain.pyを作成し、以下を記述

# coding:utf-8

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return "Hallo World!"

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

# デバッグモードTrueにすると変更が即反映される
# ファイルのエンコードはUTF-8で保存すること
# 下記URLをブラウザに打ち込むとページが開く
# http://127.0.0.1:5000/

その後、作業ディレクトリで以下のコマンドを実行

python main.py

アプリが実行されるので、http://127.0.0.1:5000/ へアクセスして確認

参考になるWebページ
Flask
http://flask.pocoo.org/

Flask - Wikipedia
https://ja.wikipedia.org/wiki/Flask

Flaskへようこそ — Flask documentation
https://a2c.bitbucket.io/flask/

Flaskの簡単な使い方 - Qiita
https://qiita.com/zaburo/items/5091041a5afb2a7dffc8

ウェブアプリケーションフレームワーク Flask を使ってみる - Qiita
https://qiita.com/ynakayama/items/2cc0b1d3cf1a2da612e4

[Python] Flask 入門 - ゾンビでもわかるPythonプログラミング
http://python.zombie-hunting-club.com/entry/2017/11/03/223503

03:ルーティングを理解しよう

# coding:utf-8
# ファイルのエンコードはUTF-8で保存すること
from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def index():
    return "Hello World!"
# ルートスラッシュで"Hello World!"表示

@app.route("/about")
def about():
    return "This is paiza"
# "/about"で"This is paiza"表示

if __name__ == '__main__':
    app.debug = True  #デバッグモードTrueにすると変更が即反映される
    app.run()


# 下記URLをブラウザに打ち込むとページが開く
# http://127.0.0.1:5000/

04:テンプレートで表示しよう

main.pyを改修

# coding:utf-8
from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def index():
    return render_template("index.html")
# template機能で作成したindex.htmlを下地として表示
# templateはjinja2の機能（python製テンプレートエンジン）

@app.route("/about")
def about():
    return "This is paiza"
# "/about"で"This is paiza"表示

if __name__ == '__main__':
    app.debug = True  #デバッグモードTrueにすると変更が即反映される
    app.run()

テンプレートディレクトリ作成+移動
mkdir templates && cd templates

テンプレートとなるhtml作成

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Flask - paiza</title>
        <style>body {padding: 10px;}</style>
    </head>
    <body>
        <h1>Hello Python</h1>
        <p>Hello paiza!</p>
    </body>
</html>

05:テンプレートの書き方を理解しよう

テンプレートにデータを渡す

# coding:utf-8
from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def index():
    name = "Flask"
    return render_template("index.html", name_value = name)

# template機能で作成したindex.htmlを下地として表示
# templateはjinja2の機能（python製テンプレートエンジン）

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


if __name__ == '__main__':
    app.debug = True  #デバッグモードTrueにすると変更が即反映される
    app.run()

flaskモード指定起動
$ FLASK_APP=hello.py FLASK_ENV=development flask run
テンプレートでデータを受け取る
myapp/templates/index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Flask - paiza</title>
        <style>body {padding: 10px;}</style>
    </head>
    <body>
        {% if name_value %}
            <h1>Hello {{ name_value }}</h1>
        {% else %}
            <p>Hello paiza!</p>
        {% endif %}
    </body>
</html>

テンプレートでは、{%...%}で囲むことで、Pythonのコードを記述できる。
この時、インデントは無視されるので、if文に{% endif %}が必要になる。

06:RPGの戦闘シーンを表現しよう

配列を渡すコード

# coding:utf-8
from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def index():
    name = "Flask"
    players = ["勇者", "戦士", "魔法使い"]
    return render_template("index.html", name_value = name, players = players)

# template機能で作成したindex.htmlを下地として表示
# templateはjinja2の機能（python製テンプレートエンジン）

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

if __name__ == '__main__':
    app.debug = True  #デバッグモードTrueにすると変更が即反映される
    app.run()

flaskモード指定起動
$ FLASK_APP=hello.py FLASK_ENV=development flask run
テンプレートでデータを受け取る
myapp/templates/index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Flask - paiza</title>
        <style>body {padding: 10px;}</style>
    </head>
    <body>
        <h1>Hello {{ name_value }}</h1>
        <p>Hello paiza!</p>
        {% for player in players: %}
            <p>{{ player + "はモンスターと戦った" }}</p>
        {% endfor %}
    </body>
</html>

07:テンプレートの共通部分を分割しよう

共通テンプレートを定義する
myapp/templates/layout.html

layout.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Flask - paiza</title>
        <style>body {padding: 10px;}</style>
    </head>
    <body>
        <p>共通テンプレート</p>
        {% block content %}
        {% endblock %}
    </body>
</html>

flaskモード指定起動
$ FLASK_APP=hello.py FLASK_ENV=development flask run
個別テンプレートから共通テンプレートを呼び出す
myapp/templates/index.html

index.html

{% extends "layout.html" %}
{% block content %}
    <h1>Hello {{ name_value }}</h1>
    <p>Hello paiza!</p>
    {% for player in players: %}
        <p>{{ player + "はモンスターを戦った" }}</p>
    {% endfor %}
{% endblock %}

Flask入門編2:Pythonでフォーム処理の基本を身に付けよう

01:フォーム処理の基本を理解しよう

02:投稿フォームを作ろう

フォームを表示するコード
myapp/form.py

form.py

from flask import Flask, render_template
app = Flask(__name__)

# /に対応するコード
@app.route("/")
def show():
    message = "hello world"
    return render_template("form.html", message = message)

フォームを表示するテンプレート
myapp/templates/form.html

form.html

{% extends "layout.html" %}
{% block content %}
<h1>フォーム</h1>
<p>{{ message }}</p>
<form action="/result" method="post">
    <label for="article">投稿</label>
    <input type="text" name="article">
    <p></p>
    <label for="name">名前</label>
    <input type="text" name="name">
    <button type="submit">送信する</button>
</form>
{% endblock %}

フォームに入力した内容をpostメソッドで送信する

03:投稿したデータを表示しよう

フォームを表示・受信するコード

form.py


from flask import Flask, request, render_template
app = Flask(__name__)

@app.route("/")
def show():
    message = "Hello World"
    return render_template("form.html", message = message)

# postメソッドに対応した処理の記述
@app.route("/result", methods=["POST"])
def result():
    message = "This is paiza"
    article = request.form["article"]
    name = request.form["name"]
    return render_template("form.html", message = message, article = article, name = name)

フォームを表示するテンプレート
myapp/templates/form.html

{% extends "layout.html" %}
{% block content %}
<h1>フォーム</h1>
<p>{{ message }}</p>
<form action="/result" method="post">
    <label for="article">投稿</label>
    <input type="text" name="article">
    <p></p>
    <label for="name">名前</label>
    <input type="text" name="name">
    <button type="submit">送信する</button>
</form>
<p>{{ article }} {{ name }}</p>
{% endblock %}

でpostメソッド対応処理を表示

04:GETメソッドでフォームを作ろう

GETメソッドとPOSTメソッドの両方に対応したコード
myapp/form.py

form.py

from flask import Flask, request, render_template
app = Flask(__name__)

@app.route("/")
def show():
    message = "Hello World"
    return render_template("form.html", message = message)

@app.route("/result", methods=["GET", "POST"])
def result():
    message = "This is paiza"
    if request.method == "POST":
        article = request.form["article"]
        name = request.form["name"]
    else:
        article = request.args.get("article")
        name = request.args.get("name")
    return render_template("form.html", message = message, article = article, name = name)

GETメソッドのフォームを表示するテンプレート
myapp/templates/form.html

{% extends "layout.html" %}
{% block content %}
<h1>フォーム</h1>
<p>{{ message }}</p>
<form action="/result" method="get">
    <label for="article">投稿</label>
    <input type="text" name="article">
    <p></p>
    <label for="name">名前</label>
    <input type="text" name="name">
    <button type="submit">送信する</button>
</form>
<p>{{ article }} {{ name }}</p>
{% endblock %}

05:フォームでRPGの戦闘シーンを作ろう

ここでは、Flaskによるフォームの具体例として、RPGの戦闘シーンを作ります。先ほどのチャプターで作ったフォームをベースにして、ドロップダウンメニューでプレイヤーを選択できるようにしましょう。

RPGの戦闘シーン(コード)
myapp/battle.py

battle.py

from flask import Flask, request, render_template
app = Flask(__name__)

players = ["勇者", "戦士", "魔法使い", "忍者"]

@app.route("/")
def show():
    message = "あらたなモンスターがあらわれた！"
    return render_template("battle.html", message = message, players = players)

@app.route("/result", methods=["POST"])
def result():
    name = request.form["name"]
    message = name + "はモンスターと戦った！"
    return render_template("battle.html", message = message, players = players)

RPGの戦闘シーン(テンプレート)
myapp/templates/battle.html

battle.html

{% extends "layout.html" %}
{% block content %}
<h1>RPGの戦闘フォーム</h1>
<p>{{ message }}</p>
<form action="/result" method="post">
    <select name="name">
        {% for player in players %}
            <option value="{{ player }}">{{ player }}</option>
        {% endfor %}
    </select>
    <p></p>
    <button type="submit">たたかう</button>
</form>

<form action="/" method="get">
    <button type="submit">にげる！</button>
</form>
{% endblock %}

06:1行掲示板を作ろう - 投稿したデータを表示する

ここでは、Flaskを使ったWebアプリケーションの具体例として、簡単な1行掲示板を作成します。まずは、投稿内容を記録したテキストファイルから、データを表示してみましょう。

投稿一覧のダミーデータ
myapp/articles.txt

articles.txt

Hello World,paiza
Hello Ruby,paiza
Hello Sinatra,paiza
世界の皆さんコンニチハ,霧島
にゃー,ネコ

末尾を改行しておく。

投稿一覧を読み込むコード
myapp/bbs.py

bbs.py

from flask import Flask, request, render_template
import codecs
app = Flask(__name__)

@app.route("/")
def bbs():
    message = "Hello world"
    file = codecs.open("articles.txt", "r", "utf-8")
    lines = file.readlines()
    file.close()
    return render_template("bbs.html", message = message, lines = lines)

@app.route("/result", methods=["POST"])
def result():
    message = "This is paiza"
    article = request.form["article"]
    name = request.form["name"]
    return render_template("bbs.html", message = message, article = article, name = name)

投稿一覧を表示するテンプレート
myapp/templates/bbs.html

bbs.html

{% extends "layout.html" %}
{% block content %}
    <h1>1行掲示板</h1>
    <p>{{ message }}</p>

    <form action="/result" method="post">
        <label for="article">投稿</label>
        <input type="text" name="article">
        <p></p>
        <label for="name">名前</label>
        <input type="text" name="name">
        <button type="submit">送信する</button>
    </form>

    <h2>投稿一覧</h2>

    <table>
    <tr><th>投稿</th><th>名前</th></tr>
        {% for line in lines: %}
            {% set column = line.rstrip().split(",") %}
            <tr>
                {% for item in column: %}
                    <td>{{ item }}</td>
                {% endfor %}
            </tr>
        {% endfor %}
    </table>
{% endblock %}

07:1行掲示板を作ろう - 投稿をファイルに保存する

ここでは、先ほどに続いて、Flaskを使ったWebアプリケーションの具体例として、簡単な1行掲示板を作成します。いよいよ、投稿をファイルに保存する機能を作成してみましょう。

投稿一覧のダミーデータ
末尾を改行しておく。

myapp/articles.txt

articles.txt

Hello World,paiza
Hello Ruby,paiza
Hello Sinatra,paiza
世界の皆さんコンニチハ,霧島
にゃー,ネコ

1行掲示板のコード
myapp/bbs.py

bbs.py

from flask import Flask, request, render_template
import codecs
app = Flask(__name__)

@app.route("/")
def bbs():
    #lines = []
    message = "Hello world"

    file = codecs.open("articles.txt", "r", "utf-8")
    lines = file.readlines()
    file.close()

    return render_template("bbs.html", message = message, lines = lines)

@app.route("/result", methods=["POST"])
def result():
    message = "This is paiza"
    article = request.form["article"]
    name = request.form["name"]

    file = codecs.open("articles.txt", "a", "utf-8")
    file.write(article + "," + name + "\n")
    file.close()

    return render_template("bbs_result.html", message = message, article = article, name = name)

投稿一覧を表示するテンプレート
myapp/templates/bbs.html

bbs.html

{% extends "layout.html" %}
{% block content %}
    <h1>1行掲示板</h1>
    <p>{{ message }}</p>

    <form action="/result" method="post">
        <label for="article">投稿</label>
        <input type="text" name="article">
        <p></p>
        <label for="name">名前</label>
        <input type="text" name="name">
        <button type="submit">送信する</button>
    </form>

    <h2>投稿一覧</h2>

    <table>
    <tr><th>投稿</th><th>名前</th></tr>
        {% for line in lines: %}
            {% set column = line.rstrip().split(",") %}
            <tr>
                {% for item in column: %}
                    <td>{{ item }}</td>
                {% endfor %}
            </tr>
        {% endfor %}
    </table>
{% endblock %}

投稿結果を表示するテンプレート
myapp/templates/bbs.html

bbs.html

{% extends "layout.html" %}
{% block content %}
    <h1>書き込みました</h1>
    <p>{{ message }}</p>
    <p>{{ article }} {{ name }}</p>

    <form action="/" method="get">
        <button type="submit">戻る</button>
    </form>
{% endblock %}

Flask入門編3:Pythonでデータベースの基本を理解しよう

01:Pythonでデータベースに接続しよう

Pythonで、データベースからデータを取り出す(phpmyadmin)

sql.py

import pymysql  #mysqlを呼ぶライブラリ

print("世界の皆さん、こんにちは")

# DB接続するコネクション定義
connection = pymysql.connect(
    host="localhost",
    db="mydb",
    user="root",
    password="",
    charset="utf8",
    cursorclass=pymysql.cursors.DictCursor
)

sql = "SELECT * FROM players"  #DB操作のSQL文
cursor = connection.cursor()      #cursorは現在操作しようとしてるデータの位置を表すobject
cursor.execute(sql)                      #executeメソッドでsqlを実行
players = cursor.fetchall()             #fechallで結果を取り出す

cursor.close()
connection.close()

# 結果を一行づつ取り出す
for player in players:
    print(player["name"])

02:Flaskでデータベースから表示しよう

MySQLから読み込んだデータをFlaskを使って表示します。

Flaskで、データベースに接続するコード
myapp/hello.py

hello.py

from flask import Flask, render_template
import pymysql
app = Flask(__name__)

def getConnection():
    return pymysql.connect(
        host='localhost',
        db='mydb',
        user='root',
        password='',
        charset='utf8',
        cursorclass=pymysql.cursors.DictCursor
    )

@app.route('/')
def select_sql():
    connection = getConnection()
    message = "Hello world"

    sql = "SELECT * FROM players"
    cursor = connection.cursor()
    cursor.execute(sql)
    players = cursor.fetchall()

    cursor.close()
    connection.close()

    return render_template('view.html', message = message, players = players)

Flaskで取り出したデータを表示するテンプレート
myapp/templates/view.html

view.html

{% extends "layout.html" %}
{% block content %}
    <h1>Hello SQL</h1>
    <p>{{ message }}</p>

    {% for player in players %}
        <p>{{ player }}</p>
    {% endfor %}

{% endblock %}

03:Pythonでデータベースを使ってみよう1

Flaskで、データベースに接続するコード
myapp/hello.py

hello.py

from flask import Flask, render_template
import pymysql
app = Flask(__name__)

def getConnection():
    return pymysql.connect(
        host='localhost',
        db='mydb',
        user='root',
        password='',
        charset='utf8',
        cursorclass=pymysql.cursors.DictCursor
    )

@app.route('/')
def select_sql():
  
    connection = getConnection()
    message = "Hello world"

    sql = "SELECT * FROM players"
    cursor = connection.cursor()
    cursor.execute(sql)
    players = cursor.fetchall()

    cursor.close()
    connection.close()

    return render_template('view.html', message = message, players = players)

Flaskで取り出したデータを表示するテンプレート
myapp/templates/view.html

view.html

{% extends "layout.html" %}
{% block content %}
    <h1>Hello SQL</h1>
    <p>{{ message }}</p>

    {% for player in players %}
        <p>{{ player }}</p>
    {% endfor %}

{% endblock %}

Flaskを起動する
$ FLASK_APP=hello.py FLASK_ENV=development flask run

SQL文の例

全てのデータを取り出す

SELECT * FROM players;

一部のカラムだけ取得する

SELECT name, level FROM players;

一部の行だけ取得する

SELECT * FROM players WHERE level >= 7;

複数の条件を組み合わせる

SELECT * FROM players WHERE level >= 7 AND job_id <> 6;

条件指定とカラム選択を組み合わせる

SELECT name, level FROM players WHERE level >= 7;

変数で条件を指定する
myapp/hello.py

sql = "SELECT * FROM players WHERE level >= %s AND level <= %s"
cursor = connection.cursor()
cursor.execute(sql, (5, 10))
players = cursor.fetchall()

04:Pythonでデータベースを使ってみよう2

Flaskで、データベースに接続するコード
myapp/hello.py

hello.py

from flask import Flask, render_template
import pymysql
app = Flask(__name__)

def getConnection():
    return pymysql.connect(
        host='localhost',
        db='mydb',
        user='root',
        password='',
        charset='utf8',
        cursorclass=pymysql.cursors.DictCursor
    )

@app.route('/')
def select_sql():
  
    connection = getConnection()
    message = "Hello world"

    # sql = "INSERT INTO players (name, level, job_id) VALUES ('霧島1号', 1, 1)"
    # sql = "UPDATE players SET level = 10 WHERE id = 12"
    sql = "DELETE FROM players WHERE id = 12"
    cursor.execute(sql)
    connection.commit()

    sql = "SELECT * FROM players"
    cursor.execute(sql)
    players = cursor.fetchall()

    cursor.close()
    connection.close()

    return render_template('view.html', message = message, players = players)

Flaskで取り出したデータを表示するテンプレート
myapp/templates/view.html

{% extends "layout.html" %}
{% block content %}
    <h1>Hello SQL</h1>
    <p>{{ message }}</p>

    {% for player in players %}
        <p>{{ player }}</p>
    {% endfor %}

{% endblock %}

SQL文の例

# データを追加する
INSERT INTO players(name,level,job_id) VALUES('霧島1号', 1, 1)

# データを更新する
UPDATE players SET level = 10 WHERE id = 11

# データを更新する。1増加
UPDATE players SET level = level + 1 WHERE id = 12

# データを削除する
DELETE FROM players WHERE id = 13

# 複数のデータを削除する
DELETE FROM players WHERE id >= 11

05:Pythonでテーブルを連結してデータを取り出す

Flaskで、データベースを連結するコード
myapp/hello.py

from flask import Flask, render_template
import pymysql
app = Flask(name)

def getConnection():
return pymysql.connect(
host='localhost',
db='mydb',
user='root',
password='',
charset='utf8',
cursorclass=pymysql.cursors.DictCursor
)

@app.route('/')
def select_sql():

connection = getConnection()
message = "Hello world"

sql = "SELECT * FROM players LEFT JOIN jobs ON jobs.id = players.job_id"
cursor = connection.cursor()
cursor.execute(sql)
players = cursor.fetchall()

cursor.close()
connection.close()

return render_template('view.html', message = message, players = players)

Flaskで取り出したデータを表示するテンプレート
myapp/templates/view.html

{% extends "layout.html" %}
{% block content %}

Hello SQL

{% for player in players %}
    <p>{{ player }}</p>
{% endfor %}

{% endblock %}

テーブルの結合とは
テーブルの結合とは、重複したデータのテーブルを分割しておいて、必要に応じて、仮想的な1つの表として連結して扱う方法です。このようにテーブルを結合することを「リレーション」とか「連結」「関連付け」と呼ぶ場合もあります。

SQL文の例

左結合

SELECT * FROM players LEFT JOIN jobs ON jobs.id = players.job_id

06:データをtableタグで表示する

ここでは、Flaskでデータベースの値を表示する時の見栄えを整えます。そのために、HTMLのtableタグを使って、データを表示しましょう。

Flaskで、データベースを連結して、出力カラムを指定するコード
myapp/hello.py

from flask import Flask, render_template
import pymysql
app = Flask(name)

def getConnection():
return pymysql.connect(
host='localhost',
db='mydb',
user='root',
password='',
charset='utf8',
cursorclass=pymysql.cursors.DictCursor
)

@app.route('/')
def select_sql():

connection = getConnection()
message = "Hello world"

sql = "SELECT players.id, name, level, job_name FROM players LEFT JOIN jobs ON jobs.id = players.job_id"
cursor = connection.cursor()
cursor.execute(sql)
players = cursor.fetchall()

cursor.close()
connection.close()

return render_template('view.html', message = message, players = players)

Flaskで取り出したデータをテーブルタグで表示する
myapp/templates/view.html

{% extends "layout.html" %}
{% block content %}

Hello SQL

<table>
    {% for player in players %}
        <tr>
            <td>{{ player.id }}</td>
            <td>{{ player.name }}</td>
            <td>{{ player.job_name }}</td>
            <td>{{ player.level }}</td>
        </tr>
    {% endfor %}
</table>

{% endblock %}

07:特定のプレイヤーを表示する

ここでは、Flaskを使って、簡単なWebアプリケーションを作ります。

特定データを表示する
myapp/hello.py

from flask import Flask, request, render_template
import pymysql
app = Flask(name)

def getConnection():
return pymysql.connect(
host='localhost',
db='mydb',
user='root',
password='',
charset='utf8',
cursorclass=pymysql.cursors.DictCursor
)

@app.route('/')
def list_players():
connection = getConnection()
message = "Player一覧"

cursor = connection.cursor()
sql = "SELECT * FROM players LEFT JOIN jobs ON jobs.id = players.job_id;"
cursor.execute(sql)
players = cursor.fetchall()

cursor.close()
connection.close()

return render_template('index.html', message = message, players = players)

@app.route('/show/int:id')
def show_player(id):

connection = getConnection()
message = "Hello Player " + str(id)

cursor = connection.cursor()
sql = "SELECT * FROM players LEFT JOIN jobs ON jobs.id = players.job_id WHERE players.id = %s"
cursor.execute(sql, id)
player = cursor.fetchone()

cursor.close()
connection.close()

return render_template('profile.html', message = message, player = player)

特定データを表示するテンプレート
myapp/templates/profile.html

{% extends "layout.html" %}
{% block content %}

Hello SQL

<ul>
    <li>id：{{ player.id }}</li>
    <li>名前：{{ player.name }}</li>
    <li>職業：{{ player.job_name }}</li>
    <li>レベル：{{ player.level }}</li>
</ul>

<p><a href = "/">戻る</a></p>

{% endblock %}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up