【第1回/全3回】Streamlit超入門 〜概要と基本的なコンポーネントの使用法 (Google Colab編)〜

AI・機械学習

データ分析の結果や開発した機械学習モデルをどのように共有していますか? Jupyter Notebookのスクリーンショットを貼り付けることもできますが、なんらかのフィードバックがあった際に分析を再実行する手間がかかると感じた経験はないでしょうか。

もし分析結果をインタラクティブに「操作できるデモ」として共有することが有用な場合もあります。それを簡単に実現するのがStreamlitです。

この連載記事(全3回)では、Google Colaboratoryを利用し、Pythonの知識だけで簡易的なWebアプリケーションを構築する手法を解説します。Web開発の専門知識は不要です。

  • 第1回(本記事): 概要と基本的なコンポーネントの使用法
  • 第2回: 実践編① 〜簡易データ分析ツールの作成〜
  • 第3回: 実践編② 〜簡易AutoML(自動機械学習)ツールの作成〜

Streamlitとは? データサイエンティストに支持される理由

Streamlitは、Pythonスクリプトから高性能なWebアプリケーションを迅速に構築するためのオープンソースフレームワークです。なぜ多くのデータサイエンティストに支持されているのでしょうか。

  • Pythonに特化した開発体験: HTML/CSS/JavaScriptといったフロントエンド技術の知識は必要ありません。普段の分析業務で使用しているPythonコードに数行のコマンドを追加するだけで、洗練されたUIが自動生成されます。これにより、分析からアプリケーション化までのプロセスをシームレスに進められます。
  • インタラクティブな分析レポート: スライダーやボタンなどのウィジェットを配置することで、ユーザー自身がパラメータを操作し、結果の変化をリアルタイムで確認できます。これにより、分析から得られた洞察がより直感的に伝わります。
  • 迅速なプロトタイピング: アイデアを即座に形にできる開発スピードは、Streamlitの大きな魅力です。Jupyter Notebookで試行錯誤するような感覚で、機能的なWebアプリケーションのプロトタイプを構築できます。

環境構築:Google Colabでのセットアップ

本稿では、Google Colaboratory上で全ての作業を完結させます。ローカル環境へのインストールは不要です。

ステップ1:ライブラリのインストール

まず、Streamlit本体と、Colab環境で起動したアプリケーションに外部からアクセスするためのトンネリングツールpyngrokをインストールします。以下のコマンドをColabのセルで実行してください。

Python
!pip install streamlit pyngrok

ステップ2:アプリ用コードの作成

次に、Streamlitアプリケーションのソースコードを作成します。Colabでは、セルの内容をファイルとして保存するマジックコマンド%%writefile app.pyを使用します。

以下のコードを新しいセルに記述してください。(この段階ではまだ不要です)

Python
%%writefile app.py
# このセルの内容が「app.py」というファイルとして保存されます
import streamlit as st

st.title('Streamlit on Google Colab')
st.header('Webアプリケーションが起動しました')
st.write('Pythonだけで簡単にWebアプリを構築できます。')

ステップ3:アプリの起動と公開

以下のコマンドは、作成したapp.pyをサーバー上で実行し、pyngrokを介して外部からアクセス可能な公開URLを生成します。

この一連のコマンドを新しいセルで実行してください。

Python
from pyngrok import ngrok

# 既存のngrokプロセスがあれば終了
ngrok.kill()

# Streamlitのデフォルトポート(8501)へのトンネルを確立し、公開URLを取得
public_url = ngrok.connect(8501)
print(f"Streamlit App URL: {public_url}")

# Streamlitサーバーをバックグラウンドで実行
!streamlit run app.py --server.port 8501 &>/dev/null&

実行後、Streamlit App URL: に続くURLをクリックすると、新しいタブで作成したWebアプリケーションが表示されます。


基本的な機能:テキストとデータの表示

アプリケーションに情報を表示する基本的な方法を学びます。app.pyを書き込むセルを以下のように更新し、ステップ2とステップ3のセルを再度実行してください。

