• 1．Streamlitとは
• 2．ほかのWebアプリフレームワークとの比較
• 3．Streamlitのおおまかな使い方
• 4．Streamlit CloudでWebアプリをデプロイ

Pythonで気軽にWebアプリを開発できるStreamlitを紹介します。この記事ではセットアップからデプロイまで紹介していますのでぜひ最後までご覧ください。

1．Streamlitとは

StreamlitとはPythonでWebアプリを簡単に作成できるフレームワークです。

①Webアプリのフレームワークとは

フレームワークとはアプリケーション開発する際に、土台として機能を提供してくれるソフトウェアのことです。
Pythonには優良なフレームワークが多く、これらをソフトウェア開発に利用すると開発効率が上がります。

②Streamlitの特徴

Streamlitは、Webアプリ開発でも特にデータサイエンス領域で開発する際に利用されるフレームワークです。

一番の特徴はなによりも手軽に開発できることです。最短一行でWebアプリを開発でき、WebUIを簡単に作成できるため、ひとまず動くか確認したい場合などに適しています。

実行例を呼び出すコマンドが準備されていたり、公式ドキュメントが充実していたりするのでとても学習しやすいのも特徴です。

さらに、Streamlitには後述するサービスでデプロイが簡単に行えます。作成したWebアプリを簡単に公開できるので、初心者におすすめのフレームワークです。

2．ほかのWebアプリフレームワークとの比較

PythonのWebアプリケーションフレームワークはいくつか存在します。ここでは各フレームワークの特徴を比較し、紹介していきます。

①それぞれの特徴を比較

ここではPythonで有名なWebフレームワークのDjango、Flask、Bottle、Streamlitの比較を行います。

上記のように各フレームワークには特徴があります。作成するWebアプリに応じて使い分けていきましょう。
それぞれのフレームワークについては、以下のページで詳しく紹介しています。

②Streamlitを使うといい場合

前述の通り、Streamlitでは簡単にWebUIを作成できます。データサイエンス領域で値を動的に変更したいアプリケーションを作成する場合に適しています。

3．Streamlitのおおまかな使い方

ここからは実際にStreamlitの使い方を紹介します。

ソースコードの実行にはVScodeを利用しています。ここではVScodeのインストール方法は割愛させていただきます。

①インストール

インストールにはPythonのパッケージ管理ツールのpipを利用します。

pipはPythonの環境構築時にインストールされるのでご安心ください。

VScodeのターミナルを開き以下のコマンドを実行します。

pip install streamlit

コマンド実行後、しばらくすると完了します。

②サンプルアプリを実行する

Streamlitのインストールが完了したら、まずサンプルアプリを実行してみましょう。

以下コマンドを実行します。

streamlit hello

実行すると以下のように表示されブラウザが立ち上がります。

ブラウザを開くと以下の画面が表示されます。

画面左のChoose a demoから様々なサンプルアプリを確認できます。

また、こちらのサンプルアプリのソースコードも確認できるので、類似アプリを作成する場合はこちらを活用しましょう。

サンプルアプリ終了する際はMacなら　Cmd + C、WindowsならCtr + Cで終了できます。

③アプリを作る

まずは、公式ドキュメントを確認してみましょう。

https://streamlit.io/

画面上部のGalleryには先ほどのようなサンプルが紹介されています。全体の構成や使用例を確認したい場合はこちらを確認しましょう。

ComponentsでStreamlitの拡張機能を確認できます。サードパーティのモジュールを利用することでより効率的にWebアプリを作成できるのでぜひ利用していきましょう。

アプリを作成する際は上記を参考に作成しましょう。ここからは実際にアプリを作成していきます。

簡単なアプリを作成

事前準備としてapp.pyというファイルを作成してください。作成後、以下のソースコードを記述しましょう。

import streamlit as st

st.title("hello")

2行の簡単なコードです。

コードが作成できたらターミナルで以下のコマンドを実行しましょう。

streamlit run app.py

実行するとご覧のページが表示されます。

とても簡易なものではありますが、簡単にWebアプリの作成ができました。

④よく使われるコンポーネント

実際にWebアプリを作成する際によく使われるコンポーネントを紹介します。

・title、write、markdown

文字を表示する際に利用できるコンポーネントです。

import streamlit as st

st.title("title")
st.write("write")
st.markdown("# Head1")
st.markdown("## Head2")

ご覧のように様々な文字を表示できます。st.markdown内ではマークダウンで表記することで、ここでは紹介していない様々な表示ができます。

・ウィジェット

Streamlitでは様々なウィジェットが簡単に作成できます。ここからはよく使われるウィジェットを紹介します。

import streamlit as st

