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

pythonベースのWebフレームワークは様々ありますが、ハードルの低さとそこそこの機能を兼ね備えているのはおそらく「Flask」です。

そこで、今回はPython3.7 windows10環境に「Flask」を入れて、最小構成で起動するところまでのチュートリアルを解説したいと思います。

Flask実行の準備

flaskパッケージのインストール

pip install flask

flaskをインストールするとjinja2などの必要なものも一緒についてくる。

※なおFlaskはAnacondaで実行するよりpython3.7で実行する方が管理しやすいです。

作業フォルダの作成

どこでも良いので作業フォルダを作成する。
今回は「C:\Python37\flask-project」に作成しました。

f:id:karupoimou:20190520181730p:plain

最小構成での実行

「main.py」の作成

まず「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/

コマンドプロンプトからの実行

次にコマンドプロンプトからmain.pyを実行します。

まずcdで作業フォルダに移動します。

cd C:\Python37\flask-project

次にpythonファイルを実行します。

python main.py

実行が成功すると以下の様な画面になります。

f:id:karupoimou:20190520182530p:plain:w400 — 実行画面

※なおこの時、うまく実行されない場合はおそらくpythonのパスが通っていないです。パスの通し方については以下の記事をご参照ください。
【windows10】Python3.7をインストールしてpathを通して、pipでパッケージを入れる - なろう分析記録

ブラウザで確認

コマンドプロンプトでpythonを立ち上げたままの状態で、以下のURLにアクセスすると「Hallo World」が表示されます。

http://127.0.0.1:5000/

f:id:karupoimou:20190520182932p:plain — 最小構成でのFlaskの実行

htmlを使った表示

次にhtmlを使ったwebページ表示を行います。

「templates」「static」フォルダの作成

f:id:karupoimou:20190520183145p:plain — フォルダの追加

まず「.html」ファイルを入れるために「templates」フォルダ

「.css」ファイルを入れるために「static」フォルダを作ります。

※なおこの２つのフォルダの名前は固定です。他の名前にするとうまく動作しません。

「index.html」の作成

templatesフォルダに「index.html」を作成し保存します。

{% extends "layout.html" %}
{% block body %}
<h2> テスト </h2>
<hr>
{{ text }}<br>
<br>
{% endblock %}

「layout.html」の作成

同じくtemplatesフォルダに「layout.html」を作成し保存します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel = "stylesheet" href = "static/style.css">
    <title>{{ page_title }}</title>
</head>
{% block body %}
{% endblock %}
</html>

「style.css」の作成

staticフォルダの中に「style.css」を作成します。

/* style.css */
h2 {
  color: red;
}

「main.py」の上書き

最後にmain.pyに下記の内容を上書きします。

#coding:utf-8

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html',text="hello　woああああrld",page_title="お試しページ")
    #最初に読み込むhtmlと、htmlに渡す変数を指定

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

#デバッグモードTrueにすると変更が即反映される

#ファイルのエンコードはUTF-8で保存すること
#下記URLをブラウザに打ち込むとページが開く
#   http://127.0.0.1:5000/