PythonだけでWebアプリが作れるstreamlitが凄い

sano

2022年9月4日 13:52

あ～～、自作ツールを共有したいけど、Webアプリ作るのめんどくせ～～～～！！！！

最初に作ったWebアプリがhtml+css+javascript(+Node.js)+SQLと、かなり重い物だったためWebアプリ=作るの面倒の意識が定着していました。

簡単なアプリを作りたいけど、1からUI作るのは嫌だな…とすっかり腰が重くなっていた私のもとに突如現れた救世主。それがstreamlit！

なんとPythonファイル1つでWebアプリができてしまう！
HTMLもCSSもJavascriptもいらない！

最初に作ったのが規模の大きい物だったことを差し引いても違いは歴然。
数時間で簡単なWebアプリが作れてしまいます！

しかもPythonなので、pandasのグラフや表、Webスクレイピングで取得した情報なども簡単に引っ張ってきて貼り付けられる！ 驚きの気軽さです。
そもそもデータ解析やWebスクレイピングの結果を表示するのに適したフレームワークなのだそうな。

前々からWebスクレイピングに興味があったので、入力されたURLから情報を取得して表示するサイトを作ってみました。

趣味のTRPGで使うチャットパレットというコマンド群を自動で生成するサイトです。
入力したキャラクター情報の乗っているURLから必要な情報を持ってきて、組み合わせて表示してくれます。
デザインは超シンプル！各UIは規定の1種類しかないので(多分)、見た目にこだわりたい人には向いてないです。

URLを入力してEnterを押すと…

こんな風に、チャットパレットが生成されました！
チャットパレットは手作業で作ると非常に面倒臭いので、これから役に立ちそうです。

こういったシンプルなサイトは気軽に作れるのが一番良いと思います。
そういう時に役に立つのがstreamlitというわけなのです。

streamlitのメリットとデメリット

メリット1：UIで悩まなくていい

私はデザインセンスが壊滅的にないので、UIで悩む必要がないのは非常にありがたいです。
コンポーネントを重ねていけば簡単にそれっぽいのを作れてしまう！
前準備不要で感覚的に書けるのは魅力的です。

メリット2：HTML,CSS,Javascriptが不要

pythonファイル1つで完結してしまうのがstreamlitの強いところ。
最低2ファイルでWebアプリが完結します。
※1ファイルは使用したフレームワークを記載するもの

メリット3：データ解析やWebスクレイピングと相性〇

pandasやbeautifulsoupなどで取得した値をそのまま表示することができます。
グラフ、表、mapなど表示方法も様々で、データ解析を簡単かつスピーディに行うことができます。

デメリット1：複数ページのサイトには向いてない

ページ遷移には対応していないと思います。
ページを遷移するというよりは、ボタンによって表示を変更するという感覚なので、表示切替を利用して複数ページのサイトっぽく見せることはできると思います。

デメリット2：UIにこだわりたい人には向いてない

自分で細かくUIを決めたい人には向いてないです。
そこがメリットでもあるのですが……

デメリット3：最新バージョンはスマホ表示に対応してない

これが最大のデメリットだと思います。
後ほど詳しく記述しますが、私が最初に最新バージョンのstreamlitでWebアプリを作成した際、スマホからアクセスしても真っ白のページしか表示されませんでした。
何故なのかはわかりません。調べても出てこなかったので…
1.7.0までは表示できるみたいなので、インストールするときは1.7.0以前のバージョンにするとよいと思います。
しかしherokuだと1.7.0は対応していないというジレンマ… herokuでデプロイするときはスマホ表示を諦めて、おとなしく最新バージョンを使いましょう。解決方法知ってる人がいたら教えてください。

streamlitのインストール

Python自体の導入は腐るほど説明しているサイトがあるので省きます。
straremlitはpipを使用してインストールしましょう。
※エディタはVisual Studio Codeを使用しています。

pip install streamlit==1.7.0

なんで1.7.0？ と思った方、いらっしゃると思います。
straremlitの最新バージョンは現時点で1.12.2です。指定しなければ最新バージョンがインストールされます。

先ほどの「デメリット3」でも軽くお話しましたが、1.12.2で作ったWebアプリはスマホで表示されないのです…
アクセスしても表示されるのは真っ白な画面のみ。
調べた結果、下記のフォームで「バージョン0.74.0なら表示されるよ！」という話を見つけました。

早速試してみたのですが、0.74.0では後述するローカルでWebアプリを表示するコマンドがうまく実行できず…これまたいろいろ調べた結果、解決は無理！となったので、もう少し新しいバージョンで何とかならないか探すことにしました。
地道にいろいろなバージョンを試したところ、1.7.0がスマホでWebアプリを表示できる一番新しいバージョン、かつローカルアプリ実行もできる！ということがわかりました。
なのでここでは1.7.0を指定してインストールしています。
「別にスマホで表示できなくてもいいや」 という方は最新版をインストールしましょう。

準備

任意の名前のフォルダの下に好きな名前のpythonファイルを作成してください。
私はmain.pyというファイルを作成しました。

