⚛️

【Python/Tkinter】新た(?)なGUIデザイナー「Gluonix Designer」

に公開

Tkinterを視覚的に

https://github.com/nucleonautomation/Gluonix-Designer

Gluonix Designerとは、Tkinterの「GUIデザイナー」です。文字を連ねて画面を作る方法が主であるTkinterですが、GUIデザイナーを使えば、視覚的な操作によって画面を作ることができます。画面をコードで記述する労力が低減されるでしょう。

TkinterGUIデザイナーにはPAGEというものもありますが、使い勝手は異なるものになります。選択肢が増えるというのはなんと好いことでありましょう。

使用イメージ
Gluonix Designer使用イメージ(二画面使用)

未だ説明書が満足に存在しませんが、YouTubeに作者本人と思われる方がチュートリアル動画をまとめられています。基本的な操作はこちらを見ると分かります。

なおこの動画に依れば、「グロウニクス」あるいは「グローニクス」と発音しているように聞こえました。

https://www.youtube.com/playlist?list=PLX1Q-hFcycYaeifoeVQc-DymohckCcMz9

現時点(V2.6)では瑕瑾も散見されるものの、なかなか面白いと感じました。日本語の情報は見つけられなかったので、本記事に簡単な感想を雑録しておきます。

導入

GitHubからZipファイルをダウンロードしても動かせますが、pipコマンドによってもインストールできます。私からは後者のpipを推奨します。

インストールコマンド
pip install GluonixDesigner

pipコマンドでインストールすれば、GluonixコマンドとGluonixDesignerコマンドが使えるようになります。これでGluonix Designerが起動します。

PowerShellの場合
PS C:\> Gluonix.exe
PS C:\> GluonixDesigner.exe

Zipファイルでダウンロードすると、起動に手間がかかります。このファイルを実行することになるからです。

https://github.com/nucleonautomation/Gluonix-Designer/blob/main/Designer/Designer.py

Designer.pyの実行
python C:\\Gluonix-Designer-main\Designer\Designer.py

Gluonixコマンドの方が楽ではないでしょうか。

PAGEが公式サイトからダウンロードしなければならない点と比較すれば、こちらの方が導入手順は簡単に感ぜられました。

簡単な使い方

初めに忌憚ない所感を述べますと、一画面では使いづらいです。二画面での使用を推奨します。なんとなれば、一画面ではこのようになるからです。

一画面の場合
ウィンドウの大きさが固定されていて画面が隠される

名称が分からないので、勝手にトップ画面とでも呼称しましょうか。トップ画面の大きさが固定されており、Windowsにある画面分割のような機能が使えません。Tkinterのプレビューがトップ画面に隠れてしまうのは、あまり快いものではありませんでした。しかし可変にすると画面構成の崩れる虞がありますから、こればかりはTkの難しいところなのだろうと推し量ります。

新規プロジェクト作成

トップ画面
トップ画面から「New project

New projectで新規プロジェクトを作ります。私はProjectsというフォルダーを作り、そこにまとめています。

ダミープロジェクト其一
save_testというフォルダーを更に作っておいた

項目 内容
Name dummy1
Location C:/⋯/Projects/save_test
パス C:/⋯/Projects/save_test/dummy1

OKボタンを押すことで、プロジェクトの設定画面に遷移します。

設定画面

設定は後から幾らでも変更できますので、本記事では特に説明致しません。

保存方法:Saveする場合

Saveボタンを押すと、次のような構成になります。しかしこれだけでは、画面を作ってもアプリケーションとして実行することはできません。

Saveした後
PS C:\\Projects> ls .\save_test\

    Directory: C:\\Projects\save_test

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d----      2025/04/24()    22:21                Data
-a---      2025/04/24()    22:21              6 dummy1.ng

結局はDeployボタンを押す必要があります。フォルダー選択する必要があるので、先程と同じフォルダー(C:/⋯/Projects/save_test)を選択します。

Deployした後
PS C:\\Projects> ls .\save_test\     

    Directory: C:\\Projects\save_test

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d----      2025/04/24()    22:27                Data
d----      2025/04/24()    22:27                Nucleon
-a---      2025/04/24()    22:27              6 dummy1.ng
-a---      2025/04/24()    22:27           1881 dummy1.py

アプリケーションの実行には、dummy1.pyを使います。

python dummy1.py

保存方法:Deployする場合

端からDeployボタンを押して終えば、同じ状態になります。

なお、Deployして以降の変更は反映されませんので、或る程度の編集が済んだら都度Deployしなければなりません。

画面を構成する:Design

Designボタンを押すと、このような画面に遷移します。ウィジェット画面とでも呼称しておきます。

ウィジェット画面

同時に、プレビュー画面(と呼称することにする)が現れます。まだ真更なので、何もありません。

プレビュー画面

ウィジェット画面でELEMENTSの中から適当に選ぶと、PROJECTの欄に追加され、プレビュー画面にも反映されます。ここでは、Canvasを選んでみましょう。

Canvas追加
Canvas1という要素が追加される

Canvas出現
Canvas1が出現する

ここで、Canvas1の設定を変更しましょう。PROJECTの欄にあるCanvas1を右クリックすることで、CONFIGUREの欄に設定項目が表示されます。

