PyQt5で自分のためのIDEを作っちゃおう！

by fukatani

Slide 1

Slide 1 text

PyQt5で自分のためのIDEを作っちゃおう！ Pycon JP 2019 深谷亮祐

Slide 2

Slide 2 text

自己紹介　 @fukafukatani 所属: トヨタ自動車株式会社仕事: 自動運転/物体認識(3D点群/画像) 趣味: 競技プログラミング(AtCoder青)、ボドゲ

Slide 3

Slide 3 text

あらすじあるIDEで競技プログラミングに参加していたが、いくつかの問題が、、

Slide 4

Slide 4 text

右クリックメニュー縦に長すぎ問題項目やたら多い

Slide 5

Slide 5 text

AsMut問題行末で改行したいだけなのに補完候補が出ちゃう

Slide 6

Slide 6 text

IDEを自作したモチベーション - どのIDEも「こんな機能がほしい」「この挙動はちょっと気に入らない」がある - やりたいことをやるのにPythonで実現したい - 開発しやすい - ライブラリの充実 Pythonで、自分だけのためのIDEを実現するぞ！

Slide 7

Slide 7 text

ちょっとだけ競プロの話与えられた問題文の仕様を満たすプログラムを書く問題文だけでなく入力例と出力例が与えられる例が複数あるので確認が手間

Slide 8

Slide 8 text

できたもの IDEにブラウザ(PersephoneP)を埋め込み問題の閲覧をしながら、プログラミングできる閲覧された問題の入出力例は、バックグラウンドでonline-judge-toolsによってダウンロード Testボタンで書いたコードをテストできる！

Slide 9

Slide 9 text

というわけで、本日のコンテンツ - PyQtを使った統合開発環境のアーキテクチャ - QPlainTextEditでメモ帳を作ろう - QPlainTextEditを強化して、プログラミング用エディタにしよう - テキストエディタとデバッガを通信させてIDEに仕上げようところどころ、コードが入りますが、雰囲気を感じていただければ、... 全体はhttps://github.com/fukatani/rujaion

Slide 10

Slide 10 text

というわけで、本日のコンテンツ - PyQtを使った統合開発環境のアーキテクチャ - QPlainTextEditでメモ帳を作ろう - QPlainTextEditを強化して、プログラミング用エディタにしよう - テキストエディタとデバッガを通信させてIDEに仕上げよう

Slide 11

Slide 11 text

Python製IDEってあまり聞かないけどできるの？ Integrated Development Environment: 統合開発環境のこと - テキストエディタ(補完、シンタックスハイライト、定義ジャンプ、...) - コンパイル(ビルド)、デバッグが統合されたソフトウェア実はPythonはIDEを作れるだけの十分なポテンシャルを有する

Slide 12

Slide 12 text

デバッガ IDEを図にしてみるとエディタ文字キーの入力受付表示補完ライブラリ

Slide 13

Slide 13 text

デバッガ図にしてみるとエディタ補完ライブラリ既存のライブラリを使用 PDB 既存のライブラリを使用

Slide 14

Slide 14 text

デバッガ図にしてみるとエディタ補完ライブラリ PyQt＋カスタマイズしていく本発表のメイン

Slide 15

Slide 15 text

PyQtとは PythonのGUIキット、割と人気 IDE向けの機能も充実 - QPlainTextEdit (テキストエディタ) - QCompleter (テキスト補完) - QSyntaxHighlighter (シンタックスハイライト) 既存ライブラリ+PyQtを組み合わせればIDEが作れる！

Slide 16

Slide 16 text

本日のコンテンツ - PyQtを使った統合開発環境のアーキテクチャ - QPlainTextEditでメモ帳を作ろう - QPlainTextEditを強化して、プログラミング用エディタにしよう - テキストエディタとデバッガを通信させてIDEに仕上げよう

Slide 17

Slide 17 text

6行で作るテキストエディタ(QPlainTextEdit) コピペ、アンドゥが可能なエディタが出現ただし、セーブ/ロードはできない

Slide 18

Slide 18 text

キーバインドの追加 QPlainTextEditを継承し、 keyPressEventをオーバーライド継承元のキーバインドを有効にキーバインド指定

Slide 19

Slide 19 text

セーブ(名前をつけて保存)の実装 File I/Oでテキスト形式で保存ウインドウが出現 →選択したファイル名を返す

Slide 20

Slide 20 text

ロードの実装 File I/Oでロードしてテキストをセットウインドウが出現 →選択したファイル名を返す

Slide 21

Slide 21 text

本日のコンテンツ - PyQtを使った統合開発環境のアーキテクチャ - QPlainTextEditでメモ帳を作ろう - QPlainTextEditを強化して、プログラミング用エディタにしよう - テキストエディタとデバッガを通信させてIDEに仕上げようここまででメモ帳レベルのエディタはできた次はオートインデント、シンタックスハイライトを実装

Slide 22

Slide 22 text

やるべきことは３つ入力済テキストの取得テキストの自動挿入ハイライト (一部箇所のフォントの色変更、波線、...)

Slide 23

Slide 23 text

やるべきことは３つオートインデント、補完、スニペット挿入シンタックスハイライト、対応するカッコの強調、文法エラー箇所の強調多くのプログラミング向け機能はこの3つの要素から成立この辺を実装すると「使えるじゃん！」という感覚になってくる入力済テキストの取得テキストの自動挿入ハイライト (一部箇所のフォントの色変更、波線、...)

Slide 24

Slide 24 text

