Streamlitとは

StreamlitはPython向けのWebアプリケーションフレームワークです。

Streamlitを使うとフロントエンドの知識ゼロでもデータを可視化するためのWebアプリケーションを簡単に作れます。以下のような機能が特徴。

変数を地の文に書くだけで、GUIに出力される(マジックコマンド)
st.radioやst.text_inputのようなWidget APIを呼び出すだけで、GUIコンポーネントが生成される

30 Days of StreamlitはStreamlitのチュートリアルコンテンツ。SNSに進捗を共有しながらちょっとづつStreamlitを学習できます。
#30DaysOfStreamlitで検索すると先人たちのチャレンジの記録がたくさん！
やっていきましょう。

Day 1

Day 1はローカル環境にPythonとStreamlitをインストールして、ビルトインのデモアプリを起動させるまで。
ローカル環境と書かれていますが、Python開発コンテナーでも問題ありませんでした。
streamlit helloでデモアプリを起動させるときにメールアドレスの入力を勧められますが、とりあえずスルー。

# streamlit hello

      👋 Welcome to Streamlit!

      If you’d like to receive helpful onboarding emails, news, offers, promotions,
      and the occasional swag, please enter your email address below. Otherwise,
      leave this field blank.

      Email:  

  You can find our privacy policy at https://streamlit.io/privacy-policy

  Summary:
  - This open source library collects usage statistics.
  - We cannot see and do not store information contained inside Streamlit apps,
    such as text, charts, images, etc.
  - Telemetry data is stored in servers in the United States.
  - If you'd like to opt out, add the following to ~/.streamlit/config.toml,
    creating that file if necessary:

    [browser]
    gatherUsageStats = false


  Welcome to Streamlit. Check out our demo in your browser.

  Local URL: http://localhost:8501
  Network URL: http://172.17.0.2:8501

  Ready to create your own Python apps super quickly?
  Head over to https://docs.streamlit.io

  May you create awesome apps!

無事にデモアプリが起動しました。

Day 2

Day 2は自前のPythonスクリプトでHello worldなWebアプリケーションを起動するまで。
streamlit_app.pyを作成してstreamlit run streamlit_app.pyでWebアプリケーションが起動しました。ここからはこのstreamlit_app.pyを編集していくってことですね。

streamlit_app.py

import streamlit as st

st.write('Hello, world.')

シンプル。

Day 3

Day 3はWebアプリケーションにボタンを配置する方法。

atreamlit_app.py

import streamlit as st

# "Say hello"というキャプションのボタンを作成する
if st.button('Say hello'):
    # ボタンが押されればこちらが表示される
    st.write('Why hello there')
else:
    # ボタンが押されなければこちらが表示される
    st.write('Goodbye')

ソースコードは簡単だけど、もしかしてすごいことやっているのでは。

Day 4

Day 4は動画視聴。
Ken Jeeさんはデータサイエンスに関する動画やポッドキャストを配信している人気YouTuberらしいです。
英語は自信ありませんでしたが、自動字幕のおかげで理解できました。

Streamlitで実践的なダッシュボードを作ることがどれくらい簡単かというのがすごく分かりやすかったです！
Streamlitとは関係ないんですけど、ライブコーディングの見せ方も参考になりました。

Day 5

Day 5はMarkdown、データフレーム、チャートを表示する方法。
いきなり盛りだくさんですね。

チャートはAltairを使っていました。Plotlyも使えるらしいのですが、今回は使っていません。

streamlit_app.py

import numpy as np
import altair as alt
import pandas as pd
import streamlit as st

# ランダムなデータを挿入したデータフレームを生成する(3次元の点×200点)
df_random = pd.DataFrame(np.random.randn(200, 3), columns=['a', 'b', 'c'])
# Altairでチャートを生成する
c = alt.Chart(df_random).mark_circle().encode(x='a', y='b', size='c', color='c', tooltip=['a', 'b', 'c'])
# 生成したチャートを表示
st.write('Chart:', c)

対応している変数をst.writeに渡す、もしくはマジックコマンドを使うだけで表示できるのであっさり。

Day 6

Day 6はGitHubを使ってみよう！という内容でした。
GitHubにリポジトリを作るだけだから簡単…ではあるんですけど、何をやっているのか何をしたいのかがプログラマじゃないと理解しづらいかもですね。

Day 7

Day 7はStreamlit Community Cloudを使ってみよう！という内容でした。
アカウントを登録して、
GitHubを連携して(このためにDay 6があったのか…)

デプロイするプロジェクトをGUIでポチッと選ぶとデプロイされます！
"Your app is in the oven"(調理中)の演出がオシャレ。オイモー。

数十秒待つとデプロイされました！

Day 8

Day 9はスライダーが登場。

ユーザがスライダーを操作した結果をPythonの変数で受け取れるので、インタラクティブなアプリを作れそう！という感じになってきます。

streamlit_app.py

values = st.slider('Select a range of values', 0.0, 100.0, (25.0, 75.0))

この1行だけで、スライダーを作って操作した結果をvaluesに代入できる…すごくない？

スライダーの数値のフォーマットが何種類か用意されているのも技ありって感じですね。
参考：st.slider - Streamlit Docs

Day 9

Day 8はみんな大好き折れ線グラフ！これから多用しそう！
st.line_chartにデータフレームを渡すだけ。

streamlit_app.py

chart_data = pd.DataFrame(
     np.random.randn(20, 3),
     columns=['a', 'b', 'c'])

st.line_chart(chart_data)

データフレームの構造はこんな感じでした。これからはこういう形にデータを整えてあげればいいんですね！

Day 10

Day 10はセレクトボックスが登場。

選択肢は配列かタプルを渡してあげるだけでOK！

Day 11以降

Day 11以降はこちら