😃

StreamlitをGoogle Colabで速攻で試そう!

2022/12/23に公開
2

本記事執筆の背景

  • データ分析結果の可視化結果等をWebUIで表現するアプリケーションを簡単に作るツールとして、PythonのStreamlitを知った。
  • Streamlitは、ひとまず動くものを見せてアプリのイメージを沸かせたり、少人数で試しに使うレベルのプロトタイプを作るフェーズに適している。
  • 今回はそんなStreamlitをGoogle Colabで簡単に試す方法を紹介し、誰もが「Streamlitってこんなことができるんだね~」と10分ほどで思えるようになることを目指します。

本記事の想定対象

  • Google Colabの基本的な使い方を理解している方
  • Pythonを用いたデータ分析結果をWebUI上で可視化してみたい方
  • Streamlitに興味があり、まずは簡単に試してみたい方

本記事執筆にあたるインプット内容

Google ColaboratoryでサクっとStreamlit(最小構成)
:Google Colabで最小構成でstreamlitの動作を確認できる環境を作るために参考

Python: Streamlit を使って手早く WebUI 付きのプロトタイプを作る
:streamlitの様々なサンプルコードがまとまっている

早速やってみよう!(約3分)

Google Colabで新規ノートブックを作りましょう。

新規ノートブックで、以下の内容を記述し、終わったら早速全セルを実行してみましょう。

#numpy, pandas, streamlitのパッケージインストール
import numpy as np
import pandas as pd
!pip install streamlit
#streamlitメインの処理を/content/app.pyに保存
#%%writefile app.py以降の記述を変えれば色々とstreamlitを試せる
#試す内容はインプット元の②の色々なサンプルコードを参照
#以下は5秒のカウントダウン後に風船を飛ばすコードを記載

%%writefile app.py
import time

import streamlit as st


def main():
    status_area = st.empty()

    # カウントダウン
    count_down_sec = 5
    for i in range(count_down_sec):
        # プレースホルダーに残り秒数を書き込む
        status_area.write(f'{count_down_sec - i} sec left')
        # スリープ処理を入れる
        time.sleep(1)

    # 完了したときの表示
    status_area.write('Done!')
    # 風船飛ばす
    st.balloons()


if __name__ == '__main__':
    main()
#Google Colabのファイルブラウザを起動し、エディタでapp.pyを開く
#動作上は必須作業ではない
from google.colab import files
files.view("/content")
files.view("app.py")
#次のコード実行する際にprotobufのバージョン起因のエラーが出るので、それを直すおまじない
!pip install --upgrade protobuf
#streamlitをlocaltunnelのトンネルで起動
#実行画面に出るyour url is:のurlに接続し、ブラウザの別タブに移動
#Click to Continueでstreamlitの動作を確認
#確認が終わったらこのセルの実行を停止する
!streamlit run app.py & sleep 3 && npx localtunnel --port 8501

上記ができたら、あとは上記の2番目のセルのコメントにある通り、%%writefile app.py以降の記述を色々と変えればstreamlitの様々な機能を試せます。
試す内容はインプット元の②の色々なサンプルコードを参照してください。
基本的に②の記事にある様々なサンプルコードをコピペするだけで色々と試せます。

今更ですが、上記をGoogle Colabでそのまま書いたものがこちらです。コピーを保存してお使いいただけると思います。

まとめ

これを一回作ればもうサンプルコードを変えるだけで色々できますし、Google Colabのノートブックを他の人にも共有して皆でstreamlitのお手軽さを簡単に知れると思います。
これをきっかけにpythonを活用したデータ分析結果を利用したアプリ開発のハードルが下がって多くの人が色々と試しやすくなると良いなと思います。
個人的なネクストアクションとしては、私はまだインプット元②のサンプルコードしか動かしていないので、自分の実務上の課題に沿ったアプリを作ってみたいなと思います。

Aidemy Tech Blog

Discussion

kiryu-3kiryu-3

始めまして!
最近独学でStreamlitを学んでいる者です。

私も同じようにgoogleColabで

!streamlit run app.py & sleep 3 && npx localtunnel --port 8501

と入力して実行していました。
2か月ほど前はうまく実行できていましたが、2023年6月現在はlocaltunnelのセキュリティの関係なのかうまくurlが表示されなくなってしまいました。
もう使えなくなってしまったのでしょうか?
参考ツイート:https://twitter.com/ison1232/status/1668196925945036800

ErikaOtaErikaOta

こんにちは!コメントいただきありがとうございます。
こちらですが、以下のコードをコメントアウトすると上手くいくかと思いますが、いかがでしょうか?

!pip install --upgrade protobuf

よろしくお願いします。