Python+Flaskで作るWebアプリケーション（VScode使用）＃１〜仮想環境構築〜

#背景
DL,MLなど、世間でいわゆるAI技術と呼ばれるものを勉強し、プログラミングで実装できたとしても、それを社内に広めようとするとコーディングの壁が発生し、なかなか広まりません。
#目的
部内で「Jupyter notebookを入れてpython使って覚えてね」といっても、普段仕事でプログラミングを扱わない人からすると、習得までに時間がかかるため、Webアプリケーションとしてデータを読み込んでポチポチしたら動かせる！というUIを作れたらいいなと思い勉強開始。得た知識を残していきたいと思います。
#手段
今回はVScode + Flaskを用いて作成します。
まずは簡単なWebページを作成します。
 *現在はインタラクティブなグラフを利用するために、PlotlyのDashというライブラリを取り入れて開発しています。そのDashで動作させているGIFをご参考までに添付します。
　ここまでの道のりを今後ひとつずつ紹介できればと思います（自分の備忘録的な意味も強い）。
DashもFlaskがベースなため、まずはFlaskの基礎から復習します。
![test2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304339/3704283a-02ac-7a53-5508-f47e865913ee.gif)


#環境
今回はWindows10にminiconda4.7.12をインストールした状態で話を進めます。
condaの仮想環境は使用しません。pythonは3.7.3がインストールされています。

#手順
+ １．任意の場所にプロジェクト（ワークスペース）フォルダを作成<br>
　　`C:\project\vscpython\Flasktest`　　今回はFlasktestと命名

+ ２．ワークスペースフォルダとしてVScodeに読み込ませる
     ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304339/29c916bf-c7a6-acc0-0c75-c43112ee4928.png)

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304339/9c678f45-9c39-b654-7478-eaf79ce1c750.png)

+ ３．Flask Pythonの環境構築
ターミナル起動(Ctrl + Shift + @)<br>
Flasktestフォルダ内に仮想環境を作成します。<br>
venvを使います。
```python –m venv <仮想環境名：ここではFlasktestとした>```で作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304339/6bc48555-ff66-7231-fb07-9137b7afe51a.png)

　コマンドパレット起動(Ctrl + Shift + P) → interpreterと入力。作成した環境選択。
　　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304339/ebce2d16-20b1-c7c3-ce9a-c8f46c89480e.png)
　左下のウインドウにワークスペース名と環境名が表示されていればOK　
　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304339/336fddb1-809b-63a3-7a2a-275161b2988c.png)

　仮想環境をアクティブにするため、ターミナルを再起動する。
　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304339/112971b3-2a86-b67b-6afd-64dfa1af69cc.png)

　環境が切り替わる。
　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304339/f4aa6d5f-2c0a-c65b-dd46-458f3d351990.png)

　試しに適当にa.pyファイルを作成する　
⇒ Linter pylint Install画面が出る。インストールすると構文チェックしてくれる。
　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304339/82eca8df-637a-9642-76c9-4cfca34e8222.png)
　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304339/6442be87-d327-533f-ef85-08abfa2a2c90.png)

　必要なライブラリをインストール
　今回はFlaskをインストール（足りないものは適宜インストール）
　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304339/87558751-1510-da71-7a69-b62b1a0c1e80.png)

+ ４．Flask Pythonの構成<br>
　Flaskがデバックできるように構成します。
まずはFlaskの公式サイトに記載されているFlaskアプリを作ります。
app.pyファイルを作成し、以下のように記述します。

```python:app.py
from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello_world():
  return "Hello, World!"
```
VScodeでF5⇒デバックの構成を聞かれるのでFlaskを選択し実行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304339/d1f4efff-4b78-325b-6992-30fe7d83d820.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304339/1b8bc6ad-7bd8-5842-f859-66219f3d3ff3.png)

app.pyが実行されます。
Running on http://・・・のURLをクリックして、Hello! World!がブラウザで表示されれば成功です。

ちなみに構成は、.vscodeフォルダのlaunch.jsonファイルに記述されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304339/5a5e2199-943d-41ab-a84e-8befa01036db.png)

このコードを変えることで、動作させるpyファイルや、host, portどを設定できます。
例えば、LAN内の別のPCからアクセスするときは、host,portを追記します。

```python:launch.json
{

    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python: Flask",
            "type": "python",
            "request": "launch",
            "module": "flask",
            "env": {
                "FLASK_APP": "app.py", #起動させるpyファイルを指定
                "FLASK_ENV": "development",
                "FLASK_DEBUG": "0"
            },
            "args": [
                "run",
                "--no-debugger",
                "--no-reload",
                "--host=0.0.0.0", #追記
                "--port=5000", #追記
            ],
            "jinja": true
        }
    ]
}
```

以上のように記述することで、Flaskを走らせているPCのIPアドレスもしくはコンピューター名をブラウザに入力すればアクセスできるようになります。