オートインデントの動作 def function: “:”で終わる行で改行すると、 (keyPressEventで判定) def function: スペースを四個いれてほしい (正確にはネストを一段下げる)

Slide 25

Slide 25 text

オートインデントの実装テキスト挿入カーソル行のテキスト取得 Enterキーのショートカットキーに割当

Slide 26

Slide 26 text

現在行ハイライトの動作ステップ 1. テキストカーソル位置が”変わる度”に現在行をチェック 2. 現在行の背景色を変える(ハイライト) テキストカーソルが存在する行の背景色を変更

Slide 27

Slide 27 text

あるイベントが起こる度にカーソルが移動する度に Editorのテキストが変化する度にキーが押される度にマウスホイールが回る度に現在行の色を変更文法エラーをチェック「XXX の度に YYY を行う」という類の実装は、 Qtではシグナルとスロットという概念で扱う

Slide 28

Slide 28 text

現在行ハイライトの実装 (1) カーソルが移動する度に Editorのテキストが変化する度にキーが押される度に現在行の色を変更文法エラーをチェックシグナルスロットシグナル今回はQPlainTextEditのメンバなので実装不要スロット今回は自分で実装接続

Slide 29

Slide 29 text

現在行ハイライトの実装 (2) 背景色の変更：ボリューミーなので、詳しい説明は省略写経して使ってください行全体特定箇所の背景・フォントの変更、下線の追加

Slide 30

Slide 30 text

シンタックスハイライトの動作と実装方針ハイライト自体は現在行のハイライトと同様テキスト全体を走査し、正規表現にマッチする場所をハイライト ex. - def, class, importなどの予約語との一致 - # の後ろはコメント - 定数(2018, 3.14, None, True) - 文字列リテラル(“Hello World”) QSyntaxHighlighterを使って実装すると楽シンタックスハイライト実行例

Slide 31

Slide 31 text

本日のコンテンツ - PyQtを使った統合開発環境のアーキテクチャ - QPlainTextEditでメモ帳を作ろう - QPlainTextEditを強化して、プログラミング用エディタにしよう - テキストエディタとデバッガを通信させてIDEに仕上げようここまででプログラミング用エディタはできた補完ライブラリやデバッガと通信して、IDEにしよう

Slide 32

Slide 32 text

補完機能の概要エディタ補完ライブラリ import json json.lo load loads ユーザー候補の選択選ばれたテキストの挿入 insertPlainText

Slide 33

Slide 33 text

補完ライブラリの叩き方 >>> import jedi >>> source = """import json ... json.lo""" >>> jedi.Script(source, 2, len("json.lo")).completions() [, ] Pythonの補完なら、jediを使うのが楽 (pip install jedi) その行の何文字目？何行目？テキスト全体

Slide 34

Slide 34 text

ポップアップ周りの実装概要 (QPlainTextEdit) ポップアップ表示時のEnter判定 QCompleter(ポップアップ内容の制御を行うクラス)を継承

Slide 35

Slide 35 text

GUIデバッガを作る前に、、CUIデバッグの流れ 4行目でブレークポイントをしかけて実行その時点でのaの内容を表示ユーザー入力文字は水色 “(Pdb)”という文字列が出力されると、入力を受付可能な状態 $ python3 -m pdb myscript.py (Pdb) breakpoint 4 (Pdb) run hello hello >/script.py(4)() (Pdb) print a 40 デバッグしたいプログラム

Slide 36

Slide 36 text

デバッガとの通信実行中のプログラムから特定の文字列が出力されるのを待つ場合、対話自動化ライブラリpexpectで実現できる　pip install pexpect (Pdb)という文字列が見つかるまでブロックされ、見つかると続行

Slide 37

Slide 37 text

pexpectを使った対話型デバッガ機能の概要エディタデバッガ(Pdb) >hello >hello >/script.py(3) (Pdb) run ユーザー次の指示 Step in / Print a / … (Pdb)という文字列が現れるまで待機

Slide 38

Slide 38 text

まとめ - PyQtを使ったIDEのアーキテクチャ - QPlainTextEditでメモ帳を作った - プログラミング用エディタ向け機能の実装 - オートインデント(insertPlainText) - 現在行ハイライト - IDE機能の実装 - JediやQCompleterを使った補完 - pexpectを使った対話型デバッガの実装

Slide 39

Slide 39 text

今日話せなかったこと - QThreadを使った重い処理の非同期化 - ブレークポイントの管理 - QtWebEngine - コンソールの実装 https://github.com/fukatani/rujaion PyQt5を使ったRust/C++ IDE (Pythonサポート計画中)

Slide 40

Slide 40 text

ご清聴の皆様、スタッフの皆様、ありがとうございました！　@fukafukatani

Slide 41

Slide 41 text

補足スライド

Slide 42

Slide 42 text

質問１、デバッガの出力はどうやって使うのか？ A. パースします。 print aをして、 a = 40という出力が出たなら、” = ”の後ろを取得すればよいです。

Slide 43

Slide 43 text

質問２、PyQt5の動作は遅くないか？ A. (実感として)遅くないです。不要な機能がないせいか、有名IDEより速いです。 Visual Studio CodeなどもJavaScriptでできていますし、フロントエンドの速度はあまり問題にならず、補完やデバッグなどのバックエンド側の速度が問題になることが多いです。 C++の補完をやろうとしたとき、真面目に保管しようとすると標準ライブラリ全部読み込まないといけないので遅くなりました。(cqueryみたいな解決策はあり)