C言語GUI入門|GTKとは

GTKは、ウィンドウ、ボタン、入力欄、メニューなどを使ったGUIアプリケーションを作成するためのライブラリです。C言語の標準機能にはGUIを作る機能がないため、C言語でGUIアプリを開発するときは、GTKのようなGUIライブラリを組み合わせます。

GTK 4には、画面を構成するさまざまなウィジェット、ウィジェットを整列させるレイアウト機能、ユーザーの操作を受け取るイベント処理、画面の見た目を整えるGTK CSSなどが用意されています。

この記事では、GTKの役割、GTK 4の特徴、C言語からGTK 4を利用する仕組みを解説します。さらに、Windowsだけでなく、LinuxやmacOSでも利用できることの利点についても見ていきます。

第1章では、具体的なプログラムをまだ作成しません。ここでは、C言語、GTK 4、オペレーティングシステムがどのように連携してGUIアプリを動かすのかをイメージできるようになりましょう。

GTKとは

GTKは、GUIアプリケーションを作成するためのオープンソースのGUIライブラリです。GUIツールキットやウィジェットツールキットと呼ばれることもあります。

GTKの公式ドキュメントでは、GTKはGUIを作成するためのライブラリであり、Windows、macOS、多くのUNIX系環境で動作するCベースの仕組みとして説明されています。

GTKには、GUI画面でよく使われる次のような部品が用意されています。

  • ウィンドウ
  • ラベル
  • ボタン
  • 入力欄
  • メニュー
  • リスト
  • チェックボックス
  • スクロール領域
  • 画像表示領域
  • ダイアログ
  • レイアウト用の部品

これらの部品を組み合わせることで、電卓、入力フォーム、テキストエディター、設定画面、簡単なゲームなどを作成できます。

GTKはプログラミング言語ではない

GTKは、C言語とは別のプログラミング言語ではありません。また、GCCのようなコンパイラでも、Visual Studio Codeのようなテキストエディターでもありません。

GTKの位置づけを整理すると、次のようになります。

要素主な役割
C言語計算やデータ処理など、アプリの動作を記述する
GTK 4ウィンドウやボタンなどのGUI機能を提供する
GCCC言語のソースファイルをコンパイルする
MSYS2WindowsにGCCやGTK 4などの開発環境を導入する
Visual Studio Codeソースファイルを作成、編集する
Windows完成したGUIアプリを実行し、画面へ表示する

GTKは、C言語のプログラムへGUI機能を追加するためのライブラリです。

GTKはGNOME以外でも利用できる

GTKは、Linuxのデスクトップ環境であるGNOMEの中核技術として利用されています。しかし、GTKで作成できるのはGNOME向けのアプリだけではありません。

GTKは、次のような環境で利用できます。

  • Windows
  • Linux
  • macOS
  • そのほかのUNIX系環境

GTK公式サイトでも、GTKはC言語で記述されたクロスプラットフォームのウィジェットツールキットとして紹介されています。

図1:C言語とGTK 4の関係

この図から分かること

C言語は、計算、条件分岐、データ処理など、アプリケーションの中心となる処理を担当します。GTK 4は、ウィンドウ、ボタン、入力欄などを作成するGUI機能を担当します。

C言語のプログラムがGTK 4の機能を利用し、GTK 4が実行環境と連携することで、GUI画面が表示されます。

GTK 4を利用しても、これまでに学習したC言語の知識が置き換えられるわけではありません。C言語の知識へGUIプログラミングの知識を追加していくと考えると分かりやすいでしょう。

GTK 4とは

GTKには、GTK 3やGTK 4などの世代があります。本コンテンツで使用するのはGTK 4です。

GTK 4はGTKの新しい主要系列で、描画、入力処理、レイアウト、ウィジェットなどの仕組みが整理されています。

GTK 3とGTK 4は、名前が似ていても同じものではありません。GTK公式ドキュメントでは、GTK 4はGTK 3に対してAPIとABIの互換性がない新しいメジャーバージョンと説明されています。

そのため、インターネットや書籍でGTKの情報を調べるときは、説明の対象がGTK 3なのかGTK 4なのかを必ず確認しましょう。

確認する表示対象
GTK 3、gtk+-3.0GTK 3向け
GTK 4、gtk4GTK 4向け
GTKとだけ書かれている使用しているバージョンを確認する
GTK 3からGTK 4への移行古いプログラムを書き換えるための情報

GTK 3向けの関数や書き方を、そのままGTK 4のプログラムで使えるとは限りません。本コンテンツではGTK 4向けの方法に統一します。

GTK 4はウィジェットを組み合わせて画面を作る

GTK 4では、GUI画面を構成する部品をウィジェットと呼びます。

代表的なウィジェットには、次のようなものがあります。

ウィジェット主な役割
GtkWindowウィンドウを作成する
GtkLabel文字を表示する
GtkButtonクリックできるボタンを作成する
GtkEntry1行の文字入力欄を作成する
GtkBox子ウィジェットを縦または横に配置する
GtkGrid子ウィジェットを行と列に配置する
GtkImage画像を表示する
GtkCheckButton選択状態を切り替える部品を作成する

GTK公式の入門資料でも、GTKのユーザーインターフェースはウィジェットによって構成され、ウィンドウの中にボタン、入力欄などを追加して作ると説明されています。GTK 4公式ドキュメント:Getting Started

親ウィジェットと子ウィジェット

GTK 4の画面では、ウィジェット同士に親子関係があります。

たとえば、GUI電卓では次のような関係になります。

ウィンドウ
└─ レイアウト
   ├─ 1つ目の入力欄
   ├─ 2つ目の入力欄
   ├─ 足し算ボタン
   ├─ 引き算ボタン
   ├─ 掛け算ボタン
   ├─ 割り算ボタン
   └─ 結果表示ラベル

ウィンドウは画面全体を収める親ウィジェットです。入力欄、ボタン、ラベルなどは、その中に配置される子ウィジェットです。

このような親子関係のまとまりをウィジェットの階層と呼びます。

レイアウトを使って画面を整える

GUI画面では、部品の位置を1つずつ固定するよりも、レイアウト機能を使って並べる方法が一般的です。

GTK 4には、次のようなレイアウト方法があります。

  • 縦方向に並べる
  • 横方向に並べる
  • 行と列に分けて配置する
  • 複数の領域を重ねる
  • ウィンドウの大きさに合わせて伸縮させる
  • ウィジェット間に余白を設定する

レイアウトを使うと、ウィンドウの大きさが変わったときにも、部品の位置や大きさを調整しやすくなります。

図2:GTK 4のウィジェット階層

この図から分かること

GTK 4の画面は、役割の異なるウィジェットを組み合わせて作ります。

ウィンドウの中にレイアウトを配置し、そのレイアウトの中へ入力欄、ボタン、ラベルなどを追加します。ウィジェット同士の親子関係を整理することで、複雑な画面も段階的に組み立てられます。

第5章では、GtkBoxやGtkGridを使い、ウィジェットを縦横や格子状に並べる方法を詳しく学習します。

GTK 4はイベント駆動型で動作する

GTK 4で作成するGUIアプリは、イベント駆動型で動作します。

GTK公式ドキュメントでは、GTKはボタンのクリックなどのイベントを待ち、発生したイベントをアプリケーションへ渡すと説明されています。GTK 4公式ドキュメント:Getting Started

代表的なイベントには、次のようなものがあります。

  • ボタンがクリックされた
  • キーが押された
  • 入力欄の内容が変更された
  • メニュー項目が選択された
  • ウィンドウの大きさが変わった
  • ウィンドウが閉じられようとしている

GTK 4は、このような操作が発生するまで待機します。操作が発生すると、対応するウィジェットへ情報を渡し、あらかじめ登録された処理を呼び出します。

シグナルとは

GTKでは、ウィジェットで特定の出来事が発生したことを通知する仕組みをシグナルと呼びます。

たとえば、ボタンにはクリックされたことを表すシグナルがあります。入力欄には、入力内容が変更されたことやEnterキーによる確定を表すシグナルがあります。

シグナルは、電気信号そのものではありません。GTKの中で、特定の出来事が起きたことをプログラムへ伝えるための仕組みです。

コールバック関数とは

コールバック関数は、特定のシグナルが発生したときにGTKから呼び出される関数です。

GUI電卓の計算ボタンを例にすると、次のような流れになります。

  1. ユーザーが計算ボタンをクリックする
  2. GTK 4がクリックを受け取る
  3. ボタンからクリックのシグナルが発生する
  4. 登録されているコールバック関数が呼び出される
  5. C言語で記述した計算処理が実行される
  6. 計算結果がラベルへ表示される
  7. GTK 4が次の操作を待つ

GUIプログラミングでは、ユーザーが何をしたときに、どの関数を実行するのかを結び付けていきます。

メインループとは

GTK 4は、GUIアプリが起動している間、メインループと呼ばれる仕組みを使って操作を待ち続けます。

GTK公式ドキュメントでは、操作がない間はメインループで入力を待ち、マウスクリックなどが発生すると、そのイベントを対応するウィジェットへ渡すと説明されています。

メインループの動きは、次のように考えられます。

ユーザーの操作を待つ
        ↓
イベントを受け取る
        ↓
対応するウィジェットを調べる
        ↓
コールバック関数を呼び出す
        ↓
必要に応じて画面を更新する
        ↓
次の操作を待つ

この流れは、ユーザーがウィンドウを閉じてアプリケーションを終了するまで繰り返されます。

C言語からGTK 4を利用する仕組み

GTKはC言語で作成されているため、C言語のプログラムからGTKが提供するデータ型や関数を利用できます。GTK公式サイトでは、GTKはC言語で記述され、ほかの言語からも利用できるように設計されていると説明されています。GTK公式サイト:Language Bindings

C言語からGTK 4を利用するときは、次のような流れでGUIアプリを組み立てます。

  1. GTK 4を利用する準備をする
  2. アプリケーションを表すオブジェクトを作る
  3. アプリケーションが起動されたときの処理を登録する
  4. ウィンドウを作る
  5. ボタンや入力欄などのウィジェットを作る
  6. ウィジェットをウィンドウへ配置する
  7. シグナルとコールバック関数を接続する
  8. ウィンドウを表示する
  9. メインループでユーザーの操作を待つ
  10. ウィンドウが閉じられたら終了する

GtkApplicationの役割

GTK 4では、GUIアプリ全体を管理するためにGtkApplicationを利用します。

GtkApplicationは、次のような役割をまとめて扱うための高水準な仕組みです。

  • アプリケーションの開始
  • アプリケーションIDの管理
  • ウィンドウの管理
  • アプリ全体で使う操作の管理
  • 起動要求の処理
  • アプリケーションの終了

GTK公式ドキュメントでも、GtkApplicationはGTKアプリを作成するための高水準APIとして説明されています。

具体的なGtkApplicationの作成方法は、第4章で最初のGTK 4プログラムを作るときに学習します。

GTK 4のデータ型や関数を利用する

C言語のプログラムでは、GTK 4が公開しているデータ型や関数を使ってGUIを操作します。

たとえば、次のような種類の機能があります。

  • アプリケーションを作成する機能
  • ウィンドウを作成する機能
  • ボタンを作成する機能
  • ウィンドウの大きさを設定する機能
  • ウィジェットを親へ追加する機能
  • シグナルと関数を接続する機能
  • ウィンドウを表示する機能

これらの具体的な関数名や使い方は、第4章以降でプログラムを作りながら確認します。最初からすべて暗記する必要はありません。

図3:クリックからコールバック関数が呼ばれるまで

この図から分かること

GTK 4は、ユーザーの操作を受け取り、その操作に対応するシグナルを発生させます。プログラムでシグナルにコールバック関数を接続しておくと、GTK 4が必要なタイミングでその関数を呼び出します。

コールバック関数では、計算、入力内容の確認、画面表示の変更などをC言語で記述します。

処理が終わると、GTK 4は再び次の操作を待ちます。この待機と処理の繰り返しが、GTK 4で作成するGUIアプリの基本的な動きです。

GTK 4を支える関連ライブラリ

GTK 4は、すべての機能を1つだけで実現しているわけではありません。目的の異なる複数の関連ライブラリと連携しています。

