PythonでサクッとモダンWeb UI構築！「NiceGUI」実践活用ガイド

pip install nicegui

pip install plotly pandas matplotlib pillow

from nicegui import ui

# 状態管理用の変数
count = 0

def increment():
    global count
    count += 1
    counter_label.text = f'カウント: {count}'

# UIの構築
ui.label('NiceGUIへようこそ！').classes('text-2xl font-bold color-primary')

# テキスト入力とリアルタイムバインディング
input_field = ui.input(label='お名前を入力してください', placeholder='例: 山田太郎')
ui.label().bind_text_from(input_field, 'value', backward=lambda v: f'こんにちは、{v}さん！' if v else '')

# カウンターボタン
counter_label = ui.label('カウント: 0').classes('text-lg')
ui.button('カウントアップ', on_click=increment).props('icon=add color=positive')

# アプリの起動
ui.run(title='NiceGUI 基本サンプル', reload=True)

import random
from datetime import datetime
from nicegui import ui
import plotly.graph_objects as go

# 履歴データ
times = []
temperatures = []

# Plotlyの初期フィギュア作成
fig = go.Figure()
fig.add_trace(go.Scatter(x=times, y=temperatures, mode='lines+markers', name='温度 (°C)'))
fig.update_layout(
    margin=dict(l=20, r=20, t=30, b=20),
    xaxis_title='時刻',
    yaxis_title='温度 (°C)',
    yaxis=dict(range=[10, 40])
)

# UIレイアウト
ui.label('リアルタイムセンサー・モニタリング').classes('text-xl font-bold mb-4')

with ui.row().classes('w-full items-center gap-4 mb-4'):
    with ui.card().classes('p-4 min-w-[200px] text-center'):
        ui.label('現在の温度').classes('text-sm text-gray-500')
        temp_label = ui.label('-- °C').classes('text-3xl font-bold text-blue-600')

    with ui.card().classes('p-4 min-w-[200px] text-center'):
        ui.label('ステータス').classes('text-sm text-gray-500')
        status_label = ui.label('待機中').classes('text-3xl font-bold text-gray-600')

# Plotlyグラフ要素の作成
plotly_chart = ui.plotly(fig).classes('w-full h-80')

def update_sensor_data():
    """センサーデータの模擬取得とUI更新"""
    now = datetime.now().strftime('%H:%M:%S')
    current_temp = round(random.uniform(18.0, 32.0), 1)

    # データを最新20件に制限
    times.append(now)
    temperatures.append(current_temp)
    if len(times) > 20:
        times.pop(0)
        temperatures.pop(0)

    # ラベル更新
    temp_label.text = f'{current_temp} °C'
    if current_temp > 28.0:
        status_label.text = '高温警告'
        status_label.classes(remove='text-gray-600 text-green-600', add='text-red-600')
    else:
        status_label.text = '正常'
        status_label.classes(remove='text-gray-600 text-red-600', add='text-green-600')

    # グラフデータ更新
    fig.data[0].x = times
    fig.data[0].y = temperatures
    plotly_chart.update()

# 2秒ごとに update_sensor_data を実行するタイマー
ui.timer(interval=2.0, callback=update_sensor_data)

ui.run(title='センサーダッシュボード', port=8080)

import io
import pandas as pd
from nicegui import events, ui

# 状態保持
df_holder = {'df': None}

ui.label('データ分析ツール').classes('text-2xl font-bold mb-4')

# アップロード完了時のハンドラ
def handle_upload(e: events.UploadEventArguments):
    try:
        # アップロードされたファイルをPandas DataFrameとして読み込む
        content = e.content.read()
        df = pd.read_csv(io.BytesIO(content))
        df_holder['df'] = df

        ui.notify(f'ファイル "{e.name}" の読み込みに成功しました', type='positive')
        render_data()
    except Exception as err:
        ui.notify(f'エラーが発生しました: {err}', type='negative')

