StremlitをWindowsネイティブ環境で実行するまでのStep by step
最初に
このテキストは、姫路IT系勉強会で出た話題を受けて書いたテキストの転載です。
勉強会で、プログラミングについてなにも知らないWindowsユーザーから「PythonのStreamlitが実行できない」という相談があって書いたため、迷わないように環境を限定して書いています。また、筆者はDebian GNU/LinuxユーザーでWindowsには不慣れなため、記述に間違いがある可能性もあります。お気づきの点がありましたらコメントをお願いします。
姫路IT系勉強会は、兵庫県姫路市にて毎月第3土曜日に開催しているITエンジニア向け勉強会です。勉強会については、さくらインターネットのさくらのナレッジで紹介されているので、こちらもご覧ください。
前提条件
インストールした環境は次の環境です。PythonはMicrosoftストア版ではないので注意してください。
- Windowsネイティブ環境・WSL不使用
- Windows版Python(exe版)インストール済み
- Visual Studio CodeとPython拡張機能インストール済み
参考
- 仮想環境: Python環境構築ガイド - python.jp: https://www.python.jp/install/windows/venv.html
- Python in Visual Studio Code: https://code.visualstudio.com/docs/languages/python
実行前の準備
プロジェクトを保存するフォルダーを作成
Pythonでプログラムを書く場合、使用するライブラリが混ざらないようにプログラムごとにプロジェクトフォルダーを作成して、その中にPython仮想環境を作成して作成します。
プロジェクトのフォルダーは、どこに作ってもいのですが、Windowsの場合、Windowsの仕様によりフォルダー名に日本語や空白が含まれているとトラブルになることがあります。
そのため、筆者はCドライブ直下にsrc
というフォルダーを作ってその中に保存しています。
今回の例では、そのsrc
フォルダーの中にstproject
というフォルダーを作って(フルパスではc:\src\stproject
)、そこで作業しました。
VS Codeから作成したプロジェクトフォルダーを開く
VS Codeからプロジェクトのフォルダーを開くとフォルダーを信用するか?とダイアログが表示されます。プロジェクトのフォルダーは「信用する」にしてください。
Python仮想環境のインストール
Pythonのvenv
[1]というものを使ってプロジェクト用のPython仮想環境をインストールします。
まず、VS Codeメニューの「ターミナル」→「新しいターミナル」を開きます。WindowsのターミナルはLinuxやMacと違う「PowerShell」というWindows向けの違うターミナルが使われます。そのような事情もあり、Windowsの場合のみ途中で設定が必要になります。
ターミナルを開いたらプロジェクトのフォルダーにいることを確認します。VS Codeのエクスプローラーでプロジェクトのフォルダーを開いていれば、ターミナルは同じ場所で開くはずですが、このような表示になっていることを確認してください。
PS C:\src\stproject>
場所を確認したら次のコマンドでPython仮想環境(venv)をインストールします。2回目の.venv
は頭にドット(.)が付いているので注意してください。
py.exe -m venv .env
続いてPowerShell上でpipからのインストールを許可するために権限を設定します。これはWindows環境でのみ必要な作業で初回だけ実行します。2回目以降は実行する必要ありません。
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser -Force
venv
のPython仮想環境を有効化するために以下のコマンドを実行します。ここも頭はドット(.)から始まっていますが、Tabキーを押すとコマンドが自動的に補完(入力)されるので活用してください。
.\.env\Scripts\Activate.ps1
実行するとコマンドプロンプトの頭に(.env)
が付きます。これが付いていると仮想環境が有効になっているという印です。これでStremlitなどライブラリをインストールできます。
PS C:\src\stproject> # Python仮想環境有効前
(.env) PS C:\src\stproject> # Python仮想環境有効後
次回以降でターミナルを開いた場合、(.env)
が付かない場合があります。そのときは、上で実行した.\.env\Scripts\Activate.ps1
を最初に実行する必要があります。
また、Streamlitを使う以外で別のプロジェクトで作業する場合も、この手順で仮想環境を作成する必要があります。
Streamlitのインストールと確認
Streamlitを公式ページに書いてあるようにインストールします。
pip install streamlit
続けてStreamlitを実行して、きちんとインストールできたか確認します。次のようにコマンドを入力します。
streamlit.cmd hello
コマンドを実行するとメッセージが表示された後EMAIL
で止まります。これはメーリングリストの入会案内で、入力せずにEnterキーで進めて構いません。(ここでメールアドレスを入力するとStreamlitのメーリングリストに登録されます)
そして、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のデバッガーを設定する
Streamlitを実行する際、毎回、コマンドを使って実行してもいいのですがF5キーを押すだけで実行できれば楽です。デバッグ用のVS Code設定ファイルlaunch.json
[2]も作ってしまいましょう。
サイドバーのデバッグボタンを押します。(デバッグボタンは、てんとう虫のようなアイコンです)。
表示されたサイドバーに「実行とデバッグをカスタマイズするには、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キーを押してみましょう。これでコマンドを入力しなくても実行できるようになりました。
おわりに
これでWindows環境でPythonとStreamlitが実行できる環境ができました。本格的にプログラムを開発するには、ほかの設定も必要になりますが、ひとまず実行できるようになったのでいろいろ試してみましょう。
-
launch.json
の詳しい内容については、こちら Visual Studio Code debug configuration を参照してください。 ↩︎
Discussion