アプリ開発スタートアップ

Pythonで超簡単Webアプリを作ってみよう

アプリ開発スタートアップ

前回の記事で「Pythonの環境設定」が整いました。
いよいよ今回は、最初のWebアプリを作ってみましょう。
(難しい作業はありません!コピー&ペーストさえできたらOKです!)

今回作るWebアプリは「単位換算アプリ」です。

この記事で最低覚えておきたい専門用語は以下の2つ。

  • 仮想環境
  • ライブラリ

Pythonを使う上で超基本の用語になるので、是非ともこのタイミングで知っておきましょう。

専門用語をざっくり解説

仮想環境

仮想環境とは、アプリごとに専用の作業場所を用意する仕組みです。

もし、料理をするキッチンとDIYをする作業部屋が同じ空間にあると、雑多としてしまいますよね。
キッチンにトンカチやのこぎりが転がっていたら、無駄な混乱やリスクを招く要因になってしまいます。だから、料理は料理部屋(キッチン)、DIYは作業部屋(ガレージ)と分けておけば、道具も散らからず作業に集中できます。

Pythonで複数のアプリを作るとき、アプリごとに必要な道具(後で出てくる「ライブラリ」)が違う場合があります。
仮想環境を使えば「このアプリ専用の部屋」を作って、その中に必要なものだけを置いておけるので、混乱やトラブルを防げます。

ライブラリ

ライブラリとは、プログラムを書くときに使える便利な道具がまとめて入った箱です。

例えばDIYで家具を作ろうとしたとき、のこぎりやトンカチといった工具から自作することは基本的にしないはずです。料理でも同じで、包丁やフライパンを自分で鍛冶するところから作ることはないですよね。
既に世の中に存在する便利な道具を使用することで、本来の目的(家具を作る、料理をする)に集中できますし、手間も省けます。

ライブラリも同じで、よく使う機能がまとめられた道具箱のようなものです。
ユーザーはこれを必要に応じてインストールすることで使うことができるようになります。(道具を買うイメージ。ライブラリは無料。)
今回使う Flaskもライブラリの一つです。Flaskには「画面を表示する」「ボタンを受け取る」といったWebアプリに必要な機能が最初から揃っているので、ゼロから作るよりずっと効率的に開発できます。

今回作るもの

今回作るのは、単位換算アプリです。

  • 長さ:ヤード ⇄ メートル、インチ ⇄ センチ など
  • 重さ:ポンド ⇄ キログラム、オンス ⇄ グラム など
  • 温度:華氏 (℉) ⇄ 摂氏 (℃) ⇄ ケルビン (K)

ブラウザで数字を入力し、変換前と変換後の単位を選んでボタンを押すと、
Flask(Pythonのライブラリ)が計算して結果を返してくれます。

完成イメージ↓

実際の開発手順

ここからは、実際にどうやって作っていくのか、1つずつ順番にに解説していきます。

1. 作業用フォルダを作成

アプリをまとめる専用のフォルダを作ります。
フォルダの場所は好きな場所で構いませんが、迷ったらデスクトップでOKです。

2. ターミナル(Windows PowerShell)を開いて、作業用フォルダに移動

方法①:一番簡単

・作成した作業用フォルダを開く
・空白部分を右クリック → 「ターミナルで開く」を選択

これで最初からそのフォルダ上で作業ができる

方法②:コマンドでパスを移動する

Windowsボタンを右クリック→「ターミナル」を選択

フォルダのパスをコピーして cd コマンドで移動

⇒ どちらでも結果は同じ。やりやすい方法を選べば大丈夫!

このあと、最後までターミナルは閉じずに作業を続けていく

3. 仮想環境を作成→有効化

仮想環境を作成

ターミナルで以下のコードを記入または貼り付けて実行(Enterを押下)

py -m venv .venv

「.venv」というフォルダが作成されていればOK!

仮想環境を有効化

「有効化」というと難しく感じますが、さっき作った部屋に入るイメージ。
ターミナルで以下のコードを実行

.\.venv\Scripts\Activate.ps1

→ プロンプトの左に (venv) と出たらOK!

※コマンドプロンプトを使用している場合は以下のコードを実行してください。

.\.venv\Scripts\activate.bat

⚠ 仮想環境が有効化できないとき

デフォルトでは PowerShellの実行ポリシーの制限により、スクリプト(.ps1)を実行できない設定になっているため、Activate.ps1 がブロックされています。
以下のいずれかの方法で許可したうえで、先ほどの.\.venv\Scripts\Activate.ps1を実行してください。

解決方法1:このターミナルだけ一時的に許可(最も安全)

Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass

⇒ お試しでするならまずはコレ。現在のターミナルのみで許可されるため、閉じると元に戻る。

解決方法2:自分のユーザーアカウントだけ恒久的に許可(今後ラク・安全)

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

⇒ 継続的に使用する場合はコレ。自分のアカウントであれば毎回許可する必要はない。

⚠ 注意:実行ポリシーを変更すると、外部から入手した悪意のあるスクリプトも動かせるようになってしまいます。
今回は「自分のPCで作った仮想環境の Activate.ps1」を動かすだけなので問題ありませんが、気になる方は
・まずは一時的に Bypass を使う(解決方法1)
・慣れてきたら RemoteSigned -Scope CurrentUser を設定(解決方法2)
がおススメです!

4. ライブラリ(Flask) をインストール

仮想環境の中((venv)が表示されている状態)で Flask をインストールします。
【方法】ターミナルで以下のコードを実行

pip install flask

こんな感じに表示されたらFlaskのインストール成功!

5. アプリ本体のコードを記述

いよいよアプリの核となるコードを作成します。といっても今回はコードをコピペするだけ!
(本来はここが一番重要かつ大変な作業になりますが、今回はアプリを作ってみることが主旨なので)
【方法】作業用フォルダの中に「app.py」(.pyはPythonの拡張子)を作成

【方法】「app.py」をメモ帳などで開き、以下のコードを貼り付けてから保存して閉じる

アプリを起動→動作確認

起動方法

ここまでで、準備はすべて整いました。
あとは、アプリを起動させるだけです。
【方法】ターミナルで以下のコードを実行

py app.py

動作確認

自由に操作してみて、正しく動作できているか確認して下さい。

※もしうまく表示されない、タブが機能しないなど、正常に動作しない場合は、もう一度、app.pyのコードをコピペするなどしてみてください。

まとめ

今回は
プログラミング知識がゼロでも、最低限のポイントだけを押さえて、まず1つアプリを作ってみる!
という趣旨で記事を書きました。
ほとんどコピペだけの作業だったので、比較的簡単に進められたのではないでしょうか?

次回以降の記事では、いよいよ本格的にAIを活用して、各自オリジナルのアプリを作る方法など紹介していきます!

コメント