GTK公式ドキュメントでは、GTKを支える技術としてGLib、GObject、GIO、GDK、Pangoなどが紹介されています。GTK公式ドキュメント

ライブラリ主な役割
GLibデータ型、文字列、メインループなどの基本機能を提供する
GObjectC言語でオブジェクトやシグナルを扱う仕組みを提供する
GIOファイル、入出力、ネットワーク、アプリケーション管理などを扱う
GDKGTKと各環境のウィンドウシステムの違いを仲介する
Pango文字の配置や描画を扱う
GdkPixbuf画像データの読み込みや操作を扱う
Cairo2次元の図形や画像の描画を扱う

GLib

GLibは、GTKだけに限定されない汎用的なライブラリです。

次のような機能を提供します。

  • 基本的なデータ型
  • 文字列操作
  • リストやハッシュテーブル
  • ファイル操作
  • メインループ
  • 環境に依存しやすい機能の共通化

GTKのイベント待機を支えるメインループも、GLibの仕組みと関係しています。

GObject

GObjectは、C言語でオブジェクト指向に近い仕組みを利用するためのライブラリです。

GTKのウィジェットには、種類、親子関係、プロパティ、シグナルなどがあります。これらの基本的な仕組みをGObjectが支えています。

C言語にはC++のクラスと同じ構文はありませんが、GTKではGObjectを使い、ウィジェットをオブジェクトとして管理します。

GDK

GDKは、GTKとオペレーティングシステム側の画面環境との間に入る層です。

マウス、キーボード、クリップボード、ディスプレイなど、画面環境に関係する処理を扱います。GDKが環境ごとの違いを仲介するため、GTKは共通した方法で複数の環境に対応できます。

Pango

Pangoは、文字の配置と描画を担当します。

GTKのラベルや入力欄などで文字を表示するときに利用されます。さまざまな言語や文字体系に対応し、行の折り返し、文字の整列、表示幅の調整などを行います。

公式資料では、PangoはGTKで使用される文字とフォントの中核ライブラリとして説明されています。

これらを最初から個別に操作したり、すべて暗記したりする必要はありません。まずはGTK 4が複数の技術によって支えられていることを知っておけば十分です。

GTK 4の主な特徴

GTK 4には、GUIアプリを作成するためのさまざまな特徴があります。

C言語から直接利用できる

GTKはC言語で作成されているため、C言語のプログラムから直接利用できます。

C++を新しく学ばなくても、これまでに身につけたC言語の変数、関数、構造体、ポインタなどの知識を使いながらGUI開発へ進めます。

豊富なウィジェットが用意されている

一般的なGUI画面に必要なウィジェットがあらかじめ用意されています。

ボタンの枠や入力欄の文字入力処理を一から作成する必要はありません。GTK 4のウィジェットを作り、画面へ組み合わせていきます。

イベント駆動型プログラミングを学べる

GTK 4では、シグナルとコールバック関数を使ってユーザー操作へ対応します。

この考え方はGTKだけのものではありません。ほかのGUIライブラリ、Webアプリ、スマートフォンアプリなどでも利用されます。

レイアウト機能を利用できる

GtkBoxやGtkGridなどを使い、ウィジェットを縦横や格子状に配置できます。

ウィンドウの大きさが変わったときも、レイアウトに従って部品を調整できます。

GTK CSSで見た目を調整できる

GTK 4では、GTK CSSを使ってウィジェットの見た目を調整できます。

たとえば、次のような内容を設定できます。

  • 文字の大きさ
  • 文字の色
  • 背景色
  • 余白
  • 枠線
  • 角の丸み

GTK CSSはWebページで使うCSSと似ていますが、すべてが同じではありません。GTKのウィジェットに適用できるプロパティを使用します。GTK 4が対応するCSSプロパティは公式資料で確認できます。

アクセシビリティに対応している

GTK 4の標準ウィジェットには、支援技術へ画面情報を伝えるための仕組みがあります。

公式資料では、GtkButton、GtkEntry、GtkListViewなどの標準ウィジェットは、基本的なアクセシビリティ情報を提供すると説明されています。

ただし、分かりやすいラベルの設定や、キーボードで操作できる画面設計などは、アプリケーションを作る側でも考える必要があります。

