Streamlit 3時間デプロイガイド

攻略法

Streamlit 3時間デプロイガイド

DDASH Hacksの運営協力をしているCraftStadiumの山本です。
本記事では、DDASH Hacksに臨むにあたって役立つ情報を共有します。
なお、本内容は教員や審査員による公式な見解、または監修を受けたものではありません。

この記事の3行まとめ

  • StreamlitはPythonだけでWebアプリが作れるフレームワーク。HTML/CSS/JavaScriptの知識は一切不要です
  • 「Google Colab + pandasデータ分析入門 (外部リンク)」で作ったpandas + Plotlyの分析結果を、インタラクティブなダッシュボードに変換できます
  • Streamlit Community Cloudを使えば、無料でインターネット上にアプリを公開できます

この記事のゴール

Before： pandasとPlotlyでグラフは作れるけど、Colabのノートブックのままで見せ方がイマイチ…

After： 審査員がURLをクリックするだけで、インタラクティブに操作できるWebダッシュボードが見られる状態

具体的には、以下を3時間で完成させます：

時間やること成果物
0〜30分Streamlitの基本を理解するHello Worldアプリ
30〜90分分析結果をダッシュボードに組み込む完成版ダッシュボード
90〜120分デザインを整える見栄えの良いアプリ
120〜180分Streamlit Community Cloudにデプロイ公開URL

📌 前提： この記事は「Google Colab + pandasデータ分析入門 (外部リンク)」を完了していることを前提としています。pandasやPlotlyの基本が不安な方は、先にそちらを読んでください。

1. Streamlitとは（5分で理解）

一言でいうと

「Pythonのスクリプトを書くだけで、Webアプリが自動的にできあがるフレームワーク」です。

普通のWebアプリ開発では、Python（バックエンド）に加えてHTML/CSS/JavaScript（フロントエンド）の知識が必要です。Streamlitを使うと、Pythonだけで以下のようなものが作れます：

  • インタラクティブなデータダッシュボード
  • データ分析ツール（フィルタやグラフを操作できる）
  • 機械学習のデモアプリ
  • CSVアップロード → 自動分析アプリ

なぜDDASH HacksでStreamlitがおすすめなのか

  • 「Google Colab + pandasデータ分析入門 (外部リンク)」で書いたpandas + Plotlyのコードがほぼそのまま使える。学習コストが最小限
  • st.plotly_chart() でPlotlyのインタラクティブ機能がそのまま動く。ホバー、ズーム、選択など
  • 審査員に「URLを共有するだけ」でデモができる。パワポにURLを貼ればOK
  • デプロイが無料。Streamlit Community Cloudなら1円もかかりません

Google ColabとStreamlitの違い

項目Google ColabStreamlit
用途データ分析・試行錯誤成果物として見せる
操作する人自分（開発者）誰でも（ユーザー）
見た目ノートブック形式Webアプリ形式
共有方法Colabリンク共有URLを開くだけ
インタラクティブ性コードを実行する必要ありボタン・スライダーで操作

つまり：Colabは「分析する場所」、Streamlitは「分析結果を見せる場所」 です。

2. 環境を準備する（10分）

Google Colabで動かす場合（最も簡単）

実は、Google Colab上でもStreamlitを動かすことができます。ハッカソン中のプロトタイピングにはこの方法が最速です：

# Streamlitのインストール（Colabにはプリインストールされていない）
!pip install -q streamlit

次に、Colabのセルにアプリのコードを書き出して実行します：

%%writefile app.py
import streamlit as st
import pandas as pd
import plotly.express as px

st.title("🎯 DDASH Hacks 2025 ダッシュボード")

st.write("Streamlitで作ったはじめてのWebアプリです！")


サンプルデータ


data = {

"都道府県": ["北海道", "東京都", "愛知県", "大阪府", "京都府", "福岡県", "沖縄県"],

"人口（万人）": [522, 1404, 748, 884, 258, 513, 147],

"面積（km²）": [83424, 2194, 5173, 1905, 4612, 4987, 2283],

"地方": ["北海道", "関東", "中部", "近畿", "近畿", "九州", "九州"]

}

