環境構築2_WSLのGUI設定 PySimpleGUIのhello world まで

初めに

この記事は、前回投稿した記事(環境構築1)の続きである。
確認されることを推奨する。
とは言ったものの、この記事に書かれていることを行うには、wsl2上で、python3が実装されていればいいので、前回投稿した記事である、"環境構築1"は、行っていなくてもいい。ただ、"環境構築0"は行っておくことを推奨する。

この記事では、GUIがサポートされていないWSL2に対し、GUIを扱えるように、Xサーバ(X Window System)の一種である、"VcSxrv"の設定を行い、pythonのGUIライブラリの一つである、"PySimpleGUI"の導入まで行うことを目的とする。
"WSL + VcSxrv"の組み合わせは、wslを使用するなら、鉄板（らしい）の組み合わせなので、検索すればたくさん記事が出てくる。問題は発生したら、検索すれば多分解決する。

今回の環境構築では、windows上とWSl上での作業を行う必要がある。どちらで行うべき作業なのかを強く意識して行うようにしよう。

前回の記事で、音声合成（聴覚的出力）を行った。今回の記事でGUI(視覚的出力)を行う。
ゆくゆくは、音声認識（聴覚的入力）や画像処理（視覚的入力）についてもまとめて行きたいと考えている。（だいぶ先になるだろうけど。）

目次

1. GUIとPySimpleGUIについて
2. VcSxrvのインストールと設定
3. wslで日本語を使用できるようにする
4. PySimpleGUIのhello world

GUIとPySimpleGUIについて

GUIとは、Graphical User Interfaceの略であり、昨今のコンピュータの基本的なインターフェースである。マウスを使ったり、ウィンドウが出てきたりするやつは、GUIであると思って問題ないだろう。
対義語として、CUI(character user interface)が挙げられる。これは、ターミナルなどを指す。windowsが普及する前のPCはだいたいCUIベースのコンピュータだったらしい。（そういった意味で、GUIベースのwindowsは特殊らしい。知らんけど。）なんとなく個人的なイメージだが、GUIはカチカチしていて、CUIはカタカタしている感じがする。

PySimpleGUIとは、文字通り、pythonでsimpleにGUIを使用するための便利なライブラリである。
python + GUIといえば、"Tkinter"のほうが一般的といわれるかもしれないが、個人的には、PySimpleGUIのほうが好きである。というか、そもそもPySimpleGUIはTkinterをベースに使いやすく改良したライブラリである。（詳しくは知らないが、Tkinterはpython用とはいえ、実行形式がjavaっぽくて、使い方がpythonっぽくないらしい。ぽいぽいぽーい。）Tkinterが低レイヤーーでPySimpleGUIが高レイヤーなイメージ。詳しい関係性はこのサイトに載っている。
公式も非常に充実していて、分かりやすい。また、日本人向けとしては、この方が作成された資料が非常に分かりやすい。自分はこれで勉強させてもらった。

VcSxrvのインストールと設定

ざっくり手順を説明すると、

1. windowsにVcSxrvをインストール
2. windows_VcSxrvに対しwslからアクセスできるように設定
3. windows_VcSxrvがwindowsが起動したときに勝手に起動してくれるように設定
4. wslにVcSxrvをインストール
5. wsl起動時に、wsl_VcSxrvが勝手にwindows_VcSxrvにアクセスしてくれるように設定

という流れになっている。

同じハードウェアを使用しているため、忘れがちだが、windowsとwslは全く別のパソコンであるということを忘れなければ、混乱することもないだろう。

1.~3. のwindows部分は、前の記事同様、この神サイトに丸投げします。というか、この記事には、この記事で説明していることが大体載っています。目を通しておくことを本当に推奨する。

すべての手順について、上記神サイトを読むことを推奨するが、4. 5. のwsl側の作業は、以下をwslで行えばよい。（CUIはコマンドで完結しているからこういう時に便利。）

おまじない

sudo apt update -y
sudo apt upgrade -y

wslにVcSxrvをインストール

sudo apt install -y libgl1-mesa-dev
sudo apt install -y xorg-dev

sudo apt install -y libgl1-mesa-dev：OpenGLのインストール (OpenGLは、CG関係の最も基本的なありがたい道具。GUIもCGの一部なので必要なのだと思う。)
sudo apt install -y xorg-dev：VcSxrvのインストール

~/.bashrcの最後の行に書き込むコード

export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2}'):0

