Python で Ubuntu で GTK で GNOME ウインドウで Hello World する

# Python で Ubuntu で GTK で GNOME ウインドウで Hello World する

## 目的

Windows 11 の WSL Ubuntu 22.04 で Python を用いて Linux の GNOME アプリを開発して理解を深めます。  

## 実現すること

Windows 11 のデスクトップに WSL Ubuntu 22.04 の GNOME GUI カスタムアプリのウインドウを立ち上げます。  

C# で実装したこちらの記事の姉妹編になります。  

https://qiita.com/hiroxpepe/items/bc4caa6b6c77f5ddf89a

## 技術背景

### Python とは？  

<details>
<summary>こちらを展開してご覧いただけます。</summary>

### [Python](https://docs.python.org/ja/3.10/)

Python は、次のような特徴とメリットがあります。

#### クロスプラットフォーム対応

Python は、Windows、macOS、Linux など、多くのオペレーティングシステムで動作するため、クロスプラットフォーム開発に適しています。  

#### 簡単な文法

Python の文法は非常に簡単で読みやすく、初心者にも扱いやすい言語です。また、コードがシンプルであるため、開発者の生産性が向上します。  

#### 多くのライブラリ

Python には、様々な目的に使える豊富なライブラリがあります。これらのライブラリは、簡単にインストールでき、使いやすいため、開発者は開発に必要な機能を素早く実装できます。  

#### オブジェクト指向プログラミング

Python は、オブジェクト指向プログラミングをサポートしています。この機能により、大規模で複雑なプロジェクトを開発することができます。  

#### 多様な用途

Python は、WEB アプリケーション、データ解析、人工知能、IoT、ゲーム開発など、様々な用途に使われます。そのため、Python を学ぶことは、多岐にわたる開発分野で活躍することができます。  

#### まとめ

以上のように、Python はクロスプラットフォーム対応であり、簡単な文法、豊富なライブラリ、オブジェクト指向プログラミング、多様な用途など、多くの特徴とメリットを持ちます。これらの特徴とメリットにより、Python は広く使われるプログラミング言語の一つとなっています。

</details>

### GNOME とは？  

<details>
<summary>こちらを展開してご覧いただけます。</summary>

### [GNOME](https://developer.gnome.org/)

GNOME は、Linux や Unix 系オペレーティングシステム上で動作する、オープンソースのデスクトップ環境です。  

以下のような特徴とメリットがあります。  

#### クロスプラットフォーム対応

GNOME は、Linux や Unix 系オペレーティングシステム上で動作するため、多数のプラットフォームに対応しています。また、Windows や macOS 上でも動作する GNOME のフォークである Cygwin/X や XQuartz があります。  

#### カスタマイズ性

GNOME は、高度なカスタマイズが可能です。ユーザーは、アプリケーションのレイアウトやテーマ、アイコン、フォントなどを簡単に変更できます。  

#### ユーザーフレンドリー

GNOME は、シンプルで使いやすいユーザーインターフェースを提供しています。初心者でも簡単に操作できるように設計されており、視覚的にも美しいデザインが特徴です。  

#### 高い拡張性

GNOME は、多数のアプリケーションやツールを提供しており、これらを拡張することができます。また、GNOMEシェル拡張を使用することで、ユーザーは独自の機能を追加することもできます。  

#### オープンソース

GNOME は、オープンソースであり、自由に改変・配布ができるため、開発者は自分の好きなようにカスタマイズすることができます。  

#### まとめ

これらの特徴とメリットにより、GNOME は、Linux や Unix 系オペレーティングシステム上で広く使用されているデスクトップ環境の一つとなっています。また、クロスプラットフォーム対応やカスタマイズ性の高さから、Windows や macOS 上でも利用されることがあります。

</details>

### GTK とは？  

<details>
<summary>こちらを展開してご覧いただけます。</summary>

### [GTK](https://www.gtk.org/)

GTK は、GNOME デスクトップ環境で使用されるウィジェット・ツールキットです。  

以下のような特徴とメリットがあります。  

#### クロスプラットフォーム対応

GTK は、クロスプラットフォーム対応しています。Linux や Unix 系オペレーティングシステムはもちろん、Windows や macOS、さらには Android や iOS などでも利用できます。  

#### フリー・オープンソース