# UI要素のプレースホルダー
upload_ui = ui.upload(
    label='CSVファイルをドロップまたは選択',
    on_upload=handle_upload,
    auto_upload=True
).props('accept=.csv').classes('w-full max-w-md mb-6')

data_container = ui.column().classes('w-full')

def render_data():
    """データテーブルと要約統計量をレンダリング"""
    data_container.clear()
    df = df_holder['df']
    if df is None:
        return

    with data_container:
        ui.label('データプレビュー').classes('text-lg font-bold mt-4')

        # AgGridやui.tableを使って表形式で表示
        columns = [{'name': col, 'label': col, 'field': col, 'sortable': True} for col in df.columns]
        rows = df.head(10).to_dict(orient='records')
        ui.table(columns=columns, rows=rows, row_key=df.columns[0]).classes('w-full')

        ui.label('基本統計量 (数値列)').classes('text-lg font-bold mt-6')
        stats_df = df.describe().reset_index()
        stats_columns = [{'name': col, 'label': col, 'field': col} for col in stats_df.columns]
        stats_rows = stats_df.to_dict(orient='records')
        ui.table(columns=stats_columns, rows=stats_rows, row_key='index').classes('w-full')

ui.run(title='CSVデータアナライザー')

from nicegui import app, ui

# ダークモード設定の管理
dark_mode = ui.dark_mode()

# 共通ヘッダー・サイドバーの作成関数
def create_layout(title_text: str):
    with ui.header().classes('bg-primary text-white items-center justify-between'):
        with ui.row().classes('items-center'):
            ui.button(on_click=lambda: left_drawer.toggle(), icon='menu').props('flat color=white')
            ui.label(title_text).classes('text-xl font-bold ml-2')

        # ダークモード切替トグル
        with ui.row().classes('items-center gap-2'):
            ui.icon('light_mode')
            ui.switch(on_change=lambda e: dark_mode.set_value(e.value))
            ui.icon('dark_mode')

    with ui.left_drawer(value=True).classes('bg-slate-100 dark:bg-slate-800') as left_drawer:
        ui.label('メニュー').classes('text-xs text-gray-400 font-bold p-4 pb-1')
        with ui.column().classes('w-full gap-1 p-2'):
            ui.button('ダッシュボード', on_click=lambda: ui.navigate.to('/')).props('flat align=left').classes('w-full')
            ui.button('設定', on_click=lambda: ui.navigate.to('/settings')).props('flat align=left').classes('w-full')

# --- ページ1: ダッシュボード ---
@ui.page('/')
def main_page():
    create_layout('メインダッシュボード')
    with ui.column().classes('p-6'):
        ui.label('ようこそ、管理画面へ').classes('text-2xl font-bold')
        ui.label('ここにはメインの情報が表示されます。')

# --- ページ2: 設定画面 ---
@ui.page('/settings')
def settings_page():
    create_layout('システム設定')
    with ui.column().classes('p-6 max-w-lg gap-4'):
        ui.label('システムパラメータ設定').classes('text-2xl font-bold')

        ui.input(label='APIエンドポイント', value='https://api.example.com/v1')
        ui.select(label='ログレベル', options=['DEBUG', 'INFO', 'WARNING', 'ERROR'], value='INFO')
        ui.checkbox('詳細ログを有効化する', value=True)

        def save():
            ui.notify('設定を保存しました', type='positive')

        ui.button('保存する', on_click=save).props('color=primary')

ui.run(title='管理システム', port=8080)

import time
from nicegui import run, ui

def heavy_computation(x: int) -> int:
    """時間がかかる重い処理 (CPUバウンド)"""
    time.sleep(3)  # 擬似的な重い処理
    return x * 2

async def on_button_click():
    ui.notify('計算を開始しました...')
    # 別プロセスで実行し、UIスレッドをブロックしない
    result = await run.cpu_bound(heavy_computation, 21)
    ui.notify(f'計算完了！ 結果: {result}')

ui.button('重い処理を実行', on_click=on_button_click)
ui.run()

location / {
    proxy_pass http://127.0.0.1:8080;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}