df = pd.DataFrame(data)


st.dataframe(df)


fig = px.bar(df, x="都道府県", y="人口（万人）", color="地方", title="都道府県別人口")

st.plotly_chart(fig, use_container_width=True)

アプリを起動してブラウザからアクセスできるようにします：

# Streamlitアプリを起動（バックグラウンドで実行）
!streamlit run app.py &>/content/logs.txt &

少し待ってからlocaltunnelでトンネルを作成


!npm install -g localtunnel

import time

time.sleep(3)

!lt --port 8501

表示されたURLをクリックすると、Streamlitアプリが開きます。

⚠️ localtunnelが接続できない場合： localtunnelはサーバー側の問題で接続が不安定になることがあります。「connection refused」やページが表示されない場合は、以下の代替手段を試してください：

# 代替：cloudflaredを使う方法
!wget -q https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64 -O cloudflared
!chmod +x cloudflared
!./cloudflared tunnel --url http://localhost:8501 &

それでもうまくいかない場合は、ngrokを使う方法もあります。詳しくは「ngrokの使い方 - デプロイが間に合わなかった時の最終手段 (外部リンク)」を参照してください。

⚠️ 注意： Colab上でのStreamlit実行はあくまでプロトタイプ確認用です。本番デプロイにはセクション5の「Streamlit Community Cloud」を使ってください。

ローカルPCで動かす場合

自分のパソコンで開発する場合は、以下の手順です：

① Pythonがインストールされているか確認

ターミナル（Windows: PowerShell / Mac: Terminal）を開いて：

python --version
# → Python 3.10以上が表示されればOK

Pythonが入っていない場合は python.org (外部リンク) からインストールしてください。

② Streamlitのインストール

pip install streamlit pandas plotly

③ 動作確認

streamlit hello

ブラウザが自動で開いて、Streamlitのデモアプリが表示されれば成功です。

📌 Windows / Macどちらでも同じ手順です。 Streamlitはクロスプラットフォーム対応なので、OSの違いを気にする必要はありません。

3. Streamlitの基本構文を覚える（20分）

最初のアプリを作る

テキストエディタ（VS Code推奨）で app.py というファイルを作り、以下を書きます：

import streamlit as st

st.title("🎯 DDASH Hacks 2025 ダッシュボード")

st.write("はじめてのStreamlitアプリです！")

ターミナルで以下を実行：

streamlit run app.py

ブラウザに「DDASH Hacks 2025 ダッシュボード」と表示されたら成功です！

💡 ポイント： app.py を保存するたびに、ブラウザ右上に「Rerun」ボタンが出ます。クリックすると変更が即座に反映されます。「Always rerun」を選ぶと保存するだけで自動更新されて便利です。

テキスト表示

st.title("タイトル")          # 大見出し
st.header("ヘッダー")         # 中見出し
st.subheader("サブヘッダー")  # 小見出し
st.write("普通のテキスト")    # 汎用的なテキスト表示
st.caption("キャプション")    # 小さな注釈テキスト
st.markdown("**太字**や*斜体*も使えます")  # Markdown記法

データの表示

import pandas as pd

df = pd.DataFrame({

"都道府県": ["東京都", "大阪府", "京都府"],

"人口（万人）": [1404, 884, 258]

})


表形式で表示（ソート・検索機能付き）


st.dataframe(df)


静的な表（シンプルに見せたいとき）


st.table(df)


数値を大きく表示（KPI表示に便利）


st.metric(label="総人口", value="2,546万人", delta="-2.3%")

グラフの表示（Plotly連携）

「Google Colab + pandasデータ分析入門 (外部リンク)」で作ったPlotlyのグラフが、1行追加するだけでStreamlit上に表示できます：

import plotly.express as px

fig = px.bar(df, x="都道府県", y="人口（万人）", title="都道府県別人口")


これだけ！ Plotlyのインタラクティブ機能もそのまま動く


