Streamlitでアプリケーションを作る際、ボタンは避けて通れない要素ですよね。
「ボタンの作り方がわからない」
「ボタンで何が出来るのか分からない」
「どうやってデザインやカスタマイズをするのか分からない」
など、多くの疑問や悩みがあるでしょう。
そこで、本記事では、Streamlitのボタン作成から応用まで、網羅的に解説していきます。
最後まで読めば、Streamlitでのボタン活用が一段とレベルアップするでしょう。
本記事の信頼性
Webアプリを簡単開発！
StreamlitだけでWebアプリを開発するには限界があります
HTMLやCSSを書かなくていいのがStreamlitの利点ですが、Streamlitだけだとアプリ開発は難しいでしょう。
そんな悩みを抱えているあなたにおすすめしたいUdemyの講座が「FastAPIによるWeb API開発講座」です。
- フロントエンド：Streamlit
- バックエンド：FastAPI
- データベース：SQLAlchemy
以上のフレームワークの構成で簡単な予約アプリまで作れるようになります。
一切開発をしたことがない僕でも簡単に理解できました！
Streamlitに限界を感じている人は、ぜひ受講してStreamlitマスターになりましょう。
＼Streamlitの開発がさらに容易に！／
それでは本編です！
Streamlitでのボタン（button）の作り方【基本編】
まず、Streamlitでのボタン作成の基本について以下のことを詳しく解説していきます。
- Streamlitでのボタン作成の基本
- st.button関数の引数（指定するもの）【基本編】
- ボタンによってイベント（行動）を発生させる方法
- サンプルコードでボタンを作成してみよう
上記の項目を抑えるだけでも、基本のボタンを作成することができるので、ぜひ参考にしてみてください。
それぞれ解説していきます。
Streamlitでのボタン作成の基本
Streamlitでボタンを作成する基本的な方法について説明します。
Streamlitでは、st.buttonという関数を使って、短いコードでボタンを作成できます。
ボタンを効果的に設置することで以下のようなアクションが可能です。
- データの表示切り替え
- 新しいページへの遷移
なので、アプリなどを作成する際には、ユーザーが主体的にアプリを動かすためにボタンが必要になります。
Streamlitのst.button関数は、ボタンのラベルとして表示するテキストを引数（指定するもの）として受け取ります。
例えば、以下のようにコードを書くと、ボタンを表示できます。
st.button("クリック")
このように、Streamlitでは簡単にボタンを作成できるのです。
st.button関数の引数（指定するもの）【基本編】
st.button関数の使い方について、より詳しく見ていきましょう。
この関数は、ボタンのラベルを必須の引数として持ち、オプションでkeyやhelpといった引数も指定できます。
このように、st.button関数は多くのオプションを提供しており、高度なカスタマイズも可能です。
詳しいオプションは『Streamlitの3つのボタンの作り方』の章で解説していきます。
ボタンによってイベント（行動）を発生させる方法
Streamlitでボタンによってイベント（行動）を発生させる方法について説明します。
ボタンは、if文と組み合わせることで、ボタンがクリックされるとその後のコードが実行されるようにできます。
例えば、if st.button("データを表示"):というコードがあれば、このボタンをクリックするとif文の中のコードが実行されます。
このように、if文を利用して、データを表示したり、他のStreamlitウィジェットの状態を変更したりできるのです。
サンプルコードでボタンを作成してみよう
サンプルコードを通じて、Streamlitでのボタン作成を行ってみましょう。
最も基本的なボタンの作成は、st.button('クリック')という一行のコードでできます。
例えば、以下のコードを実行すると、クリックと表示されたボタンが画面に現れます。
import streamlit as st
st.button("クリック")
Streamlitのボタンは、綺麗なデザインで簡単に作成でき、If文と組み合わせるとデータの表示なども操作できるのです。
そのため、Streamlitを用いたアプリ開発ではよくボタンが用いられるので、必ず押さえておきましょう。
Streamlitの3つのボタン（button）の作り方
このセクションでは、Streamlitで使用できる以下の3種類のボタンについて作成やカスタマイズ方法を詳しく解説します。
- 普通のボタン(button)
- ファイルのダウンロードボタン(download_button)
- リンクに飛べるボタン(link_button)
普通のボタンだけでなく、機能を持ったボタンも存在するため、全てのボタンを頭に入れておきましょう。
それでは解説していきます。
普通のボタン(button)の作り方とカスタマイズ方法
基本的な操作は説明しましたが、普通のボタンを作る際には、st.button関数を使用します。
ボタンの関数にはいくつかの引数があり、それぞれの引数でボタンの動きや見た目をカスタマイズできます。
今回は代表的な引数は以下の4つです。
- ラベル(label)：ボタンに表示するテキスト
- ヘルプ(help)：ボタンの上にポップアップするテキスト
- タイプ(type)：ボタンのデザインを指定
- コンテナの幅(use_container_width)：ボタンの長さ（幅）を設定
- on_click：クリックしたら実行させたい関数を設定
ダウンロードボタンやリンクボタンでも設定できる引数ですので、押さえておくとよいでしょう。
ラベル(label)：ボタンに表示するテキスト
ラベルはボタンに表示されるテキストです。
引数に設定する場合は、大体第1引数（一番左の引数）に指定します。
何度も例を出していますが、st.button("クリック")とすると、クリックと表示されるボタンが作成されます。
ヘルプ(help)：ボタンの上にポップアップするテキスト
help引数を使用すると、ボタンにマウスを合わせたときに表示されるツールチップ（ポップアップ）を設定できます。
ユーザーがボタンをクリックする場合に、分かりやすいようにボタンの機能を説明するのに便利です。
例えば、以下のように引数にhelpを設定すると、ポップアップが表示されます。
import streamlit as st
st.button("クリック", help="クリックしても何も起きません")
ユーザー側はクリック後にどうなるか分からないので、ポップアップでサポートするようにしましょう。
タイプ(type)：ボタンのデザインを指定
type引数で、ボタンのデザインを変更できます。
用意されているボタンのデザインは以下の2つです。（※スクリーンショットの関係で位置が少し異なっています）
- secondary
- primary
引数として指定しなければ、secondaryのボタンデザインが選ばれます。
また、更にデザインをカスタマイズしたい場合は、CSSを別途指定するようにしましょう。
コンテナの幅(use_container_width)：ボタンの長さ（幅）を設定
use_container_width引数をTrueに設定すると、ボタンを親コンテナ（画面のサイズ）の幅に合わせられます。
実際に、Trueにしてみたボタンが下図です。
上図のようにコンテナ（画面のサイズ）に合わせられるので、データフレームの表示などにも使用される引数になります。
on_click：クリックしたら実行させたい関数を設定
on_click引数は、ボタンをクリックした時点で動かしたい関数がある場合に使用します。
=の後に関数名を指定することで設定でき、ボタンによって裏側で関数を動かせるため、便利です。
例えば、データフレームの処理やAPIとの接続の関数を作成し設定することが考えられます。
ファイルのダウンロードボタン(download_button)の作り方とカスタマイズ方法
ファイルのダウンロードボタンを作成するには、st.download_button関数を使用します。
この関数もいくつかの引数がありますが、ダウンロードボタンに特化した以下の引数について見ていきましょう。
- データ(data)：データの中身
- ファイル名(file_name)：ファイルの名前を指定
- マイム(mime)：拡張子などを指定
上記の引数を用いて、関数を呼び出すコードは以下の通りです。
st.download_button(
label="写真をダウンロードする",
data=file,
file_name="写真.png",
mime="image/png"
)fileに画像などダウンロードしたいデータを入れなければエラーになるので、注意が必要です
それぞれ解説していきます。
データ(data)：データの中身
data引数は、ダウンロードしたいファイルのデータを指定します。
データの指定ではテキストデータやバイナリデータ、データフレームなど、さまざまな形式を指定可能です。
ユーザーにダウンロードさせたいファイルを指定するようにしましょう。
ファイル名(file_name)：ファイルの名前を指定
file_name引数で、ダウンロードするファイルの名前を指定できます。
例えば、file_name="example.txt"とすると、ダウンロードされるファイルの名前は"example.txt"になります。
実際には、ユーザーに付けたいファイル名を入力してもらい、その入力名を変数として受け取ってfile_nameで指定することが多いでしょう。
マイム(mime)：拡張子などを指定
mime引数で、ファイルのMIMEタイプを指定できます。
ファイルのMIMEタイプを指定することで、どのような種類のファイルであるかをブラウザに伝えることができます。
それぞれのファイルのMIMEタイプは以下をご参照ください。
- テキストファイル
- プレインテキスト: text/plain
- HTML文書: text/html
- XML文書: application/xml
- 画像ファイル
- JPEG画像: image/jpeg
- PNG画像: image/png
- GIF画像: image/gif
- 音声ファイル
- MP3オーディオ: audio/mpeg
- WAVオーディオ: audio/wav
- 動画ファイル
- MPEGビデオ: video/mpeg
- MP4ビデオ: video/mp4
- アプリケーション関連
- PDF文書: application/pdf
- Microsoft Word文書: application/msword
- JSONデータ: application/json
このように、ダウンロードするファイルがどのような形式かを指定する必要があることを覚えておきましょう。
リンクに飛べるボタン(link_button)の作り方とカスタマイズ方法
リンクに飛べるボタンを作成するには、st.link_button関数を使用します。
実際のコードは以下の通りです。
st.link_button("リンク先に飛ぶ", "https://shoblog.iiyan.net/")
上記のコードを実行すると、リンクボタンを作成でき、クリックすることでリンク先に飛べるようになっています。
リンクボタンはv1.27.0からの実装ですので、エラーが出た場合はバージョンを上げましょう
リンク(url)：リンク先の指定
url引数には、ボタンをクリックしたときに遷移するウェブページのURLを指定します。
他は普通のボタンと引数は同じなので、url引数だけ必ず設定するということを覚えておきましょう。
Streamlitのボタン（button）でできるイベント処理
ここでは、Streamlitに用意されているボタンでどのようなイベントを処理できるのかについて見ていきます。
- st.session_stateを使った状態管理
- ボタンでデータ可視化を行う
- ボタンを使ったフォームの送信
- アプリのリフレッシュ（クリア）
上記のイベントはあくまで一部であるため、応用することでさまざまなイベントを実装できます。
それぞれ解説していきます。
st.session_stateを使った状態管理
Streamlitでのセッション（状態）管理にはst.session_stateが一般的に用いられます。
st.session_stateは、Streamlitアプリケーションのセッション間で状態を保持するための仕組みで、ユーザーがボタンをクリックして何らかの操作を行った場合、その状態を保存できるのです。
具体的な例としては、st.session_state['button_click_count'] = 0で初期状態を設定し、ボタンがクリックされたらst.session_state['button_click_count'] += 1としてカウントを増やすなどの加算処理に利用できます。
このように、st.session_stateとボタンを組み合わせることで、少し複雑なアプリケーションの作成が可能です。
ボタンでデータ可視化を行う
ボタンを用いデータ可視化を行え、ダッシュボード作成に利用できます。
例えば、ユーザーが「表示」ボタンをクリックしたら特定のグラフを表示する、といった操作が簡単に実装できます。
具体的なコードは以下の通りです。
if st.button('表示'):
st.line_chart(data)dataにはあなたが表示したいデータフレームなどを格納しておくだけで、上記のコードだと折れ線グラフが出力されます。
他のグラフの表示の関数を用いることで、棒グラフなどの出力も可能です。
ボタンを使ったフォームの送信
Streamlitでフォームを作成し、その送信をボタンで制御する方法について説明します。
st.formという関数を使ってフォームを作成し、その中にst.form_submit_buttonを配置することで、フォームの送信ボタンとなります。
st.button関数とは少し異なるので、注意が必要です！
このst.form_submit_buttonは、フォーム内の全ての入力が完了した後にクリックすると、フォームに入力されたデータを送信されます。
例えば、ユーザーがテキストボックスに何かを入力し、その後で送信ボタンをクリックすれば、その入力データを後の処理で使用できます。
この機能は、ユーザーが複数の入力を一度に送信する必要がある場合に便利です。
アプリのリフレッシュ（クリア）
st.experimental_rerun関数を使えば、ボタンがクリックされたときにアプリをリフレッシュすることができます。
例えば、今表示しているデータではなく、新しいデータを読み込みたい場合に非常に便利です。
また、ユーザーの入力をクリアしたい場合にも使われます。
このように、Streamlitのボタンは基本的なイベント処理から少し特殊なものまで、多くの機能を提供しています。
Streamlitを深く学びたい人には『爆速で5つのPython Webアプリを開発』の講座がおすすめです！
＼5つのアプリをStreamlitで作成できるようになる！／
ユーザーエクスペリエンスを高めるボタン（button）の使い方
ここでは、応用編としてユーザーエクスペリエンス（体験）を高めるボタンの使い方について解説していきます。
主な使い方は4つです。
- ボタンのデザインカスタマイズ
- ボタンでページ遷移を行う
- ボタンを使ったダッシュボード作成
- ボタンと他のウィジェットとの連携
それぞれの機能がアプリにとって必須の機能ですので、ぜひ参考にしてみてください。
ボタンのデザインカスタマイズ
Streamlitは基本的にはシンプルなデザインが多いですが、少し工夫することで見た目を変えられます。
例えば、Streamlitのst.markdown関数を使って、HTMLとCSSを直接記述することで、ボタンの色や形を変更することができます。
上記方法は少し手間がかかりますが、ユーザーエクスペリエンスを向上させるためには有用です。
また、以下の外部のCSSフレームワークを利用することで、ユーザーエクスペリエンスをより向上させられます。
- Bootstrap
- Tailwind CSS
上記のフレームワークは、世界的に有名でより洗練されたデザインを実現できます。
ボタンでページ遷移を行う
Streamlitのボタンを使ってページ遷移させる方法もあります。
Streamlitでページ遷移を行うための方法は以下の2つです。
- タブでページ遷移
- ボタンでページ遷移
タブでの遷移も良く使われますが、ボタンでページ遷移できることもアプリにとっては必要です。
予約アプリなどでは、予約ボタンを押すと予約画面に飛べるなどの機能を実装しなくてはなりません。
Streamlitでは、FastAPIというアプリと組み合わせて、ページ遷移を実装することが多いです。
もし、FastAPIについて良く知らないという方は、以下のUdemyの講座にてFastAPIとStreamlitを用いたアプリ開発を学べます。
もし、本格的なアプリを開発したい...と考えている方は、以下のボタンをクリックの上、ご確認ください。
ボタンを使ったダッシュボード作成
Streamlitボタンを使うことで、動的な（ユーザーが行動する）ダッシュボードを作成できます。
ダッシュボードはデータを視覚的に表示するためのツールのことであり、Streamlitはダッシュボードの作成に利用されています。
例えば、ボタンをクリックすることでダッシュボード上のグラフや表が更新されるように設定すると、リアルタイムでデータを分析する際の効率が大幅に向上します。
ボタンと他のウィジェットとの連携
Streamlitは多くのウィジェットがあり、ボタンを組み合わせることで、より便利なアプリを作成できます。
例えば、スライダーで設定した値をボタンで確定させたり、テキストボックスに入力した値をボタンで送信したりといった組み合わせ方があります。
このように、ボタンは単体で使うだけでなく、他のウィジェットと連携させることで、便利なアプリを作成できるのです。
まとめ
この記事では、Streamlitでのボタン作成から応用までを網羅的に解説しました。
ボタンはアプリを開発する中で必ず必要であり、詳しく学んでおく必要があります。
Streamlitでは大きく3つのボタンを扱えます。
- 普通のボタン(button)
- ファイルのダウンロードボタン(download_button)
- リンクに飛べるボタン(link_button)
また、上記のボタンを用いることで、以下のような操作をアプリ内で行えます。
- st.session_stateを使った状態管理
- ボタンでデータ可視化を行う
- ボタンを使ったフォームの送信
- アプリのリフレッシュ（クリア）
さらに、ユーザー体験の観点からは、以下のことを行うのに向いています。
- ボタンのデザインカスタマイズ
- ボタンでページ遷移を行う
- ボタンを使ったダッシュボード作成
- ボタンと他のウィジェットとの連携
Streamlitはその使いやすさから多くのデータサイエンス初学者にも愛されていますが、その中でもボタンは非常に重要な要素です。
この記事を参考に、是非とも次のプロジェクトでStreamlitのボタン機能をフル活用して、より使いやすく、より機能的なアプリケーションを作成してください。
StreamlitだけでWebアプリを開発するのに限界を感じていませんか？
HTMLやCSSを書かなくていいのがStreamlitの利点ですが、Streamlitだけだとアプリ開発は難しいですよね。
そんなあなたにおすすめしたいUdemyの講座が「FastAPIによるWeb API開発講座」です。
- フロントエンド：Streamlit
- バックエンド：FastAPI
- データベース：SQLAlchemy
以上のフレームワークを用いて予約アプリを作れるようになります。
Webアプリを一切開発をしたことがない僕でも簡単に理解できました！
Streamlitに限界を感じている人は、ぜひ受講してStreamlitマスターになりましょう。
＼Streamlitの開発がさらに容易に！／
