シンプルで使いやすい、もう 1 つの Python グラフィカルインターフェイスライブラリ

Lost Little Book ボーイズノート

読み終える必要がある

分

わずか4分の速読

環境

Python 3.9.16

ナイスギ 1.3.9

序文

最新のコンピュータアプリケーション開発では、グラフィカルユーザーインターフェイス (GUI) は、ユーザーとプログラムの対話の重要な部分です。ただし、GUI 開発では多くの場合、大量のコードと複雑なレイアウトが必要となり、開発者に特定の課題をもたらします。このブログ投稿では、GUI 開発を簡素化し、開発者が魅力的なユーザーインターフェイスをより迅速に構築できるようにする、使いやすいグラフィカルユーザーインターフェイスライブラリである nicegui を紹介します。

実現原理

nicegui は Python プログラミング言語に基づいて開発されており、宣言型の方法を使用してユーザーインターフェイスを記述します。そのデザインは Web 開発における HTML と CSS からインスピレーションを得ており、同様の構造化された構文を通じてインターフェイスのコンポーネントとスタイルを記述します。

nicegui の中心となるアイデアは、ユーザーインターフェイスを複数のコンポーネントに分割し、それぞれが独自のプロパティとスタイルを持つようにすることです。開発者は、nicegui が提供するボタン、テキストボックス、ドロップダウンメニューなどのコンポーネントライブラリを使用して、簡単なコードでこれらのコンポーネントを定義およびレイアウトできます。同時に、nicegui はカスタムコンポーネントもサポートしており、開発者は独自のニーズに応じてコンポーネントライブラリを拡張できます。

インストール

pipを使用してインストールできます。具体的な操作は次のとおりです。

pip install nicegui

サンプルコード

以下は簡単なniceguiサンプルコードです。

from nicegui import ui


ui.label('Hello NiceGUI!')
ui.button('BUTTON', on_click=lambda: ui.notify('button was pressed'))


ui.run()

上記のコードでは、まず、一般的に使用されるコンポーネントを含む ui モジュールを nicegui にインポートします。

この例ではラベルとボタンが使用されています。デフォルトでは、それらは垂直に配置され、サービスの開始には run メソッドが使用されます。

上記のスクリプトを実行すると、ブラウザで http://127.0.0.1:8080 にアクセスして効果を確認できます。

「BUTTON」ボタンをクリックすると、下にプロンプトメッセージが表示されます。

次に、完全な例を見てみましょう

from dataclasses import dataclass, field
from typing import Callable, List


from nicegui import ui




@dataclass
class TodoItem:
    name: str
    done: bool = False




@dataclass
class ToDoList:
    title: str
    on_change: Callable
    items: List[TodoItem] = field(default_factory=list)


    def add(self, name: str, done: bool = False) -> None:
        self.items.append(TodoItem(name, done))
        self.on_change()


    def remove(self, item: TodoItem) -> None:
        self.items.remove(item)
        self.on_change()




@ui.refreshable
def todo_ui():
    if not todos.items:
        ui.label('List is empty.').classes('mx-auto')
        return
    ui.linear_progress(sum(item.done for item in todos.items) / len(todos.items), show_value=False)
    with ui.row().classes('justify-center w-full'):
        ui.label(f'Completed: {sum(item.done for item in todos.items)}')
        ui.label(f'Remaining: {sum(not item.done for item in todos.items)}')
    for item in todos.items:
        with ui.row().classes('items-center'):
            ui.checkbox(value=item.done, on_change=todo_ui.refresh).bind_value(item, 'done')
            ui.input(value=item.name).classes('flex-grow').bind_value(item, 'name')
            ui.button(on_click=lambda item=item: todos.remove(item), icon='delete').props('flat fab-mini color=grey')




todos = ToDoList('My Weekend', on_change=todo_ui.refresh)
todos.add('Order pizza', done=True)
todos.add('New NiceGUI Release')
todos.add('Clean the house')
todos.add('Call mom')


with ui.card().classes('w-80 items-stretch'):
    ui.label().bind_text_from(todos, 'title').classes('text-semibold text-2xl')
    todo_ui()
    add_input = ui.input('New item').classes('mx-12')
    add_input.on('keydown.enter', lambda: (todos.add(add_input.value), add_input.set_value('')))


ui.run()

このコードは、nicegui を使用して単純な ToDo リストアプリケーションを作成します。その機能とロジックを段階的に分析してみましょう

