1. Nate0928

    No comment

    Nate0928
Changes in body
Source | HTML | Preview
@@ -1,136 +1,136 @@
## 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`は爆速でしたね。
他にもグラフや画像、動画なんかも一行の簡単なコードで埋め込めました。
それほどデザインにこだわりがなく、サクッと自分の開発した何かしらを公開したいときは、使ってみる価値は大いにあると思います。
-続きは[こちら]https://qiita.com/Nate0928/items/632e7d54c2f9c17e242b
+続きは[こちら](https://qiita.com/Nate0928/items/632e7d54c2f9c17e242b)から。