MENU
＼ お問い合わせはこちら！ ／
  1. ホーム
  2. プログラミング
  3. Python
  4. 【15分で作る】爆速でStreamlitでTODOアプリを実装する方法

【15分で作る】爆速でStreamlitでTODOアプリを実装する方法

PR
Python
  • TODOアプリを爆速で作りたい！
  • できれば学習に時間はかけたくない…
  • Djangoなどのフレームワークにこだわらない

このような方に向けて書きました。

この記事では、以下の2パターンでTODOアプリを作ります。

シナリオゴール所要時間
ローカル環境だけで動かすrunコマンドですぐ確認5 〜 10 分
Docker 化して動かすどこでも “同じ環境” を再現10 〜 15 分

今回の開発は、以下の前提のもと行いました。

今回の前提
  • OS: macOS
  • Python 3.12 インストール済み（Docker版は不要）
Contents
  1. 普通に作る
  2. Dockerを使った方法
  3. まとめ

普通に作る

仮想環境を作って、その上にStreamlitアプリを構築する一般的な方法をご紹介します。

Pythonは「Download Python」からダウンロードして、インストールを済ませておきましょう。

Pythonの環境構築にもう少し手間をかけられる方は、「Pythonの環境構築をする方法」を参考にしてください。僕の構築方法をまとめました。

プロジェクトを作成する

streamlit-todo-appフォルダを作って、そこで開発を進めましょう。

必要なファイル群を用意する

先ほど作ったstreamlit-todo-appフォルダの中に、以下のファイルを用意しましょう。

  • requirements.txt
  • main.py

ファイルの内容は、この後に解説します。

requirements.txt

今回必要なライブラリ群は、requirements.txtに記載します。

streamlit=1.45
pandas=2.3
matplotlib=3.10
watchdog=6.0

上記のようにバージョンもある程度固定しておくと、バージョンアップで動かなくなってしまうこともなくなります。

main.py

main.pyには、Streamlitアプリのメイン部分を書いていきます。

from datetime import datetime

import streamlit as st

# ページ設定
st.set_page_config(page_title="My TODO", page_icon="✅")
st.title("📋 シンプル TODO アプリ")

# セッションステート初期化
if "todos" not in st.session_state:
    st.session_state.todos = []

# 入力フォーム
with st.form("add_todo", clear_on_submit=True):
    new_task = st.text_input("やることを追加")
    submitted = st.form_submit_button("追加")
    if submitted and new_task:
        st.session_state.todos.append(
            {"task": new_task, "done": False, "ts": datetime.now()}
        )
        st.rerun()

# 未完了タスク
st.subheader("🔸 未完了タスク")
for idx, item in enumerate(st.session_state.todos):
    if item["done"]:
        continue

    col1, col2 = st.columns([0.8, 0.2])
    col1.write(f"- {item['task']}")
    if col2.button("完了", key=f"done_{idx}"):
        st.session_state.todos[idx]["done"] = True
        st.rerun()  # 1クリックでリストから消える

# 完了タスク
st.subheader("✅ 完了タスク")
for item in st.session_state.todos:
    if item["done"]:
        ts = item["ts"].strftime("%Y-%m-%d %H:%M")
        st.write(f"- ~~{item['task']}~~  _({ts})_")

この段階ではまだStreamlitがインストールされていないので、import streamlit as stのところには黄色いニョロニョロが出ているはずです。

この後のライブラリインストールで解消されるので、いったんは無視していきましょう。

仮想環境を構築する

まずは仮想環境を構築します。

python -m venv venv

これにより、現在のフォルダ直下にvenvというフォルダが作られます。

続いて、作成した仮想環境に入りましょう。

source venv/bin/activate

venvなしでpip installコマンドは実行すると、OSの環境にライブラリがインストールされて複数バージョン管理が難しくなります。

venvを作ると、このプロジェクト専用の領域を作ってそこにライブラリのインストールができるようになるわけです。

コマンドが成功すると、先頭に(venv)の文字が表示されます。

続いて、先ほど作成したrequirements.txtに記載したライブラリをインストールしましょう。

以下のコマンドを実行します。

pip install -r requirements.txt

これでstreamlitなどのライブラリが仮想環境にインストールできました。

動作確認を行う

以下のコマンドを実行して、動作確認を行いましょう。

streamlit run main.py

次のような画面がブラウザで表示できていれば完成です。

作成したアプリをインターネット上に一般公開する方法

作成したTODOアプリは、インターネット上に公開することもできます。

方法については、「Streamlitで作成したTODOアプリを一般公開する方法」を参照してください。

Dockerを使った方法

手元のマシン上に直接アプリを構築するのではなく、新しく構築したDockerコンテナの中で実行する方法を解説します。

