【Python / Streamlit】Streamlitの導入からデプロイまでの流れ【WIZAPPエンジニアブログvol.3】

Stremlitとは

Pythonでフロントエンドを簡単に構築することができるフレームワークの一つです。

特に機械学習やデータサイエンス関連向けの開発において非常に使いやすいものとなっています。Pythonでよく使われるフレームワークにFlaskやDiangoなどがありますが、これらとは異なりHTMLやCSSのコーディングが不要です。

Streamlitの公式ドキュメント(https://streamlit.io/)の下図にも記載あるように「速く構築・公開できる」ということが押し出されたフレームワークとなっています

Streamlitのインストール方法

では早速インストール方法について解説しますが、公式ドキュメント(https://streamlit.io/)を見ると下図のとおり記載されています。

①インストール

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

pip install streamlit
②サンプルアプリの実行

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

streamlit hello
  • スプレッドシートの自動化
  • Googleフォームからのデータの収集や処理
  • Gmailの自動化(例:自動返信、特定のメールの処理)
  • Googleドキュメントの自動化(例:自動作成、テンプレートの作成)など

実行が正常に動作すると下記画面が表示されます。

ブラウザを開き下図のように表示されればOKです。

Streamlitでのアプリ作成

まず、公式ドキュメント(https://streamlit.io/)を確認してみましょう。

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

また、ComponentsでStreamlitの拡張機能を確認できます。より効率的にWebアプリを作成できるのでぜひ利用していきましょう。

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

事前準備としてmain.pyというファイルを作成し、以下のソースコードを記載します。

import streamlit as st

st.title("hello world!!")


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

$ streamlit run main.py

実行すると下図のようなブラウザが表示されます。

簡易的なものではありますが、簡単にWebアプリが作成できました。 より詳細なアプリについては公式ドキュメントを見ながら作成することが可能です。 また、後述するデプロイに向けて一つここでファイルを作成しておきましょう。 requirements.txtというファイルを同じディレクトリに作成し、以下のソースコードを記載します。

streamlit==’バージョン情報’

デプロイにあたり、どんなライブラリを使用しているのか把握する必要があります。それを先ほど作成したファイルに、今回使用している外部ライブラリを記載します。他にも外部ライブラリを使用している場合は、同様にバージョンを追記します。

$ pip list

上記コマンドを入力して、現在インストールされたバージョンを確認することができます。

Streamlitでのデプロイ方法

Streamlit Cloudを用いてWebアプリを簡単にデプロイしていきます。
以下のリンクにアクセスしてください。

https://share.streamlit.io/signup

Streamlit Cloudにサインイン

Googleアカウント、Githubアカウント、メールアドレスのいずれかを利用してアカウントを作成します。

Githubアカウントとの連携

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

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

作成したソースコードをGithubにアップロードしましょう。

リポジトリ、ブランチ、ファイルパスを選択
⑤ デプロイ

必要項目を入力しDeploy!をクリックするとデプロイされます。
アプリのデプロイが完了するとURLが発行されるので確認してみましょう。

おわりに

本アプリの実装自体は非常に簡単に行うことができ、公開することができることがわかりました。

まずはエンジニアの入り口として触ってみることをお勧めします。これからエンジニアになろうとしている方、駆け出しエンジニアの方は是非ご活用ください。

以上、WIZAPPエンジニアブログの第三弾でした!