6個のテーマで始めるFlask入門

記事をご覧くださりありがとうございます。

フリーランスエンジニアのたつのぶです。

今回の記事は、Python製Webフレームワーク「flask」入門ということで、

6個のテーマでちゃちゃっとflaskを試してみる内容になっています。

ソースコードも載せているのでぜひflaskをいじったことのない方は

試してみるといいかもです✌


#⓪Flaskのインストール

下記コマンドで、「flask」を予めインストールしておく。

```
pip install flask
```

#ソースコードはこちら↓
https://github.com/biridora/flasksamples

#①「Hello, Flask!」を表示する

「localhost/test」にアクセスすると下記のように表示される。
![app01.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/580405/a737f43d-46d6-50e6-58fc-63422e2f09f7.png)

●ファイル構成●

ーーーーーーーーーーーーーーーーーーーー

app01.py

ーーーーーーーーーーーーーーーーーーーー


#②テンプレートエンジンを使って変数を表示する

「localhost」にアクセスすると下記のように表示される。
![app02.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/580405/58ebb46a-1688-afe8-af4b-9d9a498ed02e.png)

●ファイル構成●

ーーーーーーーーーーーーーーーーーーーー

app02.py

templates--------------hello02.html

templates--------------layout02.html

ーーーーーーーーーーーーーーーーーーーー


#③テンプレートエンジンを使って変数を表示する
[外部CSS/JavaScriptファイルを読み込む]

「localhost」にアクセスすると下記のように表示される。
![app03.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/580405/abc38616-c414-8ecb-a727-f2335d1b00f2.png)

※外部のCSS・JavaScriptファイルを読み込むことができる。

●ファイル構成●

ーーーーーーーーーーーーーーーーーーーー

app03.py

templates--------------hello03.html

templates--------------layout03.html

static------css------main03.css

static------js---------main03.js

ーーーーーーーーーーーーーーーーーーーー


#④JSON 出力する API 

「localhost」にアクセスすると下記のようにJsonがデータが返ってくる。
![app04.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/580405/6e052bdd-bd47-145e-9a67-50b58794bc61.png)


●ファイル構成●

ーーーーーーーーーーーーーーーーーーーー

app04.py

ーーーーーーーーーーーーーーーーーーーー


#⑤ログイン(Basic認証)

あらかじめ、下記コマンドで、 「flask-httpauth」をインストールする。

```
$ pip install flask-httpauth
```


「localhost」にアクセスすると下記のようにユーザ名とパスワードを聞かれるので、

試しに、登録したユーザ名「admin」、パスワード「password」を入力してみる。
![app05.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/580405/42240c70-5096-95ac-021d-7fe0bb41f8cb.png)

すると、下記のように、ログイン認証ができる。
![app052.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/580405/53d76316-3a53-9a0f-4eae-020dbc642de4.png)

●ファイル構成●

ーーーーーーーーーーーーーーーーーーーー

app05.py

ーーーーーーーーーーーーーーーーーーーー

※HTTPBasicAuth を HTTPDigestAuthに変更することでユーザー名とパスワードを MD5でハッシュ化する

ダイジェスト認証することができる。


#⑥GETメソッド，POSTメソッドでデータを投げる

「localhost」にアクセスすると、下記のようにテストの値が入っているフォーム画面が出てくる。
![app06.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/580405/95c16f3c-21c0-225e-3a5d-3f15d91a91c9.png)

「gettest」と仮にデータを入力ボックスに入れて「GET」ボタンを押す。
![app06get.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/580405/db830ffd-fa47-96c2-480d-fd678c2846b7.png)

下記の、URLからわかるように、getリクエストができる。
![app06getr.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/580405/70d80781-667b-10cf-4c67-02d329f328e6.png)

では、最後に「posttest」と入力して、「POST」ボタンを押してPOSTリクエスト
![app06post.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/580405/6f94c266-f527-5367-e36d-b08a8828a4cc.png)

下記のように、できました。
![app06postr.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/580405/57f4e326-5ba6-69dc-7509-9fd32c3bd50a.png)

●ファイル構成●

ーーーーーーーーーーーーーーーーーーーー

app06.py

templates--------------hello06.html

templates--------------layout06.html

ーーーーーーーーーーーーーーーーーーーー


#最後に

いかがだったでしょうか。

6個のテーマでFlaskをいじってみました。意外と気軽に試せたのではないでしょうか？

pythonにはこのように簡単にいじれて便利なWEBフレームワークがあります。

今回の記事の内容をさらに拡張させたり、付加機能をつけていって、自分なりのWEBアプリケーションを作ってみるのもありですね👍

また、Pythonにはflask以外に、bottleやDjangoなどのWEBフレームワークもあるので興味がある方はそちらの方を調べてみると面白いかと思います。
この記事がflask入門者にとって何らかの手助けになると幸いです。

それでは✋