みんなのPython勉強会#63 （ https://startpython.connpass.com/event/192677/ ) での「PythonでデスクトップGUIをつくる」のスライドです。
#stapy
PythonのGUIについてオカザキ1
View Slide
自己紹介• オカザキ(@dario_okazaki)• 所属：(株)スカラコミュニケーションズ• 職業：サーバーサイドエンジニア2
アジェンダ◼前半• プログラムの実行方法について• GUIの利点• PythonのGUIの一覧• PythonのGUIについて• 個人的にお勧めするライブラリ• PythonでのGUIの位置づけ• PythonのGUIで作れるものの例• ここまでのまとめ◼後半• PySimpleGUIの紹介• PySimleGUI Stapyとの関連性• PySimpleGUIについて• PySimpleGUIの基本的な書き方• リストのリストでUIを作る• 公式のデモの紹介• 最初に見るべきDemoプログラム• レイアウトの複雑な例• まとめ3
ここから話す内容◼前半• プログラムの実行方法について• GUIの利点• PythonのGUIの一覧• PythonのGUIについて• 個人的にお勧めするライブラリ• PythonでのGUIの位置づけ• PythonのGUIで作れるものの例• ここまでのまとめ◼後半• PySimpleGUIの紹介• PySimleGUI Stapyとの関連性• PySimpleGUIについて• PySimpleGUIの基本的な書き方• リストのリストでUIを作る• 公式のデモの紹介• 最初に見るべきDemoプログラム• レイアウトの複雑な例• まとめ4
プログラムの実行方法について• プログラムの実行方法• CLI• GUI5
プログラムの実行方法について• CLI• Command Line Interfaceの略• すべてのやり取りを文字によって行う方式• pythonだとclick（ https://github.com/pallets/click ）というライブラリがおすすめ6
プログラムの実行方法について• GUI• Graphical User Interfaceの略• コンピュータグラフィックスとポインティングデバイスなどを用いる、グラフィカル（ビジュアル）であることを特徴とするユーザインタフェース。• 画面でボタンをポチポチクリックして操作するもの7
GUIの利点• 入力と出力結果を表示して見れる• オプションをボタンやチェックボックス、ラジオボタンなどで配置することでパラメータ調整が簡単になる8
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• Pyformsetc・・・※Qt系はそれぞれ開発元とライセンスが違います※２はライブラリではなくて手法です 9
PythonのGUIについて• 種類はたくさんある• どれを使用するべきか？• どのライブラリにも特徴がある10
個人的にお勧めするライブラリ• ともかく簡単に作りたい• PySimpleGUI ★後半はこのライブラリの説明をします• 見た目にこだわりたい, html,css,javaScritがある程度分かる、• Eel (html,CSS,javascriptでレイアウトを作ります)11
ここから話す内容◼前半• プログラムの実行方法について• GUIの利点• PythonのGUIの一覧• PythonのGUIについて• 個人的にお勧めするライブラリ• PythonでのGUIの位置づけ• PythonのGUIで作れるものの例• PythonのGUIライブラリごとの作り方の例• ここまでのまとめ◼後半• PySimpleGUIの紹介• PySimleGUI Stapyとの関連性• PySimpleGUIについて• PySimpleGUIの基本的な書き方• リストのリストでUIを作る• 公式のデモの紹介• 最初に見るべきDemoプログラム• レイアウトの複雑な例• まとめ12
PythonでのGUIの位置づけ• 個人の見解• 覚えておくともしかしたらいいかもぐらいのもの• Pythonの利用目的はAI、データサイエンス、web、画像処理などがメイン• 広く一般に公開するものでなく、個人、組織内、コミュニティ内で使用するもの• 広く一般に公開するものにしたいのであればWebアプリケーションにした方が無難（ブラウザ上で操作するもの）13
PythonのGUIで作れるものの例• 個人的に気になったアプリの紹介• PandasGUI• Cyllista Game Engine14
PandasGUIについて• https://github.com/adamerose/pandasgui• Qｔ5で作られている• CSVのデータを読み込んでDataframeに変換する• Plotlyでグラフ表示が可能• フィルタリング（前処理）、結果をグラフ表示して可視化するというプロセスが可能 15
PandasGUIのデモ• connpassのAPIからstapyのデータを抜き出し、CSVにしたものを使用16
Cyllista Game Engine• Cygamesがゲーム開発のために作ったインハウス（内製）のゲームエンジン• Pyside2でGUI作成、ツール関連はすべてPythonで書かれている• CEDEC2020 [Python による大規模ゲーム開発環境 〜Cyllista Game Engine開発事例〜」で発表されている• https://tech.cygames.co.jp/archives/3442/17Cyllista Game Engine のツール紹介(youtubeより)
PythonのGUIライブラリごとの作り方の例• ライブラリによってレイアウトの作り方が異なる• 以下のライブラリを例に特徴的な方法を説明• tkinter• wxPython• Kivy• QT系• Eel• Remi/flexx/PyWebView18
tkinter• コードを直接記述してwidgetをぺたぺた追加する• レイアウトが想像しづらいimport tkinterfrom 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
wxPython• GUIデザイナー（ｗxFormBuilder/wxGlage）を使用してGUIを追加• Widgetをクリックして配置するのでわかりやすい• 自動生成されたコードにロジックを入れる• 複雑なUIだとロジックを書くのが難しい• wxPythonはPythonの３系対応が遅れたwxFormBuilderの例 wxFormBuilderから生成されたコード20
Kivy• CSSのようなもの（kv language）を使用して定義• なれると簡単なレイアウトはすぐにできる• 学習コストが高い。GPUを積んでいないPCだと動作が重い生成された画面kv language21
QT系• QML（XMLのような言語）とQt Designer• 多彩な機能、CG系のソフトと連携するのが得意• pandasGUIのplotlyはブラウザを埋め込んで動作している• QT系は学習コストが高いのと、 PyQt5は商用ライセンスがあるQMLの例（公式から引用） QｔDesigner22
Eel• htmlとcssとJavaScript• Chrom(ブラウザ)上でUIを動かしている• BootStrap,Vue.jsが使えるの見た目はよい• pythonでGUIを書いていない・・・JavaSriptHTMLGUIの部分Python処理部分WebSocetを使ってやり取りする23
REMI/flexx/PyWebView• Pythonで書いたコードを内部的にhtmlに変換する• なかなか思ったようなデザインにならない。参考例：REMI (https://github.com/dddomodossola/remi)24
ここまでのまとめ• PythonのGUIライブラリでレイアウトを作る方法は様々• どれも一長一短がある• レイアウトを簡単に組めるか• 機能性• 見た目25
ここから話す内容◼前半• プログラムの実行方法について• GUIの利点• PythonのGUIの一覧• PythonのGUIについて• 個人的にお勧めするライブラリ• PythonでのGUIの位置づけ• PythonのGUIで作れるものの例• ここまでのまとめ◼後半• PySimpleGUIの紹介• PySimleGUIとStapyとの関連性• PySimpleGUIについて• PySimpleGUIの基本的な書き方• リストのリストでUIを作る• 公式のデモの紹介• 最初に見るべきDemoプログラム• レイアウトの複雑な例• まとめ26
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
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
PySimpleGUIについて（1/2)• 公式の日本語訳レビューを先日行いました• レビューするきっかけは公式のtweetから• https://github.com/PySimpleGUI/PySimpleGUI/blob/master/readme.ja.md• ここから内容を紹介29
PySimpleGUIについて（2/2)• 普通の人はPythonのプログラムをコマンドラインで実行するのは難しい• GUIを追加することで• プログラムが使いやすくなる• より多くの人に知ってもらえるようになる公式のreadme.mdから引用30
対応しているOS環境 サポートPython 3.4以上OS Windows，Mac，Linuxハードウェア デスクトップ PC, ノートパソコン, Raspberry Pi, PyDroid3 を実行しているアンドロイドデバイスオンライン repli.it、Trinket.com (どちらもブラウザ上でtkinterを実行する)GUI フレームワークtkinter, pyside2, WxPython,Remi31
インストール• Pure Pythonなのでインストールは簡単pip install pysimpleguiorpip3 install pysimplegui32
PySimpleGUIについて• 特徴• 「人間のためのPythonのGUI」がテーマ• 簡単、覚えることが少ない• リスト構造でUIを作ることができます• エレメント（パーツ）を組み合わせることで作成できる33
PySimpleGUIの基本的な書き方①• 5個のパートに分かれる• ボタンを押すとウィンドウが閉じる34
PySimpleGUIの基本的な書き方②• イベントループ• 「終了」，「×（閉じる）」を押すまで画面が表示され続ける初期画面「はい」ぼたんをクリック後35
PySimpleGUIの基本的な書き方②• keyパラメータを使用して該当の値を取得・更新• Pythonの辞書型({key1: value1, key2: value2,・・・})と同じ構造• window・・・エレメントの設定• values ・・・ 入力「はい」ぼたんをクリック後初期画面36
PySimpleGUIの基本的な書き方②Values（入力項目）の中身{‘-Input-': ‘世界’,}Windowの中身（keyがついているエレメントがすべて操作可能）※Buttonはデフォルトで表示名＝keyがつくようになっています{‘-入力-’: InputText object‘-出力-’:Text object‘はい’ :Button object‘終了’ :Button object}37
PySimpleGUIの基本的な書き方②• 「-出力-」キーが付いたTextの値を「-入力-」キーがInput Textの値で書き換える「はい」ぼたんをクリック後38
リストのリストでUIを作る• listを用いてレイアウト（行）を作成する• listのlistで入れ子の構造をできる• リスト内包表記を使用して1行でグリッドが作成できる39
この内容を理解するだけでGUIは書けます40
公式のデモの紹介• 公式には非常に多くのデモがあります• デモを見ればどう書くかがわかります。• ライブラリと連携したデモもありますパッケージ 説明Matplotlib グラフやプロットの多くの種類OpenCV コンピュータビジョン (AIでよく使用)VLC ビデオ再生pymunk 物理エンジンpsutil システム環境の統計prawn Reddit APIjson PySimpleGUI は、「ユーザー設定」を格納する特別なAPIをラップします。weather お天気アプリを作るためにいくつかの天気APIと統合mido MIDI 再生beautiful soup ウェブスクレイピング (GitHub issueウォッチャーでの例) 41
最初に見るべきDemoプログラム• https://github.com/PySimpleGUI/PySimpleGUI/blob/master/DemoPrograms/Demo_All_Widgets.pyPySimpleGUIで表示できるすべてのエレメントが表示• まずはこのコードを見て、書き換えてみる（ボタンの名前、テーマなど）手を動かして理解する42
レイアウトの複雑な例• https://github.com/PySimpleGUI/PySimpleGUI-Photo-Colorizer• フォルダを指定して、そこから画像ファイルの一覧を読み込む、画像ファイルを指定して、元画像と着色画像を表示する43
レイアウトの複雑な例44
レイアウトの複雑な例• 2つの列を足し合わせている45
レイアウトの複雑な例• 左の列（以下のエレメントを行として構成）①テキスト、入力ボックス、フォルダの読み込みボタン②リスト③コンボボックス④テキスト①②③④①②③④46
レイアウトの複雑な例①②③①②③47• 右の列（以下のエレメントを行として構成）①テキスト、入力、ファイルの読み込みボタン②リスト③ボタン、ボタン、ボタン、ボタン④画像表示、画像表示
レイアウトの複雑な例• 2つの列を足し合わせている• VSeperator() はVerticalSeparator（垂直のセパレータ）の略で、Column(left_col）とColumn(image_col）を「列」として横に並べている48
まとめ• PythonにはGUIライブラリが色々あって、GUIの作り方にも色々な方法がある• PySimpleGUIならば簡単にGUIが作れる49
ご清聴ありがとうございました50
おまけ• JavaScript系のGUIについて• JavaScript＋Chormium(Chrom)• ブラウザはメモリを食う• 信頼性の問題51
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
okajun35
iuchimasatoshi
ivargrimstad
adammc331
terhechte
ntsk
akitotsukahara
hirodragon112
joker1007
poteboy
fornewid
dalinaum
denniskardys
pedronauck
philhawksworth
quramy
ufuk
addyosmani
keathley
scottboms
mraible
jnunemaker
gr2m
keavy