Help us understand the problem. What is going on with this article?

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

Streamlitってなんぞ?

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

今回のゴール

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

インストール

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は爆速でしたね。
他にもグラフや画像、動画なんかも一行の簡単なコードで埋め込めました。
それほどデザインにこだわりがなく、サクッと自分の開発した何かしらを公開したいときは、使ってみる価値は大いにあると思います。

Nate0928
都内の大学生です。専攻は情報工学。サプライチェイン、最適化数学、機械学習など。主にPython。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした