サイトアイコン アマチュア無線局JS2IIU

Streamlit カスタムレイアウト応用編：第8回 Tabs

JS2IIU

こんにちは、JS2IIUです。今回でStreamlitのカスタムレイアウトに使える要素の紹介は最終回になります。今回もよろしくお願いします。

はじめに

今回の記事では、StreamlitのTabsコンポーネントの使い方について説明します。Tabsを使うことで、アプリケーションの画面をタブで切り替えられるため、ユーザーは情報を分かりやすく整理された形式で表示できるようになります。以下では、Tabsの基本的な機能、パラメータ、具体的な使用例、注意点について解説します。

Tabsとは？

Tabsコンポーネントは、異なるコンテンツを複数のタブで切り替えることができるレイアウト要素です。例えば、分析結果やダッシュボードの異なるセクションをタブごとに表示する場合に便利です。ユーザーはクリックで簡単にタブ間を切り替えられ、見やすく整理されたインターフェースを提供できます。

Tabsの基本的な使い方

st.tabs()を使ってタブを作成し、それぞれのタブに内容を追加できます。以下に、基本的な使用例を示します。

Python
import streamlit as st

# タブの作成
tab1, tab2, tab3 = st.tabs(["Tab 1", "Tab 2", "Tab 3"])

# 各タブに内容を追加
with tab1:
    st.write("Tab 1の内容をここに表示します。")

with tab2:
    st.write("Tab 2の内容をここに表示します。")

with tab3:
    st.write("Tab 3の内容をここに表示します。")

このコードでは、3つのタブ（“Tab 1”、“Tab 2”、“Tab 3”）を作成し、それぞれのタブに異なる内容を表示しています。タブをクリックすることで表示される内容が切り替わります。

パラメータの詳細

st.tabs()関数にはいくつかのオプションがありますが、現在の基本的な実装ではタブのタイトルを指定するシンプルな仕様です。各タブはリスト内に表示する文字列に対応する数のタブが生成されます。

tab(str のリスト)

リスト内の文字列ごとにタブを作成する。デフォルトでは最初のタブが選択されます。文字列はタブの名前として使われ、オプションで以下のタイプのGitHub風味のMarkdownを含めることができます： 太字、斜体、取り消し線、インラインコード、リンク、画像。画像はアイコンのように表示され、最大高さはフォントの高さと同じです。

具体的な使用例

次に、タブを使って複数のデータの概要を表示するアプリケーションの例を紹介します。この例では、売上データと顧客データ、商品データをそれぞれ別のタブで表示しています。

Python
import streamlit as st
import pandas as pd

# サンプルデータの作成
sales_data = pd.DataFrame({
    "Month": ["January", "February", "March"],
    "Sales": [1000, 1500, 2000]
})

customer_data = pd.DataFrame({
    "Customer ID": [1, 2, 3],
    "Name": ["Alice", "Bob", "Charlie"],
    "Purchase Amount": [200, 350, 500]
})

product_data = pd.DataFrame({
    "Product ID": [101, 102, 103],
    "Product Name": ["Widget A", "Widget B", "Widget C"],
    "Price": [20, 30, 40]
})

# タブの作成
tab_sales, tab_customers, tab_products = st.tabs(["Sales Data", "Customer Data", "Product Data"])

# 各タブにデータを表示
with tab_sales:
    st.subheader("Sales Data")
    st.dataframe(sales_data)

with tab_customers:
    st.subheader("Customer Data")
    st.dataframe(customer_data)

with tab_products:
    st.subheader("Product Data")
    st.dataframe(product_data)

この例では、sales_data、customer_data、product_dataの3つのデータセットをそれぞれ異なるタブで表示しています。タブを切り替えることで、売上データ、顧客データ、商品データが見やすく整理され、ユーザーは必要な情報に迅速にアクセスできます。

https://js2iiu.com/wp-content/uploads/2024/11/sl_08_01.mov

使用上の注意点

まとめ

Tabsコンポーネントは、情報を整理し、ユーザーが見やすいインターフェースを作成するための有効なツールです。適切に利用することで、視覚的な区切りを提供し、ユーザーエクスペリエンスを向上させられます。

ここまで「Streamlit カスタムレイアウト応用編」シリーズをご覧いただき、誠にありがとうございました。このシリーズを通して、Streamlitのレイアウト機能を活用して、より洗練されたインターフェースを作成するための手法を学んでいただけたかと思います。

本シリーズが、皆さまのアプリケーション開発において役立つヒントやアイデアを提供できたなら、大変嬉しく思います。どんな小さな工夫も、ユーザーの使いやすさやアプリケーションの魅力につながりますので、ぜひ実践の中で活用してみてください。

今後も、皆さまのプロジェクトがますます充実し、素晴らしい成果を生み出すことを心より応援しております。最後までお読みいただき、本当にありがとうございました。また次の記事でお会いできることを楽しみにしています！

最後に、書籍のPRです。
24年9月に出版された「ハイパーモダンPython-信頼性の高いワークフローを構築するモダンテクニック」、Claudio Jolowicz著、嶋田、鈴木訳。開発環境の構築、プロジェクトの管理、テストに関して実践的な内容でとても参考になる一冊です。ぜひ手に取ってみてください。

最後まで読んでいただきありがとうございます。

モバイルバージョンを終了