上記のコードを、好きなエディタを使用して、wslの~/.bashrcに書き込めばよい。
~/.bashrcに書かれているコマンドは、wsl起動時に、勝手に行われるものらしい。
上記コマンドは、windowsのIPアドレスをゲットして、wslの /etcにある、resolv.confに書き加えている。wslはGUIの出力先をresolv.confを参照し探す。
個人的には、~/.bashrcなどの、コンピュータ自体の設定にかかわるようなファイルを編集するときは、コメントアウトなどで、"いつ"、"どのサイトを参照に"、その編集を行ったのかを明記しておいたほうがいいと思う。もし、起動がおかしくなった時に、デバックできなくなってしまうから。

wslで日本語を使用できるようにする

PySimpleGUIを使えるようになっても、日本語の入出力ができなければ、日本人的にちょっとしんどい。
この章では、PySimpleGUIを使い始める前に、日本語関連の設定を行っておく。
なお、この章の作業はすべて、wslの中だけの作業である。

この章の作業も、もれなく上記神サイトと多分同じ方が書かれている神サイトにおおむね従って行う。

mozc（日本語関係の本体）のインストール

sudo apt install -y fcitx-mozc dbus-x11

日本語のかっこいいフォントのインストール

sudo apt-get install fonts-ipafont -y 

おまじない

sudo sh -c "dbus-uuidgen > /var/lib/dbus/machine-id"

これに関してはマジでよくわからない。
出典元のサイトを見てもよくわからなかった。
マシンの識別を乱数を用いて行っているみたいだが、なぜこのタイミングなのか？
有識者の方、いらっしゃいましたら教えてください。

~/.profileに書き込むコード

export GTK_IM_MODULE=fcitx
export QT_IM_MODULE=fcitx
export XMODIFIERS=@im=fcitx
export DefaultIMModule=fcitx
if [ $SHLVL = 1 ] ; then
  (fcitx-autostart > /dev/null 2>&1 &)
  xset -r 49  > /dev/null 2>&1
fi

上記のコードを、好きなエディタを用いて、wslの~/.profileに書き込めばよい。
~/.profileは、~/.bashrcと同じように、wsl自体の設定を行う隠しファイル。
ここで、日本語の入出力を有効にしている。

wslの表記のデフォルトを日本語にする

sudo apt -y install language-pack-ja
sudo update-locale LANG=ja_JP.UTF8

これはおまけ。
しなくてもいいっちゃいい。

ここまで終わったら、一旦wslを再起動させる。

日本語の設定ができているか確認

fcitx-config-gtk3

警告が出るが、無視して大丈夫らしい。
詳しい設定の確認方法は、上記神サイトを参照されたし。

PySimpleGUIのhello world

pythonの代表的なGUIツールである、PySimpleGUIとTkinterの比較は、このサイトに非常に詳しくまとめられている。また、このサイトは、両ツールのチュートリアルとしても、よくできている。
PySimpleGUIの詳しい使い方は、公式を参照するのもいいが、この方が作成された、テキスト(.pdf形式)は非常に分かりやすく、個人的には、このテキストを推奨する。
PySimnpleGUIは調べれば、日本語の分かりやすいサイトも割と出てくる。個人的にお世話になったのがこのサイトである。

PySimpleGUIのインストール

sudo apt install python3-tk
pip3 install PySimpleGUI

PySimpleGUIを使用するには、元となるtkinterもインストールしなければならない。
pythonのインストール環境によっては、最初からtkinterはインストールされている。

上記サイトやテキストを参考に作成した、本当に最低限の機能のpythonプログラムが以下である。

PySimpleGUI_hello_world.py

# PySimpleGUIのhello world

import PySimpleGUI as sg #PySimpleGUIのインポート

def main():
    Layout = [ #生成するGUIウィンドウのレイアウト
        [sg.Text("こんにちは！世界！",font = (None, 30),text_color = "#0000ff")],#青色で、大きさ30、フォントはデフォルト。
        [sg.Button("こんにちは",key = "A")],
        [sg.Button("さようなら",key = "B")]
    ]

    Window = sg.Window("hello world",Layout) #ウィンドウとして設定

    while True:
        events, values = Window.read() #ここで、実際にウィンドウが生成される。
        if events == None:
            print("xがクリックされました")
            break
        elif events == "A":
            print("continue")
        elif events == "B":
            print("finish")
            break
    Window.close()

if __name__ == "__main__": #おまじない
     main()   

PySImpleGUIは、
1 生成するウィンドウのレイアウトの設定
2 レイアウトをウィンドウとして設定
3 ループでウィンドウの生成
4 ウィンドウに設定されたイベントを行う
という流れで使用される。

この時、一度でもwindowとして設定されたレイアウトは使いまわしができない。"レイアウトは使い捨て"というのは覚えておいたほうがいい。
また、デフォルトでは、ウィンドウは使用しているディスプレイの中心に出力される。そのため、マルチディスプレイで使用している場合は、見えずらい場所に出てくるので注意。

以上で、GUIのことを完全に理解したと思う。