Pro Yearly is on sale from $80 to $50! »

PythonのGUIについて

Fed4c6cfec7502b771e12f08f8d5ec6d?s=47 Jun okazaki
November 12, 2020

 PythonのGUIについて

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

#stapy

Fed4c6cfec7502b771e12f08f8d5ec6d?s=128

Jun okazaki

November 12, 2020
Tweet

Transcript

  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系はそれぞれ開発元とライセンスが違います ※2はライブラリではなくて手法です 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 • Qt5で作られている • 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デザイナー(wxFormBuilder/wxGlage)を使用してGUIを追加 • Widgetをクリックして配置するのでわかりやすい • 自動生成されたコードにロジックを入れる • 複雑なUIだとロジックを書くのが難しい •

    wxPythonはPythonの3系対応が遅れた 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の例(公式から引用) QtDesigner 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