PySide2をゼロから学んでいく～#3 ラベル～

https://qiita.com/karakuri-t910/items/c5dbd714cd54520f415d


* [#0 環境構築](https://qiita.com/karakuri-t910/items/f0736a322a6ba217a36c)
* [#1 ウィンドウ](https://qiita.com/karakuri-t910/items/7d2aac29d979f2413162)
* [#2 ボタン](https://qiita.com/karakuri-t910/items/5aae0ba3bed05eeb5109)
* [#3 ラベル ← ここ](https://qiita.com/karakuri-t910/items/1bdbcbf8b4b92555c123)
* [#4 ラジオボタン](https://qiita.com/karakuri-t910/items/e54e771c576d2a0aa11a)
* [#5 チェックボックス](https://qiita.com/karakuri-t910/items/03debf242efd944eecc2)
* [#6 コンボボックス](https://qiita.com/karakuri-t910/items/bfd18dffbe2674a3b478)

# はじめに
PythonでGUI開発をするためのライブラリ「PySide2」の基本的な使い方を、いくつかの段階に分けて説明していきます。

当ページではPySide2のラベルについて説明しています。

# 環境
以下の通りになります。

* Windows 10
* Python 3.8以降

# 公式リファレンス
[QLabel](https://doc.qt.io/qtforpython-5/PySide2/QtWidgets/QLabel.html)

# 知っておきたい用語

##　ラベル
ウィンドウ上に表示されている**情報やデータ**のことをラベルといいます。

ウィジェットと似ていますが、ウィジェットはウィンドウ上に機能を持つアイコン（ボタンやメニューなど）、ラベルは<u>ウィジェットの中でも</u>人間にとって情報となりうるものだと思ってください（下図のようなイメージ）。

![000.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614920/3fa70763-c64c-3965-3a1a-5dbf5af74bda.png)

GUI開発の勉強をしていると「ウィンドウに文字を表示するにはラベルを使います」って説明をよく目にしますが、私は『ちょっと説明不足だな』って思います。実はラベルは**画像や動画などにも適用できます**。そのため`ラベル=文字`ではなく`ラベル=情報やデータ`だと思ってください。

# ベースプログラム
以下のウィンドウを表示するだけのプログラムをベースにして実装していきます。

```python
# PySide2のモジュールを読み込む
from PySide2 import QtWidgets


# ウィンドウの見た目と各機能（今はウィンドウだけ）
class MainWindow(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()


# アプリの実行と終了
app = QtWidgets.QApplication()
window = MainWindow()
window.show()
app.exec_()
```

# PySide2でラベル

## 文字を表示
単に文字だけを表示してみます。

### サンプルプログラム

```python
# PySide2のモジュールを読み込む
from PySide2 import QtWidgets


# ウィンドウの見た目と各機能
class MainWindow(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()
        label = QtWidgets.QLabel(self) # ラベルオブジェクトの生成
        label.setText("こんにちは。")    # 文字列としてラベルを表示


# アプリの実行と終了
app = QtWidgets.QApplication()
window = MainWindow()
window.show()
app.exec_()
```

### 実行結果
![001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614920/2066ff31-be4d-44f3-2766-64217db83917.png)

### プログラム解説
ウィンドウにラベルを張り付けるにはラベルオブジェクトを取得する必要があります。ラベルオブジェクトとは「ラベル（文字や画像）を張り付ける場所」だと思ってください。ラベルオブジェクトは`QtWidgets.QLabel`クラスで取得できます。

```
書式:
    QtWidgets.QLabel(window_object)
引数:
    window_object: ラベルの張り付け対象となるウィンドウ
```

ラベルオブジェクトだけでは、単にラベルの場所を確保しただけになります。そこに文字列を表示するには`setText("string")`メソッドを使用します。

```
書式:
    QtWidgets.QLabel(window_object).setText("string")
引数:
    strings: 表示したい文字列
```

サンプルプログラムでは生成したラベルオブジェクト`label`に「こんにちは」という文字列を張り付けているだけになります。

```python
label = QtWidgets.QLabel(self) # ラベルオブジェクトの生成
label.setText("こんにちは。")    # 文字列としてラベルを表示
```

## フォント設定
文字サイズや文字色、背景色などのフォント設定します。

### サンプルプログラム
以下のプログラムでは「文字色」「文字サイズ」「背景色」「フォント（文字の輪郭）」を設定しています。

```python
# PySide2のモジュールを読み込む
from PySide2 import QtWidgets, QtGui


# ウィンドウの見た目と各機能
class MainWindow(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()
        self.setGeometry(300, 300, 650, 300)

        # Qt Style Sheets (CSS風) で見た目を設定
        label_style = """QLabel {
            color: #FF00AA;                 /* 文字色 */
            font-size: 128px;               /* 文字サイズ */
            background-color: yellow;       /* 背景色 */
            font-family: 851CHIKARA-YOWAKU; /* フォント（文字の輪郭） */
        }"""

        label = QtWidgets.QLabel(self)   # ラベルオブジェクトの生成
        label.setStyleSheet(label_style) # 指定したフォントを反映
        label.setText("腹ン中が\nパンパンだぜ")  # 適当な文字を表示


# アプリの実行と終了
app = QtWidgets.QApplication()
window = MainWindow()
window.show()
app.exec_()
```

### 実行結果
以下のフォントは「[851チカラヨワク](https://pm85122.onamae.jp/851ch-yw.html)」というものを使用してます。

![002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614920/15d0e428-9a81-4a3d-794e-e84877e47031.png)

### プログラム解説
フォントを反映するには以下の`setStyleSheet(qt_style_sheets)`メソッドを使用します。

```
書式:
    QtWidgets.QLabel(window_object).setStyleSheet(qt_style_sheets)
引数:
    qt_style_sheets: Qt Style Sheetsで設定したラベルの外見データ
```

`setStyleSheet(qt_style_sheets)`メソッドにQt Style Sheetsで設定した外見データを引数として渡します。このQt Style Sheetsはラベルに限らず、Qtウィジェット全般の外見を設定できます。基本的にCSSと同じように記述します。

サンプルプログラムでは以下の変数`label_style`で外見を設定して、`setStyleSheet(qt_style_sheets)`メソッドに引数として渡しています。

```python
# Qt Style Sheets (CSS風) で見た目を設定
label_style = """QLabel {           /* ラベル -> QLabelを設定 */
    color: #FF00AA;                 /* 文字色 */
    font-size: 128px;               /* 文字サイズ */
    background-color: yellow;       /* 背景色 */
    font-family: 851CHIKARA-YOWAKU; /* フォント（文字の輪郭） */
}"""
```

Qt Style Sheetsの冒頭`QLabel`はラベルを指定する際に記述します。ほかにボタンを指定したい場合は`QPushButton`、メニューなら`QMenu`などを指定します。ここら辺に関しては、Qt Style Sheetsの公式リファレンスがありますので、以下のURLを参照してください。

* [Qt Style Sheets Reference](https://doc.qt.io/qt-5/stylesheet-reference.html)
* [Qt Style Sheets Examples](https://doc.qt.io/qt-5/stylesheet-examples.html)

ちなみに`font-family`に設定するフォント名は`C:\Windows\Fonts`で確認できます。後は下図の手順でフォント名を取得し、`font-family`に設定します。

![003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614920/38318ca8-9d71-c92b-9c7d-945f4da78db4.png)

## 画像を表示
私の使用アイコンを表示させてみます。（私の手書きです）
![myicon.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614920/a0b3d4f8-6585-a3a1-ef46-9f2460f102a4.png)

### サンプルプログラム

```python
# PySide2のモジュールを読み込む
from PySide2 import QtWidgets, QtGui


# ウィンドウの見た目と各機能
class MainWindow(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()
        self.setGeometry(300, 300, 180, 160)

        # ラベルオブジェクトの生成
        label = QtWidgets.QLabel(self)
        # QPixmap型に変換してウィンドウに画像を表示
        label.setPixmap(QtGui.QPixmap(R"C:\Users\からくり\OneDrive\デスクトップ\myicon.PNG"))


# アプリの実行と終了
app = QtWidgets.QApplication()
window = MainWindow()
window.show()
app.exec_()
```

### 実行結果
![004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614920/8fc6e76a-b4d3-fec8-2a6a-6ffd61ab6d08.png)

### プログラム解説
ウィンドウ上に画像を表示するには以下の`setPixmap`メソッドを使用しています。

```
書式:
    QtWidgets.QLabel(window_object).setPixmap(image_path)
引数:
    image_path: QPixmap型の画像ファイルパス
```

`setPixmap(image_path)`メソッドを使用することでウィンドウに画像を表示させることができます。ですが引数の型はQPixmap型でなくてはいけません。

そこでstr型からQPixmap型へ変換するのに`QtGui.QPixmap(image_path)`を使用します。

```
importモジュール:
    PySide2.QtGui
書式:
    QtGui.QPixmap(image_path)
引数:
    image_path: str型の画像ファイルパス
```

`QtGui.QPixmap(image_path)`は`image_path`で指定した画像のファイルパスをQPixmap型に変換して返すメソッドです。

## GIFを表示
GIFをウィンドウに表示してみます。マイクラのワールド生成中のシーンを録画して、それをGIFファイルに変換したものを張り付けてみます。

> ラベルでmp4の再生を試みましたが分かりませんでした。
> PySide2.QMediaPlaylistモジュールを使用すればmp4を再生することは可能ですが、ラベルを使用しないため割愛。

![000.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614920/9f4fdc03-a909-bd51-7f70-551397a274ff.gif)

### サンプルプログラム
* <b><font color="red">注記</font></b> 再度記載しますが、以下のプログラムではmp4の再生はできません。

```python
# PySide2のモジュールを読み込む
from PySide2 import QtWidgets, QtGui


# ウィンドウの見た目と各機能
class MainWindow(QtWidgets.QWidget):
    def __init__(self):
        super().__init__()
        self.setGeometry(300, 300, 1000, 600)

        # QMovie型でGIFファイルを取得
        movie = QtGui.QMovie(R"C:\Users\からくり\OneDrive\デスクトップ\000.gif")
        # GIFファイルを再生
        movie.start()

        label = QtWidgets.QLabel(self) # ラベルオブジェクトの生成
        label.setMovie(movie)          # ウィンドウにGIFを表示


# アプリの実行と終了
app = QtWidgets.QApplication()
window = MainWindow()
window.show()
app.exec_()
```

### 実行結果
録画解像度を間違えてカクカクなGIFになったのは許して・・・

![001.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614920/0bc4f004-5ab0-877d-77a4-37b2d027f64d.gif)

### プログラム解説
GIFファイルは`setMovie(gif_movie)`メソッドでラベルとして表示しています。

```
書式:
    QtWidgets.QLabel(window_object).setMovie(gif_movie)
引数:
    gif_movie: QMovie型のGIFファイルのパス
               mp4は試したところ再生できない
```

`setMovie(movie)`メソッドの引数には再生させたいGIFファイルのパスを指定します。ですがQMovie型に変換しないとエラーになってしまいます。そこで以下のメソッドを使用してQMovie型に型変換します。

```
importモジュール:
    PySide2.QtGui
書式:
    QtGui.QMovie(movie_filepath)
引数:
    movie_filepath: 型変換対象のGIFファイルパス
```

`QMovie(movie_filepath)`クラスで型変換したGIFファイルをそのままでは再生することができません。QMovie型に変換した後、以下の`start()`メソッドでGIFファイルを再生させます。

```
書式:
    QtGui.QMovie(movie_filepath).start()
引数:
    なし
```

`start()`メソッドを実行しないとウィンドウ上には何も表示されないままになります。