どん底から這い上がるまでの記録

どん底から這い上がりたいけど這い上がれない人がいろいろ書くブログ(主にプログラミング)

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

プライバシーポリシー