st.plotly_chart(fig, use_container_width=True)

💡 ポイント： use_container_width=True を付けると、グラフがアプリの横幅いっぱいに広がります。付けないと小さめに表示されることがあります。

ユーザー入力（インタラクティブ機能の核）

Streamlitの最大の強みは「ユーザーが操作できるUI部品」を簡単に追加できることです：

# ドロップダウンメニュー
selected = st.selectbox("地方を選択", ["全国", "北海道", "関東", "中部", "近畿", "九州"])

複数選択


selected_list = st.multiselect("表示する都道府県", df["都道府県"].tolist(), default=df["都道府県"].tolist())


スライダー


min_pop = st.slider("人口の下限（万人）", 0, 1500, 100)


テキスト入力


keyword = st.text_input("キーワードで検索")


チェックボックス


show_data = st.checkbox("生データを表示する", value=False)


ファイルアップロード


uploaded_file = st.file_uploader("CSVファイルをアップロード", type=["csv"])

⚠️ Streamlitの重要な仕組み： ユーザーがUI部品を操作するたびに、Pythonスクリプト全体が上から下まで再実行されます。これがStreamlitの基本動作です。最初は戸惑うかもしれませんが、「スクリプトが毎回全部動く」と理解しておけばOKです。

4. ダッシュボードを作る（60分）

ここからが本番です。「Google Colab + pandasデータ分析入門 (外部リンク)」で使ったデータを使って、本格的なダッシュボードを作ります。

完成版コード

以下のコードを app.py にコピペしてください。これがそのまま動く完成版です：

import streamlit as st
import pandas as pd
import plotly.express as px

============================================


ページ設定（必ず最初に書く）


============================================


st.set_page_config(

page_title="DDASH Hacks 2025 データダッシュボード",

page_icon="📊",

layout="wide",  # ワイドレイアウト

)


============================================


タイトル


============================================


st.title("📊 都道府県データダッシュボード")

st.caption("DDASH Hacks 2025 — データを活用し社会をより良くするサービスを提案する")


============================================


データ準備


============================================


@st.cache_data  # データをキャッシュして高速化

def load_data():

data = {

"都道府県": ["北海道", "東京都", "愛知県", "大阪府", "京都府", "福岡県", "沖縄県"],

"人口（万人）": [522, 1404, 748, 884, 258, 513, 147],

"面積（km²）": [83424, 2194, 5173, 1905, 4612, 4987, 2283],

"地方": ["北海道", "関東", "中部", "近畿", "近畿", "九州", "九州"]

}

df = pd.DataFrame(data)

df["人口密度（人/km²）"] = (df["人口（万人）"] * 10000 / df["面積（km²）"]).round(1)

return df


df = load_data()


============================================


サイドバー（フィルタ機能）


============================================


with st.sidebar:

st.header("🔍 フィルタ")


# 地方でフィルタ
regions = st.multiselect(
    "地方を選択",
    options=df["地方"].unique(),
    default=df["地方"].unique()
)

# 人口でフィルタ
min_pop, max_pop = st.slider(
    "人口の範囲（万人）",
    min_value=0,
    max_value=1500,
    value=(0, 1500)
)

st.divider()
st.caption("データ出典：総務省統計局")



フィルタを適用


filtered_df = df[

(df["地方"].isin(regions)) &

(df["人口（万人）"] >= min_pop) &

(df["人口（万人）"] <= max_pop)

]


============================================


KPI（数値ハイライト）


============================================


col1, col2, col3, col4 = st.columns(4)

col1.metric("対象都道府県数", f"{len(filtered_df)}")

col2.metric("総人口", f"{filtered_df['人口（万人）'].sum():,}万人")

col3.metric("平均人口密度", f"{filtered_df['人口密度（人/km²）'].mean():.0f}人/km²")

col4.metric("最大人口", f"{filtered_df['人口（万人）'].max():,}万人")


st.divider()


============================================


グラフ（タブで切り替え）


============================================


tab1, tab2, tab3 = st.tabs(["📊 棒グラフ", "🔵 散布図", "🥧 円グラフ"])


