#背景
DL,MLなど、世間でいわゆるAI技術と呼ばれるものを勉強し、プログラミングで実装できたとしても、それを社内に広めようとするとコーディングの壁が発生し、なかなか広まりません。
#目的
部内で「Jupyter notebookを入れてpython使って覚えてね」といっても、普段仕事でプログラミングを扱わない人からすると、習得までに時間がかかるため、Webアプリケーションとしてデータを読み込んでポチポチしたら動かせる！というUIを作れたらいいなと思い勉強開始。得た知識を残していきたいと思います。
#手段
今回はVScode + Flaskを用いて作成します。
まずは簡単なWebページを作成します。
*現在はインタラクティブなグラフを利用するために、PlotlyのDashというライブラリを取り入れて開発しています。そのDashで動作させているGIFをご参考までに添付します。
ここまでの道のりを今後ひとつずつ紹介できればと思います（自分の備忘録的な意味も強い）。
DashもFlaskがベースなため、まずはFlaskの基礎から復習します。
#環境
今回はWindows10にminiconda4.7.12をインストールした状態で話を進めます。
condaの仮想環境は使用しません。pythonは3.7.3がインストールされています。
#手順
-
１．任意の場所にプロジェクト（ワークスペース）フォルダを作成
C:\project\vscpython\Flasktest今回はFlasktestと命名 -
２．ワークスペースフォルダとしてVScodeに読み込ませる
-
３．Flask Pythonの環境構築
ターミナル起動(Ctrl + Shift + @)
Flasktestフォルダ内に仮想環境を作成します。
venvを使います。
python –m venv <仮想環境名：ここではFlasktestとした>で作成
コマンドパレット起動(Ctrl + Shift + P) → interpreterと入力。作成した環境選択。
左下のウインドウにワークスペース名と環境名が表示されていればOK
仮想環境をアクティブにするため、ターミナルを再起動する。
環境が切り替わる。
試しに適当にa.pyファイルを作成する
⇒ Linter pylint Install画面が出る。インストールすると構文チェックしてくれる。
必要なライブラリをインストール
今回はFlaskをインストール（足りないものは適宜インストール）
- ４．Flask Pythonの構成
Flaskがデバックできるように構成します。
まずはFlaskの公式サイトに記載されているFlaskアプリを作ります。
app.pyファイルを作成し、以下のように記述します。
from flask import Flask
app = Flask(__name__)
@app.route("/")
def hello_world():
return "Hello, World!"
VScodeでF5⇒デバックの構成を聞かれるのでFlaskを選択し実行
app.pyが実行されます。
Running on http://・・・のURLをクリックして、Hello! World!がブラウザで表示されれば成功です。
ちなみに構成は、.vscodeフォルダのlaunch.jsonファイルに記述されています。
このコードを変えることで、動作させるpyファイルや、host, portどを設定できます。
例えば、LAN内の別のPCからアクセスするときは、host,portを追記します。
{
"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アドレスもしくはコンピューター名をブラウザに入力すればアクセスできるようになります。