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

【サイト内の関連情報】

Flask のインストール

第１章前準備

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\""

REM Python と Scripts を PATH 先頭に追加
powershell -NoProfile -Command "$p='C:\Program Files\Python312'; $s=\"$p\Scripts\"; $c=[Environment]::GetEnvironmentVariable('Path','Machine'); if((Test-Path $p) -and (';'+$c+';' -notlike \"*;$p;*\") -and (';'+$c+';' -notlike \"*;$s;*\")){[Environment]::SetEnvironmentVariable('Path',\"$p;$s;$c\",'Machine')}"

方法 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 ============================================================
winget uninstall -e --id Microsoft.VisualStudioCode --silent --disable-interactivity --accept-source-agreements
rmdir /s /q C:\ProgramData\vscode-extensions 2>nul
rmdir /s /q "%APPDATA%\Code" 2>nul
rmdir /s /q "%USERPROFILE%\.vscode" 2>nul
rmdir /s /q "%LOCALAPPDATA%\Microsoft\vscode-update" 2>nul

REM VS Code をシステム領域に新規インストール
winget install --scope machine --id Microsoft.VisualStudioCode -e --silent --accept-source-agreements --accept-package-agreements

REM 全ユーザー共有の拡張機能フォルダ
mkdir C:\ProgramData\vscode-extensions 2>nul
icacls "C:\ProgramData\vscode-extensions" /grant "Everyone:(OI)(CI)M" /T

REM スタートメニューのショートカットを --extensions-dir 付きで再作成
rmdir /s /q "C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Visual Studio Code" 2>nul
del "C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Visual Studio Code.lnk" 2>nul
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
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.py

3.2 実行コマンド

コマンドプロンプトでファイルの保存先ディレクトリに移動し、次を実行する（a.py は保存したファイル名に読み替える）。

python a.py

3.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 のコールバック機能により、利用者の操作に応じてグラフを更新できる。ドロップダウンメニュー等のコンポーネントとグラフを連動させることで、対話的なデータ可視化を実現できる。

Dash のインストールと動作確認

第１章 前準備

Python 3.12 のインストール

Windows での Python 3.12 のインストール

Python の開発環境 Visual Studio Code のインストールと Python 用の設定

Windows での Visual Studio Code のインストールと Python 用の設定手順

1. VS Code と拡張機能のインストール

2. Python インタプリタの選択

Python プログラム実行手順

Windows での Python 実行手順（Visual Studio Codeを使用）

プログラムファイルの作成と保存

プログラムの実行

第２章 必要なライブラリのインストール

第３章 実行のための準備とその確認手順（Windows 前提）

3.1 プログラムファイルの準備

3.2 実行コマンド

3.3 動作確認チェックリスト

第４章 各プログラムの概要・使い方・実行上の注意

基本の棒グラフ

DataTable の定期更新

コールバックによる対話的更新

第５章 演習１：基本の棒グラフを表示する

第６章 演習２：DataTable を定期更新する

第７章 演習３：コールバックで対話的に更新する

第８章 まとめ

第１章前準備

第２章必要なライブラリのインストール

第３章実行のための準備とその確認手順（Windows 前提）

第４章各プログラムの概要・使い方・実行上の注意

第５章演習１：基本の棒グラフを表示する

第６章演習２：DataTable を定期更新する

第７章演習３：コールバックで対話的に更新する

第８章まとめ