with tab1:

fig_bar = px.bar(

filtered_df.sort_values("人口（万人）", ascending=True),

x="人口（万人）",

y="都道府県",

color="地方",

orientation="h",

title="都道府県別人口",

text="人口（万人）",

color_discrete_sequence=px.colors.qualitative.Set2

)

fig_bar.update_layout(height=400, plot_bgcolor="white")

st.plotly_chart(fig_bar, use_container_width=True)


with tab2:

fig_scatter = px.scatter(

filtered_df,

x="面積（km²）",

y="人口（万人）",

size="人口密度（人/km²）",

color="地方",

hover_name="都道府県",

title="面積 vs 人口（バブルサイズ＝人口密度）",

color_discrete_sequence=px.colors.qualitative.Set2

)

fig_scatter.update_layout(height=400, plot_bgcolor="white")

st.plotly_chart(fig_scatter, use_container_width=True)


with tab3:

fig_pie = px.pie(

filtered_df,

values="人口（万人）",

names="都道府県",

title="人口の割合",

color_discrete_sequence=px.colors.qualitative.Set2

)

fig_pie.update_layout(height=400)

st.plotly_chart(fig_pie, use_container_width=True)


============================================


データテーブル（折りたたみ）


============================================


with st.expander("📋 生データを表示"):

st.dataframe(filtered_df, use_container_width=True)


# CSVダウンロードボタン
csv = filtered_df.to_csv(index=False).encode(&quot;utf-8-sig&quot;)
st.download_button(
    label=&quot;📥 CSVダウンロード&quot;,
    data=csv,
    file_name=&quot;filtered_data.csv&quot;,
    mime=&quot;text/csv&quot;
)

コードのポイント解説

① st.set_page_config() は必ず最初に書く

ページタイトル、アイコン、レイアウトの設定です。layout="wide" にするとワイド表示になり、ダッシュボード向きになります。この関数はスクリプトの一番最初（importの直後）に書く必要があります。

② @st.cache_data でデータをキャッシュ

Streamlitは操作のたびにスクリプト全体を再実行しますが、@st.cache_data を付けた関数は初回だけ実行され、2回目以降はキャッシュされた結果を返します。データの読み込みやAPIコールなど、重い処理に付けましょう。

@st.cache_data
def load_data():
    # この中の処理は初回だけ実行される
    df = pd.read_csv("big_data.csv")
    return df

③ st.sidebar でフィルタをサイドバーに配置

with st.sidebar: ブロックの中に書いたUI部品は、左側のサイドバーに表示されます。フィルタやオプションをサイドバーに入れると、メインエリアが広く使えます。

④ st.columns() で横並びレイアウト

st.columns(4) で4列のレイアウトを作り、KPI（重要指標）を横に並べています。数字を引数に渡すと等幅になりますが、st.columns([3, 1]) のようにリストを渡すと幅を指定できます。

⑤ st.tabs() でグラフをタブ切り替え

複数のグラフをタブで整理できます。ページが縦に長くなりすぎるのを防げます。

5. デプロイする（60分）

作ったアプリを世界中からアクセスできるようにしましょう。Streamlit Community Cloudを使えば、完全無料でデプロイできます。

必要なもの

  • GitHubアカウント（無料）
  • Streamlit Community Cloudアカウント（無料・GitHubで登録）

📌 GitHubアカウントをまだ持っていない方は： 「GitHub Education 申請ガイド (外部リンク)」を参照してください。学生なら無料でGitHub Proが使えます。

Step 1：GitHubにリポジトリを作成

  1. github.com (外部リンク) にログイン
  2. 右上の「+」→「New repository」をクリック
  3. リポジトリ名を入力（例：ddash-hacks-dashboard）
  4. 「Public」を選択（Community Cloudの無料プランではPublicリポジトリが必要）
  5. 「Add a README file」にチェック
  6. 「Create repository」をクリック

Step 2：必要なファイルをアップロード

リポジトリに以下の3つのファイルをアップロードします：

