こんにちは、JS2IIUです。
今回は、Streamlitの機能のうち、標準機能だけでは使えないUI要素を紹介していきます。今回もよろしくお願いします。
はじめに
Streamlitは、PythonだけでインタラクティブなWebアプリを作成できる便利なフレームワークですが、標準で提供されるUI（ウィジェット）には限りがあります。
例えば、**「カレンダー形式で日付を選びたい」とか、「地図上にピンを立てたい」**と思っても、標準のStreamlitだけでは難しいことがあります。
そこで登場するのが 「Streamlit Components」 です。
この記事では、以下のようなことができるようになります：
- カレンダーから日付を選べるようになる
- 地図を表示して、位置情報を扱えるようになる
どちらも 初心者の方にもわかりやすく、ステップバイステップで実装手順を紹介していきます。
Streamlit Componentsとは？
Streamlit Componentsは、Streamlitアプリに外部のJavaScript UIや、よりリッチなインターフェースを追加できる仕組みです。
例えば、以下のようなことが可能になります：
- より高機能なグラフ（echartsなど）
- 編集可能な表（AgGridなど）
- インタラクティブな地図
- カレンダー入力などのUIコンポーネント
Streamlit公式が提供するものもありますし、有志が作った便利なコンポーネントも多くあります。
【準備】Streamlitアプリの基本テンプレート
まずは、どんなアプリでも共通となるStreamlitアプリのテンプレートを作成しておきましょう。
pip install streamlit以下のように .py ファイルを作りましょう（例：app.py）。
import streamlit as st
st.title("Streamlit Components 活用例")このファイルをターミナルで起動すると、Webブラウザでアプリが立ち上がります：
streamlit run app.py実践①：カレンダーで日付を選べるようにする（streamlit-calendar）
✅ 目的
日付を選ぶUIとして、標準の st.date_input も便利ですが、Googleカレンダー風のUIが使いたいときは streamlit-calendar が便利です。
🛠️ Step 1：インストール
pip install streamlit-calendar🧩 Step 2：コード例と解説
import streamlit as st
from streamlit_calendar import calendar
st.title("カレンダーで日付を選択")
# カレンダーを表示
selected_event = calendar()
# 選択されたイベント情報を表示
st.write("選択されたイベント情報：", selected_event)
💡 補足説明
calendar()を呼び出すと、月間カレンダー形式のUIが表示されます。- カレンダーにイベントを追加したり、日付をクリックするとイベントデータが辞書形式で返ってきます。
これは、スケジュール管理アプリや予約アプリなどに応用できます。
実践②：地図にピンを立てる（streamlit-folium）
✅ 目的
地図表示を簡単に組み込みたい場合、foliumライブラリと連携できる streamlit-folium が非常に便利です。
🛠️ Step 1：インストール
pip install streamlit-folium folium🧩 Step 2：コード例と解説
import streamlit as st
from streamlit_folium import st_folium
import folium
st.title("地図表示のデモ")
# 地図を初期化（東京を中心）
m = folium.Map(location=[35.6895, 139.6917], zoom_start=12)
# マーカー（ピン）を追加
folium.Marker([35.6895, 139.6917], tooltip="東京タワー").add_to(m)
# 地図をStreamlitに表示
st_data = st_folium(m, width=700, height=500)
💡 補足説明
folium.Map()で地図を作成し、Marker()で地点にピンを立てます。st_folium()を使うことでStreamlit上に地図を描画できます。- 地図のクリック位置を取得することも可能です（詳細は公式ドキュメント参照）。
観光案内アプリや不動産情報アプリなどに活用できます。
その他おすすめコンポーネント紹介
以下もとても便利なので、用途に応じて試してみてください：
| コンポーネント | 機能の概要 | インストール例 |
|---|---|---|
streamlit-echarts | 高機能なグラフ（ECharts） | pip install streamlit-echarts |
st-annotated-text | テキストの一部を強調表示 | pip install st-annotated-text |
streamlit-aggrid | 編集可能なデータテーブル | pip install streamlit-aggrid |
コンポーネント利用時の注意点
- コンポーネントによってはJavaScriptベースでローカルのみで動作するものもあります。
- 公式でないものは、メンテナンス状況やGitHubのスター数などを確認しましょう。
requirements.txtに依存関係を明記しておくのが安心です。
まとめ
Streamlit Componentsを活用すれば、以下のようなことが実現できます：
✅ 標準にはないUI（カレンダーや地図など）が簡単に使える
✅ 高機能な可視化・入力コンポーネントが追加できる
✅ Pythonだけでフロントエンドの拡張ができる
アプリの可能性がグンと広がりますので、ぜひ試してみてください！
参考リンク
- 🔗 Streamlit公式 Components ギャラリー
- 🔗
streamlit-calendarGitHub - 🔗
streamlit-foliumGitHub - 🔗
foliumドキュメント
最後に書籍のPRです。
24年11月に第3版が発行された「scikit-learn、Keras、TensorFlowによる実践機械学習 第3版」、Aurélien Géron 著。下田、牧、長尾訳。機械学習のトピックスについて手を動かしながら網羅的に学べる書籍です。ぜひ手に取ってみてください。
最後まで読んでいただきありがとうございます。
コメント