Python
2022.05.20
StreamlitでWebアプリ開発!インストールからデプロイまで徹底解説
2022.05.20

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の比較を行います。

フレームワーク名特徴適しているアプリ
Django・機能が豊富 ・学習コストが高い多機能のアプリ
Flask・人気で扱いやすい ・学習コストが比較的低いリクエスト処理する簡易アプリ
Bottle・初心者でも扱える ・人気は低め簡易アプリ
streamlit・簡単に開発、デプロイが可能 ・コードが直観的で分かりやすいデータサイエンス領域のWebアプリ  

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

②Streamlitを使うといい場合

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



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

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


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

①インストール

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

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


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

pip install streamlit

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

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

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


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

streamlit hello

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

アプリ実行時のコンソール画面

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

実行時に表示されたURLを開いた画面

画面左の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

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

app.pyから作成したアプリケーション画面

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

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

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

・title、write、markdown

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

import streamlit as st

st.title("title")
st.write("write")
st.markdown("# Head1")
st.markdown("## Head2")
title、write、markdownのコンポーネントを表示した画面

ご覧のように様々な文字を表示できます。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("テキストエリア")

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

チェックボックスの値がFalseのときの表示画面

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


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

チェックボックスの値がTrueのときの表示画面

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

・サイドバーを作成

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

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

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

Stream Cloudのサインアップ・サインイン画面

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

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

ワークスペースの作成画面

2.Githubアカウント連携

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


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


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

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

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

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


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

デプロイするアプリのファイル指定画面

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

5.デプロイする

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


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



5.Python学ぶならトレノキャンプへ


トレノキャンプではPythonを実用的に学ぶためのコースを、オンラインで提供しています。オンデマンド配信なので、いつでも好きなときに受講が可能です。講座の詳しい内容は下記のバナーをクリックしてご覧ください。

この記事をシェア
おすすめの受講コース
  • Python本格入門シリーズ① データ構造とアルゴリズム
  • データ分析完全パック(Python 3 エンジニア認定データ分析試験対応)【データ分析シリーズ 1~3パック】
  • はじめてのデータベース ~仕組みの理解とSQL~
  • Pythonを動かして理解する機械学習 ~回帰と分類~