# WindowsでStremlitを実行するまでのStep by step ## 前提条件 * Windows環境・WSL不使用 * [Windows版Python](https://www.python.org/downloads/windows/)(exe版)インストール済み * [Visual Studio Code](https://code.visualstudio.com/)と[Python拡張機能](https://marketplace.visualstudio.com/items?itemName=ms-python.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仮想環境をインストールします。 まずVS Codeメニューの「ターミナル」→「新しいターミナル」を開きます。WindowsのターミナルではLinuxやMacと違う「PowerShell」という特殊なターミナルが使われます。そういうこともあり、途中、Windowsだけの設定が必要になります。 プロジェクトのフォルダーに居ることを確認して以下のコマンドでPython仮想環境(venv)をインストールします ```powershell py.exe -m venv .env ``` 続いてPowerShell上でpipからのインストールを許可するために権限を設定します。これは1回実行するだけで次回以降は実行する必要はありません。 ```powershell Set-ExecutionPolicy RemoteSigned -Scope CurrentUser -Force ``` Python仮想環境を有効化するために以下のコマンドを実行します。 ```powershell .\.env\Scripts\Activate.ps1 ``` するとコマンドプロンプトの頭に`(.env)`が付きます。これが付いていると仮想環境が有効になっているのでStremlitなどライブラリをインストールできます。 ```powershell PS C:\src\stproject> # Python仮想環境有効前 (.env) PS C:\src\stproject> #Python仮想環境有効後 ``` ターミナルを開いたとき、頭に`(.env)`が付いていない場合があります。その場合、`.\.env\Scripts\Activate.ps1`を実行する必要があります。 また、別のプロジェクトを作る場合もこの手順で仮想環境を作成する必要があります。 ## Streamlitのインストールと確認 Streamlitを[公式ページに書いてある](https://streamlit.io/#install)ようにインストールします。 ```powershell pip install streamlit ``` 続けてStreamlitを実行してきちんとインストールできたか確認します。下のコマンドを実行するとメッセージが表示された後`EMAIL`で止まりますが、入力せずにEnterキーで進めて構いません。（ここでメールアドレスを入力するとStreamlitのメーリングリストに登録されて情報が送られてきます） ```powershell streamlit.cmd hello ``` その後、Windowsファイヤーウォールが表示されますが、Streamlitを実行するには通信が必要なので許可してください。 これで実行できればStreamlitのインストールは終了です。 ## Streamlitの簡単なプログラムを実行する 公式ページのトップにある動画で簡単なプログラムを紹介しています。この簡単なプログラムを作成して実行できるか確認します。 VS Codeエクスプローラー内を右クリックして「新しいファイル」を選択します。ファイル名は`hello.py`と付けます。 ファイルを作成したら次のプログラムを記述します。（トップページ動画と同じもの） ```python import streamlit as st st.write(""" # My first app Hello *world!* """) ``` 記述したらファイルを保存します。（保存せずに「実行できない」という学生が意外と多いので念のため） VS Codeメニューの「ターミナル」→「新しいターミナル」を開いて、次のコマンドから記述したプログラムを起動します。 ```powershell streamlit.cmd run .\hello.py ``` デモプログラムと同様、自動的にブラウザが開いて「Hello world!」と表示されればプログラムも実行できます。 ## VS Codeのデバッガーを設定する 毎回、コマンドから実行してもいいのですがF5キーを押すだけで実行できれば楽です。デバッグ用の設定ファイル`launch.json`も作ってしまいましょう。 サイドバーのデバッグボタンを押します。（デバッグボタンは、てんとう虫のようなアイコンです）。 表示されたサイドバーに「実行とデバッグをカスタマイズするには、launch.jsonファイルを作成します。」という文章があるので、この文章の`launch.json`のリンクをクリックします。 メニューが開いたら、「Python Debugger」を選択します。続くデバッグファイルの種類は、「Pythonファイル」を選択します。すると、`.vscode`フォルダーにある`launch.json`ファイルが開くので、これを編集します。（8行目と9行目を変更後のように変更する） ### 変更前 ```json { "version": "0.2.0", "configurations": [ { "name": "Python デバッガー: 現在のファイル", "type": "debugpy", "request": "launch", "program": "${file}", "console": "integratedTerminal" } ] } ``` ### 変更後 ```json { "version": "0.2.0", "configurations": [ { "name": "Python デバッガー: 現在のファイル", "type": "debugpy", "request": "launch", "module": "streamlit", "args": [ "run", "${file}", "--server.port", "5678" ] } ] } ``` `launch.json`ファイルを保存したら、**`hello.py`ファイルのほうに戻って**F5キーを押してみましょう。これでコマンドを入力しなくても実行できるようになりました。