設定項目 内容 概説
Radius 5 角の丸み
Alignment Percentage 数値の単位をピクセルから%に変更

設定変更

変更後プレビュー

角が丸みを帯び、70ピクセルから70%になったことで大きくなりました。

同様にして画面に要素を加えていきます。試しに、Canvas1の上にLabelButtonを配置してみましょう。

配置後
Label1Button1が追加された

なお、位置の移動と大きさの変更はマウスでも行うことができます。移動は左クリック、伸縮は右クリックに割り当てられています。

作った画面

デザイン等は適当に値を変えただけなので載せません。

編輯を終えたら、Closeボタンを押して設定画面に戻ります。Saveボタンでなんとなく保存しますが、先述の通り保存するだけでは変更が反映されません。従って、Deployボタンを押して変更を反映させる必要があります。

プログラムを記述する

画面だけあってもプログラムが無ければ、それは絵画のようなものに過ぎません。アプリケーションにするには、プログラムで機能を付与する必要があります。

ここでは単純に、このような機能を与えます。

dummy1.py

手つかずの状態では、このような内容になっています。

dummy1.py(変更前)
# -------------------------------------------------------------------------------------------------------------------------------
# Gluonix Runtime
# -------------------------------------------------------------------------------------------------------------------------------
#################################################################################################################################
if __name__=='__main__':
    from Nucleon.Runner import * ###!REQUIRED ------- Any Script Before This Won't Effect GUI Elements
#################################################################################################################################
#################################################################################################################################
# -------------------------------------------------------------------------------------------------------------------------------
# Developer Programming Start
# -------------------------------------------------------------------------------------------------------------------------------

#   Your Code Here

# -------------------------------------------------------------------------------------------------------------------------------
# Developer Programming End
# -------------------------------------------------------------------------------------------------------------------------------
#################################################################################################################################
#################################################################################################################################
    Root.Start() ###!REQUIRED ------- Any Script After This Will Not Execute
#################################################################################################################################

先述の機能を実装すると、次のようになります。

dummy1.py(変更後)
# -------------------------------------------------------------------------------------------------------------------------------
# Gluonix Runtime
# -------------------------------------------------------------------------------------------------------------------------------
#################################################################################################################################
if __name__=='__main__':
    from Nucleon.Runner import *  ###!REQUIRED ------- Any Script Before This Won't Effect GUI Elements
#################################################################################################################################
#################################################################################################################################
# -------------------------------------------------------------------------------------------------------------------------------
# Developer Programming Start
# -------------------------------------------------------------------------------------------------------------------------------

#   Your Code Here
    Root.Canvas1.Button1.Bind(On_Click = lambda E: ChangeLabel())

    def ChangeLabel():
        Root.Canvas1.Label1.Set('Gluonix')

# -------------------------------------------------------------------------------------------------------------------------------
# Developer Programming End
# -------------------------------------------------------------------------------------------------------------------------------
#################################################################################################################################
#################################################################################################################################
    Root.Start() ###!REQUIRED ------- Any Script After This Will Not Execute
    #################################################################################################################################

考えてみれば当たり前の事ですが、Root.Canvas1.Button1のように、Canvas1も記述しなければなりません。Root.Button1ではエラーになります。

若しもCanvasを使用していない、またはCanvasとは別に直接Root上にButtonを配置していたならば、Root.Button1とします。即ち、実際の構造と同じく記述しなければなりません。

プログラムについて

プログラムの書き方はチュートリアルを参考にしています。

https://www.youtube.com/watch?v=7nszf2clZ_o&t=120s

Button.Bind()の定義はこのように存在します。

https://github.com/nucleonautomation/Gluonix-Designer/blob/main/Designer/Nucleon/Gluonix/N_Button.py#L140-L155

Label.Set()の定義も同様です。

https://github.com/nucleonautomation/Gluonix-Designer/blob/main/Designer/Nucleon/Gluonix/N_Label.py#L118-L124

その他、チュートリアルに存在しない関数もこれらを参考に調べることができます。


Pythonに熟れた方であれば、必ずしもコメントに従わずともよいでしょう。

変更例
from Nucleon.Runner import *

def main():
    Root.Canvas1.Button1.Bind(On_Click = lambda E: ChangeLabel())
    Root.Start()

def ChangeLabel():
    Root.Canvas1.Label1.Set('Gluonix')

if __name__=='__main__':
    main()

実行結果

機能実装後

Gluonix Designerの存在には自力でたどり着いたのではなく、GeminiDeep Researchで知りました。AIからWeb検索はできないと返答されたのは、疾うに一昨年の記憶です。

当初は「Android Studio」のような、画面の作成からプログラムの記述まで一貫したものを探していました。残念ながら、Gluonix Designerでは画面を作るのみで、プログラムを記述できる機能までは備えていないようでした。とはいえ、独自のモジュールNucleonが整理されており、使い勝手は特に悪く感じられませんでした。

素のTkinter自体でも充分に自由は利くものの、画面をコードで作るというのは骨が折れることもあります。緻密な実装を要するならば、Tkinterを使うべきです。反対に単純なものであれば、Gluonix Designerで事足りるようにも思われます。

Discussion