① app.py（アプリ本体）

セクション4で作ったコードがそのまま app.py です。

② requirements.txt（使用ライブラリの一覧）

streamlit
pandas
plotly
requests

💡 ポイント： requirements.txt はStreamlit Community Cloudが「どのライブラリをインストールすればいいか」を知るための設定ファイルです。app.py の中で import しているライブラリを書き出してください。ただし、json、io など Python標準ライブラリは書く必要はありません。

③ .streamlit/config.toml（テーマ設定・任意）

アプリの見た目をカスタマイズしたい場合に作成します。なくても動きます：

[theme]
primaryColor = "#4F8BF9"
backgroundColor = "#FFFFFF"
secondaryBackgroundColor = "#F0F2F6"
textColor = "#262730"
font = "sans serif"

ファイルのアップロード方法：

GitHub上で「Add file」→「Upload files」からドラッグ&ドロップでアップロードできます。ただし .streamlit/config.toml のようにフォルダの中にファイルを作る場合は、「Add file」→「Create new file」を選び、ファイル名に .streamlit/config.toml と入力するとフォルダが自動的に作られます。

最終的なリポジトリの構成：

ddash-hacks-dashboard/
├── app.py                    ← アプリ本体
├── requirements.txt          ← ライブラリ一覧
├── .streamlit/
│   └── config.toml          ← テーマ設定（任意）
├── data/                     ← CSVデータ（任意）
│   └── population.csv
└── README.md

Step 3：Streamlit Community Cloudにデプロイ

  1. share.streamlit.io (外部リンク) にアクセス
  2. 「Continue with GitHub」でGitHubアカウントと連携してログイン
  3. 右上の 「Create app」 をクリック
  4. 以下を入力：
    • Repository： 先ほど作ったリポジトリを選択（例：your-username/ddash-hacks-dashboard）
    • Branch： main
    • Main file path： app.py
    • App URL（任意）： 好きなサブドメインを入力（例：ddash-hacks-demo）
  5. 「Deploy!」 をクリック

数分待つと、アプリが公開されます。URLは以下のような形式です：

https://ddash-hacks-demo.streamlit.app/

このURLをパワポに貼ったり、審査員に共有するだけでデモができます！

デプロイ時のよくあるエラーと対処法

エラー原因対処法
ModuleNotFoundErrorrequirements.txt にライブラリが書かれていないrequirements.txt にライブラリ名を追加
FileNotFoundErrorCSVなどのデータファイルがリポジトリにないデータファイルもGitHubにアップロードする
アプリが表示されないapp.py のパスが間違っているデプロイ設定の「Main file path」を確認
日本語が文字化けCSVの読み込み時にencodingが指定されていないpd.read_csv("data.csv", encoding="utf-8-sig")

知っておくべき制限事項

  • スリープ： 約1時間アクセスがないとアプリがスリープ状態になります。再アクセスすると自動で起動しますが、起動に30秒〜1分程度かかります
  • リソース上限： 無料プランではメモリ1GB程度。巨大なデータセットの読み込みには注意
  • 秘密情報： APIキーなどはコードに直接書かず、Streamlit Community Cloudの「Secrets」機能を使ってください

6. デザインを整える

カラーテーマの変更

.streamlit/config.toml でアプリ全体の色を変更できます。いくつかのおすすめテーマを紹介します：

同志社カラー（パープル系）

[theme]
primaryColor = "#6A1B9A"
backgroundColor = "#FFFFFF"
secondaryBackgroundColor = "#F3E5F5"
textColor = "#1A1A2E"
font = "sans serif"

クールブルー系

[theme]
primaryColor = "#1E88E5"
backgroundColor = "#FFFFFF"
secondaryBackgroundColor = "#E3F2FD"
textColor = "#0D1B2A"
font = "sans serif"

ダークモード

[theme]
primaryColor = "#FF6B6B"
backgroundColor = "#0E1117"
secondaryBackgroundColor = "#262730"
textColor = "#FAFAFA"
font = "sans serif"