st.checkbox("チェックボックス") #引数に入れることでboolを返す
st.button("ボタン") #引数に入れるとboolで返す
st.selectbox("メニューリスト", ("選択肢1", "選択肢2", "選択肢3")) #第一引数：リスト名、第二引数：選択肢
st.multiselect("メニューリスト（複数選択可）", ("選択肢1", "選択肢2", "選択肢3")) #第一引数：リスト名、第二引数：選択肢、複数選択可
st.radio("ラジオボタン", ("選択肢1", "選択肢2", "選択肢3")) #第一引数：リスト名（選択肢群の上に表示）、第二引数：選択肢
st.text_input("文字入力欄") #引数に入力内容を渡せる
st.text_area("テキストエリア") #引数に入力内容を渡せる

実行すると以下の画面のようになります。

各ウィジェットにその他引数を渡すことで様々なカスタマイズができます。詳しくは公式ドキュメントをご覧ください。

今回の例では各ウィジェットをただ表示しただけですが、各変数に入れることで扱いやすくなります。

import streamlit as st

check = st.checkbox("チェックボックス") #引数に入れることでboolを返す

if check:
   st.button("ボタン") #引数に入れるとboolで返す
   st.selectbox("メニューリスト", ("選択肢1", "選択肢2", "選択肢3")) #第一引数：リスト名、第二引数：選択肢
   st.multiselect("メニューリスト（複数選択可）", ("選択肢1", "選択肢2", "選択肢3")) #第一引数：リスト名、第二引数：選択肢、複数選択可
   st.radio("ラジオボタン", ("選択肢1", "選択肢2", "選択肢3")) #第一引数：リスト名（選択肢群の上に表示）、第二引数：選択肢
   st.text_input("文字入力欄") #引数に入力内容を渡せる
   st.text_area("テキストエリア")

実行結果は以下のようになります。

今度はチェックボックスしか表示されなくなりました。

チェックボックスをクリックすることで他のウィジェットが表示されるようになります。

このように簡単に表示制御が行えます。

・サイドバーを作成

サンプルページにあったようなサイドバーを作成します。

先ほどの例を少し修正します。

import streamlit as st

st.checkbox("チェックボックス") #引数に入れることでboolを返す
st.button("ボタン") #引数に入れるとboolで返す
st.selectbox("メニューリスト", ("選択肢1", "選択肢2", "選択肢3")) #第一引数：リスト名、第二引数：選択肢
st.multiselect("メニューリスト（複数選択可）", ("選択肢1", "選択肢2", "選択肢3")) #第一引数：リスト名、第二引数：選択肢、複数選択可
st.radio("ラジオボタン", ("選択肢1", "選択肢2", "選択肢3")) #第一引数：リスト名（選択肢群の上に表示）、第二引数：選択肢
# 以下をサイドバーに表示
st.sidebar.text_input("文字入力欄") #引数に入力内容を渡せる
st.sidebar.text_area("テキストエリア")

text_inputとtext_areaの前にsidebar.を加えました。これだけでサイドバーに表示できます。

4．Streamlit CloudでWebアプリをデプロイ

ここからは作成したWebアプリのデプロイ方法を紹介します。

①デプロイとは

デプロイとは英単語の「deploy」からきています。「deploy」は展開する、配置するという意味です。

システム開発におけるデプロイとはサーバー上に配置し、利用できるようにすることを指します。

streamlitで作成したWebアプリを実行するとWebブラウザが開きました。しかし、ただ実行するだけでは自身の環境でしかWebアプリにアクセスできません。

デプロイしWebサイトのようにアクセスすることで誰でも利用できる状態になります。

②Streamlit Cloudとは

Streamlit Cloud（旧Streamlit Sharing）とはStreamlitで作成したWebアプリを簡単にデプロイできるサービスです。このサービスがあるためStreamlitのデプロイは他のフレームワークより容易になっています。

StreamlitCloudを利用するためにはサインアップ、Githubアカウントの連携が必要です。どちらも簡単にできますので、Webアプリを作成したらぜひデプロイしてみましょう。

③Streamlit Cloudでのデプロイ手順

1．Streamlit Cloudにサインイン

以下のリンクにアクセスしてください。
https://share.streamlit.io/signup

ご覧のページが開いたら、Googleアカウント、Githubアカウント、メールアドレスのいずれかを利用してアカウントを作成します。

アカウントを作成すると以下のページに遷移します。

2．Githubアカウント連携

上記画面に遷移したらConnect Github accountをクリックしましょう。

Githubアカウントをお持ちでしたらログインするだけで連携できます。

3．GithubリポジトリにWebアプリのソースコードをアップロード

作成したソースコードをGithubにアップロードしましょう。ここではソースコードのアップロード方法は割愛します。

4．リポジトリ、ブランチ、ファイルパスを選択

 Streamlitの公式ページからサインインし管理画面にログインしましょう。

管理画面の右上にあるNew appを選択します。

リポジトリ、ブランチ、実行ファイル名を入力します。
※ファイル名がapp.pyの場合はメインファイルパスにapp.pyと入力します

5．デプロイする

必要項目を入力しDeploy!をクリックするとデプロイされます。

アプリのデプロイが完了するとURLが発行されるので確認してみましょう。