PythonのGUIについて

みんなのPython勉強会#63
（ https://startpython.connpass.com/event/192677/ )
での「PythonでデスクトップGUIをつくる」のスライドです。

#stapy

1. PythonのGUIについて オカザキ 1
2. 自己紹介 • オカザキ(@dario_okazaki) • 所属：(株)スカラコミュニケーション ズ • 職業：サーバーサイドエンジニア 2
3. アジェンダ ◼前半 • プログラムの実行方法について • GUIの利点 • PythonのGUIの一覧 • PythonのGUIについて • 個人的にお勧めするライブラリ • PythonでのGUIの位置づけ • PythonのGUIで作れるものの例 • ここまでのまとめ ◼後半 • PySimpleGUIの紹介 • PySimleGUI Stapyとの関連性 • PySimpleGUIについて • PySimpleGUIの基本的な書き方 • リストのリストでUIを作る • 公式のデモの紹介 • 最初に見るべきDemoプログラム • レイアウトの複雑な例 • まとめ 3
4. ここから話す内容 ◼前半 • プログラムの実行方法について • GUIの利点 • PythonのGUIの一覧 • PythonのGUIについて • 個人的にお勧めするライブラリ • PythonでのGUIの位置づけ • PythonのGUIで作れるものの例 • ここまでのまとめ ◼後半 • PySimpleGUIの紹介 • PySimleGUI Stapyとの関連性 • PySimpleGUIについて • PySimpleGUIの基本的な書き方 • リストのリストでUIを作る • 公式のデモの紹介 • 最初に見るべきDemoプログラム • レイアウトの複雑な例 • まとめ 4
5. プログラムの実行方法について • プログラムの実行方法 • CLI • GUI 5
6. プログラムの実行方法について • CLI • Command Line Interfaceの略 • すべてのやり取りを文字によって行う方式 • pythonだとclick（ https://github.com/pallets/click ）というライブラリがおすすめ 6
7. プログラムの実行方法について • GUI • Graphical User Interfaceの略 • コンピュータグラフィックスとポインティングデバイスなどを用い る、グラフィカル（ビジュアル）であることを特徴とするユーザイ ンタフェース。 • 画面でボタンをポチポチクリックして操作するもの 7
8. GUIの利点 • 入力と出力結果を表示して見れる • オプションをボタンやチェックボックス、ラジオボタンなどで 配置することでパラメータ調整が簡単になる 8
9. PythonのGUIの一覧 • Tkinter • wxPython • PyQt5 ※QT系 • PySide2 ※QT系 • pySimplelGUI • PyGTK • PyFLTK • Kivy • Eel • flexx • REMI • Electron + Python※2 • React Native + Transcrypt(altJS)※2 • Pygame • Toga • PyWebView • cefpython • PyGObject • Pyglet • PyGUI • libavg • Pyforms etc・・・ ※Qt系はそれぞれ開発元とライセンスが違います ※２はライブラリではなくて手法です 9
10. PythonのGUIについて • 種類はたくさんある • どれを使用するべきか？ • どのライブラリにも特徴がある 10
11. 個人的にお勧めするライブラリ • ともかく簡単に作りたい • PySimpleGUI ★後半はこのライブラリの説明をします • 見た目にこだわりたい, html,css,javaScritがある程度分かる、 • Eel (html,CSS,javascriptでレイアウトを作ります) 11
12. ここから話す内容 ◼前半 • プログラムの実行方法について • GUIの利点 • PythonのGUIの一覧 • PythonのGUIについて • 個人的にお勧めするライブラリ • PythonでのGUIの位置づけ • PythonのGUIで作れるものの例 • PythonのGUIライブラリごとの 作り方の例 • ここまでのまとめ ◼後半 • PySimpleGUIの紹介 • PySimleGUI Stapyとの関連性 • PySimpleGUIについて • PySimpleGUIの基本的な書き方 • リストのリストでUIを作る • 公式のデモの紹介 • 最初に見るべきDemoプログラム • レイアウトの複雑な例 • まとめ 12
13. PythonでのGUIの位置づけ • 個人の見解 • 覚えておくともしかしたらいいかもぐらいのもの • Pythonの利用目的はAI、データサイエンス、web、画像処理などがメイン • 広く一般に公開するものでなく、個人、組織内、コミュニティ内で使 用するもの • 広く一般に公開するものにしたいのであればWebアプリケーションにした方が無 難（ブラウザ上で操作するもの） 13
14. PythonのGUIで作れるものの例 • 個人的に気になったアプリの紹介 • PandasGUI • Cyllista Game Engine 14
15. PandasGUIについて • https://github.com/adamerose/pandasgui • Qｔ5で作られている • CSVのデータを読み込んでDataframeに変換する • Plotlyでグラフ表示が可能 • フィルタリング（前処理）、結果をグラフ表示して可視化するというプロセスが可能 15
16. PandasGUIのデモ • connpassのAPIからstapyのデータを抜き出し、CSVにしたも のを使用 16
17. Cyllista Game Engine • Cygamesがゲーム開発のために作ったインハウス（内製）のゲームエンジン • Pyside2でGUI作成、ツール関連はすべてPythonで書かれている • CEDEC2020 [Python による大規模ゲーム開発環境 〜Cyllista Game Engine 開発事例〜」で発表されている • https://tech.cygames.co.jp/archives/3442/ 17 Cyllista Game Engine のツール紹介(youtubeより)
18. PythonのGUIライブラリごとの作り方の例 • ライブラリによってレイアウトの作り方が異なる • 以下のライブラリを例に特徴的な方法を説明 • tkinter • wxPython • Kivy • QT系 • Eel • Remi/flexx/PyWebView 18
19. tkinter • コードを直接記述してwidgetをぺたぺた追加する • レイアウトが想像しづらい import tkinter from tkinter import messagebox #ボタンがクリックされたら実行 def button_click(): input_value = input_box.get() messagebox.showinfo("クリックイベント",input_value + "が入力されました。") #ウインドウの作成 root = tkinter.Tk() root.title("Python GUI") root.geometry("360x240") #入力欄の作成 input_box = tkinter.Entry(width=40) input_box.place(x=10, y=100) #ラベルの作成 input_label = tkinter.Label(text="ラベル") input_label.place(x=10, y=70) #ボタンの作成 button = tkinter.Button(text="実行ボタン",command=button_click) button.place(x=10, y=130) #ウインドウの描画 root.mainloop() コード 生成された画面 19
20. wxPython • GUIデザイナー（ｗxFormBuilder/wxGlage）を使用してGUIを追加 • Widgetをクリックして配置するのでわかりやすい • 自動生成されたコードにロジックを入れる • 複雑なUIだとロジックを書くのが難しい • wxPythonはPythonの３系対応が遅れた wxFormBuilderの例 wxFormBuilderから生成されたコード 20
21. Kivy • CSSのようなもの（kv language）を使用して定義 • なれると簡単なレイアウトはすぐにできる • 学習コストが高い。GPUを積んでいないPCだと動作が重い 生成された画面 kv language 21
22. QT系 • QML（XMLのような言語）とQt Designer • 多彩な機能、CG系のソフトと連携するのが得意 • pandasGUIのplotlyはブラウザを埋め込んで動作している • QT系は学習コストが高いのと、 PyQt5は商用ライセンスがある QMLの例（公式から引用） QｔDesigner 22
23. Eel • htmlとcssとJavaScript • Chrom(ブラウザ)上でUI を動かしている • BootStrap,Vue.jsが使え るの見た目はよい • pythonでGUIを書いてい ない・・・ JavaSript HTML GUIの部分 Python 処理部分 WebSocetを使って やり取りする 23
24. REMI/flexx/PyWebView • Pythonで書いたコードを内部的にhtmlに変換する • なかなか思ったようなデザインにならない。 参考例：REMI (https://github.com/dddomodossola/remi) 24
25. ここまでのまとめ • PythonのGUIライブラリでレイアウトを作る方法は様々 • どれも一長一短がある • レイアウトを簡単に組めるか • 機能性 • 見た目 25
26. ここから話す内容 ◼前半 • プログラムの実行方法について • GUIの利点 • PythonのGUIの一覧 • PythonのGUIについて • 個人的にお勧めするライブラリ • PythonでのGUIの位置づけ • PythonのGUIで作れるものの例 • ここまでのまとめ ◼後半 • PySimpleGUIの紹介 • PySimleGUIとStapyとの関連性 • PySimpleGUIについて • PySimpleGUIの基本的な書き方 • リストのリストでUIを作る • 公式のデモの紹介 • 最初に見るべきDemoプログラム • レイアウトの複雑な例 • まとめ 26
27. PySimpleGUIの紹介 • https://pysimplegui.readthedocs.io/en/latest/ • 2018年にできたライブラリ • TkinterのラッパーでPythonライクに書けるのが特徴 • 派生でwxPython、PyQtのラッパーライブラリも存在 • 公式では元のライブラリで書くのに比べてコード量が1/2〜1/10になると説明 • Githubでは4,800スター • ライセンスはLGPL-3.0 • Windows,Mac,Linuxのクロスドメイン対応 27
28. PySimleGUIとStapyとの関連性 • LT用に作ったプログラムが公式デモに採択されている • tkinter(pySimpleGUI）でmatplotlibなしでグラフを書く方法 • Graph Element - Line Graph with Labels • 「 Thank you to the PySimpleGUI fans from "Start Python Club" for submitting.」 28
29. PySimpleGUIについて（1/2) • 公式の日本語訳レビューを先日行いました • レビューするきっかけは公式のtweetから • https://github.com/PySimpleGUI/PySimpleGUI/blob/master/readm e.ja.md • ここから内容を紹介 29
30. PySimpleGUIについて（2/2) • 普通の人はPythonのプログラムをコマンドラインで実行するのは難 しい • GUIを追加することで • プログラムが使いやすくなる • より多くの人に知ってもらえるようになる 公式のreadme.mdから引用 30
31. 対応しているOS 環境 サポート Python 3.4以上 OS Windows，Mac，Linux ハードウェア デスクトップ PC, ノートパソコ ン, Raspberry Pi, PyDroid3 を実 行しているアンドロイドデバイ ス オンライン repli.it、Trinket.com (どちらも ブラウザ上でtkinterを実行す る) GUI フレームワーク tkinter, pyside2, WxPython, Remi 31
32. インストール • Pure Pythonなのでインストールは簡単 pip install pysimplegui or pip3 install pysimplegui 32
33. PySimpleGUIについて • 特徴 • 「人間のためのPythonのGUI」がテーマ • 簡単、覚えることが少ない • リスト構造でUIを作ることができます • エレメント（パーツ）を組み合わせることで作成できる 33
34. PySimpleGUIの基本的な書き方① • 5個のパートに分かれる • ボタンを押すとウィンドウが閉じる 34
35. PySimpleGUIの基本的な書き方② • イベントループ • 「終了」，「×（閉じる）」を押すまで画面が表示され続ける 初期画面 「はい」ぼたんをクリック後 35
36. PySimpleGUIの基本的な書き方② • keyパラメータを使用して該当の値を取得・更新 • Pythonの辞書型({key1: value1, key2: value2,・・・})と同じ構造 • window・・・エレメントの設定 • values ・・・ 入力 「はい」ぼたんをクリック後 初期画面 36
37. PySimpleGUIの基本的な書き方② Values（入力項目）の中身 { ‘-Input-': ‘世界’, } Windowの中身（keyがついているエレメントがすべて操作可能） ※Buttonはデフォルトで表示名＝keyがつくようになっています { ‘-入力-’: InputText object ‘-出力-’:Text object ‘はい’ :Button object ‘終了’ :Button object } 37
38. PySimpleGUIの基本的な書き方② • 「-出力-」キーが付いたTextの値を「-入力-」キーが Input Textの値で書き換える 「はい」ぼたんをクリック後 38
39. リストのリストでUIを作る • listを用いてレイアウト（行）を作成する • listのlistで入れ子の構造をできる • リスト内包表記を使用して1行でグリッドが作成できる 39
40. この内容を理解するだけでGUIは書けます 40
41. 公式のデモの紹介 • 公式には非常に多くのデモがあります • デモを見ればどう書くかがわかります。 • ライブラリと連携したデモもあります パッケージ 説明 Matplotlib グラフやプロットの多くの種類 OpenCV コンピュータビジョン (AIでよく使用) VLC ビデオ再生 pymunk 物理エンジン psutil システム環境の統計 prawn Reddit API json PySimpleGUI は、「ユーザー設定」を格納する特別なAPIをラップします。 weather お天気アプリを作るためにいくつかの天気APIと統合 mido MIDI 再生 beautiful soup ウェブスクレイピング (GitHub issueウォッチャーでの例) 41
42. 最初に見るべきDemoプログラム • https://github.com/PySimpleGUI/PySimpleGUI/blob/master/DemoPrograms/Demo_ All_Widgets.py PySimpleGUIで表示できるすべてのエレメントが表示 • まずはこのコードを見て、書き換えてみる（ボタンの名前、テーマなど） 手を動かして理解する 42
43. レイアウトの複雑な例 • https://github.com/PySimpleGUI/PySimpleGUI-Photo-Colorizer • フォルダを指定して、そこから画像ファイルの一覧を読み込む、 画像ファイルを指定して、元画像と着色画像を表示する 43
44. レイアウトの複雑な例 44
45. レイアウトの複雑な例 • 2つの列を足し合わせている 45
46. レイアウトの複雑な例 • 左の列（以下のエレメントを行として構成） ①テキスト、入力ボックス、フォルダの読み込みボタン ②リスト ③コンボボックス ④テキスト ① ② ③ ④ ① ② ③ ④ 46
47. レイアウトの複雑な例 ① ② ③ ① ② ③ 47 • 右の列（以下のエレメントを行として構成） ①テキスト、入力、ファイルの読み込みボタン ②リスト ③ボタン、ボタン、ボタン、ボタン ④画像表示、画像表示
48. レイアウトの複雑な例 • 2つの列を足し合わせている • VSeperator() はVerticalSeparator（垂直のセパレータ）の略で、 Column(left_col）とColumn(image_col）を「列」として横に並べている 48
49. まとめ • PythonにはGUIライブラリが色々あって、GUIの作り方にも 色々な方法がある • PySimpleGUIならば簡単にGUIが作れる 49
50. ご清聴ありがとうございました 50
51. おまけ • JavaScript系のGUIについて • JavaScript＋Chormium(Chrom) • ブラウザはメモリを食う • 信頼性の問題 51
52. SpaceX 引用元：https://uxdesign.cc/how-i-recreated-crew-dragons- ui-15877eddf3ed • SpaceX(Dragon)では、ChromiumとJavaScriptで 操縦席のタッチスクリーンを作成している • https://www.infoq.com/jp/news/2020/07/javascript-spacex- dragon/ 52