レイアウトのTips

2カラムレイアウト（左にグラフ、右に説明）

col_chart, col_text = st.columns([2, 1])

with col_chart:

st.plotly_chart(fig, use_container_width=True)


with col_text:

st.subheader("分析結果")

st.write("東京都の人口は他の都道府県と比較して突出しており...")

KPIカード風のデザイン

# st.metric を columns と組み合わせると、KPIカード風になる
col1, col2, col3 = st.columns(3)
col1.metric("総人口", "4,476万人", "-1.2%")
col2.metric("平均人口密度", "2,841人/km²", "+0.3%")
col3.metric("対象地域数", "7", "")

自作CSVを使う場合のコード変更

セクション4の完成版コードでは、データを直接コード内に書いていました。自分のCSVデータを使う場合は、load_data() 関数を以下のように変更してください：

@st.cache_data
def load_data():
    # GitHubリポジトリの data/ フォルダからCSVを読み込む
    df = pd.read_csv("data/your_data.csv", encoding="utf-8-sig")
    return df

CSVファイルはGitHubリポジトリの data/ フォルダにアップロードしてください。

ファイルアップロード機能を追加する

ユーザーが自分のCSVをアップロードして分析できるようにすると、審査員への印象がグッと上がります：

st.sidebar.divider()
st.sidebar.subheader("📁 カスタムデータ")
uploaded_file = st.sidebar.file_uploader("CSVをアップロード", type=["csv"])

if uploaded_file is not None:

# アップロードされたファイルを読み込む

try:

df = pd.read_csv(uploaded_file, encoding="utf-8-sig")

except UnicodeDecodeError:

df = pd.read_csv(uploaded_file, encoding="shift_jis")

st.success("✅ データを読み込みました！")

else:

df = load_data()  # デフォルトデータを使用

7. 応用：気象庁APIとの連携

「Google Colab + pandasデータ分析入門 (外部リンク)」で学んだ気象庁APIを、Streamlitアプリに組み込む例です：

import requests

st.header("🌤 リアルタイム天気予報")


地域を選択


area_options = {

"京都府": "260000",

"大阪府": "270000",

"東京都": "130000",

"愛知県": "230000",

"福岡県": "400000"

}


selected_area = st.selectbox("地域を選択", list(area_options.keys()))

area_code = area_options[selected_area]


APIからデータを取得


@st.cache_data(ttl=3600)  # 1時間キャッシュ（APIへの負荷を軽減）

def fetch_weather(code):

url = f"https://www.jma.go.jp/bosai/forecast/data/forecast/{code}.json (外部リンク)"

response = requests.get(url)

if response.status_code == 200:

return response.json()

return None


forecast = fetch_weather(area_code)


if forecast:

time_series = forecast[0]["timeSeries"][0]

areas_data = time_series["areas"]

times = time_series["timeDefines"]


for area in areas_data:
    st.subheader(f&quot;📍 {area['area']['name']}&quot;)
    weathers = area.get(&quot;weathers&quot;, [])
    for i, time_str in enumerate(times):
        if i &lt; len(weathers):
            st.write(f&quot;**{time_str[:10]}** : {weathers[i]}&quot;)



else:

st.error("天気データの取得に失敗しました")

💡 ポイント： @st.cache_data(ttl=3600) の ttl=3600 は「3600秒（1時間）キャッシュを保持する」という意味です。これにより、同じ地域の天気予報を何度も取得するのを防ぎ、APIへの負荷を減らせます。

8. ハッカソンでの実践Tips

チーム内での役割分担

Streamlitアプリは以下のように分担できます：

役割担当するもの
データ分析担当pandasでデータ加工、Plotlyでグラフ作成（「Google Colab + pandasデータ分析入門 (外部リンク)」の内容）
アプリ担当Streamlitのレイアウト、UI部品、デプロイ（この記事）
デザイン担当テーマ設定、パワポ作成

📌 全員がPythonを書ける必要はありません。 データ分析担当が作ったDataFrameとPlotlyグラフを、アプリ担当が st.dataframe() と st.plotly_chart() で表示するだけでOKです。

