114
124

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[簡単爆速]HTMLファイル要らずのStreamlitで数分でWebアプリを作る

Last updated at Posted at 2020-05-20

Streamlitってなんぞ?

StreamlitはPythonのオープンソースフレームワークです。

今回のゴール

とりあえずは簡単にwebアプリらしいものを作っていきたいと思います。Webアプリを作る上でめんどくさいのが、バックエンドの諸々の処理やHTMLファイルの作成ですが、Streamlitはそれらの作業をする必要が全くないですようです。なんとPythonファイル一つでwebページが作れてしまいます。

追記(2021/10)

StreamliCloudによってデプロイまで簡単にできるようになりました。紹介記事はこちら

インストール

pipを使ってインストールできます。

$ pip install streamlit

デモページの立ち上げ

$ streamlit hello 

上記のコマンドで http://localhost:8501 からすぐにデモ画面が立ち上がります。
簡単ですね。
スクリーンショット 2020-05-18 19.34.59.png

Webページ作成

適当なディレクトリ内にPythonファイルを作ります。ファイル名はなんでもいいですが、今回は公式に則ってfirst_app.py とします。

$ touch first_app.py
$ cd first_app.py 

次にこのファイルに書き込んでいきます。一番最初なのでHelloworldを表示させていきましょう。

first_app.py
import streamlit as st
st.title('MyApp')
st.write("HelloWorld")

first_app.pyのあるディレクトリ上で下記コマンドを実行

$ streamlit run first_app.py

おそらくWebページにはHelloworldと表示されていると思います。
HTMLやCSSファイルをかかなくても、こんな少ないコード量でWebページが作れるなんてちょっと感動ですね。
他にもヘッダーやデータフレームなんかも簡単に表示できちゃいます。

first_app.py
import streamlit as st
import numpy as np
import pandas as pd

st.title("HelloWorld")
st.subheader("This is subheader")
st.write("This is testdata")
st.write(pd.DataFrame({
    'first column': [1, 2, 3, 4],
    'second column': [10, 20, 30, 40]
}))

スクリーンショット 2020-05-18 22.26.06.png
このようにStreamlitにはst.write()st.title()のような様々なメソッドが用意されています。
他のメソッドに関しては 公式ドキュメントを参照ください。

magic commands

これだけでもHTMLファイルいらずでフロントの処理ができるので、十分便利なんですが、
なんとstreamlitには実はもっと画期的なコマンドが用意されています。

first_app.py
import streamlit as st
import numpy as np
import pandas as pd

"""
# My first app
### This is subheader

This is testdata
"""

st.write(pd.DataFrame({
    'first column': [1, 2, 3, 4],
    'second column': [10, 20, 30, 40]
}))

このように書いてアプリの方を確認してみると、

スクリーンショット 2020-05-18 22.48.18.png

おお...すげええ
Streamlitはコード内にべたがきした、コメントをうまく読み取って、
アプリに書き込んでくれます。
公式ではmagic commandと呼んでいます。まさに魔法ですね
ちなみにPython3以降でないと動かないようです。

widgetsを使用して対話性のあるアプリにする

チェックボックスやセレクトボックスも簡単に追加できます。
試しに、セレクトボックスで東京か大阪か選んで、地図に点を散らして打てるようにします。
そして、チェックボックスにチェックをつければ、座標データの一覧が見られるようにしました。

locate = {"東京":[35.68, 139.76] , "大阪":[34.70 ,135.49]}

# セレクトボックス
l = st.selectbox(
    'Which places do you like best?',
     ("東京","大阪"))
'You selected:', l

# 地図をプロット
map_data = pd.DataFrame(
    np.random.randn(1000, 2) / [50, 50] + locate[l],
    columns=['lat', 'lon'])
st.map(map_data)

# チェックボックス
if st.checkbox('Show dataframe'):
    st.write(map_data)

また、ほとんどのコマンドはst.sideberを追加することで、各機能を左側のサイドバーに寄せることができます。
st.selectboxst.sidebar.selectbox
st.checkboxst.sidebar.chechbox
とすると

スクリーンショット 2020-05-21 2.21.08.png

このように簡単なWebアプリらしくなりました。

## 終わりに
本当にPythonファイル一つで、しかも数行のコードでwebアプリが作れてしまいました。
同じPythonでDjangoDashも十分早いと感じましたが、Streamlitは爆速でしたね。
他にもグラフや画像、動画なんかも一行の簡単なコードで埋め込めました。
それほどデザインにこだわりがなく、サクッと自分の開発した何かしらを公開したいときは、使ってみる価値は大いにあると思います。

続きはこちらから。

114
124
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
114
124

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?