こんにちは、ときか姉です♪
最近Python+Streamlitでアプリ作成しています。初心者の方向けに、Streamlitでよく使うウィジェットをまとめました。
「Python初心者だけどアプリ開発ってどうやるかわからない」
「Streamlitでどういうことができるの?」
こういう疑問をお持ちの方はぜひご覧ください♪
[Streamlitによるアプリ開発の実例に関してはこちらの記事↓をご参照ください♪]
1. Page config, title / ページ設定・タイトル
streamlitをstの略名でimportしておきます。関数set_page_configでページの設定ができます。
関数titleでメインページに見出しとなる文字列を挿入できます。ここではアプリタイトルを設定します。
import streamlit as st
st.set_page_config(
page_title = 'Streamlitチートシート')
st.title("Streamlit各種ウィジェット")
以下のようにタブとメインページに指定した文字列をセットできます。
タイトル下のウィジェットに関しては後述します。

文字列の記述には他にもMarkdown形式(関数st.markdown)などが使えます。絵文字やLatex形式も表示可能です。
他にもst.header, st.subheaderなどがあります。

2. Streamlit Widges / 各種ウィジェット
各種ウィジェットを以下にまとめます。st.XXXXという形で設置します。
2-1. Button / ボタン
st.button('ボタン(st.button)')

戻り値で押されたかどうかを取得できます。
2-2. Checkbox / チェックボックス
st.checkbox('チェックボックス(st.checkbox)')

チェック判定が返されます。
2-3. Radio button / ラジオボタン
st.radio('ラジオボタン(st.radio)', ['Python','Java'])

2-4. Select box / 選択
選択肢が多い場合にはラジオボックスではなくSelect boxが用いられます。
st.selectbox('セレクトボックス(st.selectbox)', [2024,2025,2026])

2-5. Multiselect box / 複数選択
複数選択を許容したい場合にはmultiselectを用います。
st.multiselect('複数選択(st.multiselect)', ["おかず","ごはん","みそ汁"])


2-6. Slider / スライダー
連続した値を扱うにはSliderがよく用いられます。
st.slider('スライダー(st.slider)', min_value=0, max_value=10)

2-7. Text input / 文字入力
文字入力はtext_inputで受けつけます。比較的短いテキスト用です。
st.text_input('文字入力(st.text_input)')

2-8 Text area / 文字入力(長文)
長文テキストを受け入れたい場合にはtext_areaを用います。
st.text_area('テキストエリア(st.text_area)')

2-9. Number input / 数値入力
数値入力には、number_inputを用います。+/-で増減可能です。step引数で刻みを指定できます。
st.number_input('数字入力(st.number_input)')

[Streamlitをもっと学ぶなら]
2-10. Date input / 日付入力
日付の入力にはdate_inputを用います。カレンダーが表示されユーザがそこから選択可能です。
st.date_input('日付入力(st.date_input)')

2-11. Time input / 時間入力
時間入力にはtime_inputを用います。刻みを指定できます。
st.time_input('時刻入力(st.time_input)')

2-12. Color picker / カラー選択
色選択のためにcolor_pickerが用意されています。カスタマイズ可能です。
st.color_picker('色選択(st.color_picker)')


3. まとめ
Streamlitはとても便利で初心者でも学習コストをあまりかけずに簡単にアプリが作れてしまいます。一方で、配置の微調整など細かい点にはあまり触れれない面もあります。より洗練されたUI設計をしたいという方は別途フロントエンド言語を勉強する必要があるかもしれません(Streamlit内でHTMLタグは使えます。)
また、作成したアプリはStreamlit Cloudで公開することもできます。他の方がアップしている作成例を見るだけでも面白いですよ♪
ちなみに私が最近作成ししたのは、投資運用実績と経済的自立成否を計算するFIRE simulatorです。もしよろしければそちらもご参照ください。
以上になります。
もしよろしければフォローやいいねをお願いしますね♪
この記事がみなさまのStreamlitアプリ開発のお役に立てれば幸いです。
♪♪♪ Have a nice coding day ♪♪♪
[Streamlitをもっと学ぶなら]
[電子書籍ご購入はこちら↓ご新規(左)ご継続(右)]