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

#初めに
この記事は、[前回投稿した記事](https://qiita.com/magonotegaeru/items/cbfaa7ab8e3728609d32)(環境構築1)の続きである。
確認されることを推奨する。
とは言ったものの、この記事に書かれていることを行うには、wsl2上で、python3が実装されていればいいので、前回投稿した記事である、"環境構築1"は、行っていなくてもいい。ただ、"[環境構築0](https://qiita.com/magonotegaeru/items/617c21f9548f3f9ef81e)"は行っておくことを推奨する。

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

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

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

#目次
0. GUIとPySimpleGUIについて
0. VcSxrvのインストールと設定
0. wslで日本語を使用できるようにする
0. 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が高レイヤーなイメージ。詳しい関係性は[このサイト](https://qiita.com/dario_okazaki/items/656de21cab5c81cabe59)に載っている。
[公式](https://pysimplegui.readthedocs.io/en/latest/)も非常に充実していて、分かりやすい。また、日本人向けとしては、[この方](https://qiita.com/KatsunoriNakamura/items/376da645e52f7ef7f9ef)が作成された資料が非常に分かりやすい。自分はこれで勉強させてもらった。

#VcSxrvのインストールと設定

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

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

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

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

1.~3. のwindows部分は、前の記事同様、__[この神サイト](https://astherier.com/blog/2020/08/run-gui-apps-on-wsl2/#install-vcxsrv)__に丸投げします。というか、この記事には、この記事で説明していることが大体載っています。__目を通しておくことを本当に推奨する。__


すべての手順について、上記神サイトを読むことを推奨するが、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のインストール

```shell:~/.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の中だけの作業である。__

この章の作業も、もれなく上記神サイトと多分同じ方が書かれている[神サイト](https://astherier.com/blog/2020/08/install-fcitx-mozc-on-wsl2-ubuntu2004/)におおむね従って行う。

```: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"
```
これに関してはマジでよくわからない。
[出典元のサイト](https://astherier.com/blog/2020/08/install-fcitx-mozc-on-wsl2-ubuntu2004/)を見てもよくわからなかった。
マシンの識別を乱数を用いて行っているみたいだが、なぜこのタイミングなのか？
有識者の方、いらっしゃいましたら教えてください。

```shell:~/.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
```
警告が出るが、無視して大丈夫らしい。
詳しい設定の確認方法は、上記[神サイト](https://astherier.com/blog/2020/08/install-fcitx-mozc-on-wsl2-ubuntu2004/)を参照されたし。

#PySimpleGUIのhello world
pythonの代表的なGUIツールである、PySimpleGUIとTkinterの比較は、[このサイト](https://qiita.com/dario_okazaki/items/656de21cab5c81cabe59)に非常に詳しくまとめられている。また、このサイトは、両ツールのチュートリアルとしても、よくできている。
PySimpleGUIの詳しい使い方は、[公式](https://pysimplegui.readthedocs.io/en/latest/)を参照するのもいいが、[この方](https://qiita.com/KatsunoriNakamura/items/376da645e52f7ef7f9ef)が作成された、テキスト(.pdf形式)は非常に分かりやすく、個人的には、このテキストを推奨する。
PySimnpleGUIは調べれば、日本語の分かりやすいサイトも割と出てくる。個人的にお世話になったのが[このサイト](https://qiita.com/melka-blue/items/33c89a62c2392bbbd450)である。

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

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

```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のことを__完全に理解した__と思う。