flaskのQuickstartをやってみたので、そのメモ。
この記事ではFlaskの基本的なことを勉強していきます。
環境
関連リンク
Quickstart — Flask 1.0.2 documentation
はじめに
はじめに、簡単なアプリケーションを作ってみます。
その前に、Flaskをpipでインストールします。
HelloWorld.py
上のプログラムを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
にアクセスすると、下の画面が表示されます。
プログラムの説明
Flaskをインポートした後、Flaskのインスタンスを作る。Flaskのインスタンスを作る際は第一引数に__name__
を渡すといいみたいです。
ここに説明が書かれていたがよく理解できなかった。
デコレータのroute()
を使ってFlaskに関数を呼び出すときのURLを教えています。
例えば、以下のコードをHelloWorld.py
に追加して実行した後に、
http://127.0.0.1:5000/example
にアクセスすると、この画面が出るはずです。
run()
でアプリケーションを動かします。
routeに変数を設定する
route()
は変数を設定することができます。
<username>
のところをBobとしてhttp://127.0.0.1:5000/example/Bob
にアクセスすると、下の画面が表示されます。
変数の型はデフォルトでstring
となっていて、スラッシュ以外の文字を使うことができます。string
以外ではint
, float
, path
, uuid
があります。
int
path
pathはスラッシュを使うことができます。
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
application/templates/hello.html
実行結果
app.pyを実行しhttp://127.0.0.1:5000/hell
にアクセスすると、
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
application/templates/hello.html
CSSファイルを読み込むために、HTMLの中身を下のように変えます。
実行結果
app.pyを実行しhttp://127.0.0.1:5000/hell
にアクセスすると、
CSSの見た目が変わらないとき
もしかしたら、パスの設定はちゃんとできているのに、CSSの見た目が変わらないときがあるかもしれません。ブラウザのキャッシュに問題があるようで、
そんなときは、Windowsユーザの人は
で強制更新しましょう。