デバッグのコツ

# デバッグ用：変数の中身を確認
st.write("デバッグ:", df.head())    # DataFrameの表示
st.write("型:", type(df))           # 型の確認
st.json({"key": "value"})           # JSON表示

開発が終わったらデバッグ用のコードは削除するか、以下のようにフラグで制御してください：

DEBUG = False  # デプロイ時は False に変更

if DEBUG:

st.write("デバッグ:", df.head())

パワポとの連携方法

審査ではパワポが提出物なので、Streamlitアプリの存在をパワポ内で効果的にアピールしましょう：

  • スライドにURLを記載： https://your-app.streamlit.app/ をQRコードにして貼る
  • スクリーンショットを貼る： アプリの画面をキャプチャしてスライドに配置
  • 操作動画を録画： 画面録画でアプリを操作している様子を撮影し、パワポに埋め込む

Streamlitアプリを「データ活用」として評価されるために

アプリが動くだけでは「データ活用」とは評価されません。審査員に伝えるべきは、データがそのアプリにとって不可欠である理由です。

Streamlit組は特にパターンB（データで「動く」を作る） と相性が良いです。アプリの中でデータがどう使われているか——入力→処理→出力の流れをパワポで明示しましょう。

  • ✅ 「気象データをAPIで取得し、地域×時間帯の最適な観光ルートを自動提案する」→ データがなければ機能しない
  • ❌ 「観光スポットの一覧をStreamlitで表示する」→ データがなくても成り立つ

考察の進め方の詳細は「Google Colab + pandasデータ分析入門 (外部リンク)」のセクション6を参照してください。

まとめ：この記事で学んだこと

セクション学んだこと所要時間
1. StreamlitとはWebアプリフレームワークの概要5分
2. 環境準備Colab or ローカルでの実行方法10分
3. 基本構文テキスト、データ、グラフ、ユーザー入力20分
4. ダッシュボードフィルタ・タブ・KPI付きの完成版60分
5. デプロイGitHub + Community Cloud で公開60分
6. デザインテーマ・レイアウト・応用機能15分
7. API連携気象庁APIとの組み合わせ10分
合計約3時間

よく使うStreamlitコマンド早見表

やりたいことコマンド
タイトル表示st.title("テキスト")
テキスト表示st.write("テキスト")
DataFrame表示st.dataframe(df)
Plotlyグラフ表示st.plotly_chart(fig, use_container_width=True)
KPI表示st.metric("ラベル", "値", "変化量")
ドロップダウンst.selectbox("ラベル", ["A", "B"])
複数選択st.multiselect("ラベル", ["A", "B"])
スライダーst.slider("ラベル", 0, 100, 50)
チェックボックスst.checkbox("ラベル")
ファイルアップロードst.file_uploader("ラベル", type=["csv"])
ダウンロードボタンst.download_button("ラベル", data, "file.csv")
サイドバーwith st.sidebar:
カラムレイアウトcol1, col2 = st.columns(2)
タブtab1, tab2 = st.tabs(["タブ1", "タブ2"])
折りたたみwith st.expander("ラベル"):
区切り線st.divider()
データキャッシュ@st.cache_data
成功メッセージst.success("成功！")
エラーメッセージst.error("エラー！")

次に読む記事

既存記事（今すぐ読める）

目次

  • この記事の3行まとめ
  • この記事のゴール
  • 1. Streamlitとは（5分で理解）
  • 2. 環境を準備する（10分）
  • 3. Streamlitの基本構文を覚える（20分）
  • 4. ダッシュボードを作る（60分）
  • 5. デプロイする（60分）
  • 6. デザインを整える
  • 7. 応用：気象庁APIとの連携
  • 8. ハッカソンでの実践Tips
  • まとめ：この記事で学んだこと
  • よく使うStreamlitコマンド早見表
  • 次に読む記事
    • このブログをはてなブックマークに追加

    Shin Yamamoto

    関連する記事 - 攻略法