気ままに趣味旅行

面白いコト「拡がる/拡げる」

WEBアプリケーションを作る1ーFlask編

どうもhiroakiです。

 

先日より、HTMLとCSSについて扱ってきました。

これからは、Flaskを使ったWEBアプリケーションを作っていきたいと思います。初めて作りますので、間違いなどあれば、ご指摘ください。

 

WEBの基本

WEBの世界はシンプルです。

クライアント(client)がリクエスト(Request)を投げ、サーバー(Server)がレスポンス(Response)を返します。

簡単ですね。これが基礎になりますので、しっかり覚えてください。

 

参考記事:

docs.pyq.jp

qiita.com

 

Flaskとは

FlaskはPythonでwebアプリケーションを作るフレームワークのひとつです。 PythonのwebアプリケーションフレームワークにはDjango、Flask、bottoleなど様々あります。このフレームワークを使うことで、初めから自分でコードを作る必要がなくなります。開発速度が上がりますね。また、複雑なコードを用意しなくてもいいなどのメリットがあります。

まずもって、ウェブアプリを作る人の中にwebフレームワークを使わない人はいません。(まあ、私も初めてですが…笑)

Pythonのwebアプリケーションフレームワークについては以下を参考ください。

www.sejuku.net

 

では、まず以下のコマンドでFlaskをインストールしてください。こうすることで、Flaskを使うことができるようになります。

  1. pip install Flask

以下から基礎を押さえてください。

Flask ハンズオン — Flask Handson 1 documentation

 

準備はできましたか。では、Pythonのファイルを作成してください。以下のコードを書きましょう。

  1. from flask import Flask
  2. app = Flask(__name__)
  3. @app.route("/")
  4. def hello_world():
  5.     return "Hello, World!"

1行目はflaskモジュールのFlaskクラスを読み込むという意味です。

2行目はappオブジェクトにFlaskクラスの引数に__name__が指定されています。__name__はFlaskクラスがファイルなどを参照する場合に起点となるパスが必要なので指定します。

4行目は@app.route("/")を指定しています。こうすることで、http://ドメイン名/でサイトにアクセスされた場合、5行目で定義したhello_world関数が実行されます。ちなみに、@で始まる行はデコレータといって、その次の行で定義する関数やクラスに対して何らかの処理を行います。 @app.route('/') は、次の行で定義される関数を指定した URL にマッピングするという処理を実行しています。

6行目の戻り値が、webページに表示するレスポンスを決めます。

 

Webページのアドレスは ホスト名(ドメイン) + コンテキストパス に分割できます。

例えば、下記サイトの場合を見てみましょう。

hiroakies.hatenablog.com

URLは下のようになっています。

hiroakies.hatenablog.comの部分がホスト名です。entry以下がコンテキストパスです。

Flaskのルーティングの対象はコンテキストパスになります。コンテキストパスに対応する処理を紐づける必要があり、この機能をルーティングといいます。

 

helloというパスに対して「Hello, World!」と返すには以下のようになります。

  1. from flask import Flask
  2. app = Flask(__name__)
  3. @app.route("/hello")
  4. def hello_world():
  5.     return "Hello, World!"

これで、http://ドメイン名/helloにアクセスすると、5行目で定義した関数が呼び出され、「Hello, World!」と表示されます。

 

次に、文字列ではなく、htmlファイルを用意して表示します。

  1. from flask import Flask, render_template
  2. app = Flask(__name__)
  3. @app.route("/")
  4. def index():
  5.     pass
  6.     return render_template('hello.html')

render_template関数はtemplatesフォルダを起点としたパスを引数にします。該当のファイル(hello.html)の中身を読み込んで、レスポンスを返してくれます。なので、上記はtemplatesフォルダに入っています。

Flaskで利用するテンプレートエンジンはJinja2と言います。

Welcome | Jinja2 (The Python Template Engine)

 

動的Webページについて

アクセスするURLは同じでも、条件によって表示する内容が変化するwebページを動的webページといいます。

流れとしては次のようになります。

・サーバー側から任意のデータをテンプレートにわたす。

・そのデータを展開する。

・HTMLを生成する。

・レスポンスを返す。

例えば以下のファイルをテンプレートに作ったとします。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Flask Application</title>
  6. </head>
  7. <body>
  8. <h1>{{hello}}, Flask</h1>
  9. </body>
  10. </html>

テンプレート中の {{ hello }} は変数として解釈されます。
以下のように、render_template 関数の第2引数にキーワード引数を渡すことで、任意のデータを変数にセットできます。

  1. from flask import Flask, render_template
  2. app = Flask(__name__)
  3. @app.route("/")
  4. def index():
  5.     pass
  6.     return
  7.     render_template('hello.html' , hello="こんにちは")

これまで、HTMLに変数を指定できないことに疑問を持っていたので、少し安心しました(笑)

これで動的webページがつくれますね。

ちなみに、こういうこともできますよ。

  1. from flask import Flask, render_template
  2. app = Flask(__name__)
  3. @app.route("/")
  4. def index():
  5.     greeting = "こんばんは"
  6.     render_template('hello.html' , hello=greeting )

 

今回は以上です。何度も繰り返して理解してみてください。

次回も続きをやっていきますので、不明点等ありましたら、気軽にコメントください。一緒に頑張りましょう。

 

では。