WindowsでGTK 4を利用する仕組み

Windows上でGTK 4を利用するには、GTK 4本体と関連ライブラリを開発環境へインストールします。

本コンテンツでは、MSYS2 UCRT64環境を利用します。

それぞれの役割は次のとおりです。

要素GTK 4開発での役割
MSYS2GTK 4やGCCなどのパッケージを管理する
UCRT64Windows向けプログラムを作る開発環境を提供する
GCCC言語のソースファイルをコンパイルする
GTK 4GUIのデータ型、関数、ウィジェットを提供する
pkg-configGTK 4のコンパイルに必要な情報を調べる
Visual Studio Codeソースファイルを編集する
Windows完成したGUIアプリを実行する

GTK 4を使ったプログラムをコンパイルするときは、C言語のソースファイルだけでなく、GTK 4のヘッダファイルとライブラリの情報もGCCへ伝えます。

開発環境のインストール方法と確認方法は、第2章で詳しく解説します。具体的なGTK 4プログラムのコンパイル方法は、第4章で扱います。

Windows以外でも利用できる利点

GTK 4は、Windowsだけを対象としたGUIライブラリではありません。LinuxやmacOSなどでも利用できます。

複数の環境に対応したライブラリを、クロスプラットフォームライブラリと呼びます。

共通した考え方で画面を作れる

GTK 4では、Windows、Linux、macOSのそれぞれで、ウィンドウやボタンを作るための基本的な考え方を共通化できます。

プログラマーは、各環境のGUI機能を最初から個別に学ぶのではなく、GTK 4のウィジェットやシグナルを使ってプログラムを作成します。

ソースコードを共有しやすい

GTK 4の機能だけで作成した部分は、複数の環境でソースコードを共有しやすくなります。

たとえば、次のような部分を共通化できます。

  • ウィンドウの構成
  • ボタンや入力欄の作成
  • ウィジェットの配置
  • シグナルの接続
  • 計算や文字列処理
  • 入力内容の確認
  • 画面表示の更新

環境固有の機能を直接利用した部分は、環境ごとに書き分けが必要になる場合があります。

学習した知識を別の環境でも活用できる

GTK 4で学習した次の知識は、Windows以外の環境でも活用できます。

  • ウィジェット
  • 親子関係
  • レイアウト
  • シグナル
  • コールバック関数
  • メインループ
  • GTK CSS

将来LinuxでGTKアプリを作る場合も、基本的な考え方をそのまま利用できます。

同じ実行ファイルがすべての環境で動くわけではない

クロスプラットフォーム対応は、Windows用の実行ファイルをそのままLinuxやmacOSへコピーすれば動くという意味ではありません。

通常は、対象となる環境ごとに次の作業が必要です。

  • GTK 4の開発環境を用意する
  • その環境向けにコンパイルする
  • 必要な関連ライブラリを用意する
  • 画面表示を確認する
  • マウスやキーボード操作を確認する
  • ファイルパスなどの違いを確認する
  • 配布方法を調整する

同じソースコードを利用しやすいことと、1つの実行ファイルがすべての環境で動くことは別です。

画面の外観が完全に同じになるとは限らない

Windows、Linux、macOSでは、フォント、ウィンドウ装飾、テーマ、画面の拡大率などが異なります。

そのため、同じGTK 4プログラムでも、画面の見た目や部品の大きさに違いが生じることがあります。

複数の環境へ配布する場合は、それぞれの環境で実際に動作を確認することが大切です。

図4:GTK 4によるクロスプラットフォーム開発

この図から分かること

GTK 4を利用すると、Windows、Linux、macOSで共通しやすい方法を使ってGUI画面を作成できます。ウィジェット、レイアウト、シグナルなどの基本的な考え方を複数の環境で活用できることが大きな利点です。

ただし、対象となる環境ごとにプログラムをビルドし、表示や操作を確認する必要があります。実行ファイルや配布に必要なライブラリも環境ごとに異なります。

本コンテンツではWindows上で学習しますが、GTK 4の基本を理解すれば、将来ほかの環境でGUIアプリを作成するときにも知識を活用できます。