Google Colab上でStreamlitを使って簡単なWebアプリを作成し、ngrokを利用して外部に公開する方法を解説します。 

1. 事前知識

1.1 streamlitとは

Streamlitは、PythonコードのみでシンプルなWebアプリを作成できるライブラリです。環境変数の設定が不要で、HTMLなしでUI画面を作成できます。素早くデモアプリを試作する時に便利です。

1.2 ngrokとは

_- visual selection
ngrokは、ローカル環境で動作しているWebアプリを、外部に公開できるサービスです。ローカル環境にセキュアなトンネルを作成し、一時的なパブリックURLを付与できます。Colab環境で動いているwebアプリにも、インターネット上からアクセスできるURLを付与できます。

特徴は、簡単なコマンドでトンネルが張れること、デフォルトでHTTPSの暗号化通信に対応していること、無料で使えることです。つまり、開発したWebアプリをテストしたり、デモアプリを他者に共有したいときに便利です。

2. 環境構築

2.1 Google Colabの登録

1. Googleアカウントでログインし、Google Colabにアクセスします。
2. 左下の「ノートブックを新規作成」ボタンを押下すると、Jupyter notebookが開きます。

2.2 ngrokのアカウント登録

1.ngrokの公式サイトへアクセス
ngrok公式サイト にアクセスし、トップページの「Sign up」もしくは「Get started for free」ボタンをクリックします。

2.新規登録 (Sign up)
・Googleアカウント、GitHubアカウント、メールアドレス等の方法で登録します。

3.Auth Tokenの取得
ログイン後、画面左上の「Your Authtoken」を押下してください。画面上部の「Your Authtoken」からAuthtokenキーをコピーできます。この後のngrokの設定で利用します。

2.3 ライブラリのインストール

Colabノートブックで以下のコマンドを実行し、Streamlitとngrokをインストールします。
!pip install streamlit
!pip install pyngrok

3. Streamlitで簡単なアプリ作成

3.1 Streamlitの簡易アプリ作成

Streamlitはボタンやテキスト入力などのUIを簡単に作成できます。以下は入力フォームの例です。また、%%writefileのマジックコマンドで、作成したコードを「app.py」に書き込みます。
#指定したファイル (app.py) にセルの内容を書き込む
%%writefile app.py

import streamlit as st

st.title("Streamlit簡易アプリ")
st.header("入力フォーム")
name = st.text_input("お名前を教えてください")
age = st.number_input("年齢を入力してください", min_value=0, max_value=100, value=20)

option = st.selectbox(
    'Streamlitを学びたい理由を教えてください', 
    ['Webアプリを簡単に作りたい', 'Webアプリを手軽に公開したい', '機械学習のデモを開発したい']
)

if st.button("送信"):
    st.write(f"こんにちは！{name}さんは「 {option} 」ためにStreamlitを学びたいんですね。")

3.2 Authtokenの設定

ngrokで接続するために必要な「Authtoken」を設定します。以下のYOUR_NGROK_AUTH_TOKENの箇所に、2.2節で取得したご自身のAuthtokenを設定してください。
!ngrok authtoken YOUR_NGROK_AUTH_TOKEN

3.3 ngrokでstreamlitアプリの公開

streamlitのrunコマンドでアプリを起動します。ノートブックのセルの実行をブロックしないように、&>/dev/null&で出力を表示させずにバックグラウンドで実行します。
なお、streamlitは 8501 番ポートがデフォルトで使用されますが、今回は8000番ポートを明示的に指定しています。
!streamlit run app.py --server.port 8000 &>/dev/null&

ngrokの操作です。まず起動中のngrokのプロセスを終了させます。ngrokの無料プランは同時に1つのプロセスしか動かせないためです。
次に、Streamlit アプリの 8000 番ポートと ngrok をトンネル接続させます。public_url は、そのトンネルを介して外部からアクセスできる URL を取得するプロパティです。
from pyngrok import ngrok

#ngrokのプロセス終了
ngrok.kill() 

#新たにポートを設定して接続
url = ngrok.connect("8000").public_url

#urlの表示
print(url)

上記を実行すると、外部からアクセスするためのURL: https://xxxx..ngrok-free.appが表示されます。このURLにアクセスすると、Colabで起動しているStreamlitアプリを外部から確認できます。

以上の手順で、Colab環境のStreamlitアプリを公開できます。

関連記事：DeepSeek-R1をColabで動かしてみた！7B・14B・32Bの日本語出力を検証