NiceGUIを試してみた

NiceGUIを試してみた

最近話題？になっていたpythonでGUIを作ることができるライブラリのNiceGUIを試してみたが途中で断念。 また時間をおいて挑戦したい。

• 公式サイト
  • NiceGUI https://nicegui.io/
  • リファレンス https://nicegui.io/reference

何ができるのか

NiceGUIを使うとブラウザで動作するGUIを作ることができる。
GUIの見た目はQuasar Framework が使われていて、テーブルの表示にはAG Grid、チャートではHighcharts、プロットではMatplotlib、3D表示ではthree.jsが使われている。

ToDoっぽいものを作ってみた

基礎から学ぶVue.jsにある ToDoリストを作りながら学習しよう！を作って見ようおかと思って途中まで作った見たが使いづらくて断念。

良いところと悪いところ

• 良いところ
  • 簡単なインターフェイスなら作るのが楽そう
  • ブラウザだけで動作させられるのが良い
• 悪いところ
  • 結構慣れが必要
  • NiceGUIで利用できるuiオブジェクトの中身はJustPyをラップして使われていて、JustPyはQUASARをラップしているので、結局QUASARの書き方に合わせる必要があるがラップされているせいでどう記載すれば良いのか分かりづらい。
  • 複雑なUIを作ろうと思うとUIからのレスポンスを取って処理をしてと書くのが辛そう。

作ったソース(途中まで)

from nicegui import ui


ui.label("チュートリアルToDoリスト").classes("text-h4")

ui.run(port=8888, main_page_classes="q-ma-md items-start gap-4")

with ui.row().classes(remove="gap-4", add="items-center"):
    with ui.column().classes("col-3"):
        ui.radio(["すべて", "作業中", "完了"]).props("inline")
    with ui.column().classes("col-2 items-center"):
        table_result = ui.label()

    table = ui.table(
        {
            "columnDefs": [
                {"headerName": "ID", "field": "id"},
                {"headerName": "コメント", "field": "comment"},
                {"headerName": "状態", "field": "status"},
                {"headerName": "-", "field": "command"},
            ],
            "rowData": [
                {"id": "0", "comment": "買い物", "status": "完了", "command": "削除"},
                {"id": "1", "comment": "掃除", "status": "作業中", "command": "削除"},
            ],
        }
    ).classes("max-h-40")

    # うまく動かない…
    table_result = len(table.options.rowData)


ui.label("※削除ボタンはコントロールキーを押しながらクリックしてください").classes("q-mb-md")
ui.label("新しい作業の追加").classes("text-h4")


with ui.row().classes(remove="gap-4", add="items-center"):
    ui.label("コメント").classes("q-mr-md")
    ui.input(on_change=lambda e: input_result.set_text(e.value)).classes("q-field--outlined").props("dense")
    input_result = ui.label()