Upgrade to Pro — share decks privately, control downloads, hide ads and more …

PythonのGUIについて

Jun okazaki
November 12, 2020

 PythonのGUIについて

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

#stapy

Jun okazaki

November 12, 2020
Tweet

More Decks by Jun okazaki

Other Decks in Programming

Transcript

  1. PythonのGUIについて
    オカザキ
    1

    View Slide

  2. 自己紹介
    • オカザキ(@dario_okazaki)
    • 所属:(株)スカラコミュニケーション

    • 職業:サーバーサイドエンジニア
    2

    View Slide

  3. アジェンダ
    ◼前半
    • プログラムの実行方法について
    • GUIの利点
    • PythonのGUIの一覧
    • PythonのGUIについて
    • 個人的にお勧めするライブラリ
    • PythonでのGUIの位置づけ
    • PythonのGUIで作れるものの例
    • ここまでのまとめ
    ◼後半
    • PySimpleGUIの紹介
    • PySimleGUI Stapyとの関連性
    • PySimpleGUIについて
    • PySimpleGUIの基本的な書き方
    • リストのリストでUIを作る
    • 公式のデモの紹介
    • 最初に見るべきDemoプログラム
    • レイアウトの複雑な例
    • まとめ
    3

    View Slide

  4. ここから話す内容
    ◼前半
    • プログラムの実行方法について
    • GUIの利点
    • PythonのGUIの一覧
    • PythonのGUIについて
    • 個人的にお勧めするライブラリ
    • PythonでのGUIの位置づけ
    • PythonのGUIで作れるものの例
    • ここまでのまとめ
    ◼後半
    • PySimpleGUIの紹介
    • PySimleGUI Stapyとの関連性
    • PySimpleGUIについて
    • PySimpleGUIの基本的な書き方
    • リストのリストでUIを作る
    • 公式のデモの紹介
    • 最初に見るべきDemoプログラム
    • レイアウトの複雑な例
    • まとめ
    4

    View Slide

  5. プログラムの実行方法について
    • プログラムの実行方法
    • CLI
    • GUI
    5

    View Slide

  6. プログラムの実行方法について
    • CLI
    • Command Line Interfaceの略
    • すべてのやり取りを文字によって行う方式
    • pythonだとclick( https://github.com/pallets/click )というライブラリがおすすめ
    6

    View Slide

  7. プログラムの実行方法について
    • GUI
    • Graphical User Interfaceの略
    • コンピュータグラフィックスとポインティングデバイスなどを用い
    る、グラフィカル(ビジュアル)であることを特徴とするユーザイ
    ンタフェース。
    • 画面でボタンをポチポチクリックして操作するもの
    7

    View Slide

  8. GUIの利点
    • 入力と出力結果を表示して見れる
    • オプションをボタンやチェックボックス、ラジオボタンなどで
    配置することでパラメータ調整が簡単になる
    8

    View Slide

  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

    View Slide

  10. PythonのGUIについて
    • 種類はたくさんある
    • どれを使用するべきか?
    • どのライブラリにも特徴がある
    10

    View Slide

  11. 個人的にお勧めするライブラリ
    • ともかく簡単に作りたい
    • PySimpleGUI ★後半はこのライブラリの説明をします
    • 見た目にこだわりたい, html,css,javaScritがある程度分かる、
    • Eel (html,CSS,javascriptでレイアウトを作ります)
    11

    View Slide

  12. ここから話す内容
    ◼前半
    • プログラムの実行方法について
    • GUIの利点
    • PythonのGUIの一覧
    • PythonのGUIについて
    • 個人的にお勧めするライブラリ
    • PythonでのGUIの位置づけ
    • PythonのGUIで作れるものの例
    • PythonのGUIライブラリごとの
    作り方の例
    • ここまでのまとめ
    ◼後半
    • PySimpleGUIの紹介
    • PySimleGUI Stapyとの関連性
    • PySimpleGUIについて
    • PySimpleGUIの基本的な書き方
    • リストのリストでUIを作る
    • 公式のデモの紹介
    • 最初に見るべきDemoプログラム
    • レイアウトの複雑な例
    • まとめ
    12

    View Slide

  13. PythonでのGUIの位置づけ
    • 個人の見解
    • 覚えておくともしかしたらいいかもぐらいのもの
    • Pythonの利用目的はAI、データサイエンス、web、画像処理などがメイン
    • 広く一般に公開するものでなく、個人、組織内、コミュニティ内で使
    用するもの
    • 広く一般に公開するものにしたいのであればWebアプリケーションにした方が無
    難(ブラウザ上で操作するもの)
    13

    View Slide

  14. PythonのGUIで作れるものの例
    • 個人的に気になったアプリの紹介
    • PandasGUI
    • Cyllista Game Engine
    14

    View Slide

  15. PandasGUIについて
    • https://github.com/adamerose/pandasgui
    • Qt5で作られている
    • CSVのデータを読み込んでDataframeに変換する
    • Plotlyでグラフ表示が可能
    • フィルタリング(前処理)、結果をグラフ表示して可視化するというプロセスが可能 15

    View Slide

  16. PandasGUIのデモ
    • connpassのAPIからstapyのデータを抜き出し、CSVにしたも
    のを使用
    16

    View Slide

  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より)

    View Slide

  18. PythonのGUIライブラリごとの作り方の例
    • ライブラリによってレイアウトの作り方が異なる
    • 以下のライブラリを例に特徴的な方法を説明
    • tkinter
    • wxPython
    • Kivy
    • QT系
    • Eel
    • Remi/flexx/PyWebView
    18

    View Slide

  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

    View Slide

  20. wxPython
    • GUIデザイナー(wxFormBuilder/wxGlage)を使用してGUIを追加
    • Widgetをクリックして配置するのでわかりやすい
    • 自動生成されたコードにロジックを入れる
    • 複雑なUIだとロジックを書くのが難しい
    • wxPythonはPythonの3系対応が遅れた
    wxFormBuilderの例 wxFormBuilderから生成されたコード
    20

    View Slide

  21. Kivy
    • CSSのようなもの(kv language)を使用して定義
    • なれると簡単なレイアウトはすぐにできる
    • 学習コストが高い。GPUを積んでいないPCだと動作が重い
    生成された画面
    kv language
    21

    View Slide

  22. QT系
    • QML(XMLのような言語)とQt Designer
    • 多彩な機能、CG系のソフトと連携するのが得意
    • pandasGUIのplotlyはブラウザを埋め込んで動作している
    • QT系は学習コストが高いのと、 PyQt5は商用ライセンスがある
    QMLの例(公式から引用) QtDesigner
    22

    View Slide

  23. Eel
    • htmlとcssとJavaScript
    • Chrom(ブラウザ)上でUI
    を動かしている
    • BootStrap,Vue.jsが使え
    るの見た目はよい
    • pythonでGUIを書いてい
    ない・・・
    JavaSript
    HTML
    GUIの部分
    Python
    処理部分
    WebSocetを使って
    やり取りする
    23

    View Slide

  24. REMI/flexx/PyWebView
    • Pythonで書いたコードを内部的にhtmlに変換する
    • なかなか思ったようなデザインにならない。
    参考例:REMI (https://github.com/dddomodossola/remi)
    24

    View Slide

  25. ここまでのまとめ
    • PythonのGUIライブラリでレイアウトを作る方法は様々
    • どれも一長一短がある
    • レイアウトを簡単に組めるか
    • 機能性
    • 見た目
    25

    View Slide

  26. ここから話す内容
    ◼前半
    • プログラムの実行方法について
    • GUIの利点
    • PythonのGUIの一覧
    • PythonのGUIについて
    • 個人的にお勧めするライブラリ
    • PythonでのGUIの位置づけ
    • PythonのGUIで作れるものの例
    • ここまでのまとめ
    ◼後半
    • PySimpleGUIの紹介
    • PySimleGUIとStapyとの関連性
    • PySimpleGUIについて
    • PySimpleGUIの基本的な書き方
    • リストのリストでUIを作る
    • 公式のデモの紹介
    • 最初に見るべきDemoプログラム
    • レイアウトの複雑な例
    • まとめ
    26

    View Slide

  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

    View Slide

  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

    View Slide

  29. PySimpleGUIについて(1/2)
    • 公式の日本語訳レビューを先日行いました
    • レビューするきっかけは公式のtweetから
    • https://github.com/PySimpleGUI/PySimpleGUI/blob/master/readm
    e.ja.md
    • ここから内容を紹介
    29

    View Slide

  30. PySimpleGUIについて(2/2)
    • 普通の人はPythonのプログラムをコマンドラインで実行するのは難
    しい
    • GUIを追加することで
    • プログラムが使いやすくなる
    • より多くの人に知ってもらえるようになる
    公式のreadme.mdから引用
    30

    View Slide

  31. 対応しているOS
    環境 サポート
    Python 3.4以上
    OS Windows,Mac,Linux
    ハードウェア デスクトップ PC, ノートパソコ
    ン, Raspberry Pi, PyDroid3 を実
    行しているアンドロイドデバイ

    オンライン repli.it、Trinket.com (どちらも
    ブラウザ上でtkinterを実行す
    る)
    GUI フレームワーク
    tkinter, pyside2, WxPython,
    Remi
    31

    View Slide

  32. インストール
    • Pure Pythonなのでインストールは簡単
    pip install pysimplegui
    or
    pip3 install pysimplegui
    32

    View Slide

  33. PySimpleGUIについて
    • 特徴
    • 「人間のためのPythonのGUI」がテーマ
    • 簡単、覚えることが少ない
    • リスト構造でUIを作ることができます
    • エレメント(パーツ)を組み合わせることで作成できる
    33

    View Slide

  34. PySimpleGUIの基本的な書き方①
    • 5個のパートに分かれる
    • ボタンを押すとウィンドウが閉じる
    34

    View Slide

  35. PySimpleGUIの基本的な書き方②
    • イベントループ
    • 「終了」,「×(閉じる)」を押すまで画面が表示され続ける
    初期画面
    「はい」ぼたんをクリック後
    35

    View Slide

  36. PySimpleGUIの基本的な書き方②
    • keyパラメータを使用して該当の値を取得・更新
    • Pythonの辞書型({key1: value1, key2: value2,・・・})と同じ構造
    • window・・・エレメントの設定
    • values ・・・ 入力
    「はい」ぼたんをクリック後
    初期画面
    36

    View Slide

  37. PySimpleGUIの基本的な書き方②
    Values(入力項目)の中身
    {
    ‘-Input-': ‘世界’,
    }
    Windowの中身(keyがついているエレメントがすべて操作可能)
    ※Buttonはデフォルトで表示名=keyがつくようになっています
    {
    ‘-入力-’: InputText object
    ‘-出力-’:Text object
    ‘はい’ :Button object
    ‘終了’ :Button object
    }
    37

    View Slide

  38. PySimpleGUIの基本的な書き方②
    • 「-出力-」キーが付いたTextの値を「-入力-」キーが
    Input Textの値で書き換える
    「はい」ぼたんをクリック後
    38

    View Slide

  39. リストのリストでUIを作る
    • listを用いてレイアウト(行)を作成する
    • listのlistで入れ子の構造をできる
    • リスト内包表記を使用して1行でグリッドが作成できる
    39

    View Slide

  40. この内容を理解するだけでGUIは書けます
    40

    View Slide

  41. 公式のデモの紹介
    • 公式には非常に多くのデモがあります
    • デモを見ればどう書くかがわかります。
    • ライブラリと連携したデモもあります
    パッケージ 説明
    Matplotlib グラフやプロットの多くの種類
    OpenCV コンピュータビジョン (AIでよく使用)
    VLC ビデオ再生
    pymunk 物理エンジン
    psutil システム環境の統計
    prawn Reddit API
    json PySimpleGUI は、「ユーザー設定」を格納する特別なAPIをラップします。
    weather お天気アプリを作るためにいくつかの天気APIと統合
    mido MIDI 再生
    beautiful soup ウェブスクレイピング (GitHub issueウォッチャーでの例) 41

    View Slide

  42. 最初に見るべきDemoプログラム
    • https://github.com/PySimpleGUI/PySimpleGUI/blob/master/DemoPrograms/Demo_
    All_Widgets.py
    PySimpleGUIで表示できるすべてのエレメントが表示
    • まずはこのコードを見て、書き換えてみる(ボタンの名前、テーマなど)
    手を動かして理解する
    42

    View Slide

  43. レイアウトの複雑な例
    • https://github.com/PySimpleGUI/PySimpleGUI-Photo-Colorizer
    • フォルダを指定して、そこから画像ファイルの一覧を読み込む、
    画像ファイルを指定して、元画像と着色画像を表示する
    43

    View Slide

  44. レイアウトの複雑な例
    44

    View Slide

  45. レイアウトの複雑な例
    • 2つの列を足し合わせている
    45

    View Slide

  46. レイアウトの複雑な例
    • 左の列(以下のエレメントを行として構成)
    ①テキスト、入力ボックス、フォルダの読み込みボタン
    ②リスト
    ③コンボボックス
    ④テキスト








    46

    View Slide

  47. レイアウトの複雑な例






    47
    • 右の列(以下のエレメントを行として構成)
    ①テキスト、入力、ファイルの読み込みボタン
    ②リスト
    ③ボタン、ボタン、ボタン、ボタン
    ④画像表示、画像表示

    View Slide

  48. レイアウトの複雑な例
    • 2つの列を足し合わせている
    • VSeperator() はVerticalSeparator(垂直のセパレータ)の略で、
    Column(left_col)とColumn(image_col)を「列」として横に並べている
    48

    View Slide

  49. まとめ
    • PythonにはGUIライブラリが色々あって、GUIの作り方にも
    色々な方法がある
    • PySimpleGUIならば簡単にGUIが作れる
    49

    View Slide

  50. ご清聴ありがとうございました
    50

    View Slide

  51. おまけ
    • JavaScript系のGUIについて
    • JavaScript+Chormium(Chrom)
    • ブラウザはメモリを食う
    • 信頼性の問題
    51

    View Slide

  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

    View Slide