Streamlitの面白い&便利なエレメントまとめ

# はじめに
自分がStreamlitを使っていて、「便利だな～」「こんなエレメントあったのかｗ」と思ったものを独断と偏見でまとめてみました。

使い方は公式ドキュメントがすごく見やすいので、エレメントごとに公式のURLを添付しながら紹介します。

## アスキーアートを表示させたい

以下のようなアスキーアート（AA）を表示させたいとします。その時に使えるのが`st.text`です

```python
art = """
動くなｯ！
∧__∧　ファボを打ち込むぞ
( ｀Д´ ）
(っ▄︻▇〓┳═☆
/　　 )
( /￣∪
"""

st.title("st.textで表示")
st.text(art)

st.title("st.writeで表示")
st.write(art)
```
結果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/456646/d6438dc9-3e40-6422-6508-c75f35e9cd12.png)

https://docs.streamlit.io/library/api-reference/text/st.text

## 風船を飛ばそう

Twitterで誕生日になると飛ぶ奴です...

```python
st.button("Press me")

st.balloons()
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/456646/adf963c5-87a9-bf58-cbe0-18acb8839ccf.png)

https://docs.streamlit.io/library/api-reference/status/st.balloons

## 雪を降らせそう

雪が降ります...

```python
st.button("Press me")

st.snow()
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/456646/13f5117a-5a15-1d6b-3a74-38bd95b2c1fd.png)


## 見やすいテキストボックスを使う

一応、ステータスを表すものなんですが色を駆使して見やすくデザインすることもできます。

```python
st.error("This is an error message")

st.warning("This is a warning message")

st.info("This is an info message")

st.success("This is a success message")
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/456646/6e94c27e-004d-5feb-4ed8-5cd6ea2d79ab.png)

https://docs.streamlit.io/library/api-reference/status/st.error

## カラーピッカーを使ってみる

Streamlitではカラーピッカーを使うこともできます。
以下のコードはカラーピッカーで設定した色を使用し、サンプルグラフを描画しているものです。

```python
import streamlit as st
import numpy as np
import matplotlib.pyplot as plt

# カラーピッカーを表示
color = st.color_picker('Pick A Color', '#00f900')
st.write('The current color is', color)

# ランダムなデータを生成
x = np.random.rand(100)
y = np.random.rand(100)

# 散布図を描画
plt.scatter(x, y, color=color)

# グラフのタイトルと軸ラベルを設定
plt.title('Random Scatter Plot')
plt.xlabel('X')
plt.ylabel('Y')

# グラフを表示
st.pyplot(plt)
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/456646/b5789236-cbf8-9cf1-cebd-7a9b6e83e6ae.png)

色が変わります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/456646/cddf6e41-02be-166d-1e03-e858a1d42452.png)

https://docs.streamlit.io/library/api-reference/widgets/st.color_picker

## レイアウトを工夫する

ここからは自分が使って少し便利だったレイアウトエレメントを紹介してみます。

### st.expander

表示する情報量を制限したりしたいときに活用できます。

```python
import streamlit as st
import numpy as np
import matplotlib.pyplot as plt

with st.expander("st.expanderとは"):
    st.write("このようにして、ユーザーがクリックすると、追加の情報を表示できるようになります。")

    x = np.linspace(0, 10, 100)
    y = np.sin(x)

    plt.plot(x, y)
    st.pyplot(plt)
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/456646/a3eeab13-0a2e-78de-455a-6f27a4d5fa9c.png)

クリックすると、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/456646/ef6bd9c7-9840-3fb8-a701-f28f2a8d6e84.png)

こうなります。


### st.sidebar

サイドに情報を表示しています。自分の場合は下の例のように何かを入力してもらうことが多いですね。

```python
with st.sidebar:
    st.write("サイドバーに表示される情報です。")
    
    st.multiselect("複数選択", ["A", "B", "C"])
    
    num = st.slider("スライダー", 1, 10, 1)

with st.expander("st.expanderとは"):
    st.write("このようにして、ユーザーがクリックすると、追加の情報を表示できるようになります。")

    x = np.linspace(0, 10, 100)
    y = np.sin(x*num)

    plt.plot(x, y)
    st.pyplot(plt)
    
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/456646/cbe1cf36-0d7e-534e-7d10-b959f38fa365.png)

スライダーを動かすと...

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/456646/ed08f280-4189-cb99-51c4-1c7dd6919217.png)


### st.tabs

タブを作って表示する情報を切り替えることができます。例では三角関数のグラフをプロットさせています。

```python
tab1, tab2, tab3 = st.tabs(["sin", "cos", "tan"])

with tab1:
    x = np.linspace(0, 10, 100)
    y = np.sin(x*num)

    fig, ax = plt.subplots()
    plt.plot(x, y)
    st.pyplot(fig)

with tab2:
    x = np.linspace(0, 10, 100)
    y = np.cos(x*num)

    fig, ax = plt.subplots()
    plt.plot(x, y)
    st.pyplot(fig)

with tab3:
    x = np.linspace(0, 10, 100)
    y = np.tan(x*num)

    fig, ax = plt.subplots()
    plt.plot(x, y)
    st.pyplot(fig)
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/456646/88c107e2-2680-50cc-f8dd-1ab505bb80ec.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/456646/ecf5b454-3433-2bd4-fc0d-f3a472489a6b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/456646/f2ab39fe-f0f6-6fb1-e5c7-564e918fc08d.png)


# まとめ

今回は独断と偏見で面白い＆少し便利なものを紹介させていただきました。
ほかにも紹介したいものや、サードパーティー製のエレメントもあるのでそれらもいつか紹介したいですね。