Flaskの基礎

Python軽量フレームワーク Flask

Flaskってなに？

私がFlaskを知ったのは掌田津耶乃（しょうだつやの）先生の「PythonフレームワークFlaskで学ぶ Webアプリケーションのしくみとつくり方」という本でした。

教育用資料では今まで何回もFlaskのサンプルを書いていますが、考えてみればFlaskの基礎をやっていないのでここでやっておくことにします。本当は上記の本を読むのがいいです。Flask以外にも Bootstrap、VUE.js、SQLiteなどのことが書いてあります。学校の教科書にしたいくらいです。

Flaskの基礎

Flask(フラスク)はオープンソースのフレームワークで有名なDjangoに比べると軽量でデータベース接続も標準では組み込まれていません。必要最小限の機能しかもっていませんが、モジュールを組み込みさえすれば使用可能で手軽です。PythonにはHTTPServerという標準モジュールがあり、これでWEBができるのですが、これは試験用ですので本番では使わないでください。

Flaskを使用するにはFlaskのパッケージをインストール必要がありますので、インストールしてなければ以下のコマンドをコマンドプロンプトに入力してインストールしてください。関連するモジュールも自動的にインストールされます。

  pip install Flask

では、まず簡単な形でFlaskを実行してみましょう。

flaskTestというフォルダーを用意して、その配下にHelloフォルダーを作りましょう。そこにapp.pyというpythonファイルを作成します。

app.py

  from flask import Flask

  app = Flask(__name__)
  
  @app.route('/')
  def main():
    return 'Helo, world!'

実行するには、コマンドプロンプトでHelloフォルダーに移動してから

  flask run
コマンドプロンプトで実行

実行しても、なにも表示されませんが、実行中になっていますので心配しないでください。ここでブラウザを開いて、localhost:5000のアドレスを開いてください。

実行画面

すると、さきほどのコマンドプロンプトに続きが表示され、HTTP/1.1で受信したプロンプトが表示されます。終了するにはCTRL+Cです。

このように、app.pyでflaskを呼び出し、オブジェクト作成し、どのアドレスが呼び出されたら、どんな処理をするのかを記述しておけば、指定した内容をreturnで戻せばブラウザに表示されます。

もしも、returnにHTMLを記述すれば、そのままホームページが表示されるようになります。単純ですね。

内容を解説しましょう。最初にflaskのモジュールをimportします。そしてFlaskのクラスからappというオブジェクトを作成します。__name__はアプリケーション名です。@appで始める部分が「デコレータ」という部分で、ここにどこのアドレスが指定された時なのかを記述します。今回のように('/')と記述すればルートアドレスへの参照を意味しています。

def main()と記述していますが、このモジュール名はなんでも構いません。デコレータの直下に書いてあるモジュールが起動されます。今回の内容はreturnで文字列を返すものでしたので、指定した文字列がブラウザに表示されました。

HTMLファイルと連携する

さきほどのサンプルは文字を表示するだけでしたが、今度はあらかじめ準備したHTMLファイルを表示するようにしてみましょう。

HTMLファイルを作っておく

さきほどはHelloフォルダーに作りましたが、今度はflaskTestフォルダーの下にHelloHTMLフォルダーを作りましょう。

フォルダー階層はHelloを合わせて書くとこんな感じです

    ├─Hello
    │   └─app.py
    └─HelloHTML
        └─templates
        │  └─index.html
        └─app.py

index.htmlの内容は適当でいいです。例えばこんな感じです

index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>flask html</title>
    </head>
    <body>
        <h1>Hello Flask world</h1>
    </body>
    </html>

templatesにいれてください。templateではありません

ここにindex.htmlを入れておいて、returnで呼び出して、その中身を返します

HTMLファイルを呼び出す

render_template(ファイル名)でtemplatesフォルダーの中のファイルを指定します。

app.py

    from flask import Flask, render_template

    app = Flask(__name__)

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

こんな感じです。HTMLが表示されました。

ただこれだと、ただhtmlを表示しているだけでプログラムで実行している恩恵がありませんので、ここからだんだん動的ウェブにしていきます。

動的HTMLにする（Jinja2）

FlaskにはJinjaというテンプレートエンジンが含まれています。htmlファイルの中に{{変数}}でエクスプレッションを指定すると、外部からその変数に値を送り込むことができます。

では今度はflaskTestの配下にjinjaHTMLフォルダーを作り、templatesフォルダーにindex.htmlファイルを作りましょう

index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{{title}}</title>
    </head>
    <body>
        <h1>{{h1text}}</h1>
    </body>
    </html>

app.py

    from flask import Flask, render_template

    app = Flask(__name__)

    @app.route('/')
    def index():
        return render_template('index.html',
            title="jinja HTML",
            h1text="Hello jinja HTML")

大差ありませんが、外から内容を指示できるので動的HTMLが作成できました。

render_templateの第2パラメータ以降は、変数名="値"で指定できます。いくつでもできます

jinja表示

titleとh1のテキストを外部から指定しています。

外部からパラメータを渡してみる

さてgetでindex.htmlに対してパラメータを送ってみましょう。uriに/を入れて区切り　localhost:5000/para1/para2　のように渡して、それを受け取って表示してみましょう

今回はindex.htmlの内容は前回と同じですが、フォルダーは作らないといけません。flaskTestフォルダーの配下にparaFlaskフォルダーを作り、templatesフォルダーに先ほどのindex.htmlをコピーしておきましょう。

app.py

    from flask import Flask, render_template

    app = Flask(__name__)
    
    @app.route('/<int:p1>/<int:p2>')
    def index(p1, p2):
        sum = p1 + p2
        data = "{0} + {1} = {2}".format(p1,p2,sum)
        return render_template('index.html',
            title="para Flask",
            h1text=data)

パラメータは型を宣言できるので、int:で整数を指定しました。デフォルトはstringで、float、path、any、uuidが指定できます。

今回は第1パラメータと第2パラメータの足し算を表示しました。

パラメータ指定