先日、ビジュアルプログラミングIoTLT vol.19にてLTを行ってきました。IoTLTの中でも、いろいろなビジュアルプログラミングがあつまるスピンオフと位置づけの会です。
自分もノーコード・ローコード系をよく触るのでNode-REDなどについてLTすることもありますが、最近はPythonを触ることも多くなってきたのです、PythonのGUI関連についてLTをしてみました。
発表内容
タイトル： Pythonでもちょっとリッチな見た目のアプリを設計してみる
概要：
PythonのGUIアプリは見た目が古くなりがち…。そんな課題を解決するのがTkinter Designerです！本セッションでは、Figmaと連携してリッチなUIを設計する方法、制作フロー、メリット・注意点を解説。デザインの手間を省き、より洗練されたPythonアプリを作るヒントを紹介します。Pythonで魅力的なGUIを作りたい方、必見！
こんなポジティブな概要を書いていますが、半分以上嘘です。
正直なところ…
デフォルトにあるtkinterを使用すればGUIプログラム化をすることはできるのですが、VB6的なGUIで完成品を見せられた人も「あっはい😑」となんともいえない表情になりがちです。
こういう状況を打破するライブラリも最近はでてきて、Fletに代表されるライブラリなでモダンなUIを実現出来つつあります。ただ、Fletには非対応のライブラリもあるため、十分な調査は必要です。
参考
こういう場面に立たされた、プログラマー側は本音の部分ではこう思っているのではないでしょうか。
- UIデザインを作るのは俺じゃないのでは？
- おしゃれなポイントや、デザインの細かいところはデザイナーが作ってほしいよね。
- 少し位置がズレたとかいうのでビルドのし直しは勘弁してほしい。
わかる🙄
最近は、このようなことは一般でも認知されてきているので、「UIのデザインはデザイナーにFigmaで作ってもらおう！」というまた、やばい話が出てくるのです。ただ、それに対応するのはプログラマーってこともありがち😑
そんな、地獄から抜け出す方法はないのか？ということで今回の発表につながっています。
内容の補足
概要についてはスライドを見てもらえればと思いますが、LTの時間の関係で端折っている部分も多いです。このエントリではその部分を補足しておきます。
FigmaのAPIキー（トークン）の発行方法
Tkinter DesignerではFigmaのAPIキー（トークン）と共有されたプロジェクトのURLを用いて変換処理を行います。
まずはトークンの発行に関してです。Figmaのトークンの発行は画面の左上の【ユーザー名が書かれている部分】をクリックしてメニューを開きます。
クリックするとプルダウンメニューが開きます。その中から設定の項目をクリックします。
するとアカウントのダイアログが開きます。続いてダイアログの【セキュリティ】タブをクリックします。
セキュリティ関連の情報が表示されます。その中の個人アクセストークンにある【新規トークンを作成】をクリックします。
新規トークンを作成のダイアログが表示されたら【トークン名】（用途などを入れるのがよいでしょう）【有効期間】などを設定し【トークンを生成】ボタンをクリックします。
すると、トークン文字列が生成されるのでコピーして使っていきましょう。（必要あればメモっておきます）。【このトークンをコピーします】をクリックすることでクリップボードにコピーが行われます。
これでFigmaのAPIキーであるトークンが生成されました。
Figmaのプロジェクト共有方法
続いてはFigmaのプロジェクトの共有を行います。編集しているプロジェクトの右上にある【共有】ボタンをクリックします。
このファイルを共有というダイアログが表示されるのでアクセス件を設定して、リンクをコピーします。
これで、Figma上で必要な情報を揃えること出来ます。
Tkinter Designerの実行
GitHub のリポジトリをクローンし、インストール作業を行った後以下のコマンドを実行します。（pipコマンドはライブラリのインストール、クローンしたリポジトリにあるgui.pyが実体になります😢READMEではこのあたりがわかりにくい）
$ cd Tkinter-Designer
$ python gui/gui.py
アプリが実行されたら、以下を入力していきます。
実行に少し時間がかかりますが、成功すると以下のようなダイアログが表示されます。
出力パスをみると以下のようなディレクトリ構成になっています。build/assetsディレクトリに画像などの素材が格納され、buildディレクトリのgui.pyにプログラムが格納されます。
画像素材は以下のように格納されています。
以下の様に実行することでGUIアプリケーション実行できます。
$ cd <出力パス> $ python ./build/gui.py
実行の様子
Tkinter Designerで変換されたプログラムにはボタンなどのクリック時動きがcommand=lambda: print("button_1 clicked"),というような形式で変換されているので、そのままでもボタンを押すとコンソールに押されたことを表示する用になっています。この部分に実際に行う処理を格納することでGUIアプリを完成させることが出来ます。
Tkinter Designerのメリット（スライドの内容再掲）
このツールを活用することで、次のような利点があります。
- デザインの手間を削減: UIのデザインをFigma上で完結させることで、見た目の調整が簡単に。
- ボタンUIのハンドラが自動設定: 開発者は処理の記述に専念できる。
- デザインのクオリティ向上: 開発者がデザインに悩むことなく、洗練されたUIを簡単に実現できる。
実際に使ってみると、デザインに関する余計な手間が減り、スムーズに開発を進めることができます。
Tkinter Designerの注意点（スライドの内容再掲）
- 出力されたコードはそのままでは使いにくい場合がある。 … ある程度のコード編集は必要
- 日本語の出力（フォント関連？）に対応していない … UI内の日本語が「豆腐（□）」になってしまう模様
- インストールはREADMEの記載通りにpip installするだけでは不完全 ... リポジトリをクローンする必要
このような点を事前に把握しておくことで、スムーズに導入できるでしょう。
おわりに
今回は、PythonのGUIアプリケーション開発における、古めかしいデザインという問題に対して、Tkinter Designerという解決手段を紹介しました。FigmaとTkinterの連携により、プログラマーはデザインの悩みから解放され、処理ロジックに集中できるようになりますよね。
ただ、日本語対応の問題やインストールの手順など、いくつかの作業も存在します。これらの注意点を理解した上で使用を行ってください。
見た感じリポジトリの更新状況は割とゆっくり目ですが、今後のバージョンアップで更に良いツールとなることを期待しています。
