Streamlitを使ったGUIアプリ例

Streamlit GUIアプリ例 Streamlit
この記事は約7分で読めます。

こんにちは、JS2IIUです。今回は、PythonのWebアプリケーションフレームワークであるStreamlitを使って、簡単な足し算アプリを作成します。Streamlitは、Webアプリケーションを簡単に作成できるため、データ可視化やツールのインターフェース構築に役立ちます。この例では、クラスを使ってコードの再利用性と拡張性を高める方法もご紹介します。

シンプルなGUIであればTkinterよりも簡単に作れてしまうので使い方を覚えて損はないと思います。

アプリの概要

アプリの主な機能は以下の通りです。

  • 2つのテキストボックスから数値を入力
  • 「足す」ボタンをクリックすると、テキストボックスの数値を足し合わせた結果を表示
  • 入力が数値でない場合はエラーメッセージを表示

コード解説

それでは、クラスを使用してアプリケーションを作成するコードを見ていきましょう。

import streamlit as st

class AddApp:
    def __init__(self):
        self.num1 = "0"  # 初期値
        self.num2 = "0"  # 初期値

    def render_title(self):
        """タイトルを表示するメソッド"""
        st.title("簡単な足し算アプリ")

    def render_inputs(self):
        """数値入力フィールドを表示するメソッド"""
        self.num1 = st.text_input("1つ目の数値を入力してください", value=self.num1)
        self.num2 = st.text_input("2つ目の数値を入力してください", value=self.num2)

    def add_numbers(self):
        """入力された数値を足し算するメソッド"""
        try:
            result = float(self.num1) + float(self.num2)
            st.write(f"計算結果: {result}")
        except ValueError:
            st.write("数値を入力してください。")

    def render_button(self):
        """ボタンを表示し、クリック時に足し算を実行するメソッド"""
        if st.button("足す"):
            self.add_numbers()

    def run(self):
        """アプリ全体を実行するメソッド"""
        self.render_title()
        self.render_inputs()
        self.render_button()

# アプリのインスタンスを作成し、実行
if __name__ == "__main__":
    app = AddApp()
    app.run()

コードの詳細解説

このアプリケーションでは、AddAppというクラスを作成し、以下のようにメソッドに分割しています。各メソッドがUIの各部分を担当するため、アプリの構造がシンプルで再利用しやすくなります。

1. コンストラクタ __init__

def __init__(self):
    self.num1 = "0"
    self.num2 = "0"

__init__メソッドは、クラスのインスタンスが作成されたときに呼び出されます。ここで、入力フィールドの初期値を定義しています。

2. render_titleメソッド

def render_title(self):
    st.title("簡単な足し算アプリ")

st.title()を使ってタイトルを表示するメソッドです。UIの見出し部分を担当します。

3. render_inputsメソッド

def render_inputs(self):
    self.num1 = st.text_input("1つ目の数値を入力してください", value=self.num1)
    self.num2 = st.text_input("2つ目の数値を入力してください", value=self.num2)

このメソッドは、ユーザーが数値を入力するためのテキストボックスを生成します。各入力値は、クラスのインスタンス変数self.num1self.num2に保存されます。

4. add_numbersメソッド

def add_numbers(self):
    try:
        result = float(self.num1) + float(self.num2)
        st.write(f"計算結果: {result}")
    except ValueError:
        st.write("数値を入力してください。")

このメソッドは、数値に変換したnum1num2を足し合わせて結果を表示します。エラーハンドリングも含んでおり、入力が数値でない場合にはエラーメッセージを表示します。

5. render_buttonメソッド

def render_button(self):
    if st.button("足す"):
        self.add_numbers()

このメソッドでは、「足す」ボタンを表示し、ボタンがクリックされたときにadd_numbers()メソッドを呼び出します。

6. runメソッド

def run(self):
    self.render_title()
    self.render_inputs()
    self.render_button()

runメソッドは、アプリの各パーツを順番に実行する役割を果たします。このメソッドを呼び出すことで、アプリ全体のUIと処理が初期化されます。

実行手順

このコードをファイル(例:add_app_class.py)に保存して、以下のコマンドで実行します:

streamlit run add_app_class.py

このアプリケーションは、数値の入力や計算の流れが簡潔でわかりやすく、クラスを使用することでコードの可読性と拡張性が高まっています。

補足:Streamlit応用編 記事リスト

Streamlitについては、さまざまな機能についての記事を書いていますので、ご興味ありましたらリンク先の記事をご覧ください。

Streamlit応用編 第1回: キャッシュ機能の活用
https://js2iiu.com/2024/08/28/streamlit-01-cache/

Streamlit応用編 第2回: インタラクティブなウィジェットの応用
https://js2iiu.com/2024/08/29/streamlit-02-widget/

Streamlit応用編 第3回: データのアップロードとダウンロード
https://js2iiu.com/2024/08/29/streamlit-03-download/

Streamlit応用編 第4回: レイアウトのカスタマイズ
https://js2iiu.com/2024/08/30/streamlit-04-layout/

Streamlit応用編 第5回: テーマのカスタマイズ
https://js2iiu.com/2024/08/31/streamlit-05-theme-custom/

Streamlit応用編 第6回: デプロイと共有
https://js2iiu.com/2024/09/01/streamlit-06-deploy/

Streamlit応用編 第7回: 認証とセキュリティ
https://js2iiu.com/2024/09/02/streamlit-07-security/

Streamlit応用編 第8回: データベースとの連携
https://js2iiu.com/2024/09/02/streamlit-08-database/

Streamlit応用編 第9回: 複雑なデータビジュアライゼーション
https://js2iiu.com/2024/09/05/streamlit-09-visualization/

Streamlit応用編 第10回: マルチページアプリの作成
https://js2iiu.com/2024/09/06/streamlit-10-multipage/

Streamlit応用編 第11回: StreamlitでAPIを作成する方法
https://js2iiu.com/2024/09/07/streamlit-11-api/

コメント

タイトルとURLをコピーしました