WindowsでStremlitを実行するまでのStep by step

nogajun
nogajun

これは姫路IT系勉強会で「WindowsでStreamlitがうまく動かない」という質問があったので書いた文書を転載しました。

WindowsでPythonを始めるには罠が多いよね。自分は、最初に使う環境にThonnyを推してるけど、またそれも書きます。

WindowsでStremlitを実行するまでのStep by step

前提条件

  • Windows環境・WSL不使用
  • Pythonインストール済み
  • Visual Studio CodeとPython拡張機能インストール済み

実行前準備

プロジェクトを保存するフォルダーを作成

Pythonでプログラムを書く場合、使用するライブラリが混ざらないようにプログラムごとにプロジェクトフォルダーを作成して、その中にPython仮想環境を作成してから作成します。

プロジェクトのフォルダーは、どこに作ってもいのですが、Windowsの場合、Windowsのクソ仕様のためフォルダー名に日本語と空白が含まれていると謎エラーが出ることが多いです。そのため、自分はCドライブ直下にsrcというフォルダーを作ってその中に保存しています。

今回の例では、そのsrcフォルダーの中にstprojectというフォルダーを作って（フルパスではc:\src\stproject）、そこで作業しました。

VS Codeから作成したプロジェクトフォルダーを開く

VS Codeからフォルダーを開くとフォルダーを信用するか?とダイアログが表示されます。プロジェクトのフォルダーは「信用する」にしてください。

Python仮想環境のインストール

プロジェクト用のPython仮想環境をインストールします。

まずVS Codeメニューの「ターミナル」→「新しいターミナル」を開きます。WindowsのターミナルではLinuxやMacと違う「PowerShell」という特殊なターミナルが使われます。そういうこともあり、途中、Windowsだけの設定が必要になります。

プロジェクトのフォルダーに居ることを確認して以下のコマンドでPython仮想環境(venv)をインストールします

py.exe -m venv .env

続いてPowerShell上でpipからのインストールを許可するために権限を設定します。これは1回実行するだけで次回以降は実行する必要はありません。

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser -Force

Python仮想環境を有効化するために以下のコマンドを実行します。

.\.env\Scripts\Activate.ps1

するとコマンドプロンプトの頭に(.env)が付きます。これが付いていると仮想環境が有効になっているのでStremlitなどライブラリをインストールできます。

PS C:\src\stproject>  # Python仮想環境有効前
(.env) PS C:\src\stproject>  #Python仮想環境有効後

ターミナルを開いたとき、頭に(.env)が付いていない場合があります。その場合、.\.env\Scripts\Activate.ps1を実行する必要があります。 また、別のプロジェクトを作る場合もこの手順で仮想環境を作成する必要があります。

Streamlitのインストールと確認

Streamlitを公式ページに書いてあるようにインストールします。

pip install streamlit

続けてStreamlitを実行してきちんとインストールできたか確認します。下のコマンドを実行するとメッセージが表示された後EMAILで止まりますが、入力せずにEnterキーで進めて構いません。（ここでメールアドレスを入力するとStreamlitのメーリングリストに登録されて情報が送られてきます）

streamlit.cmd hello

その後、Windowsファイヤーウォールが表示されますが、Streamlitを実行するには通信が必要なので許可してください。 これで実行できればStreamlitのインストールは終了です。

Streamlitの簡単なプログラムを実行する

公式ページのトップにある動画で簡単なプログラムを紹介しています。この簡単なプログラムを作成して実行できるか確認します。

VS Codeエクスプローラー内を右クリックして「新しいファイル」を選択します。ファイル名はhello.pyと付けます。 ファイルを作成したら次のプログラムを記述します。（トップページ動画と同じもの）

import streamlit as st

st.write("""
# My first app
Hello *world!*
""")

記述したらファイルを保存します。（保存せずに「実行できない」という学生が意外と多いので念のため）

VS Codeメニューの「ターミナル」→「新しいターミナル」を開いて、次のコマンドから記述したプログラムを起動します。

streamlit.cmd run .\hello.py

デモプログラムと同様、自動的にブラウザが開いて「Hello world!」と表示されればプログラムも実行できます。

VS Codeのデバッガーを設定する

毎回、コマンドから実行してもいいのですがF5キーを押すだけで実行できれば楽です。デバッグ用の設定ファイルlaunch.jsonも作ってしまいましょう。

サイドバーのデバッグボタンを押します。（デバッグボタンは、てんとう虫のようなアイコンです）。

表示されたサイドバーに「実行とデバッグをカスタマイズするには、launch.jsonファイルを作成します。」という文章があるので、この文章のlaunch.jsonのリンクをクリックします。

メニューが開いたら、「Python Debugger」を選択します。続くデバッグファイルの種類は、「Pythonファイル」を選択します。すると、.vscodeフォルダーにあるlaunch.jsonファイルが開くので、これを編集します。（8行目と9行目を変更後のように変更する）

変更前

{
  "version": "0.2.0",
  "configurations": [
      {
          "name": "Python デバッガー: 現在のファイル",
          "type": "debugpy",
          "request": "launch",
          "program": "${file}",
          "console": "integratedTerminal"
      }
  ]
}

変更後

{
  "version": "0.2.0",
  "configurations": [
      {
          "name": "Python デバッガー: 現在のファイル",
          "type": "debugpy",
          "request": "launch",
          "module": "streamlit",
          "args": [
              "run",
              "${file}",
              "--server.port",
              "5678"
          ]
      }
  ]
}

launch.jsonファイルを保存したら、hello.pyファイルのほうに戻ってF5キーを押してみましょう。

これでコマンドを入力しなくても実行できるようになりました。