はじめに

この記事では、Streamlit を使ってWEBアプリケーションを作成するための手順を大まかに解説します。
Streamlitを使うことで、Pythonを使って非常に簡単にWEBアプリケーションを作成することができます。
今回はコードを実際に動かして、Streamlitの基本的な使い方を学ぶことを目的とします。
使用したコードはこちらのリポジトリにあります。

開発環境作成

Anacondaとお好みのエディタをインストール
Anaconda Promptで（仮想環境を作成して）Streamlit をインストール

pip install streamlit

Streamlitを使ってみる

ひとまずSteamlitを使ってみましょう。
以下のプログラムをコピペして保存したら、streamlit run basic_usage.pyで実行してみましょう。
（プログラムと同じ階層に画像ファイルを配置）
すると、このページと同じように表示されると思います。

basic_usage.py

import streamlit as st
import numpy as np
import pandas as pd
from PIL import Image


"""
## [Streamlit](https://docs.streamlit.io/)ではマークダウンを使用できます
###この記法の詳細は[こちら](https://docs.streamlit.io/library/api-reference/write-magic/magic)
他にも[API reference](https://docs.streamlit.io/library/api-reference)に色んな機能が載っています
```python
print("hello world!")
"""

st.title("st.titleでも文字を表示できます")

# data frameを表形式で表示
df = pd.DataFrame({
    "名称": ["東京タワー", "スカイツリー", "エッフェル塔", "自由の女神"],
    "高さ[m]": [333, 634, 300, 93]
}).astype(str)
st.table(df)

# data frameを棒グラフで表示
df = pd.DataFrame(
    np.random.rand(20, 3),
    columns=["a", "b", "c"]
)
st.bar_chart(df)

# map上へのプロット
df = pd.DataFrame(
    np.random.rand(50, 2) / [80, 80] + [36.95, 138.78],
    columns=["lat", "lon"]
)
st.map(df)

# 画像の表示
img = Image.open("landscape.jpg")
st.image(img, caption="スキー場", use_column_width=True)

ウィジェットを使ってみる

次はウィジェットを使ってWEBアプリケーションを作成してみましょう。
ウィジェットを使うことで、欲しい機能をサクッと作ることができます。
以下のプログラムをコピペして保存したら、streamlit run input_widgets.pyで実行してみましょう。
すると、このページと同じように表示されると思います。
詳しくはこちらを参照してください。

input_widgets.py

import streamlit as st

# ボタン
# (True/Falseで値が入ってくるのでif文で)
if st.button('ためになった'):
    st.write('LGTMを押そう！')
else:
    st.write('ストックしておこう…')

# チェックボックス
if st.checkbox('こんにちは'):
    st.write('こんにちは！')

# セレクトボックス
option = st.selectbox(
    '好きなSNSは？',
    ('Twitter', 'Instagram', 'LINE', 'Qiita'))
st.write('あなたの選択:', option)

# スライダー
values = st.slider(
    '数字の範囲を選んでください',
    0.0, 100.0, (25.0, 75.0))
st.write('Values:', values)

# テキスト入力
title = st.text_input('好きな映画を教えてください')
st.write('あなたが好きな映画は', title, "ですね！")

最後に

Streamlitの基本的な使い方を紹介しました。
公式ドキュメントを参照して使えそうな機能を試してみると良いかもしれません。

StreamlitでWEBアプリケーション開発～基本的な使い方を学ぶ～

はじめに

開発環境作成

Streamlitを使ってみる

ウィジェットを使ってみる

最後に