第1回では、Streamlitの基本を学びました。今回はより実践的なツールを作成します。
目標は「簡易データ分析ツール」の開発です。ユーザーがCSVファイルをアップロードし、ブラウザ上でデータを分析できるアプリ作成を目指します。
今回作成するアプリケーションの機能
まず、完成形を確認しましょう。作成するアプリは、以下の機能を保持します。
- ファイルアップロード: ユーザーがCSVファイルをアップロード
- データ概要の表示: データの行数・列数や基本統計量などを表示
- データ本体の表示: データの中身を表形式で確認
- グラフ作成と分析: ユーザーが列を選択し、グラフを生成
ステップ1：ファイルアップロード機能の実装
データ分析は、対象のデータを読み込むことから始まります。Streamlitにはst.file_uploaderという便利なウィジェットがあります。これを使えば、ユーザーはローカルのファイルを簡単にアップロードできます。
まず、Google Colab上でapp.pyを準備し、ファイルをアップロードするだけのシンプルなアプリを作成します。
サンプルコード
CSVを読み込んでデーフレームに読み込むだけのアプリです。
%%writefile app.py
import streamlit as st
import pandas as pd
st.title('簡易データ分析ツール')
# ファイルアップロード
uploaded_file = st.file_uploader("ここにCSVファイルをアップロードしてください", type='csv')
if uploaded_file is not None:
# アップロードされたファイルをDataFrameとして読み込む
df = pd.read_csv(uploaded_file)
st.success('ファイルのアップロードが完了しました。')
st.header('データフレーム')
st.dataframe(df)実行方法
第1回と同様に、以下のコマンドでアプリを起動してください。
from pyngrok import ngrok
ngrok.kill()
public_url = ngrok.connect(8501)
print(f"Streamlit App URL: {public_url}")
!streamlit run app.py --server.port 8501 &>/dev/null&実行結果
ブラウザに「ここにCSVファイルをアップロードしてください」というエリアが表示されます。エリアをクリックするか、ファイルをドラッグ＆ドロップすると、CSVファイルが読み込まれます。
その後、「ファイルのアップロードが完了しました。」というメッセージと、データフレームの表が表示されます。
ステップ2：データの概要を表示する
次に、データの全体像を表示する機能を加えます。行数・列数、カラム一覧、基本統計量などを確認できるようにしましょう。これらの情報は、分析の方針を決める上で重要です。
if uploaded_file is not None:ブロックの中に、コードを追記します。
サンプルコード
%%writefile app.py
import streamlit as st
import pandas as pd
st.title('簡易データ分析ツール')
uploaded_file = st.file_uploader("ここにCSVファイルをアップロードしてください", type='csv')
if uploaded_file is not None:
df = pd.read_csv(uploaded_file)
st.success('ファイルのアップロードが完了しました。')
# --- データの概要表示 ---
st.header('データの概要')
st.write('**行数と列数:**', df.shape)
st.write('**カラム一覧:**', df.columns.tolist())
st.write('**欠損値の数:**')
st.write(df.isnull().sum())
st.write('**基本統計量:**')
st.write(df.describe())
# ----------------------
st.header('データフレーム')
st.dataframe(df)実行結果
CSVファイルをアップロードすると、データフレームの上に「データの概要」セクションが追加されます。ここには、行数・列数から欠損値の数、数値データの統計量などが表示されます。これにより、データセットの全体像を素早く掴むことができます。
ステップ3：グラフを作ってデータを分析
データの全体像を掴んだら、次はグラフで詳しく見ていきましょう。ユーザーがGUIで操作できる機能を加え、変数（列）の分布や関係性を確認できるようにします。
- ヒストグラム: ユーザーが選択した列の分布を確認します。
- 散布図: ユーザーが選択した2つの列の関係性を確認します。
st.selectboxを使い、データフレームのカラム名を選択肢として提示するのがポイントです。
サンプルコード
最終的なapp.pyは以下の通りです。
%%writefile app.py
import streamlit as st
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
st.title('簡易データ分析ツール')
st.write('アップロードしたCSVデータの概要確認と可視化ができます。')
# 1. ファイルアップロード
uploaded_file = st.file_uploader("ここにCSVファイルをアップロードしてください", type='csv')
if uploaded_file is not None:
# DataFrameとして読み込み
df = pd.read_csv(uploaded_file)
st.success('ファイルのアップロードが完了しました。')
# 2. データの概要表示
st.header('データの概要')
if st.checkbox('データの概要を表示'):
st.write('**行数と列数:**', df.shape)
st.write('**カラム一覧:**', df.columns.tolist())
st.write('**欠損値の数:**')
st.write(df.isnull().sum())
st.write('**基本統計量:**')
st.write(df.describe())
st.header('データフレーム')
st.dataframe(df)
# 3. グラフ作成と分析
st.header('グラフを作ってデータを分析')
numeric_columns = df.select_dtypes(include=['number']).columns.tolist()
# --- ヒストグラム ---
st.subheader('ヒストグラム')
hist_column = st.selectbox('ヒストグラムの列を選択', numeric_columns, key='hist')
if hist_column:
fig, ax = plt.subplots()
ax.hist(df[hist_column], bins=20, color='skyblue', edgecolor='black')
ax.set_title(f'{hist_column} のヒストグラム')
ax.set_xlabel(hist_column)
ax.set_ylabel('度数')
st.pyplot(fig)
# --- 散布図 ---
st.subheader('散布図')
scatter_x_column = st.selectbox('X軸の列を選択', numeric_columns, key='scatter_x')
scatter_y_column = st.selectbox('Y軸の列を選択', numeric_columns, key='scatter_y')
if scatter_x_column and scatter_y_column:
fig, ax = plt.subplots()
sns.scatterplot(data=df, x=scatter_x_column, y=scatter_y_column, ax=ax)
ax.set_title(f'{scatter_x_column} と {scatter_y_column} の散布図')
st.pyplot(fig)
実行結果
「グラフを作ってデータを分析」セクションに、「ヒストグラム」と「散布図」の項目が追加されます。
ドロップダウンメニューを選ぶとCSVファイルの数値カラム名が選択肢として並びます。ユーザーがカラム名を選ぶと、対応するグラフが即座に描画されます。
これにより、データの分布や相関関係を確認できます。
まとめと次回予告
第2回では、実用的な「簡易データ分析ツール」を開発しました。
ユーザー自身がデータを探索できるアプリケーションを簡単に構築できる、と実感いただけたのではないでしょうか。
次回は最終回です。機械学習モデルをStreamlitに組み込みます。そして、「簡易AutoMLツール」の開発に挑戦します。
より詳しくStreamlitについて学びたい方は以下書籍も参考にしてください。
第3回はこちらからご覧ください。
コメント