1. Nate0928

    Posted

    Nate0928
Changes in title
+[簡単爆速]HTMLファイル要らずのStreamlitで数分でWebアプリを作る
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,135 @@
+## 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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571279/5a319f31-a7ec-6dce-26a3-69514231a105.png)
+
+## Webページ作成
+適当なディレクトリ内にPythonファイルを作ります。ファイル名はなんでもいいですが、今回は公式に則って`first_app.py` とします。
+
+```
+$ touch first_app.py
+$ cd first_app.py
+```
+次にこのファイルに書き込んでいきます。一番最初なのでHelloworldを表示させていきましょう。
+
+```python: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ページが作れるなんてちょっと感動ですね。
+他にもヘッダーやデータフレームなんかも簡単に表示できちゃいます。
+
+```python: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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571279/4f17ba4f-5f1a-7fd5-4f27-61ff91880678.png)
+このようにStreamlitには`st.write()`や`st.title()`のような様々なメソッドが用意されています。
+他のメソッドに関しては [公式ドキュメント](https://docs.streamlit.io/api.html#display-text)を参照ください。
+
+## magic commands
+これだけでもHTMLファイルいらずでフロントの処理ができるので、十分便利なんですが、
+なんとstreamlitには実はもっと画期的なコマンドが用意されています。
+
+```python: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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571279/a41bfa1f-6933-07df-40a1-6ce1f9442ffe.png)
+
+おお...すげええ
+Streamlitはコード内にべたがきした、コメントをうまく読み取って、
+アプリに書き込んでくれます。
+公式ではmagic commandと呼んでいます。まさに魔法ですね
+ちなみにPython3以降でないと動かないようです。
+
+## widgetsを使用して対話性のあるアプリにする
+
+チェックボックスやセレクトボックスも簡単に追加できます。
+試しに、セレクトボックスで東京か大阪か選んで、地図に点を散らして打てるようにします。
+そして、チェックボックスにチェックをつければ、座標データの一覧が見られるようにしました。
+
+```Python
+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.selectbox`→`st.sidebar.selectbox`
+`st.checkbox`→`st.sidebar.chechbox
+とすると
+
+![スクリーンショット 2020-05-21 2.21.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571279/1ad2db26-fc3e-0a47-0a5d-a2c81e8feccb.png)
+
+このように簡単なWebアプリらしくなりました。
+
+## 終わりに
+本当にPythonファイル一つで、しかも数行のコードでwebアプリが作れてしまいました。
+同じPythonで`Django`や`Dash`も十分早いと感じましたが、`Streamlit`は爆速でしたね。
+他にもグラフや画像、動画なんかも一行の簡単なコードで埋め込めました。
+それほどデザインにこだわりがなく、サクッと自分の開発した何かしらを公開したいときは、使ってみる価値は大いにあると思います。
+
+
+
+