Streamlit Community Cloud + GitHub Codespacesで爆速ダッシュボード開発してみた

Last updated at 2025-03-17Posted at 2025-03-16

要約

この記事では、Streamlit Community CloudとGitHub Codespacesを用いて、
Pythonベースでダッシュボードを開発した作例と、
初心者が実際に試してみて重要だと感じたポイントを3点解説しています。

作例

こちらはStreamlitを初めて使った@yusa-sanが、実働2.5日（利用データのWebアプリ向け加工を含む）で作成できたダッシュボードです。事前の勉強無しで、丸腰で挑んでみました。

デモに登場する作品の説明

都知事杯オープンデータハッカソン2024のDemo Dayに向けて作成しました。
作品紹介ページ

ダッシュボードは①GitHub repositoryにアップロード済みのファイル、②URLでアクセスできるファイル、③ローカルからアップロードするファイル、の3種類に対応しています。
（細かく動作確認済みの機能は①と②のみです！）

デモ動画で入力しているURLは、AWSの静的ウェブサイトホスティングで公開しているデータのURLです。

Streamlit Community Cloudとは

こちらの公式サイトに書かれている通り、

Streamlit Community Cloudのアカウントを作る
GitHubアカウントを接続する
Create appからアプリ作成画面に遷移しDeploy a public app from a templateを選択
（後からアプリを非公開（private app）に変更可能）
Blank app（空のアプリ）を選択
作成するアプリのコードを格納するGitHub repositoryの名前と、アプリのURLを設定し、
Open GitHub Codespaces to immediately edit this app in your browserにチェック☑
Deployをクリック

以上の1分くらいの操作で、あなたのアプリの外枠はすでにデプロイされ、URLからアクセスもできるようになってしまいます。手軽すぎる…

さらに感動したのは、GitHubに新たなコミットをするとリロードしなくてもアプリの挙動が変化する（いわゆるホットリロード）ことです。快適すぎる…

どこにデプロイされているのか気になる方はこちら

ポイント① コードは初めからGitHub Codespacesで編集する

あなたのGitHubアカウントには、上記5.で指定した名前のrepositoryが出来ています。
そのrepository内にあるstreamlit_app.pyを編集・コミットすることで、公開されているURL上のアプリがどんどんアップデートされていきます。
（streamlit_app.py：2025年3月時点での、デフォルトのPythonファイル名）

私がStreamlitを使ってみようと考えた時...（体験談が気になる方向け）

私がStreamlitを使ってみようと考えた時、ローカルにStreamlitをpip installするところから始めていました。
ですが依存関係をクリアするために、Microsoft Visual C++ Redistributable packageをインストールしなければならないなど、PCによっては環境構築に手間がかかると考えられます。
（上記の依存関係はWindows固有のもので、duckdbのKnown Python Issuesのリストでも紹介されています）

そこで！
ローカルでコードを作成してからGitHubにPublishするよりも、初めからGitHub Codespacesでコードを書いていく方がお手軽と考えます。

Pythonモジュールを追加したい場合

Pythonでの環境構築と聞いて気になるのが、ライブラリのインストールです。
しかしGitHub Codespacesでのコード編集ではそれも簡単でした！
5.で作成されたrepositoryには、すでにrequirements.txtが用意されているため、

requirements.txtに欲しいライブラリのモジュール名を記述していく

これだけで、欲しいライブラリをimportできるようになります。

なおStreamlitはアプリをビルドする際にuvを使っているようです（気になる方向け）

アプリをビルドすると以下のようなメッセージを見ることができます。

Using uv pip install.
Using Python 3.11.11 environment at /home/adminuser/venv
Resolved 61 packages in 681ms
Prepared 61 packages in 9.60s
Installed 61 packages in 851ms
 + affine==2.4.0
 ...
 + xyzservices==2025.1.0
Checking if Streamlit is installed
Found Streamlit version 1.43.2 in the environment

ポイント② 非公開にしたい情報の設定を適切に行う

Streamlit Community Cloudでは、以下の2つの公開/非公開設定ができます。

アプリURLの公開/非公開設定
private repositoryの使用（ソースコードの非公開設定）

また、

Secretsの設定（APIキーなど公開したくない情報の設定）

も可能です。

アプリURLの公開/非公開設定

