![[kaneko lab.]](https://www.kkaneko.jp/info/logo_png.png){kind=logo}
Dash のインストールと動作確認
【概要】
Dash は、Plotly.js を基盤としたグラフや表を Web ブラウザ上に表示し、利用者による対話的な操作を可能にする Python の Web アプリケーションフレームワークである。ここでは Dash のインストールから動作確認までの手順を示す。基本的な棒グラフの表示、DataTable の定期更新、コールバックによる対話的更新の 3 つのプログラム例を取り上げる。
【目次】
- 第１章 前準備
- 第２章 必要なライブラリのインストール
- 第３章 実行のための準備とその確認手順（Windows 前提）
- 第４章 各プログラムの概要・使い方・実行上の注意
- 第５章 演習１：基本の棒グラフを表示する
- 第６章 演習２：DataTable を定期更新する
- 第７章 演習３：コールバックで対話的に更新する
- 第８章 まとめ
【関連する外部ページ】
- Dash 公式サイト: https://dash.plotly.com/
- Dash のインストール: https://www.kkaneko.jp/pro/webui/dash.html
【サイト内の関連情報】
第１章 前準備
Python 3.12 のインストール
Pythonのインストールを行い、Pythonのプログラムを実行する環境を整える。扱う環境は、Windows搭載パソコンである。金子研究室では、Python 3.12.10を推奨する。
[Windows での Python 3.12 のインストール手順を見るには、ここをクリック]
Windows での Python 3.12 のインストール
以下のいずれかの方法でPython 3.12をインストールする。Pythonがインストール済みの場合、この手順は不要である。
方法 1：winget によるインストール
【インストールコマンドの実行方法】
管理者権限でコマンドプロンプトを起動する（手順：Windowsキーまたはスタートメニュー → cmd と入力 → 右クリック → 「管理者として実行」）。そして、コマンド全体をコマンドプロンプトにコピー＆ペーストする。
--scope machine を指定することで、システム全体（全ユーザー向け）にインストールされる。このオプションの実行には管理者権限が必要である。インストール完了後、コマンドプロンプトを再起動するとPATHが反映される。
REM Python 3.12 をシステム領域にインストール
winget install --id Python.Python.3.12 -e --scope machine --silent --accept-source-agreements --accept-package-agreements --override "/quiet InstallAllUsers=1 PrependPath=1 Include_test=0 Include_pip=1 Include_launcher=1 InstallLauncherAllUsers=1 TargetDir=\"C:\Program Files\Python312\""
if not "%ERRORLEVEL%"=="0" ( color 0c & echo Python 3.12 のインストールに失敗しました & ping 127.0.0.1 -n 6 >nul & color )
REM Python と Scripts を PATH 先頭に追加
powershell -NoProfile -Command "$p='C:\Program Files\Python312'; $s=\"$p\Scripts\"; if(Test-Path $p){$k=[Microsoft.Win32.Registry]::LocalMachine.OpenSubKey('SYSTEM\CurrentControlSet\Control\Session Manager\Environment',$true); $c=$k.GetValue('Path','',[Microsoft.Win32.RegistryValueOptions]::DoNotExpandEnvironmentNames); $t=$k.GetValueKind('Path'); $new=$c; if((';'+$new+';') -notlike \"*;$p;*\"){$new=$p+';'+$new}; if((';'+$new+';') -notlike \"*;$s;*\"){$new=$s+';'+$new}; if($new -ne $c){$k.SetValue('Path',$new,$t)}; $k.Close()}"
REM 現在のセッションにも反映（システムPATHを再取得して連結）
for /f "usebackq tokens=2,*" %A in (`reg query "HKLM\SYSTEM\CurrentControlSet\Control\Session Manager\Environment" /v Path`) do set "PATH=%B"
REM pip / wheel の更新
python -m pip install --no-user -U pip wheel
if not "%ERRORLEVEL%"=="0" ( color 0c & echo pip / wheel の更新に失敗しました & ping 127.0.0.1 -n 6 >nul & color )
方法 2：インストーラーによるインストール
- Python公式サイト（https://www.python.org/downloads/）にアクセスし、「Download Python 3.x.x」ボタンからWindows用インストーラーをダウンロードする。
- ダウンロードしたインストーラーを実行する。
- 初期画面の下部に表示される「Add python.exe to PATH」にチェックを入れてから「Customize installation」を選択する。このチェックを入れ忘れると、コマンドプロンプトから
pythonコマンドを実行できない。 - 「Install Python 3.xx for all users」にチェックを入れ、「Install」をクリックする。
インストールの確認
コマンドプロンプトで以下を実行する。
python --versionバージョン番号（例：Python 3.12.x）が表示されればインストール成功である。「'python' は、内部コマンドまたは外部コマンドとして認識されていません。」と表示される場合は、インストールが正常に完了していない。
Python の開発環境 Visual Studio Code のインストールと Python 用の設定
Python の開発環境Visual Studio Code（プログラムを編集するソフトウェア。以下、VS Code）を整える。
[Windows での Visual Studio Code のインストールと Python 用の設定手順を見るには、ここをクリック]
Windows での Visual Studio Code のインストールと Python 用の設定手順
1. VS Code と拡張機能のインストール
以下のコマンドにより，既存の VS Code を削除し，全ユーザー共有の設定で再インストールしたうえで，拡張機能（VS Code に機能を追加するソフトウェア）をまとめて導入する．
【インストールコマンドの実行方法】
管理者権限でコマンドプロンプトを起動する（手順：Windows キーまたはスタートメニュー → cmd と入力 → 右クリック → 「管理者として実行」）。そして，コマンド全体をコマンドプロンプトにコピー＆ペーストする。
インストールコマンド
REM ============================================================
REM Microsoft Visual Studio Code
REM ============================================================
REM Build Tools + Desktop development with C++（VCTools）+ 追加コンポーネント（一括）
REM 未インストール時: winget で新規インストール
REM インストール済み時: setup.exe modify でコンポーネント追加（バージョンは変更しない）
winget list --id Microsoft.VisualStudio.BuildTools 2>nul | findstr /i "BuildTools" >nul 2>&1
if %ERRORLEVEL% EQU 0 (
for /f "usebackq delims=" %P in (`"C:\Program Files (x86)\Microsoft Visual Studio\Installer\vswhere.exe" -products Microsoft.VisualStudio.Product.BuildTools -property installationPath`) do start /wait "" "C:\Program Files (x86)\Microsoft Visual Studio\Installer\setup.exe" modify --installPath "%P" --add Microsoft.VisualStudio.Workload.VCTools --add Microsoft.VisualStudio.Workload.MSBuildTools --add Microsoft.VisualStudio.Component.VC.CMake.Project --add Microsoft.VisualStudio.Component.VC.Llvm.Clang --add Microsoft.VisualStudio.Component.VC.Llvm.ClangToolset --add Microsoft.VisualStudio.Component.Windows11SDK.26100 --add Microsoft.VisualStudio.Component.VC.v143.x86.x64 --includeRecommended --quiet --norestart --nocache
if not "%ERRORLEVEL%"=="0" ( color 0c & echo Build Tools のコンポーネント追加に失敗しました & ping 127.0.0.1 -n 6 >nul & color )
) else (
winget install --scope machine --id Microsoft.VisualStudio.BuildTools -e --silent --disable-interactivity --force --accept-source-agreements --accept-package-agreements --override "--quiet --wait --norestart --nocache --add Microsoft.VisualStudio.Workload.VCTools --includeRecommended --add Microsoft.VisualStudio.Workload.MSBuildTools --add Microsoft.VisualStudio.Component.VC.CMake.Project --add Microsoft.VisualStudio.Component.VC.Llvm.Clang --add Microsoft.VisualStudio.Component.VC.Llvm.ClangToolset --add Microsoft.VisualStudio.Component.Windows11SDK.26100 --add Microsoft.VisualStudio.Component.VC.v143.x86.x64"
if not "%ERRORLEVEL%"=="0" ( color 0c & echo Build Tools のインストールに失敗しました & ping 127.0.0.1 -n 6 >nul & color )
)
REM 全ユーザー共有の拡張機能フォルダ
if not exist "C:\ProgramData\vscode-extensions" mkdir "C:\ProgramData\vscode-extensions"
icacls "C:\ProgramData\vscode-extensions" /grant "Everyone:(OI)(CI)M" /T
REM スタートメニューのショートカットを --extensions-dir 付きで再作成
if exist "C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Visual Studio Code" rmdir /s /q "C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Visual Studio Code"
if exist "C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Visual Studio Code.lnk" del "C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Visual Studio Code.lnk"
powershell -NoProfile -Command "$s=New-Object -ComObject WScript.Shell; $lnk=$s.CreateShortcut('C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Visual Studio Code.lnk'); $lnk.TargetPath='C:\Program Files\Microsoft VS Code\Code.exe'; $lnk.Arguments='--extensions-dir \"C:\ProgramData\vscode-extensions\"'; $lnk.Save()"
REM ショートカットの検証
powershell -NoProfile -Command "$s=New-Object -ComObject WScript.Shell; $lnk=$s.CreateShortcut('C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Visual Studio Code.lnk'); Write-Host 'TargetPath:' $lnk.TargetPath; Write-Host 'Arguments:' $lnk.Arguments"
REM ファイル / フォルダ右クリックの「Code で開く」を登録
reg add "HKLM\SOFTWARE\Classes\*\shell\VSCode\command" /ve /d "\"C:\Program Files\Microsoft VS Code\Code.exe\" --extensions-dir \"C:\ProgramData\vscode-extensions\" \"%1\"" /f
reg add "HKLM\SOFTWARE\Classes\Directory\shell\VSCode\command" /ve /d "\"C:\Program Files\Microsoft VS Code\Code.exe\" --extensions-dir \"C:\ProgramData\vscode-extensions\" \"%1\"" /f
reg add "HKLM\SOFTWARE\Classes\Directory\Background\shell\VSCode\command" /ve /d "\"C:\Program Files\Microsoft VS Code\Code.exe\" --extensions-dir \"C:\ProgramData\vscode-extensions\" \"%V\"" /f
REM --extensions-dir 付きで起動する code.cmd ラッパを作成
REM （%* を echo で書くと対話的 cmd で失われるため、PowerShell で [char]37+'*' を書き出す）
powershell -NoProfile -Command "$pct=[char]37; $q=[char]34; $c='@echo off'+[char]13+[char]10+$q+'C:\Program Files\Microsoft VS Code\bin\code.cmd'+$q+' --extensions-dir '+$q+'C:\ProgramData\vscode-extensions'+$q+' '+$pct+'*'+[char]13+[char]10; [IO.File]::WriteAllText('C:\ProgramData\vscode-extensions\vscode.cmd',$c,[Text.Encoding]::ASCII)"
REM 拡張機能のインストール
set "CODE=C:\Program Files\Microsoft VS Code\bin\code.cmd"
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --uninstall-extension GitHub.copilot
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --uninstall-extension GitHub.copilot-chat
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension ms-python.python
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension ms-python.vscode-pylance
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension ms-python.debugpy
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension MS-CEINTL.vscode-language-pack-ja
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension saoudrizwan.claude-dev
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension rust-lang.rust-analyzer
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension tamasfe.even-better-toml
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension anthropic.claude-code
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --install-extension almenon.arepl
"%CODE%" --extensions-dir "C:\ProgramData\vscode-extensions" --list-extensions --show-versions
REM settings.json を作成（自動更新オフ、Python、Claude Code 設定）
if not exist "%APPDATA%\Code\User" mkdir "%APPDATA%\Code\User"
python -c "import json,os;data={'update.mode':'none','update.enableWindowsBackgroundUpdates':False,'extensions.autoUpdate':False,'python.defaultInterpreterPath':r'C:\Program Files\Python312\python.exe','claudeCode.environmentVariables':[{'name':'ANTHROPIC_API_KEY','value':'not-needed'},{'name':'ANTHROPIC_AUTH_TOKEN','value':'ollama'},{'name':'ANTHROPIC_BASE_URL','value':'http://localhost:11434'},{'name':'ANTHROPIC_MODEL','value':'glm-4.7-flash'},{'name':'CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC','value':'1'}]};p=os.path.join(os.environ['APPDATA'],'Code','User','settings.json');open(p,'w',encoding='utf-8').write(json.dumps(data,indent=4));print('Done:',p)"
REM 自動更新の抑止ポリシー（settings.json に加えて、レジストリ側でも明示的にオフ）
reg add "HKLM\SOFTWARE\Policies\Microsoft\VSCode" /v "UpdateMode" /t REG_SZ /d "none" /f
echo === セットアップ完了 ===
2. Python インタプリタの選択
同一マシンに複数の Python がインストールされている場合，VS Code で使用する Python 本体（インタプリタ：Python プログラムを解釈・実行するソフトウェア）を選択する必要がある．
- コマンドパレット（コマンド名で機能を呼び出す VS Code の入力欄）を開く（
Ctrl+Shift+P） Python: Select Interpreterと入力する
- 表示される一覧から，使用する Python（例：
C:\Program Files\Python312\python.exe）を選択する．
Python プログラム実行手順
[Windows での Python プログラム実行手順を見るには、ここをクリック]
Windows での Python 実行手順（Visual Studio Codeを使用）
プログラムファイルの作成と保存
- 左サイドバーの「エクスプローラー」アイコン（
Ctrl+Shift+E）をクリックする
- 「NO FOLDER OPENED」（作業対象フォルダが未選択の状態）と表示される場合は，「Open Folder」をクリックし，プログラムを保存するフォルダを選択する
続いて「フォルダを信用するか」を確認する画面（フォルダ内のコードを実行してよいか確認する VS Code の仕組み）が表示されるので，チェックして Yes を選択する
- フォルダ名の右側に表示される「新しいファイル」アイコンをクリックする
- ファイル名（例：
aitask.py．ファイル名は何でも良い）を入力しEnterを押す．拡張子は.py（Python ファイルを示す拡張子）とする
- 実行したいコードを選択し，
Ctrl+Cでコピーする．VS Code のエディタ領域にCtrl+Vで貼り付ける Ctrl+Sで保存する
プログラムの実行
- エディタ右上の三角形「▷」アイコン（Run Python File：現在開いている Python ファイルを実行するボタン）をクリックする．または，エディタ上で右クリックし「ターミナルで Python ファイルを実行」を選択する
- VS Code 下部のターミナル（コマンドの入出力を表示する画面）に，実行結果（
print関数の出力等）が表示される
- tkinter（Python 標準の GUI ライブラリ）のファイル選択ダイアログを使うプログラムを実行した場合は，ダイアログが開くので対象画像を選択する
- VS Code 下部のターミナルで実行結果を確認する．OpenCV ウィンドウ（OpenCV が画像を表示するために開く専用ウィンドウ）が開いた場合はそちらも確認する．OpenCV ウィンドウは，マウスクリックでウィンドウをアクティブ（操作対象の状態）にしてからキーを押すと終了する
第２章 必要なライブラリのインストール
管理者権限でコマンドプロンプトを起動する
（手順：Windowsキーまたはスタートメニュー → cmd と入力 → 右クリック → 「管理者として実行」）。
起動したコマンドプロンプトで、次を実行する。
python -m pip install -U --no-user pandas dash dash-daq第３章 実行のための準備とその確認手順（Windows 前提）
3.1 プログラムファイルの準備
各演習に掲載するソースコードをテキストエディタ（メモ帳等）に貼り付けて保存する（文字コード：UTF-8）。コマンドプロンプトから次のコマンドでメモ帳を起動し、ファイルを作成することもできる。
cd /d c:%HOMEPATH%
notepad a.py3.2 実行コマンド
コマンドプロンプトでファイルの保存先ディレクトリに移動し、次を実行する（a.py は保存したファイル名に読み替える）。
python a.py3.3 動作確認チェックリスト
| 確認項目 | 期待される結果 |
|---|---|
| プログラムを実行 | 開発用サーバが起動し、コマンドプロンプトに URL が表示される |
Web ブラウザで http://localhost:8050 にアクセス | 「Hello Dash」の見出しと棒グラフが表示される（演習１の場合） |
| 定期更新プログラムを実行 | DataTable の値が定期的に更新される（演習２の場合） |
| コールバックプログラムでドロップダウンを操作 | 選択した都市に応じて棒グラフが切り替わる（演習３の場合） |
第４章 各プログラムの概要・使い方・実行上の注意
基本の棒グラフ
棒グラフを表示する基本的な Dash アプリケーションである。dcc.Graph コンポーネントにデータとレイアウトを辞書形式で渡すことで、SF と Montréal の 2 系列の棒グラフを描画する。
DataTable の定期更新
Dash のレイアウトを定期的に更新するプログラムである。worker 関数が定期的に実行され、DataFrame（pandas の表形式データ構造）の値を更新し、do_layout() を呼び出して app.layout を更新する。worker 関数を定期的に実行するために、更新ループをマルチスレッド（複数の処理を並行して動かす仕組み）で実行する。
app.run() では debug=False を指定する。デバッグモードを有効にすると Dash がプログラムを再読み込みする場合があり、別スレッドでの定期更新と競合するためである。
コールバックによる対話的更新
Dash のコールバック機能により、利用者の操作に応じてグラフを更新できる。ドロップダウンメニューで選択したデータ系列を棒グラフに表示する。
第５章 演習１：基本の棒グラフを表示する
テーマ名：基本の棒グラフを表示する Dash アプリケーション
手順：
- 次のコードを実行する(メモ帳を用いる場合は a.py のようなファイル名で保存して実行)。
- 実行後、Web ブラウザで
http://localhost:8050にアクセスする。 - 「Hello Dash」の見出しと、2 系列の棒グラフが表示されることを確認する。
ヒント：
dcc.Graphのfigureには、データ系列を表すdataと、表示設定を表すlayoutを辞書で渡す。
考察ポイント：
dataの各要素のnameが、グラフの凡例にどう対応しているかを確認する。
# -*- coding: utf-8 -*-
from dash import Dash, dcc, html
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div(children=[
html.H1(children='Hello Dash'),
html.Div(children='''
Dash: A web application framework for Python.
'''),
dcc.Graph(
id='example-graph',
figure={
'data': [
{'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
{'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': 'Montréal'},
],
'layout': {
'title': 'Dash Data Visualization'
}
}
)
])
if __name__ == '__main__':
app.run(debug=True)第６章 演習２：DataTable を定期更新する
テーマ名：DataTable を定期的に更新する Dash アプリケーション
手順：
- 次のコードを実行する(メモ帳を用いる場合は a.py のようなファイル名で保存して実行)。
- 実行後、Web ブラウザで
http://localhost:8050にアクセスする。 - ブラウザを再読み込みしながら、表の値が定期的に変化することを確認する。
ヒント：
- 更新ループを別スレッドで動かし、その中で
app.layoutを作り直している。 app.run()ではdebug=Falseを指定する。
考察ポイント：
- ブラウザの再読み込みのたびに、表の左上の値がどのように変わるかを確認する。
# -*- coding: utf-8 -*-
from dash import Dash, dash_table, html
import pandas as pd
import time
import threading
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = Dash(__name__, external_stylesheets=external_stylesheets)
X = pd.DataFrame([[1, 2, 3], [4, 1, 2]])
def do_layout():
app.layout = html.Div(children=[
html.H1(children='Hello Dash'),
html.Div(children='Dash: A web application framework for Python.'),
dash_table.DataTable(
id='table',
columns=[{"name": str(i), "id": str(i)} for i in X.columns],
data=X.to_dict("records")
)
])
def worker():
do_layout()
X.iloc[0, 0] = X.iloc[0, 0] + 1
def mainloop():
time_interval = 5
while True:
t = threading.Thread(target=worker)
t.start()
t.join()
time.sleep(time_interval)
if __name__ == '__main__':
t0 = threading.Thread(target=mainloop)
t0.start()
app.run(debug=False)第７章 演習３：コールバックで対話的に更新する
テーマ名：コールバックによる対話的なグラフ更新
手順：
- 次のコードを実行する(メモ帳を用いる場合は a.py のようなファイル名で保存して実行)。
- 実行後、Web ブラウザで
http://localhost:8050にアクセスする。 - ドロップダウンメニューで都市を切り替え、棒グラフが変化することを確認する。
ヒント：
@app.callbackは、Inputの値が変わるとOutputの対象を更新する。
考察ポイント：
- ドロップダウンの選択値が、コールバック関数の引数を通じてグラフにどう反映されるかを確認する。
# -*- coding: utf-8 -*-
from dash import Dash, dcc, html, Input, Output
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = Dash(__name__, external_stylesheets=external_stylesheets)
data = {
'SF': {'x': [1, 2, 3], 'y': [4, 1, 2]},
'Montréal': {'x': [1, 2, 3], 'y': [2, 4, 5]},
'Tokyo': {'x': [1, 2, 3], 'y': [3, 3, 4]},
}
app.layout = html.Div([
dcc.Dropdown(
id='city-dropdown',
options=[{'label': c, 'value': c} for c in data],
value='SF'
),
dcc.Graph(id='city-graph')
])
@app.callback(Output('city-graph', 'figure'), Input('city-dropdown', 'value'))
def update_graph(city):
d = data[city]
return {'data': [{'x': d['x'], 'y': d['y'], 'type': 'bar', 'name': city}],
'layout': {'title': city}}
if __name__ == '__main__':
app.run(debug=True)第８章 まとめ
- Dash フレームワーク：Dash は、Plotly.js を基盤としたグラフや表を Web ブラウザ上に表示し、利用者による対話的な操作を可能にする Python の Web アプリケーションフレームワークである。
- インストール：Python がインストールされた環境で、
python -m pip install -U --no-user pandas dash dash-daqを実行することで必要なライブラリが導入される。 - 動作確認：プログラム実行後、Web ブラウザで
http://localhost:8050にアクセスすることで動作を確認できる。 - 定期更新とマルチスレッド：Dash のレイアウトを定期的に更新するには、worker 関数をマルチスレッドで実行する。この場合、
app.run()ではdebug=Falseを指定する。 - コールバックによる対話的更新：Dash のコールバック機能により、利用者の操作に応じてグラフを更新できる。ドロップダウンメニュー等のコンポーネントとグラフを連動させることで、対話的なデータ可視化を実現できる。