まず、必要なモジュールとクラスがインポートされます。データクラスモジュールは、簡潔で強力なデータクラスを作成するためのデコレータデータクラスを提供します。データクラスは、主にデータを格納するために使用される特別なクラスであり、通常はプロパティのみが含まれ、メソッドは含まれません。

次に、TodoItem と ToDoList という 2 つのデータクラスが定義されます。TodoItem は ToDo 項目を表し、name と Done の 2 つのプロパティを持ちます。done は ToDo 項目が完了したかどうかを示します。ToDoList は ToDo 項目のリストを表し、title、on_change、items の 3 つの属性を持ちます。そのうちの items は TodoItem オブジェクトのリストです。ToDoList には、ToDo 項目を追加および削除するための add メソッドとremove メソッドも用意されています。

次に、todo_ui という UI 関数が定義され、@ui.refreshable デコレーターを使用して更新可能な UI 関数としてマークされます。todo_ui 関数は、todo リストのインターフェイスをレンダリングするために使用されます。

todo_ui関数では、まずtodoリストが空かどうかを確認し、空であれば「List is empty.」という内容のラベルを中央に表示します。次に、ui.linear_progress を使用して、完了したタスクの割合を示す線形進行状況バーを作成し、完了したタスクの数を計算してタスクの合計数で割って、この値を ui.linear_progress 関数に渡します。次に、ui.row を使用して行レイアウトコンテナーを作成し、完了したタスクの数と残りのタスクの数を表示する 2 つのラベルをコンテナーに追加します。To Do リストの各項目を反復処理することにより、完了したタスクの数と残りのタスクの数が計算され、ラベルに表示されます。次に、ui.row と ui.checkbox を使用して行レイアウトと、todo の完了ステータスを表示および編集するためのチェックボックスを作成します。value パラメーターを設定してチェックボックスの値をバインドし、on_change パラメーターを使用してチェックボックスの状態が変化したときに呼び出されるコールバック関数を指定します。bind_value メソッドを使用して、チェックボックスの値を To Do 項目オブジェクトの Done プロパティにバインドし、動的更新を実現します。次に、ui.row と ui.input を使用して行レイアウトと、todo の名前を表示および編集するための入力ボックスを作成します。入力ボックスの初期値を設定し、bind_value メソッドを使用して、入力ボックスの値を To-Do オブジェクトの name 属性にバインドします。

最後に、ui.row と ui.button を使用して行レイアウトを作成し、todo を削除する削除ボタンを作成します。ボタンの on_click パラメータを設定してボタンがクリックされたときに呼び出されるコールバック関数を指定し、ラムダ式を使用して todo オブジェクトをパラメータとして渡します。props メソッドを使用して、ボタンのスタイルとアイコンを設定します。

メインプログラムでは、ToDoList インスタンス todos が作成され、タイトルが My Weekend に設定され、ToDo リストが変更されたときにインターフェイスを更新する関数 todo_ui が指定されています。次に、todos.add メソッドを呼び出して、いくつかの初期 Todo を追加します。次に、ui.card を使用してカードコンテナを作成し、そのスタイルを設定します。カードコンテナでラベルを作成し、bind_text_from メソッドを使用してそのテキストを todos インスタンスの title 属性にバインドし、動的更新を実現します。次に、todo_ui 関数を呼び出して、todo リストインターフェイスをレンダリングします。入力ボックス add_input を作成して、新しい To Do 項目を追加します。add_input 入力ボックスの keydown.enter イベントをリッスンすることで、ユーザーが Enter キーを押したときに、todos.add メソッドを呼び出して入力ボックスの値を使用します。新しい To Do 項目として項目をリストに追加し、入力ボックスの値を空の文字列にリセットします。

最後に、ui.run を呼び出して nicegui アプリケーションのイベントループを開始し、インターフェイスを表示してユーザーの操作を待ちます。

このサンプルプロジェクトを通じて、nicegui のシンプルさと使いやすさがわかり、開発者は完全に機能するアプリケーションインターフェイスを迅速に構築できます。

参考文献

https://github.com/zauberzeug/nicegui ( https://github.com/zauberzeug/nicegui )

https://nicegui.io/documentation ( https://nicegui.io/documentation )

無料のナレッジプラネット

シンプルで使いやすい、もう 1 つの Python グラフィカル インターフェイス ライブラリ

おすすめ

シンプルで使いやすい、もう 1 つの Python グラフィカルインターフェイスライブラリ