はじめに
2026年4月末にリリースされた Streamlit 1.57.0 で追加された3つの機能を紹介します。
-
Alert title=パラメータ —st.info/st.warning/st.error/st.successにタイトルを付けられるようになった -
:shimmer[]マークダウンディレクティブ — テキストにシマー（波打つ輝き）アニメーションを適用できるようになった -
st.bottomコンテナ — ビューポート底部にコンテンツを固定表示できるようになった
機能 1 — Alert title= パラメータ
st.info / st.warning / st.error / st.success は、アラートメッセージを表示するための基本的な要素です。
しかし v1.56.0 まではタイトルを付ける方法がなく、重要度や種別を本文の先頭に自分で書く必要がありました。
v1.57.0 から 4 種類すべてのアラート関数に title= パラメータが追加されました。
import streamlit as st
# ✅ v1.57.0: title= で明確なタイトル付きアラート
st.success(
"タイムは 1:39.342 — 今セッション最速！",
title="🏁 ラップ完了",
icon=":material/flag:",
)
st.warning(
"タイヤ温度 115°C — 最適範囲 (80〜110°C) を超えています",
title="⚠ タイヤ温度アラート",
icon=":material/thermostat:",
)
st.info(
"DRS ゾーンまで 200m。ドラッグリダクション利用可能。",
title="ℹ トラック情報",
icon=":material/info:",
)
st.error(
"急激な RPM ドロップを検出。メカニカル設定を確認してください。",
title="🔴 エンジン異常",
icon=":material/warning:",
)
title= を指定するとアラート本文の上部に太字のヘッダーとして表示され、タイトルと本文が一体化した自然なUIになります。
パラメータ一覧
st.warning(
body, # アラート本文（第 1 引数・必須）
icon=None, # Material アイコン or 絵文字（既存）
title=None, # ← v1.57.0 新規追加: 上部に太字で表示
)
# st.info / st.error / st.success も同様
| パラメータ | 型 | 説明 |
|---|---|---|
body |
str | アラート本文（従来通り第 1 引数） |
icon |
str | None | Material アイコン (:material/flag:) or 絵文字 |
title |
str | None | （v1.57.0 新規） 上部に太字ヘッダーとして表示 |
機能 2 — :shimmer[] マークダウンディレクティブ
v1.57.0 では、Markdown 内でシマー表示を使える :shimmer[] ディレクティブが追加されました。
シマーとは、読み込み中のプレースホルダーなどで使われる、光が横に流れるようなアニメーション表現です。
これまでも st.spinner や st.empty を使えばローディング表示はできましたが、文章中の一部だけにローディング表現を当てるのは少し面倒でした。
:shimmer[テキスト] を使うと、st.markdown の中で指定したテキストだけにシマーアニメーションを適用できます。
説明文、ラベル、ステータスメッセージの一部を「読み込み中」のように見せたい場合に便利です。
import streamlit as st
# ヘッダーにシマー（デモアプリのローディング表示）
st.markdown("### :shimmer[テレメトリデータを読み込んでいます...]")
# 長文テキストにシマー
st.markdown(":shimmer[富士スピードウェイ / GR スープラ / RM タイヤ — セッションデータを取得中]")
# 処理状況のプレースホルダー
st.markdown(":shimmer[データを分析しています — しばらくお待ちください]")
st.empty() と組み合わせた動的置換パターン
:shimmer[] が最も効果的なのが st.empty() との組み合わせです。ローディング中はシマーを表示し、データ取得後に実データに差し替えることで、スムーズな UX を実現できます。
import streamlit as st
import time
placeholder = st.empty()
# ローディング中: シマーでプレースホルダー表示
with placeholder.container():
st.markdown("最高速度 :shimmer[計算中...] km/h")
st.markdown("最高 RPM :shimmer[集計中...]")
# データ取得（実際は API 呼び出しや DB クエリ）
time.sleep(2)
data = {"max_speed": 285, "max_rpm": 8750}
# データ取得後: 実データに置き換え
with placeholder.container():
st.metric("最高速度", f"{data['max_speed']} km/h")
st.metric("最高 RPM", f"{data['max_rpm']}")
上記は「インラインテキスト」の例です。:shimmer[] は st.markdown の中であれば書く位置を問わず使えます。その他に以下のような記述も可能です。
使えるコンテキスト
| コンテキスト | 例 | 説明 |
|---|---|---|
| ヘッダー | #### :shimmer[レポート生成中...] |
見出しにシマー適用 |
| インラインテキスト | 最高速度 :shimmer[...] km/h |
文中の一部だけシマー |
| 単独テキスト | :shimmer[12,847 行を処理中] |
一文全体にシマー |
| マルチライン | 複数の st.markdown で複数行 |
複数プレースホルダー |
注意:
:shimmer[]は Markdown として解釈される場所で有効です。基本的にはst.markdownで使うのが最もわかりやすいです。st.textのようなプレーンテキスト表示では機能しません。
機能 3 — st.bottom コンテナ
「ページをスクロールしても常に表示しておきたいコントロール（ステータスバー・再生コントロール・クイックアクション）」を実現するには、v1.56.0 まで CSS ハックか custom component を自作するしかありませんでした。
st.bottom は st.sidebar と同様のコンテキストマネージャ構文で、ビューポートの底部にコンテンツを固定表示します。
import streamlit as st
# ✅ v1.57.0: st.bottom で公式サポートされたフッター固定
with st.bottom:
st.caption("テレメトリ HUD — st.bottom デモ")
b1, b2, b3, b4, b5, b6 = st.columns(6)
with b1:
st.metric("LAP", "LAP 5")
with b2:
st.metric("TIME", "1:39.342")
with b3:
st.metric("CIRCUIT", "Fuji")
with b4:
st.metric("MAX SPEED", "285 km/h")
with b5:
st.metric("MAX RPM", "8750")
with b6:
st.metric("TYRE AVG", "98.3°C")
st.bottom の中では st.metric, st.columns, st.button など、多くの通常のStreamlit要素をそのまま配置できます。
まとめ
v1.57.0 の3機能 まとめ
| 機能 | 解決する課題 | 主な用途 |
|---|---|---|
Alert title= |
アラートにタイトルを付ける方法がなかった | 種別・重要度が一目でわかるアラート |
:shimmer[] |
インラインのローディング表現が困難だった | データ取得中のプレースホルダー |
st.bottom |
フッター固定に CSS ハックが必要だった | ステータスバー・再生コントロール |
今回の3機能は、どれも大きな設計変更を必要とするものではありません。
しかし、分析アプリや業務ダッシュボードの「伝わりやすさ」を少しずつ改善してくれる機能です。
- アラートに意味を持たせる
- ローディング中の違和感を減らす
- 重要な情報を常に見える場所に置く
こうした細かい改善を積み重ねることで、Streamlit アプリは単なる分析画面から、より使いやすい業務アプリに近づいていくと思います。