C(C++)のGUI開発ライブラリGTKをUbuntu上で利用するための環境構築からビルドまで

# 使用ツールの概要

## GTK の概要
GTK は、Linux上で GUI アプリケーションを作成するためのライブラリである。

## X サーバの概要
Ubuntu 上で GUI で利用するためには、X サーバのセットアップが必要である。
X サーバは、GUIのウィンドウや部品などを描画、管理したり、キーボードやマウスなどのデバイスを管理したりする部分だけを独立させたようなものである。  
以下の順で動作する。

1. X サーバは入力データを受け付けて、X クライアント（アプリ）にデータを送る。  
2. X クライアントは受け取ったデータを処理して、処理結果を X サーバへ送る。
3. X サーバは、 X クライアントから受け取った処理結果をディスプレイに出力する。

Windows 10 で利用できる X サーバソフトウェアはいくつかあるが、今回はデファクトスタンダードである VcXsrv を利用する。


# 環境構築（ GTK を利用した開発・ GUI の利用）

## Windows 側の環境構築

1. 
    以下のサイトにアクセスし、緑色のボタン `Download` をクリックして VcXsrv のインストーラをダウンロードする。  
    [VcXsrv Windows X Server](https://sourceforge.net/projects/vcxsrv/)

2. 
    インストーラを起動し、インストールを進める。すべてデフォルトの設定のまま ` Next > ` をクリックしてよい。

3. 
    起動した VcXsrv は、ユーザーがサインアウトすると終了する。次回また WSL と X サーバを利用したければ、手動で VcXsrv を起動する必要がある。これを省略するため、Windows のスタートアップフォルダに XLaunch の設定ファイルへのショートカットを登録する。  
    手順2でデフォルトの設定のまま VcXsrv をインストールしていれば、以下の場所に `vcxsrv.exe` がある。  
    
    ```
    C:\Program Files\VcXsrv\vcxsrv.exe
    ```
    
    このショートカットを作成し、以下フォルダに置く。
    
    ```
    C:\Users\%USERNAME%\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup  
    ```
    
    ※ `%USERNAME%` はログインしているユーザー名に置き換える。

## WSL 側の環境構築
1. 
    Bush on Ubuntu on Windows で X Window System を使用できるように準備を行う。  
    X Window System のパッケージをインストールする。コマンドは以下。
    
    ```
    $ sudo apt install x11-apps 
    ```
    
2. 
    bashrc の設定を追加する。
    以下コマンドで vim で bashrc を開く。

    ```
    $ vi ~/.bashrc
    ```

    以下の1行を bashrc に追加する。（ bashrc の最終行に追加で成功を確認。場所は問わない可能性が高い）

    ```
    export DISPLAY = :0
    ```

    ### viの使い方
    1. 
        Insert を押下して書き込みモードにする。
    2. 
        書き込みする。
        (Delete 押下で文字の削除ができる)
    3. 
        Esc → "`:wq`" → Enter で変更を保存して vim を終了。

    ※ WSL起動時に毎回下記エラーの発生を確認しました。IPアドレスが意図したものに設定されていないことが原因と考えられます。今のところ問題なく動作していますが、原因究明中です……。

    ```
    -bash: export: `=': not a valid identifier
    -bash: export: `:0': not a valid identifier
    ```
    
    ### 参考
    - [virt-manager起動時にGtk-WARNING **: cannot open display と警告が出た場合の対処法](https://qiita.com/hypermkt/items/03fa99694c07ad1ae204)
    - [Ubuntu 設定記録など](https://tattu1902.blog.fc2.com/blog-entry-36.html#old)
    - [WSL2のX-ServerでGUI表示する際に「export DISPLAY=:0.0」が効かない](https://odaryo.hatenablog.com/entry/2020/01/08/114846)
    - [WSL2のGUI設定でつまずいたところ](https://qiita.com/baibai25/items/5841b0592727893d960f)

3. 
    WSL を再起動する。

4. 
    GTK-3.0 と GUI デザイナー glade を WSL にインストールする。

    ```
    $ sudo apt install libgtk-3-dev
    $ sudo apt install glade
    ```
    
### 参考
- [X Window Systemとは](https://www.infraeye.com/study/linuxz37.html)
- [WSL上にXサーバをインストールしてGUIを実現する（VcXsrv編）](https://www.atmarkit.co.jp/ait/articles/1812/06/news040.html)
- [Windows 10 スタートアップの場所と登録や削除する](https://www.tipsfound.com/windows10/11012)
- [Bash on Ubuntu on Windows でGUI操作とデスクトップ上のファイル操作](https://my-log-pll97u88.hatenablog.com/entry/2018/04/25/004843)
- [GTK入門](http://home.a00.itscom.net/hatada/cpp/gtk01.html)


# GTK を利用した開発
ソースファイルの先頭に以下の1行を追加する。

```
#include <gtk/gtk.h>
```

詳しくは、下記サイトを参考。
- [入門GTK+](http://wiki.cis.iwate-u.ac.jp/~wiki/csd/docs/GTK-book-all.pdf)
- [GTK入門](http://home.a00.itscom.net/hatada/cpp/gtk01.html)

# ソースファイルのビルド方法
1. 
    GTK を利用して書かれたソースファイルを、下記コマンドでコンパイルする。  

    ```
    $ gcc %SRCFILE% -o %BINNAME% `pkg-config --cflags --libs gtk+-3.0`
    ```

    ※ `%SRCFILE%` はソースファイル名に、`%BINNAME%` は出力するバイナリファイル名に置き換える。

2. 
    下記コマンドでプログラムを実行する。

    ```
    $ ./%BINNAME%
    ```

    ※ `%BINNAME%` は出力するバイナリファイル名に置き換える。