Streamlitを使い始める(テキストなどの出力)
Table of Contents
概要
TauriやWebなども扱えるのですが、手軽にPythonだけでアプリを作ってみたい気持ちも湧きました。Gradioなどの選択肢もありますが、私はTauriやWebもあえて使うぐらいの凝り性な正確なのでGradioほど手軽ではなくPythonの多様なライブラリと互換性のあるStreamlitに対して興味が沸きました。ちょっとずつ作っていきます。
導入
Pythonは3.9から3.13であることが求められます。2025年11月21日時点ではPython3.14は推奨できないように見えますのでご注意ください。Pythonのライブラリなのでpipなどで導入できます。
pip install streamlituvや仮想環境を使っている場合にはその後、streamlit helloコマンドを実行するとブラウザでデモが開かれます。ただ、デモのコードをいきなりみてもわからなかったので一旦Documentを確認しながら書き方を学んでいきます。
Hello World
定番のHello WorldをStreamlit式で書いてみます。projects/hello_world/app.pyに以下を書きます。
import streamlit as st
st.write("Hello World")その後、streamlit run projects/hello_world/app.pyを実行するとブラウザでHello Worldが表示されます。st.writeからst.titleに書き換えると大きな文字での出力ができます。
import streamlit as st
# st.write("Hello world")
st.title("Hello world")タイピングされた文字のように表示する
ジェネレーターとst.write_streamを組み合わせることでタイピングされた文字のように表示することができます。文字列の他にPandasのDataFrameやMarkdownの自動Parseにも対応しています。
import time
import numpy as np
import pandas as pd
import streamlit as st
def stream_data(*itrs, sleep_time: float = 0.025):
def inner():
for itr in itrs:
if isinstance(itr, str):
for char in itr:
yield char
time.sleep(sleep_time)
else:
yield itr
time.sleep(sleep_time)
return inner
text = "Streamlit is convenient because you can develop both the backend and frontend using only Python!"
df = pd.DataFrame(
np.random.randn(5, 10),
columns=["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"],
)
additional_text = "You can also display **Pandas DataFrames** in a **tabular format** like the one above."
if st.button("Stream data"):
st.write_stream(stream_data(text, df, additional_text))実際に動いている様子はhttps://rmc8-streamlit-practice-projectstyperwritter-effectapp-zwmnbe.streamlit.app/にアプリをデプロイしています。ボタンを押すと生成AIの応答のごとくに文字が順番に表示されていく様子を確認できます。生成AIの回答をStreamで得てリアルタイムに表示する用途で使えて、ユーザーにとってもリアルタイムに回答を表示する印象を与えるので便利そうです。
magic
変数や値のみを記述するとそのまま表示されます。対話式のPYthonの処理やJupyter Labでの変数をprintを使わずにそのまま使わずに出力する処理と似ていますが、複数の変数や値を一度に表示できます。
import matplotlib.pyplot as plt
import numpy as np
import pandas as pd
df = pd.DataFrame({"col1": [1, 2, 3]})
df
x = 10
"x", x
arr = np.random.normal(1, 1, size=100)
fig, ax = plt.subplots()
ax.hist(arr, bins=20)
figそのままPythonで実行しても何も怒らないですが、streamlit run app.pyの実行を通じて変数の中身が出力されることが確認できます。また、.streamlit/config.tomlでこのmagic機能をオフにもできます。
[runner]
magic = falseテキスト関連の要素
テキスト関連の処理がたくさんありますので一つずつ確認します。
Markdown
整形された状態でMarkdownを表示するにはst.markdownを使用します。
import streamlit as st
st.markdown("*Streamlit* is **really** ***cool***.")
st.markdown('''
:red[Streamlit] :orange[can] :green[write] :blue[text] :violet[in]
:gray[pretty] :rainbow[colors] and :blue-background[highlight] text.''')
st.markdown("Here's a bouquet —\
:tulip::cherry_blossom::rose::hibiscus::sunflower::blossom:")
multi = '''If you end a line with two spaces,
a soft return is used for the next line.
Two (or more) newline characters in a row will result in a hard return.
'''
st.markdown(multi)
st.markdown(body, unsafe_allow_html=False, *, help=None, width="stretch")の構成で使えるようですが基本的にはwidthを使う程度かと思います。HTML利用する場合にはunsafe_allow_htmlをTrueにすることで可能ですが、st.htmlの利用をまず検討しつつなるべくこのオプションはTrueにしない方が良さそうです。
widthはレイアウトにフィットさせる形で広めるstretch、テキストの幅に合わせて幅を決めるcontent、ピクセル指定の数値の入力(int)の3種類があります。厳密に幅を決めることもできますが手軽に使うフレームワークとしてはstretchやcontentが第一の選択肢になるかと思います。他のtext系の処理でも使えるので覚えておくとよいでしょう。
ヘッダー
st.headerでヘッダーを表示できます。ヘッダーはHTMLのh2に相当しています。冒頭に現れたst.titleはh1に相当します。なのでページ内の小項目にはst.headerを利用して、見出しや目次用のアンカーをつくり、divider引数を使って目次の下線をつくるなどの装飾ができます。
import streamlit as st
st.header("_Streamlit_ is :blue[cool] :sunglasses:")
st.header("This is a header with a divider", divider="gray")
st.header("These headers have rotating dividers", divider=True)
st.header("One", divider=True)
st.header("Two", divider=True)
st.header("Three", divider=True)
st.header("Four", divider=True)サブヘッダー
st.subheaderでサブヘッダーを表示できます。h3h6に相当しています。なのでヘッダーと使い方はほぼ同じですが、h4h6もまとめられているので大掛かりな構造を1つのページ内に構築することには向いてなさそうです。反対にシンプルなページを作ることに向いており、アプリを早くわかりやすく作れる点でメリットがあります。
バッジ
背景色を伴ったテキストを表示するにはst.badgeを用います。もしくはmarkdown向けにも専用の記法が用意されています。
import streamlit as st
st.badge("1.0.0", width="content")
st.badge("Success", icon=":material/check:", color="green")
st.markdown(
":violet-badge[:material/star: Favorite] Streamlit is :blue[cool] :sunglasses:"
)そのまま要素を表示させると改行されるので、バッジの後にテキストを表示する必要がある場合にはmarkdownを使うことになります。
キャプション
図表の説明、UIコンポーネントの補足情報、免責事項や注意書きの記載等に利用します。
import streamlit as st
st.caption("This is a string that explains something above.")
st.caption("A caption with _italics_ :blue[colors] and emojis :sunglasses:")コードブロック
コードブロックを表示するにはst.codeを用います。シンタックスハイライトも言語を指定することで可能になります。
import streamlit as st
code = """
function hello() {
console.log("Hello Streamlit!");
}
"""
st.code(
code,
language="javascript",
line_numbers=True,
)echo
こちらは直感的にメソッド名だけではわかりづらいですが、with st.echo():を用いた時にブロック内のコードを出力するメソッドです。
import streamlit as st
with st.echo():
def hello():
return "Hello Streamlit!"
st.write(hello())withブロック内のコードがコードブロックとして表示されます。中にst.writeなどの処理があればコードブロックの下に処理が表示されます。コードをのチュートリアルやデモの用途、デバッグ等の情報共有などに使えそうですが、他のメソッドと比べると利用する場面が限られていそうです。
text
markdownやhtmlのパースを伴わず純粋なテキストとしての出力に利用します。
import streamlit as st
st.text("This is text\n[and more text](that's not a Markdown link).")LaTex
LaTexを使った数式を表示するのに利用します。
import streamlit as st
st.latex(r'''
a + ar + a r^2 + a r^3 + \cdots + a r^{n-1} =
\sum_{k=0}^{n-1} ar^k =
a \left(\frac{1-r^{n}}{1-r}\right)
''')divider
ページ内に区切り線を表示するために利用します。
import streamlit as st
st.divider()help
オブジェクトのヘルプを簡単に表示できます。
import streamlit as st
class Dog:
"""A typical dog."""
def __init__(self, breed, color):
self.breed = breed
self.color = color
def bark(self):
return "Woof!"
dog = Dog(breed="Golden Retriever", color="Brown")
st.help(dog)
st.help(dict)
オブジェクトの状態やメソッドなど状態を表示できるので教育やデモ、デバッグなどに活用できそうです。
html
st.htmlでHTMLを表示できます。HTMLは信頼のできるものを表示することが望ましいです。
import streamlit as st
st.html(
"<p><span style='text-decoration: line-through double red;'>Oops</span>!</p>"
)ここまでのStreamlitの感想
HTMLやMarkdownのParse機能はありますがPythonだけでもWebアプリケーションをつくることができ、DataFrameやhelpの表示などPythonと統合された形で処理を簡潔に記述できる点でTypeScript等にないようなPython向けの独自の強みがあり非常に便利そうに見えます。Text関連の処理だけでもここまでの種類があるので目的のアプリを十分に作れるかと思います。またTextだけでなくPandasによる表の表示や、Polarsなどでのインタラクティブな図表の表示、地図の表示、JSONやdictの扱いなどまだまだ掲載していない機能があります。ページのリンクやチェックボックスなどWebのフォームの機能もありますのでまた別途記事を書いて引き続きStreamlitの学習をしていきます。






コメントを読み込み中...