ゼロからはじめるPython(119) 簡単に見栄え良いWebUIを作成するStreamlitを使ってみよう

機械学習のプロジェクトなどの成果を、簡単にWebアプリとして公開したいという場面が増えている。そんな時に便利なのが、データ視覚化などの機能を備えたWebフレームワークのStreamlitだ。今回は、簡単に見栄えの良いWebUIを作成できるStreamlitを使ってCSVファイルを元にグラフを描画してみよう。

Streamlitを使って最高気温の推移を表すCSVを基にグラフを描画したところ

Streamlitをインストールしよう

HTML/CSS/JavaScriptなどを記述して見栄えの良いWebアプリを作るには、それなりのWeb開発に関する知識が必要だ。また知識があったとしても、データサイエンスを中心に開発しているPythonプログラマーであれば、プロジェクトをWeb公開するためだけに、Web開発に時間を割きたくないだろう。

そこで、活用したいのが、機械学習やデータ分析のプロジェクトを簡単にWebアプリとして公開するためのPythonフレームワークの「Streamlit」だ。数行のコードを追加するだけで、表を出力したり、グラフを描画することができる。

Streamlitをインストールするには、ターミナル(WindowsならPowerShell、macOSならターミナル.app)を起動して、次のコマンドを実行しよう。また、今回はデータファイルのダウンロードのために「Requests」、データ集計に役立つ「Pandas」も一緒にダウンロードしよう。

python -m pip install streamlit
python -m pip install requests pandas

インストールができたら、正しくインストールできたか試してみよう。下記のコマンドを実行すると、サンプルアプリを起動できる。

streamlit hello

すると、Webサーバが起動して、ブラウザを自動で開かれる。うまくいくと、次のようなサンプルアプリが起動する。

インストールしてサンプルを実行したところ

もしブラウザが自動で開かなかった場合には、ターミナルに表示されているLocal URL「http://localhost:8501」をコピーして、ブラウザのアドレスバーに入力しよう。すると、サンプルアプリが表示されるだろう。

それでも駄目な場合には、ターミナルに表示されたエラーメッセージをコピーしてWeb検索してみると良いだろう。

なお、画面左上の「>」をクリックすると、グラフ描画を行うサンプルをいくつか選択できる。「DataFrame Demo」を選ぶと次のような画面のデモが表示される。実際にどのようなコードでデモが作成されているのかも確認できる。

サンプルアプリでは、いくつかのデモを確認できる

一番簡単なStreamlitのプログラムを作ってみよう

最初に、一番簡単なStreamlitを使ったプログラムを作ってみよう。以下のプログラムを「hello_world.py」という名前で保存しよう。

import streamlit as st
# タイトルを指定
st.title = "一番簡単なプログラム"
# マークダウン記法で文字を表示
st.markdown("""
## はじめてのStreamlit
Streamlitを使うと簡単にWebアプリを作成できます。
""")

そして、ターミナルで下記のコマンドを実行すると、上記のプログラムをWebブラウザ上で表示できる。

streamlit run hello_world.py

するとブラウザが起動して、下記のように表示される。

一番簡単なプログラムを実行したところ

プログラムを見てみよう。このように『st.markdown("●■▲")』のように記述することで、マークダウン記法で記述したテキストをHTMLに変換して表示できる。また、重要な点として、表示したいコンテンツを上から順に指定するだけで良いというのもStreamlitの良い点だ。

StreamlitでCSVファイルを視覚化してみよう

それでは、実際にStreamlitを使ったサンプルを作ってみよう。先日、こちらの姉妹連載にて、直近50年の東京の猛暑日と真夏日の年間日数の推移のグラフを描画した。せっかくなので、Streamlitを使ってCSVを視覚化してみよう。

以下のプログラムは、CSVファイルをダウンロードして、線グラフを描画するプログラムだ。「kion.py」という名前で保存しよう。

import streamlit as st
import pandas as pd
import requests

# タイトルを指定
st.title = "真夏日と猛暑日の推移"

# CSVファイルをダウンロード --- (*1)
url = "https://n3s.nadesi.com/image.php?f=535.csv"
csv = requests.get(url)
with open("kion50y.csv", "wb") as f:
    f.write(csv.content)

# ダウンロードしたCSVファイルを読み込む --- (*2)
df = pd.read_csv("kion50y.csv", encoding="utf-8", index_col=0)

# ダウンロードしたCSVファイルを表示 --- (*3)
st.markdown("## 年間の最高気温")
st.line_chart(df)
st.write(df)

ターミナルで以下のコマンドを実行しよう。するとブラウザにグラフが表示される。

streamlit run kion.py

次の画面が実行したところだ。猛暑日と真夏日の年間推移をグラフにして表示できた。

猛暑日と真夏日の推移をグラフにしたところ

プログラムを確認してみよう。プログラムの(＊1)では、WebからCSVファイルをダウンロードする。(＊2)では、Pandasを用いてCSVファイルをDataFrameに読み込む。そして、(＊3)でStreamlitにPandasのDataFrameオブジェクトの書き出しを指定する。st.line_chartメソッドで線グラフを描画でき、st.writeメソッドでDataFrameを表として出力できる。

まとめ

以上、今回はStreamlitの簡単な使い方を紹介した。気温データのCSVファイルを読み込んで、視覚化する方法も紹介してみた。Webアプリにするために、特別な関数などを定義することなく手軽にグラフを記述できた。

なお、今回は線グラフを描画しただけだったが、Streamlitを使うとユーザーから値を入力したり、ファイルをアップロードしたりと、入力系のUIも簡単に利用できるよう工夫されている。また、Web公開(デプロイ)も手軽にできるようになっている。

このように、Stremlitを使えば、面倒なことを考えることなく、Pythonだけを利用して手軽にWebUIを作成できる。データの分析結果を確認したい場面や、機械学習などのプロジェクトで使えるので便利だろう。

自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2004年度未踏ユーススーパークリエータ認定、2010年 OSS貢献者章受賞。技術書も多く執筆している。直近では、「実践力をアップする Pythonによるアルゴリズムの教科書(マイナビ出版)」「シゴトがはかどる Python自動処理の教科書(マイナビ出版)」「すぐに使える!業務で実践できる! PythonによるAI・機械学習・深層学習アプリのつくり方 TensorFlow2対応(ソシム)」「マンガでざっくり学ぶPython(マイナビ出版)」など。