Flask超入門

flaskのQuickstartをやってみたので、そのメモ。

この記事ではFlaskの基本的なことを勉強していきます。

 

環境

関連リンク

Quickstart — Flask 1.0.2 documentation

はじめに

はじめに、簡単なアプリケーションを作ってみます。

その前に、Flaskをpipでインストールします。

pip install -U flask

HelloWorld.py

from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello():
    return "Hello World!"

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

上のプログラムをHelloWorld.pyで保存します。

コマンドプロンプトを開いて、実行すると、こんな感じで表示されます。

> python Hello World.py
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

 

http://127.0.0.1:5000でアプリケーションが動いているので、ブラウザを開いてhttp://127.0.0.1:5000にアクセスすると、下の画面が表示されます。

f:id:pytry3g:20180725175834p:plain

プログラムの説明

from flask import Flask
app = Flask(__name__)

Flaskをインポートした後、Flaskのインスタンスを作る。Flaskのインスタンスを作る際は第一引数に__name__を渡すといいみたいです。

ここに説明が書かれていたがよく理解できなかった。

 

@app.route("/")
def hello():
    return "Hello World!"

デコレータのroute()を使ってFlaskに関数を呼び出すときのURLを教えています。

例えば、以下のコードをHelloWorld.pyに追加して実行した後に、

@app.route("/example")
def example():
    return "This is the example page:)"

http://127.0.0.1:5000/exampleにアクセスすると、この画面が出るはずです。

f:id:pytry3g:20180725191906p:plain

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

run()でアプリケーションを動かします。

routeに変数を設定する

route()は変数を設定することができます。

@app.route("/example/<username>")
def example(username):
    return "This is the example page for %s." % username

<username>のところをBobとしてhttp://127.0.0.1:5000/example/Bobにアクセスすると、下の画面が表示されます。

f:id:pytry3g:20180725193426p:plain

変数の型はデフォルトでstringとなっていて、スラッシュ以外の文字を使うことができます。string以外ではint, float, path, uuidがあります。

int

@app.route("/show/<int:_id>")
def show_numbers(_id):
    return "%d x %d = %d" % (_id, _id, _id*_id)

f:id:pytry3g:20180725193536p:plain

path

pathはスラッシュを使うことができます。

@app.route("/path/<path:subpath>")
def show_subpath(subpath):
    return "Subpath %s" % subpath

f:id:pytry3g:20180725193224p:plain

HTMLとCSSを使ったアプリケーション

最後に、HTMLとCSSを用いて超簡単なFlaskのアプリケーションを作ってみます。

HTMLを表示させる

HTMLを表示させるにはrender_template()メソッドを使います。Flaskはrender_template()に渡したファイルをtemplatesフォルダから見つけてきます。

このとき、作業しているディレクトリがapplicationだとすると、ディレクトリ構成は以下のようなります。

application/
    app.py
    /templates
        /hello.html

なので、templatesフォルダを作って、その中にHTMLファイルを入れます。

application/app.py

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

@app.route("/")
def index():
    return "This is the root page."

@app.route("/hell")
def example():
    return render_template("hello.html")

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

application/templates/hello.html

<html>
  <body>
    <h1>Hello Flask!!!</h1>
  </body>
</html>

実行結果

app.pyを実行しhttp://127.0.0.1:5000/hellにアクセスすると、

f:id:pytry3g:20180725213223p:plain

CSSで見た目を変える

CSSを使って見た目を変えてみます。今回はhttp://127.0.0.1:5000/hellのHello Flask!!!の文字の色を変えてみます。

なお、CSSファイルを置く場所もHTMLと同様に注意しなければなりません。CSSファイルはstaticフォルダを作って、その中に入れます。

ディレクトリ構成は以下のようなります。

application/
    app.py
    /templates
        /hello.html
    /static
        /style.css

application/static/style.css

h1 {
  color: #eee;
}

application/templates/hello.html

CSSファイルを読み込むために、HTMLの中身を下のように変えます。

<html>
  <head>
    <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
  </head>
  <body>
    <h1>Hello Flask!!!</h1>
  </body>
</html>

実行結果

app.pyを実行しhttp://127.0.0.1:5000/hellにアクセスすると、

f:id:pytry3g:20180725223604p:plain

CSSの見た目が変わらないとき

もしかしたら、パスの設定はちゃんとできているのに、CSSの見た目が変わらないときがあるかもしれません。ブラウザのキャッシュに問題があるようで、

そんなときは、Windowsユーザの人は

Ctrl + Fn + F5

で強制更新しましょう。

qiita.com



免責事項 | プライバシーポリシー