Pythonでもちょっとリッチな見た目のアプリを設計してみる

Slide 1

Slide 1 text

Pythonでもちょっとリッチな見た目のアプリを設計してみる味気ないデザインからの脱却🤩 ビジュアルプログラミングIoTLT　2025.01.30 @ueponx

Slide 2

Slide 2 text

自己紹介　@ueponx　上田茂雄

Slide 3

Slide 3 text

PythonでGUIアプリを使用すると… こんな感じになりませんか？一般的によく知られたTkinter を使ってGUIアプリを作成すると左のようなアプリになります。うっ…古のVB6時代のことが

Slide 4

Slide 4 text

この結果をみると😟😟😟

Slide 5

Slide 5 text

最近ではデザイナと分業でUIを決める… Figmaでよろしく！

Slide 6

Slide 6 text

もうこれしかない😫

Slide 7

Slide 7 text

良い手はないのか？

Slide 8

Slide 8 text

見つけました！ Tkinter Designer https://github.com/ParthJadhav/Tkinter-Designer BSD 3-Clauseライセンス

Slide 9

Slide 9 text

Tkinter Designerでの制作フロー事前設定 ● APIキーを作成する。制作時 ①Figmaを一定のルールでUIデザインする ②共有設定（共有URLの発行） ③Tkinter Designerで変換処理（API URL ファイル格納先を指定） ④処理の埋め込み

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

編集時のルール編集時には左表のルールで作成する。ただし、文字列に関しては設定をしなくてもよい。 Button、TextArea、Image を気をつける！

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Tkinter Designerを使えば…

Slide 18

Slide 18 text

営業終了にならずにすんだ

Slide 19

Slide 19 text

Tkinter Designerの長所 ● Figmaと連携して、イメージやUI機能の配置などが行える。 ● ボタンUIの場合にはハンドラを設定してくれるので、処理の記述に専念できる。 ● デザインしなくていい・文句を言われにくい。

Slide 20

Slide 20 text

Tkinter Designerの注意点 ● 出力コードそのままという理由にはいかない。 ● 日本語の出力ができない模様（UIに日本語が入っていると豆腐になる） ● インストール方法がリポジトリのREADMEにかかれているが、それではインストールが完了していない😫 （pip installはライブラリのみのインストールの模様） →リポジトリをクローンする必要がある😑

Slide 21

Slide 21 text

Figmaと両立ならいいけど…