今回のゴール
Streamlitで、文字や画像、ボタンを使ったシンプルな画面を作ってみよう。
VS Codeを使って、1行ずつコードの意味を理解しながら進めます。
◾️ 前回のおさらい
前回は、次のような流れで「最初のアプリ」を作りました。
Python
import streamlit as st
st.title("はじめてのStreamlitアプリ")
st.write("これはPythonで作ったWebアプリです。")
if st.button("押してみる"):
st.write("ボタンが押されました！🎉")
ターミナルで
Python
streamlit run app.py
と入力すると、ブラウザが開きましたね。
今回はここからさらに一歩進んで、「テキスト」「画像」「ボタン」を活用していきます。
◾️ Step 1：テキストを表示してみよう
まずは文字の表示です。st.write() 以外にも、いくつか便利な表示関数があります。
🔹 コード例
Python
import streamlit as st
st.title("Streamlitでテキストを表示しよう")
st.header("これは見出しです")
st.subheader("これは小さな見出しです")
st.text("これは普通のテキストです。")
st.markdown("**これは太字のテキストです。**")
💬 解説
| コード | 内容 |
|---|---|
st.title() | ページのタイトル（大きな文字）を表示します。 |
st.header() | 中くらいの見出し。セクションタイトルに便利。 |
st.subheader() | さらに小さな見出し。小テーマに使えます。 |
st.text() | シンプルなテキストをそのまま表示。 |
st.markdown() | Markdown記法（太字・リンク・リストなど）を使って装飾できます。 |
◾️ Step 2：画像を表示してみよう
画像を表示するには st.image() を使います。
ファイル名やURLを指定するだけで簡単に表示できます。
🔹 コード例
Python
import streamlit as st
st.title("画像を表示してみよう")
st.image("sample.jpg", caption="サンプル画像", use_column_width=True)
💬 解説
| コード | 意味 |
|---|---|
"sample.jpg" | 画像ファイルのパス。VS Codeの同じフォルダに置いておきましょう。 |
caption | 画像の下に表示する説明文。 |
use_column_width=True | 画像をページ幅に合わせて自動調整します。 |
💡ヒント：
もし画像をインターネット上のURLから表示したい場合は、st.image("https://example.com/photo.jpg") のように書くだけです。
◾️ Step 3：ボタンを使って動きをつけよう
次に、ボタンを押したときにメッセージを変える処理を追加してみます。
🔹 コード例
Python
import streamlit as st
st.title("ボタンで反応するアプリ")
if st.button("押してみる"):
st.write("ボタンが押されました！🎉")
else:
st.write("まだ押されていません。")
💬 解説
| コード | 内容 |
|---|---|
st.button("押してみる") | ボタンを作成します。 |
if ...: | Pythonの条件分岐。「押されたらTrueになる」仕組みです。 |
st.write() | 押した／押していない状態で表示を切り替えています。 |
ボタンを押すたびにページが再描画され、状態が変わります。
このように、Streamlitは「イベントに応じて動く」のが特徴です。
◾️ Step 4：複数の要素を組み合わせてみよう
それでは、テキスト＋画像＋ボタンを組み合わせた
小さな“アプリ風ページ”を作ってみましょう。
🔹 コード全体
Python
import streamlit as st
st.title("Streamlitでミニアプリを作ろう")
st.write("こんにちは！Streamlitを使ってブラウザ上でアプリを作っています。")
st.image("sample.jpg", caption="これは表示中の画像です。", use_column_width=True)
if st.button("画像を切り替える"):
st.image("sample2.jpg", caption="別の画像が表示されました！", use_column_width=True)
💬 ここでは、ボタンを押すと画像が変わる仕組みを作っています。
ボタンが押された瞬間に条件分岐（if）がTrueになり、別の画像を表示する流れです。
◾️ VS Codeで実行する手順（おさらい）
- VS Codeで
app.pyを保存する - 下のターミナルを開く
- 次を入力してEnter：
Python
streamlit run app.py
- ブラウザが開いたら、テキスト・画像・ボタンの表示を確認！
◾️ ここまでのまとめ
| 学んだこと | 内容 |
|---|---|
st.title(), st.text(), st.markdown() | テキストの表示方法 |
st.image() | 画像の表示 |
st.button() | ユーザーの操作を受け取る |
条件分岐 if | 押した・押していないで動作を変える |
streamlit run app.py | VS Codeでアプリを実行するコマンド |
◾️ 次回は…
次回は 「ユーザーの入力を受け取ってみよう！」。st.text_input() や st.number_input() などを使って、
名前を入力したり、数値を受け取ったりする“インタラクティブなアプリ”を作ります。
Pythonで作ったプログラムが人の入力に反応する瞬間を体験してみましょう！
📘 まとめ
- Streamlitでは
st.title()などの関数で画面を作る。 - 画像もテキストもボタンもPythonコードで完結。
- VS Codeで書いて、
streamlit run app.pyで動かす。 - 次は“入力フォーム”で、アプリに会話力を加えよう！