GTK は、フリーかつオープンソースであるため、誰でも自由に利用・改変・再配布することができます。  

#### 多言語対応

GTK は、多数のプログラミング言語で利用できます。C、C++、Python、Java などの言語をサポートしています。  

#### ウィジェットの豊富さ

GTK は、多数のウィジェットを提供しています。ボタン、テキストボックス、ラベル、プログレスバー、スピンボタンなど、様々な種類のウィジェットを利用することができます。  

#### GNOMEとの関連

GTK は、GNOME デスクトップ環境で利用されており、GNOME アプリケーションの開発に必要不可欠なツールキットとなっています。  

#### まとめ

これらの特徴とメリットにより、GTK は、クロスプラットフォームで利用できるツールキットとして、多数のアプリケーション開発者に利用されています。また、GNOME デスクトップ環境の開発にも欠かせない存在となっています。

</details>

## 開発環境

+ Windows 11 Home 22H2 を使用しています。  
+ [WSL](https://learn.microsoft.com/ja-jp/windows/wsl/about) の Ubuntu を操作していきますので macOS の方も参考にして頂けます。  

<details>

WSL (Microsoft Store アプリ版)

```sh
> wsl --version
WSL バージョン: 1.0.3.0
カーネル バージョン: 5.15.79.1
WSLg バージョン: 1.0.47
```

Ubuntu

```sh
$ lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 22.04.1 LTS
Release:        22.04
```

</details>

※ この記事では基本的に Ubuntu のターミナルで操作を行います。

## Python で "Hello World" を表示する

### Python の確認

:::note info
通常 Ubuntu 22.04 には、Python はプリインストールされています。
:::

バージョン確認

```sh
$ python3 --version
Python 3.10.6
```

### Python スクリプトを作成、実行してみる

プロジェクトフォルダの作成  
※ ~/tmp/hello-python をプロジェクトフォルダとします。  

```sh
$ cd ~
$ mkdir -p tmp/hello-python
$ cd ~/tmp/hello-python
```

スクリプトの作成  

```sh
$ vim hello.py
```

ファイルの内容

```py:hello.py
print("Hello World!")
```

スクリプトを実行

```sh
$ python3 hello.py
Hello World!
```

ターミナルに "Hello, World!" が表示されました。

## GTK を使った GNOME ウインドウで "Hello World" を表示する

※ この記事では、GTK を使用して GUI アプリケーションを開発します。  
※ GTK のバージョンは3系を使用します。  

### 開発環境の構築

GTK インストール

```sh
$ sudo apt install libgtk-3-dev
```

PyGObject インストール

```sh
$ sudo apt install python3-gi python3-gi-cairo gir1.2-gtk-3.0
```

#### PyGObject とは？  

<details>
<summary>こちらを展開してご覧いただけます。</summary>

#### [PyGObject](https://pygobject.readthedocs.io/en/latest/getting_started.html)

PyGObject とは、Python で GTK、GNOME、GStreamer などのライブラリを利用するためのライブラリです。  

PyGObject は、C言語で書かれた GTK、GNOME、GStreamer などのライブラリを Python から利用するための Python バインディングです。 Python で書かれたアプリケーションやツールを、GTK、GNOME、GStreamer などのライブラリを使って GUI アプリケーションなどにすることができます。  

PyGObject は、Python 3 に対応しており、Linux、macOS、Windows などの複数のプラットフォームで利用できます。また、Python の特徴である動的な型付けと、Pythonic な記法を活かして、C言語で書かれたライブラリを使う際の手続きを簡素化することができます。  

PyGObject を使うことで、Python で GUI アプリケーションやメディアプレーヤーなどを開発することができ、簡潔かつ効率的な開発が可能です。  

</details>

### GTK GUI アプリを作成、実行してみる

hello_gtk_app.py ファイル作成

```sh
$ cd ~/tmp/hello-python
$ vim hello_gtk_app.py
```

ファイルの内容

```py:hello_gtk_app.py
import gi

gi.require_version("Gtk", "3.0")
from gi.repository import Gtk

win = Gtk.Window()
win.connect("destroy", Gtk.main_quit)
win.show_all()
Gtk.main()
```

スクリプト実行

```sh
$ python3 hello_gtk_app.py
```

![python_hello_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177199/fa312a2d-b94c-69d0-a301-867c8a3db4c4.png)
Windows 11 のデスクトップに WSL の Ubuntu 22.04 の GNOME GUI ウインドウが立ち上がります！  
※ 魔法のような話ですが本当です。 Microsoft さんありがとうございます😭  

### Python スクリプトを修正する その 1

ボタンを押したらコンソールに "Hello World!" と表示するようにしてみる  

hello_gtk_app.py ファイル修正  

```sh
$ vim hello_gtk_app.py
```

ファイルの内容

```py:hello_gtk_app.py
import gi

gi.require_version('Gtk', '3.0')
from gi.repository import Gtk

class MyWindow(Gtk.Window):
    def __init__(self):
        super().__init__(title="Hello World")
        self.button = Gtk.Button(label="Click Here")
        self.button.connect("clicked", self.on_button_clicked)
        self.add(self.button)

    def on_button_clicked(self, widget):
        print("Hello World!")

win = MyWindow()
win.connect("destroy", Gtk.main_quit)
win.show_all()
Gtk.main()
```

スクリプト実行

```sh
$ python3 hello_gtk_app.py
```

![python_hello_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177199/c8311026-076a-6a26-2309-8188af3945fe.png)
ウィンドウのボタンを押したらターミナルに "Hello World!" と表示されました。

### Python スクリプトを修正する その 2

以下の姉妹記事と同様の実装を Python で試みます。  

https://qiita.com/hiroxpepe/items/bc4caa6b6c77f5ddf89a


hello_gtk_app.py ファイル修正  

```sh
$ vim hello_gtk_app.py
```

ファイルの内容

```py:hello_gtk_app.py
import gi

gi.require_version('Gtk', '3.0')
from gi.repository import Gtk as App

class MainWindow(App.Window):
    def __init__(self):
        super().__init__(title="Example Window")
        self.counter: int = 0
        self.vbox = App.VBox()
        self.label1 = App.Label(label="Hello World!")
        self.button1 = App.Button(label="Click me!")
        self.button1.connect("clicked", self.on_button_clicked)
        self.add(self.vbox)
        self.vbox.pack_start(self.label1, expand = True, fill = True, padding = 0)
        self.vbox.pack_start(self.button1, expand = False, fill = True, padding = 0)
        self.set_default_size(480, 240)

    def on_button_clicked(self, widget):
        self.counter += 1
        self.label1.set_text("Hello World! This button has been clicked " + str(self.counter) + " time(s).")

win = MainWindow()
win.connect("destroy", App.main_quit)
win.show_all()
App.main()
```

スクリプト実行

```sh
$ python3 hello_gtk_app.py
```

![python_hello_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177199/b34852e1-e754-1429-3a1f-1ad195fb7329.png)
姉妹編の C# での実装を再現することが出来ました。  

### ここまでのまとめ

+ Ubuntu に GTK、PyGObject をインストールして GTK の開発環境を構築しました。
+ Python を使用して GTK GUIアプリを新規作成、ビルド、実行することが出来ました。

## 開発環境について

### VS Code で開発してみます

開発に必要なプラグインをインストール  

+ WSL
+ Remote - SSH
+ Python extension for Visual Studio Code

ワークスペースを開く  
※ Windows 11 の VS Code で、WSL Ubuntu 22.04 のソースコードを開きます。  

```sh
$ cd ~/tmp/hello-python
$ code .
```

実行とデバッグ設定

+ [実行とデバッグ] ボタン
    + 環境の選択
        + Python ファイル
        + VS Code からデバッグブレークが可能

![Python_Debug.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177199/d917dd02-21a7-32df-90ab-9a0438113453.png)
デバッグ実行ボタンを押すと、Windows 11 の VS Code で開いている WSL の Ubuntu 22.04 側の GNOME GUI プログラムのソースコード上のブレークポイントで停止してくれます！  
※ 魔法のような話ですが本当です。 Microsoft さんありがとうございます😭  

## まとめ

+ Ubuntu 22.04 で GNOME GUI アプリを作成、ビルド、実行することが出来ました。

## 個人的見解

+ ウィジェット・ツールキット GTK は広く使用されているので、WEB ブラウザを使用しないクロスプラットフォーム UI 開発の選択肢の一つになると思いました。

## 参考

##### GTK

https://docs.gtk.org/gtk3/

##### PyGObject

https://pygobject.readthedocs.io/en/latest/getting_started.html