はじめに
前回、クラスとJSONを使ってCUI版「家計簿アプリ」の基礎部分を作成しました。(→
参考)
クラスとJSONのことが少し理解出来て一定の成果が得られましたので、次は、UI（ユーザーインターフェース）を変更したいと思います。
パソコンのデスクトップ上で動くGUIはToDoアプリを作成した際に、少し理解出来ましたので、できれば、このアプリのUIはWEBにしたいと思います。
そのためには、WEBアプリの作成の仕方を理解しないといけません。
ということで、今回から、WEBアプリに挑戦してみたいと思います。
今回の実施内容
アプリを作成するにあたり、アプリ作成後に実際にプログラムが思ったとおりに動くかどうか確認する必要があります。
しかし、WEBアプリの場合、普通にpythonファイルを実行するだけでは、確認ができません。
そこで、仮想環境をローカルで構築し、その中でアプリを表示してみます。
パソコンの内部にもう一つ独立した世界を作って、その中でサーバーを動かして、作ったアプリを試します。
これにはPython標準装備の仮想環境構築機能「venv」を使います。
そして、この環境の中でWeb アプリケーションフレームワークを使用します。
Web アプリケーションフレームワークは、「ライブラリ」をまとめて提供してくれるもので、Webアプリケーションを開発するために必要な機能を詰め合わせたパッケージのようなものです。
いくつかあるPython用のWebアプリケーションフレームワークの中から今回使用するものを選びます。
「django」 と「flask」 が有名なようですのでこのどちらかで検討しました。
Google、Youtube、Instagramなどの大企業が「django」のフレームワークを使用しているそうです。
すごいものがつくれそうだな、って印象で「django」を使ってみたいと思いましたが、「Flask」のほうが軽量で初心者には扱いやすそうですので、まずはこちらを使用して環境構築してみます。
「Flask」は標準で提供する機能を最小限に保っていて、Werkzeug WSGIツールキットとJinja2テンプレートエンジンを基に作られているそうです。
環境構築は以下の手順で行います。
1.仮想環境用のフォルダを作成
2.FLASKをインストールする
3.アプリの実行
では、始めます。
仮想環境用のフォルダを作成
C:\Py\Project\MyPj
今回は、このフォルダの中に仮想環境用フォルダを作成します
まず、VSCodeでターミナルを立ち上げてファルダを開きます。
次に、このフォルダ直下に仮想環境用のフォルダを作成します。
仮想環境用フォルダ名を「FlaskPj」とします。
VSCodeのターミナルで次のように入力し、実行
PS C:\Py\Project\MyPj> python -m venv FlaskPj
最後に、VSCodeのターミナルで次のように入力し、仮想環境を実行します。
PS C:\Py\Project\MyPj> .\FlaskPj\Scripts\activate
VSCodeのターミナルに次のように表示されれば成功です。
(FlaskPj) PS C:\Py\Project\MyPj>
ここで次のようなエラーが出る場合は、
.\FlaskPj\Scripts\activate : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Py
\Project\MyPj\FlaskPj\Scripts\Activate.ps1 を読み込むことができません。
VSCodeのターミナルで次のように入力し、Set-ExecutionPolicyで実行ポリシーを設定します。
PS C:\Py\Project\MyPj> Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process
設定ができているか確認のため、VSCodeのターミナルで次のように入力
PS C:\Py\Project\MyPj> Get-ExecutionPolicy
次のように表示されれば、
もう一度、VSCodeのターミナルで先程のコマンドを入力し、実行すればうまくいくと思います。
PS C:\Py\Project\MyPj> .\FlaskPj\Scripts\activate
FLASKをインストールする
VSCodeのターミナルで次のように入力し、FLASKをインストールします。
(FlaskPj) PS C:\Py\Project\MyPj> pipenv install flask
インストールが完了したら、FLASKのバージョンを確認します。
VSCodeのターミナルで次のように入力し、
(FlaskPj) PS C:\Py\Project\MyPj> flask --version
無事にインストールされていれば、このように表示されます。
Python 3.12.3
Flask 3.0.3
Werkzeug 3.0.4
アプリの実行
ブラウザー上に、「Hello World!」と表示するプログラムを実行してみます。
from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello_show():
return 'Hello World!'
if __name__ == '__main__':
app.run()
このような内容のプログラムを
C:\Py\Project\MyPj\FlaskPj
に「main.py」という名前で、置いて実行します。
そして、ブラウザーで
http://127.0.0.1:5000/
を見に行くと、
このように、「Hello World!」が表示されました。
「127.0.0.1」は自分自身を指すIPアドレスです。自分自身の上で動作しているサービスに接続する場合は、このIPアドレスを利用します。
「ローカルループバックアドレス」と呼ばれ、「localhost」という名前でも参照できるそうです。
ちなみに、仮想環境を終了する場合は、 deactivate と入力します。
(FlaskPj) PS C:\Py\Project\MyPj> deactivate
Flaskをインストールしても、モジュールが見つからないという、エラーがでる場合は、flaskまでのパスを通します。
でflaskがあるパスを確認し、
このようなプラグラムを追加してやればうまくいきます。
import sys
sys.path.append("\Py\Project\MyPj\FlaskPj\Lib\site-packages")
おわりに
これで、Webアプリを作成して、正常に動作するか確認できる環境が整いました。
自分の覚書として、また、これから、始めるという方の参考になれば良いと思い、手順を紹介させていただきました。
今回使用したプログラムをサンプルコードとして、以下に掲載しておきます。
サンプルコード「main.py」ファイル
from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello_show():
return 'Hello World!'
if __name__ == '__main__':
app.run()
0 件のコメント:
コメントを投稿