Streamlit Community Cloudのマイページに行くと、My appsから作成したアプリの一覧が見られます。
設定したいアプリの三点リーダーからSettingsを開き、Sharingタブに行くと、Only specific people can view this appを選択することができます。
これにより、指定のメールアドレスでサインインしたユーザーにのみ、アプリを公開できます。

なお、上記の手順で設定した場合、デフォルトでThis app is public and searchableと設定されており、アプリは誰でも閲覧でき、かつ検索も可能な状態になっているようです。

private repositoryの使用

アプリのソースコード自体を公開したくない場合、StreamlitにGitHubのprivate repositoryを読み取る権限を与える必要があります。
Quick StartのOptional: Add access to private repositoriesが参考になります。

実は、私はまだこちらの機能を試してみていません。今回作成したアプリ自体は何の変哲もないダッシュボードで自由にForkしていただいて構わないものだからです。
また、次に説明するsecretsの活用により、APIキーや非公開URLなどは保護できます。

使用する場合、private repositoryから公開できるアプリは1つまでという制約があるようなので、注意しましょう。（こちらのドキュメントに書かれています）

自由にForkできる今回作成したデモアプリのrepository

`Secrets`の設定

コードで非公開のAPIキーや非公開のURLを利用する場合、アプリの公開設定と同様に、アプリのSettingsからSecretsタブに行くと、Streamlit Community Cloud独自の方法でSecretsの設定が可能です。
なお、他のマネジメントツールも動くそうで、2025年3月現在、dotenv files, AWS credentials files, Google Cloud Secret Manager, or Hashicorp Vault等が公式サイトで紹介されています。

Streamlit Community Cloud独自の方法では、

Secret managementで説明されている形式に沿ってsecrets.tomlに書くべき内容を決める
アプリのSettingsからSecretsタブに行き、secrets.tomlに書くべき内容をそのままコピーペーストする
（secrets.tomlファイル自体は作成しなくてよい）
コード内では、st.secrets.keyまたはst.secrets["key"]で情報にアクセスする
（keyはSecrets内で記述した任意のキー）

これだけでokです。

以下の2つのドキュメントを見ておけば良さそうです。

ポイント③ Streamlitの挙動の特徴を知る

実際にコードを書いていく上で、Streamlitのいくつかの挙動に少しくせを感じました。

特に今回作成したダッシュボードではユーザーとのインタラクションが多かったので、それにまつわるポイントを紹介します。

ユーザーとのインタラクションがある度にコード全体を再読み込みしている

streamlitのアプリはユーザーが何かを選択したり入力したりする度に、コード全体を再読み込みします。st.rerun()によってもコード全体が再読み込みされます。
再読み込み後も保持しておきたい変数はst.session_stateに保存することも重要です。

今回作成したデモアプリのコードでは、上記を利用して、ユーザーが入力したURLはすぐにマスクされるようにしています。（デモ動画を撮る際に入力されたURLを映したくなかったため）
以下のように、URL入力の一連の処理が終わった後にst.rerun()を入れることで実現しています。

# ロード完了フラグ
st.session_state["url_entries"][i]["loaded"] = True
# URL入力欄をマスク
st.rerun()

ユーザーとのインタラクションを行うフィールドの設定

ユーザーによるテキスト入力はst.text_inputで簡単に実現可能ですが、必ず入力フィールドに対してユニークになるキーを設定することと、初期値を上手く設定することが大切です。

下記では、for文のイテレートごとにkeyが変わるようにしています。また、st.rerun()で再読み込みされた後は"URL入力済"と表示されるようにしています。

for i, entry in enumerate(st.session_state["url_entries"]):
    st.write(f"#### ファイル {i+1} のURL入力")
    # URL入力欄
    url_input = st.text_input(
        "URLを入力してください",
        key=f"url_input_{i}",  # キーをユニークに
        value="" if entry["url"] == "" else "URL入力済",
    )

デバッグの仕方

また、デバッグの仕方も少し特徴的でした。

アプリのエラーはアプリ画面右下のManage appから見る
アプリの再起動をしたい際には、Manage appを開いた後に出てくる三点リーダーからReboot appを選択する

最後に

ここまででStreamlit Community Cloud + GitHub Codespacesによるダッシュボード開発が爆速でできた理由が伝わっていたら嬉しいです。

Streamlitはコミュニティによる助け合いも充実しています。
Streamlitの独自仕様で困った時はDiscussで質問されていることをチェックするのが良さそうです。

それでは、楽しいPythonライフを！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up