はじめに
前回まではGoogle Colaboratoryを使うための方法やPythonを使った簡単なコードの書き方に
ついて学びました。
今回はGoogle Colaboratory上で四則演算を行うアプリを
・Streamlit
このWebフレームワークを使って作っていきます。
また後半ではPythonライブラリの一つである
・gradio
を使った場合の四則演算アプリを作っていきます。
目標は様々なWebフレームワークやライブラリを使いこなせるように
なることです！
※前回取り組んだ内容の続きとなります。↓
Webフレームワークとは？
正式名称は「Webアプリケーションフレームワーク」。
WebシステムやWebアプリケーションを開発する上で必要な機能が備わっている仕組み（枠組み）のこと。
これらのフレームワークを活用することで効率よくアプリ開発を進めることが出来る。
PythonのWebフレームワークにもさまざまな種類があり
・Django
・Flask
・FastAPI
・Streamlit
などなど…
詳しくはこちらの記事が参考になります。↓
ライブラリとは？
Pythonのライブラリはさまざまな機能をまとめたもので、呼び出してその機能をすぐに
使うことが出来る。
このライブラリにも「標準ライブラリ」と「外部ライブラリ」の２種類がある。
標準ライブラリ・・・標準装備で使えるもの。math（数学関数）,random（乱数の生成）など。
外部ライブラリ・・・インストールして使えるもの。pandas(データ処理),Numpy（演算処理）など。
詳しくはこちら↓
Streamlitとは？
Streamlitはオープンソース（無償で一般公開されている）のアプリフレームワーク。
Pythonライブラリと同じようにインストールするだけで使うことが出来る。
特にデータの可視化を行ったり、機械学習モデルを使ったプロトタイプの作成の際に
使いやすいのが特徴。
gradioとは？
こちらもPythonライブラリとしてインストールするだけで使うことが出来る。
Webインターフェース（操作画面）を使用して機械学習アプリを構築したりできる。
四則演算アプリを作ろう【Streamlit編】
１．Google Colaboratoryを開く
２．Driveをマウントする（フォルダを操作できるようにする）
３．[keisanapp.py]ファイルを作成する
４．作成した[keisanapp.py]をダブルクリックすると画面上に表示され編集ができる
ここまで来たら準備OK！
次にStreamlitをインストールします。
※ちなみにコードの先頭に「!」をつけるPythonコードではなく、シェルコマンド（Linuxコマンド）として実行するという意味になります。
!pip install streamlit
今現在自分がいる場所を確認しておきます。
!pwd
アップロードしたフォルダに移動しておく（これをしないと実行するファイルがない！というエラーが出ます）
また○○○○部分は自分の[keisanapp.py]が入っているフォルダを指定してください
%cd /content/drive/MyDrive/○○○○
再度、現在自分がいる場所を確認しておきます。（これで位置の変更を確認できる）
!pwd
このコマンドで直下に入っているファイルを確認することが出来る（keisanapp.pyが表示されたらOK！）
!ls
それでは実際にStreamlitを動かす処理を入れていく。このコードは「Streamlitアプリを起動するよ。3秒待ってからLocalTunnelで外部公開するね」という意味になります。
※localtunnelを使うことで、開発中のローカルサーバーを一時的に公開することができる
!streamlit run keisanapp.py & sleep 3 && npx localtunnel --port 8501
実行すると
[External URL: http://○○○○:8501]という表示が出ます。
また[your url is: ーーーーーーloca.lt]というリンクが表示されるので進み、
Endpoint IPに○○○○部分のアドレスを入れて「Click to Submit」します。
するとこのような画面が表示されます。↓
何も表示されていないようですがこの画面になれば正常です！
それでは、実際にコードを[keisanapp.py]に書いていきます。
streamlitのインポート
import streamlit as st
タイトル名を付ける
st.title("四則演算アプリ")
入力欄を作成する
num1 = st.number_input("1つ目の数値を入力してください:", value=0.0)
num2 = st.number_input("2つ目の数値を入力してください:", value=0.0)
計算ボタンが押されたら処理をする
if st.button("計算する"):
# 四則演算の計算
tasu = num1 + num2
hiku = num1 - num2
kakeru = num1 * num2
# 除算（0での割り算を防ぐ）
if num2 != 0:
waru = num1 / num2
else:
waru = "割り算エラー：0で割ることはできません"
# 結果を表示する
st.subheader("計算結果:")
st.write(f"{num1} + {num2} = {tasu}")
st.write(f"{num1} - {num2} = {hiku}")
st.write(f"{num1} * {num2} = {kakeru}")
st.write(f"{num1} ÷ {num2} = {waru}")
以上で完了です！
コードを記載したら必ずファイルを保存しておきます。（※重要です！）
そして再度Streamlitを動かすと…
こんな感じの計算できるアプリが完成しました！（※本番環境での運用やデプロイ方法については省略します）
四則演算アプリを作ろう【gradio編】
なんとなく先ほどのStreamlit編でイメージはつかめたかと思います。次はgradioを使って四則演算アプリを作っていきたいと思います。
Google Colaboratoryを開いてgradioをインストール
!pip install gradio
ライブラリのインポート
import gradio as gr
関数を定義する
今回はkeisanとして四則演算を行う関数を作ります。返り値が４つになるのがポイント。
def keisan(num1, num2):
tasu = num1 + num2
hiku = num1 - num2
kakeru = num1 * num2
if num2 != 0:
waru = num1 / num2
else:
waru = "割り算エラー：０で割ることはできません"
print("計算結果")
return tasu, hiku, kakeru, waru
インターフェースの作成
ここではブラウザに画面を表示させるためのインターフェースを作ります。
demo = gr.Interface(fn=keisan, inputs=["number", "number"], outputs=["text", "text", "text", "text"],
title="四則演算アプリ")
# Web UIの起動
demo.launch()
実行してみると…
このような画面になります。計算できるアプリが完成しました！
ちなみに…
gradioでは、gr.Blocksとgr.Rowやgr.Columnを使うことでレイアウトを変更することが出来ます。
インターフェース作成
先ほどのインターフェース作成部分を修正します。
with gr.Blocks() as demo:
gr.Markdown("# 四則演算アプリ")
num1 = gr.Number(label="数値1")
num2 = gr.Number(label="数値2")
btn = gr.Button("計算する")
with gr.Column():
tasu = gr.Textbox(label="足し算")
hiku = gr.Textbox(label="引き算")
kakeru = gr.Textbox(label="掛け算")
waru = gr.Textbox(label="割り算")
btn.click(keisan, inputs=[num1, num2], outputs=[tasu, hiku, kakeru, waru])
demo.launch()
そして再度実行すると…
こんな感じに縦型のレイアウトに変更できます！
最後に
今回はStreamlitとgradioを使ってアプリを作りました。
まだまだたくさんの機能や使い方があるので今後もアプリ作りを通して
「これは面白い!」 と思えるような技術を共有していきたいと思います。