Python Streamlitを簡単に使ってみる

***SreamlitはPythonで実行できるWebアプリケーション開発のフレームワークです。
Webサーバ機能や開発フレームワークがオールインワンでパッケージされていて、
PythonだけでWebアプリケーションが簡単に公開できます。***

## 1. Streamlitを使えるようにする
**① rootユーザでstreamlitをインストールします**
```
# pip install streamlit
```

**② テストでデモアプリを起動します**
```
$ stremelit hello
```
![0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2075298/5e2affaa-5a4b-aec0-2ff1-1df8b7c9d7e1.png)
※WWWアドレスが表示されてそこをみるように表示されます。


**③ ブラウザで指定されたアドレスを入力して見てみます**
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2075298/d5c64e9c-e798-fe5f-4eee-a8bab782f727.png)
デモページが表示されました。

## 2. Streamlitで自分のWebサイトを作ってみる

実際にテキストの入力や、コードブロック、表や画像を取り扱ってみる。

**① ファイルを作成する**

test.py
```
import streamlit as st   # streamlitのライブラリを読み込む
from PIL import Image # 画像を扱うためライブラリを読み込む
import pandas as pd # 表を扱うためpandasライブラリを読み込む

st.title('Streamlitを試しに使ってみる') # ページのタイトル 
st.write('これが私の作るWebサイトです') # テキストを追加


# Streamlitでコードブロックを書いてみる

st.write('■ Streamlitでコードブロックを書いてみる')
code = '''def hello():
     print("Hello, Streamlit!")'''
st.code(code, language='python')


# 表を追加してみる(データフレーム形式)

st.write('■ 表を表示')
df = pd.DataFrame({
    '1列目' : ['トマト', 'きゅうり', 'なすび'],
    '2列目' : ['100円', '200円', '300円'],
})

st.table(df)

# 画像を挿入してみる

st.write('■ 画像を表示')
img = Image.open('test.png') #ファイルtest.pyと同階層
st.image(img, use_column_width=True)

```
**② Streamlitを実行する**
```
$ streamlit run test.py 
```
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2075298/4a6d029b-6eca-49d5-302f-e1488b58740a.png)
※WWWアドレスが表示されてそこをみるように表示されます。

**③ ブラウザで指定されたアドレスを入力して見てみます**
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2075298/6917caad-6343-a42d-8f57-b037466a7359.png)

意図するものが表示できました。
## 3. まとめ
今回はアプリを公開すると言うよりも基本的なテキストの入力、表や画像の取り扱いについて記載しました。実際に使っていて、コードに記述の誤りがあった場合とかブラウザを開くとデバック内容が表示されたりして、修正が楽にできました。
もっと詳しい内容を見たい場合ですが、Streamlitのドキュメントサイトを見てみて色々試してみてください。
https://docs.streamlit.io/library/api-reference


<table border="0" cellpadding="0" cellspacing="0"><tr><td><div style="border:1px solid #95a5a6;border-radius:.75rem;background-color:#FFFFFF;width:504px;margin:0px;padding:5px;text-align:center;overflow:hidden;"><table><tr><td style="width:240px"><a href="https://hb.afl.rakuten.co.jp/ichiba/14f168ca.485dc5c9.14f168cb.b3e40f57/_RTLink71449?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2Fae770ef9c5aa402d410516fc252474c8%2F&link_type=picttext&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJwaWN0dGV4dCIsInNpemUiOiIyNDB4MjQwIiwibmFtIjoxLCJuYW1wIjoicmlnaHQiLCJjb20iOjEsImNvbXAiOiJkb3duIiwicHJpY2UiOjAsImJvciI6MSwiY29sIjoxLCJiYnRuIjoxLCJwcm9kIjoxLCJhbXAiOmZhbHNlfQ%3D%3D" target="_blank" rel="nofollow sponsored noopener" style="word-wrap:break-word;"  ><img src="https://hbb.afl.rakuten.co.jp/hgb/14fd8852.00a017ee.14fd8853.823bacf4/?me_id=1213310&item_id=20185382&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F3669%2F9784798063669.jpg%3F_ex%3D240x240&s=240x240&t=picttext" border="0" style="margin:2px" alt="" title=""></a></td><td style="vertical-align:top;width:248px;"><p style="font-size:12px;line-height:1.4em;text-align:left;margin:0px;padding:2px 6px;word-wrap:break-word"><a href="https://hb.afl.rakuten.co.jp/ichiba/14f168ca.485dc5c9.14f168cb.b3e40f57/_RTLink71449?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2Fae770ef9c5aa402d410516fc252474c8%2F&link_type=picttext&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJwaWN0dGV4dCIsInNpemUiOiIyNDB4MjQwIiwibmFtIjoxLCJuYW1wIjoicmlnaHQiLCJjb20iOjEsImNvbXAiOiJkb3duIiwicHJpY2UiOjAsImJvciI6MSwiY29sIjoxLCJiYnRuIjoxLCJwcm9kIjoxLCJhbXAiOmZhbHNlfQ%3D%3D" target="_blank" rel="nofollow sponsored noopener" style="word-wrap:break-word;"  >Pythonプログラミング逆引き大全 400の極意 [ 金城俊哉 ]</a></p><div style="margin:10px;"><a href="https://hb.afl.rakuten.co.jp/ichiba/14f168ca.485dc5c9.14f168cb.b3e40f57/_RTLink71449?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2Fae770ef9c5aa402d410516fc252474c8%2F&link_type=picttext&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJwaWN0dGV4dCIsInNpemUiOiIyNDB4MjQwIiwibmFtIjoxLCJuYW1wIjoicmlnaHQiLCJjb20iOjEsImNvbXAiOiJkb3duIiwicHJpY2UiOjAsImJvciI6MSwiY29sIjoxLCJiYnRuIjoxLCJwcm9kIjoxLCJhbXAiOmZhbHNlfQ%3D%3D" target="_blank" rel="nofollow sponsored noopener" style="word-wrap:break-word;"  ><img src="https://static.affiliate.rakuten.co.jp/makelink/rl.svg" style="float:left;max-height:27px;width:auto;margin-top:0"></a><a href="https://hb.afl.rakuten.co.jp/ichiba/14f168ca.485dc5c9.14f168cb.b3e40f57/_RTLink71449?pc=https%3A%2F%2Fproduct.rakuten.co.jp%2Fproduct%2F-%2Fae770ef9c5aa402d410516fc252474c8%2F%3Fscid%3Daf_pc_bbtn&link_type=picttext&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJwaWN0dGV4dCIsInNpemUiOiIyNDB4MjQwIiwibmFtIjoxLCJuYW1wIjoicmlnaHQiLCJjb20iOjEsImNvbXAiOiJkb3duIiwicHJpY2UiOjAsImJvciI6MSwiY29sIjoxLCJiYnRuIjoxLCJwcm9kIjoxLCJhbXAiOmZhbHNlfQ==" target="_blank" rel="nofollow sponsored noopener" style="word-wrap:break-word;"  ><div style="float:right;width:41%;height:27px;background-color:#bf0000;color:#fff!important;font-size:12px;font-weight:500;line-height:27px;margin-left:1px;padding: 0 12px;border-radius:16px;cursor:pointer;text-align:center;">楽天で購入</div></a></div></td></tr></table></div><br><p style="color:#000000;font-size:12px;line-height:1.4em;margin:5px;word-wrap:break-word"></p></td></tr></table>