NiceGUIの紹介

NiceGUIとは

NiceGUIは、PythonでWebアプリケーションやWebAPIを作成するためのフレームワークです。

特徴

• シンプルな構文
• リアルタイム更新
• 豊富なウィジェット
• レスポンシブデザイン
• スタイルのカスタマイズ

動かしてみよう

JupyterLabで、簡単なサンプルを通してできることを確かめてみましょう。

2つのノートブックファイルを用意しました。次のリンク先の右上のDownload ZIPボタンを押してください。

NiceGUI紹介用のgist

ダウンロードしたファイルを解凍すると、NiceGUI.ipynbとNiceGUI_browse.ipynbができます。
これらのファイルのある場所で作業してください。

手順

macOSでの手順を紹介します。Windowsの方は適宜読みかえてください。

次のように仮想環境を作成してください。

python3.12 -m venv venv
source venv/bin/activate
pip install nicegui jupyterlab pandas plotly

まずは、JupyterLabを起動します。

jupyter lab

Jupyterでダウンロードした2つのノートブックを開いてください。
NiceGUI_browse.ipynbの方を右にドラッグして次のようにしてください。

左のノートブックを順に実行していきます。
「Hello world」の下のセルは、セルの内容をファイルに出力するようになっています。

セル

%%file demo.py

from nicegui import ui

ui.label("Hello world!")

ui.run()

このセルを実行すると、demo.pyというファイルが作成されます。

JupyterLabを起動したターミナルとは別のターミナルから、次のようにしてdemo.pyを起動しましょう。

source venv/bin/activate
python demo.py

新しくブラウザが開きますが、閉じてください。
JupyterLabに戻って、NiceGUI_browse.ipynbの最初のセルを実行してください。
InnerFrameで、NiceGUIの画面が確認できます。

以降はノートブックの簡単な解説です。

Hello world

このサンプルでは、単に「Hello world!」と表示されます。

ボタン

「ボタン」の下のセルを実行すると、demo.pyが上書きされます。niceguiがホットリロードで起動されているので、自動的に再実行されます。
少し待つと、画面右のNiceGUI_browse.ipynbの画面が変わります。

右の画面の「PUSH」を押すと、ラベルの文字が「Clicked!」に変わります。

スタイル

このサンプルではボタンを押すとラベルのスタイルを変更して赤くします。

マークダウンなど

コードにUIの部品を書くと、Streamlitのように画面に表示されます。
ここでは、マークダウンとマーメイドの図と日付入力を表示しています。

レイアウト

2行2列のラベル表示と、カードという表示のサンプルです。

バインド

ラベルの文字を、日付の値にバインドしています。
この結果、日付を変えるとラベルの文字が自動で変わります。

グリッド

pandasのDataFrameをグリッドを使って表示しています。

グラフ

plotlyのグラフのサンプルです。

動画

動画の埋め込みのサンプルです。

インタラクティブイメージ

インタラクティブイメージのサンプルです。
画像をクリックすると水色の丸が描画されます。

ルーティング

最初にリンクが表示されています。リンクをクリックすると別のページに移動します。
JupyterLabでは、InnerFrameで表示されているのでわかりませんが、URLが変わっています。

次のセルを実行すると、topという関数にトップページを定義します。
また、クリック先のページからトップページに戻るリンクも追加しているので、行ったり来たりできます。

API

WebAPIのサンプルです。
このように、NiceGUIでは、WebアプリケーションとWebAPIを両方作成できます。

ここで紹介した以外にもいろいろなことができるようです。次のExamplesも参考にしてみてください。

電卓アプリケーション

fletのGalleryにあるCalculatorのUIを真似て電卓を作ってみました。下記のように実行できます。

pip install -U nicegui-calculator
calculator

このUI構築のメインは7行です！シンプルですね。

with ui.card().classes("rounded-2xl bg-black"):
    label = ui.label().classes("text-xl w-full text-right text-white")
    label.bind_text(calculator, "value")
    for row in rows:
        with ui.row():
            for text, i in row:
                ui.button(text, on_click=calculator.act).classes(button_styles[i])

pytest

詳しく紹介しませんが、pytestのUI用のフィクスチャが用意されています。そのため、UIのテストを比較的簡単に記述できます。

さいごに

ちょっと動かしてみた印象です。

• 構文がわかりやすい
• Streamlitより本格的なWebアプリケーションを作りやすそう
• Djangoのような本格的なWebアプリケーション向けではなさそう

以上