Python
%%writefile app.py
import streamlit as st
import pandas as pd

st.title('Streamlit 基本コンポーネント')

st.header('1. テキスト表示')
st.write('st.write()は汎用的なコマンドで、Markdown記法にも対応します。')
st.code('st.code("このようにソースコードを整形して表示できます。")')

st.header('2. データフレーム表示')
df = pd.DataFrame({
    '項目': ['A', 'B', 'C'],
    '値1': [10, 20, 30],
    '値2': [100, 50, 200]
})
st.write('Pandasのデータフレームも綺麗に表示されます。')
st.dataframe(df) # ソート機能付きのインタラクティブなテーブル

基本的な機能:ウィジェットの配置

ユーザーからの入力を受け付けるウィジェットを追加し、アプリケーションに対話性を持たせます。同様にapp.pyを更新し、再度実行してください。

Python
%%writefile app.py
import streamlit as st

st.title('インタラクティブ・ウィジェット')

st.header('ボタン')
if st.button('実行'):
    st.success('ボタンがクリックされました。')

st.header('チェックボックス')
if st.checkbox('詳細を表示'):
    st.info('ここに詳細情報が表示されます。')

st.header('スライダー')
level = st.slider('レベルを選択してください', 1, 10, 5) # 最小, 最大, 初期値
st.write(f'現在のレベル: {level}')

# レイアウト機能:サイドバー
st.sidebar.header('サイドバー')
option = st.sidebar.selectbox(
    'オプションを選択',
    ['オプションA', 'オプションB', 'オプションC']
)
st.sidebar.write(f'選択中のオプション: {option}')

st.sidebarをコマンドの先頭に付与することで、任意のウィジェットを画面左のサイドバー領域に配置でき、メイン画面のレイアウトを調整できます。


データの可視化:グラフの描画

データ可視化も、BIツールを使用する必要なく簡単に行えます。

Python
%%writefile app.py
import streamlit as st
import pandas as pd
import numpy as np
import matplotlib.pyplot as plt

st.title('データ可視化')

st.header('Streamlit標準の折れ線グラフ')
chart_data = pd.DataFrame(
    np.random.randn(20, 3), # 20行3列の正規乱数データ
    columns=['a', 'b', 'c']
)
st.line_chart(chart_data)

st.header('Matplotlibとの連携')
# Matplotlibでグラフオブジェクトを作成
fig, ax = plt.subplots()
ax.hist(np.random.randn(100), bins=20)
ax.set_title("Histogram with Matplotlib")

# Streamlitで表示
st.pyplot(fig)

Streamlitは標準でいくつかのグラフに対応しているほか、MatplotlibやPlotlyといった主要なライブラリで作成したグラフもst.pyplot()などで簡単に表示できます。


まとめと次回予告

本稿では、Google Colaboratory上でStreamlitを動作させる基本的な機能について解説しました。これらの基本コンポーネントを組み合わせるだけでも、多機能なアプリケーションを構築することが可能です。

次回は、いよいよ実践編です。今回学んだ機能を統合し、「CSVファイルをアップして可視化・分析できる、簡易ツール」の作成します。

より詳しくStreamlitについて学びたい方は以下書籍も参考にしてください。

Amazon.co.jp: Streamlit入門 Pythonで学ぶデータ可視化&アプリ開発ガイド 技術の泉シリーズ eBook : 山口 歩夢: 本
Amazon.co.jp: Streamlit入門 Pythonで学ぶデータ可視化&アプリ開発ガイド 技術の泉シリーズ eBook : 山口 歩夢: 本

第二回はこちらからご覧ください。

【第2回/全3回】Streamlitで簡易データ分析ツールを作ろう 〜CSV読み込みからグラフ作成まで〜
Streamlit実践編として、簡易データ分析ツールを作成。CSVのアップロード、データ概要表示、利用者が列を選んでヒストグラム等のグラフを動的に作る方法をコードを交えて解説します。

コメント

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