早速streamlitをimportしましょう！
main.pyの一行目にstreamlitをインポートするコードを記入します。

import streamlit as st

準備はこれだけ！

streamlitでアプリを作る

詳細な使い方は公式ドキュメントにすべて記載されているので、そこを見るのが最適だったりします。
Webアプリを作るときは主に「API reference」を参照します。

今回は基本的なコードをいくつか紹介します。

タイトルを表示する

st.title("Hello world!!!")

main.pyに記入したら、ターミナルで以下のコマンドを実行します。

streamlit run main.py

すると、ブラウザが自動で立ち上がり、「Hello world!!!」を表示してくれます。
立ち上がらない場合はターミナルに表示されている「Local URL」にブラウザからアクセスしましょう。

もうWebアプリができてしまいました。

st.titleはdocumentのここに詳しい解説が載っています。

ユーザーに情報を入力してもらう

straremlitにはユーザーに入力してもらうためのUIがいくつか用意されています。今回はその中でも一番シンプルな「text_input」を使ってみましょう。

txt = st.text_input('挨拶を入力してください')
txt + "と入力されました。"

これは1行のテキストボックスを表示し、入力された内容を"txt"という変数に格納するコードです。()の中身はキャプションになります。
入力された内容はテキストボックスの下に表示されるようにします。
一度確認してみましょう。ブラウザを更新します。

テキストボックスが表示されました！
入力された内容を表示するには変数をそのまま書いてやるだけでいいので手軽です。
入力してEnterを押してみましょう。

表示できました！
入力前と入力後に表示を変えたい場合はif文で場合分けしてあげましょう。

txt = st.text_input('挨拶を入力してください')

if txt:
   txt + "と入力されました。"
else:
   "入力されていません。"

text_inputはここを見ると解説が載っています。
入力前の初期値を設定したり、文字数を制限するなど、さまざまなオプションも設定できます。

グラフや表を表示する

streamlitのすごいところは、表やグラフも簡単に表示できるところです。
それどころかmapやフローチャートまで作れてしまいます。

pandasとnumpyをimportしましょう。インストールしていない場合はpipを使ってstreamlitと同様にインストールしてください。

import pandas as pd
import numpy as np

以下のコードを記入してください。
Dataflameはpandasの機能なので、詳しいことは解説しません。
簡単に言うとDataflameの中で、50×20の表にランダムな数字を格納し、カラム(列名)にcol0～col19まで順番に名前を付けていってる感じです。

df = pd.DataFrame(
    np.random.randn(50, 20),
    columns=('col %d' % i for i in range(20)))

st.dataframe(df)  # Same as st.write(df)

ブラウザを更新すると、表が表示されました！

markdownやLatexにも対応

使用することの多いmarkdownや、数式をきれいに書けるLatexも簡単に使うことができます。

markdown

'''
# 見出し1
## 見出し2
### 見出し3
'''

シングルクォーテーション3つで囲うだけ！便利～～～

Latex

st.latex(r'''
 a + ar + a r^2 + a r^3 + \cdots + a r^{n-1} =
     \sum_{k=0}^{n-1} ar^k =
     a \left(\frac{1-r^{n}}{1-r}\right)
''')

こちらはmarkdownのようなマジックコードはないので、素直に関数に渡しましょう。

作ったサイトを公開しよう

今回はstreamlitが提供しているstreamlit sharing を使ってみます。
streamlitの公式サイトにアクセスしたら、右上の[sign up]をクリックします。
「continue with Goggle」と「continue with GutHub」の2種類ありますが、後々の事を考えても「continue with GutHub」の方がよいです。
GitHubのアカウントがない場合は作りましょう。Gitはコードを書いていく上で必須のツールなので、使い方を学んでおくとよいです。

さて、アプリをDeployする前に、1つだけ必要なことがあります。
それが、main.pyと同じ場所に「requirements.txt」を作成すること。
requirements.txtには使用したフレームワークを記入します。
今回の場合は以下のようになるはずです。

streamlit==1.7.0
pandas==1.4.3
numpy==1.23.2

バージョンを指定しておかないと、最新バージョンが使われるので注意。
自分が使っているバージョンがわからない場合は「pip freeze」で確認できます。

フォルダをGitにpushしておいてください。
その状態で、streamlit sharingのYour appsページ、右上にある「New app」をクリックします。

すると「Repository」、「Branch」、「Main file path」を選択する画面に移ります。

Repository…コードをpushしたリポジトリを選択
Branch…基本的には「master」もまま
Main file path…実行するファイル名。今回は「main.py」

あとは「Deploy!」を押すだけ！

簡単すぎるstreamlitでシンプルなWebアプリを作ろう！

最後に、私がstreamlitの学習で使用したUdemyの教材を紹介します。

セールの時に購入すれば1300円くらいで買えます。本買うより安い。

ここまでご覧いただきありがとうございました。
皆さんもぜひ、streamlitでWebアプリを作ってみましょう！