今回はPythonのインストールが不要な代わりに、「Docker Desktop」をダウンロードして、インストールしておいてください。

インストールしたDockerは、必ず起動しておきましょう。

必要なファイル群を用意する

Dockerを使う方法では、少しファイル数が増えます。

  • requirements.txt
  • main.py
  • Dockerfile
  • .dockerignore

それぞれのファイルの内容を解説します。

requirements.txt

必要なライブラリを記載することは、普通にアプリを作る方法と同じです。

streamlit=1.45
pandas=2.3
matplotlib=3.10
watchdog=6.0

main.py

main.pyも、普通に作る方法とまったく同じでOKです。

from datetime import datetime

import streamlit as st

# ページ設定
st.set_page_config(page_title="My TODO", page_icon="✅")
st.title("📋 シンプル TODO アプリ")

# セッションステート初期化
if "todos" not in st.session_state:
    st.session_state.todos = []

# 入力フォーム
with st.form("add_todo", clear_on_submit=True):
    new_task = st.text_input("やることを追加")
    submitted = st.form_submit_button("追加")
    if submitted and new_task:
        st.session_state.todos.append(
            {"task": new_task, "done": False, "ts": datetime.now()}
        )
        st.rerun()

# 未完了タスク
st.subheader("🔸 未完了タスク")
for idx, item in enumerate(st.session_state.todos):
    if item["done"]:
        continue

    col1, col2 = st.columns([0.8, 0.2])
    col1.write(f"- {item['task']}")
    if col2.button("完了", key=f"done_{idx}"):
        st.session_state.todos[idx]["done"] = True
        st.rerun()  # 1クリックでリストから消える

# 完了タスク
st.subheader("✅ 完了タスク")
for item in st.session_state.todos:
    if item["done"]:
        ts = item["ts"].strftime("%Y-%m-%d %H:%M")
        st.write(f"- ~~{item['task']}~~  _({ts})_")

Dockerfile

Dockerイメージを定義していきます。

# ベースイメージ
FROM python:3.12-slim AS base

# パッケージのインストール
RUN apt-get update && apt-get install -y \
    build-essential \
 && rm -rf /var/lib/apt/lists/*

# 作業ディレクトリ
WORKDIR /app

# ライブラリのインストール
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt

# アプリコピー
COPY . .

# ネットワーク公開
EXPOSE 8501

# 実行コマンド
CMD ["streamlit", "run", "main.py", "--server.port", "8501", "--server.address", "0.0.0.0"]

ファイル内に定義されている処理の流れは、大きく次のとおりです。

  • Python 3.12のイメージを作成
  • OSのパッケージのインストール
  • ライブラリをインストール
  • アプリをコンテナにコピー
  • アプリ起動

このスクリプトが最後まで実行されると、streamlit run main.pyが実行された状態になります。

ただ、この段階では指示書に当たるものができただけに過ぎません。実際にアプリを動かすには、この後の「Dockerコンテナのビルド & 実行」のコマンドが必要です。

.dockerignore

.dockerignoreファイルは、Dockerイメージに含めたくないファイル群を定義しておく除外リストです。

*.pyc
__pycache__/
venv/
.venv/
.git/

上記のように、不要なファイル群は.dockerignoreに放り込んでしまいましょう。

Dockerコンテナのビルド & 実行

まずはDockerイメージをビルドして、コンテナを作りましょう。

docker build -t todo-app .

作成したコンテナを実行するには、次のコマンドを実行します。

docker run --rm -p 8501:8501 todo-app

動作確認を行う

ブラウザでhttp://localhost:8501を開きましょう。

以下の画面が表示されれば、無事にDocker上でStreamlitアプリが実行されています。

作成したアプリをインターネット上に一般公開する方法

作成したTODOアプリは、インターネット上に公開することもできます。

今回はDockerで構築しているので、普通に構築した場合とちょっとだけ手順が異なります。

方法は後日、「（準備中）StreamlitとDockerで作成したTODOアプリを一般公開する方法」としてアップ予定です。

まとめ

Streamlitアプリを「普通に作る方法」と「Dockerで作る方法」の2パターンで解説しました。

デスクトップで動作させるだけであれば、驚くほど簡単に実行できることがお分かりいただけたと思います。

でもStreamlitは、Webに一般公開するところまでやって本領発揮といえます。

ここまで構築して見た方は、ぜひ次回のVPSでの構築手順をお試しください！

Python
library python

この記事が気に入ったら
フォローしてね！

シェア・記事の保存はこちら！

この記事を書いた人

CFXLOGのアバター CFXLOG プログラマ

メイン言語はPython。本ブログでは、実務や普段の学習で学んだことをアウトプットしています。
基本情報技術者試験合格者。

関連記事

コメント

コメントする

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）