C言語GUI入門｜本コンテンツで作成するもの

本コンテンツでは、C言語とGTK 4を使い、簡単なウィンドウの表示から始めて、GUI電卓や○×ゲームまで段階的に作成します。最後には、作成したGUIアプリを開発環境の外でも起動できるように、Windows向けの配布ファイルへまとめます。

最初から大きなプログラムを作るのではありません。ウィンドウ、ボタン、入力欄、レイアウト、イベント処理といったGUIの要素を1つずつ学び、それらを組み合わせて実用的なGUIアプリへ発展させます。

この記事では、これから作成するGUIアプリの画面、主な機能、学習できる内容を紹介します。第1章ではまだ具体的なソースコードを提示せず、最終的にどのようなものを作れるようになるのかをイメージしていきましょう。

本コンテンツで作成するもの

本コンテンツでは、次の順番でGUIアプリを作成します。

学習段階作成するもの主な学習内容
第1段階最初のGTKウィンドウGTK 4アプリの基本構造
第2段階ボタンを使ったGUIアプリシグナルとコールバック関数
第3段階入力欄を使ったGUIアプリ文字列の入力と取得
第4段階GUI電卓複数のウィジェットと四則演算
第5段階Windows向け配布ファイルexeファイル、DLL、関連ファイル
第6段階○×ゲーム二次元配列、勝敗判定、ゲーム状態
第7段階○×ゲームの配布ファイル完成したゲームの配布

前の段階で学んだ内容を、次の段階でも利用します。

たとえば、GUI電卓では、最初のGTKウィンドウで学んだウィンドウの作成方法、ボタンアプリで学んだクリック処理、入力欄アプリで学んだ文字列の取得方法を組み合わせます。

○×ゲームでは、さらに複数のボタン、GtkGrid、二次元配列、ゲーム状態の管理、勝敗判定などを追加します。

図1：最初のウィンドウからGUIゲームまでの学習順序

この図から分かること

本コンテンツでは、最初からGUI電卓や○×ゲームを作るのではありません。

最初にウィンドウを表示し、次にボタンや入力欄を追加します。基本的なウィジェットの使い方を確認してから、それらを組み合わせてGUI電卓を作成します。

GUIアプリが完成したらWindows向けの配布方法を学び、最後に複数のボタンやゲーム状態を扱う○×ゲームへ進みます。

最初のGTKウィンドウ

最初に作成するのは、Windowsのデスクトップ上に1つのウィンドウを表示するGTK 4アプリです。

画面にボタンや入力欄がなくても、ウィンドウが表示されれば、C言語のプログラムからGTK 4を正しく利用できていることを確認できます。

作成する画面

最初のGTKウィンドウには、次のような要素があります。

  • ウィンドウの外枠
  • タイトルバー
  • ウィンドウタイトル
  • 最小化ボタン
  • 最大化ボタン
  • 閉じるボタン
  • ウィジェットを配置するための内部領域

最初は装飾や複雑な部品を追加せず、ウィンドウが正しく表示されることを確認します。

学習する内容

最初のGTKウィンドウを作成することで、次の内容を学びます。

  • GTK 4のヘッダファイル
  • GtkApplicationの役割
  • アプリケーションID
  • アプリケーション起動時の処理
  • GtkApplicationWindow
  • ウィンドウタイトルの設定
  • ウィンドウの初期サイズ
  • ウィンドウの表示
  • ウィンドウを閉じたときの終了
  • GTK 4プログラムのコンパイル
  • GTK 4プログラムの実行

ここでは、画面の内容よりも、GTK 4アプリを作成、コンパイル、実行する一連の流れを理解することが大切です。

完成時の動作

完成したプログラムを実行すると、Windowsのデスクトップ上にGTK 4のウィンドウが表示されます。

ウィンドウは、次のように操作できます。

  • マウスで移動する
  • ウィンドウの大きさを変更する
  • 最小化する
  • 最大化する
  • 閉じるボタンで終了する

この小さなウィンドウが、これから作成するGUI電卓や○×ゲームの土台になります。

ボタンを使ったGUIアプリ

ウィンドウを表示できたら、その中へボタンを配置します。

ボタンは、ユーザーがクリックしてアプリケーションへ処理を依頼するための代表的なウィジェットです。

作成する画面

ボタンを使ったGUIアプリには、次のような部品を配置します。

  • アプリケーションのウィンドウ
  • 説明や結果を表示するラベル
  • ユーザーがクリックするボタン
  • ウィジェットを並べるレイアウト

最初は1つのボタンを配置し、クリックしたときに表示内容が変わるような分かりやすい動作を作ります。

学習する内容

ボタンを使ったGUIアプリでは、次の内容を学びます。

  • GtkButton
  • ボタンに表示する文字
  • ボタンをウィンドウへ配置する方法
  • GtkBoxによるレイアウト
  • clickedシグナル
  • コールバック関数
  • シグナルと関数の接続
  • ラベルに表示する文字の変更
  • イベント駆動型プログラミング

ユーザーがボタンをクリックすると、GTK 4がクリックを受け取り、登録されているコールバック関数を呼び出します。

完成時の動作

ボタンをクリックすると、アプリケーションが操作に反応します。

たとえば、次のような動作です。

  1. ウィンドウに案内文とボタンを表示する
  2. ユーザーがボタンをクリックする
  3. clickedシグナルが発生する
  4. コールバック関数が呼び出される
  5. ラベルの表示内容が変わる
  6. アプリケーションが次の操作を待つ

この小さなアプリによって、GUIアプリがユーザーの操作を待ち、操作に応じて動く仕組みを確認できます。

図2：ボタンを使ったGUIアプリの動作

この図から分かること

ボタンを使ったGUIアプリでは、ボタンを配置するだけでなく、クリックされたときに実行する処理を用意します。

クリックによってclickedシグナルが発生し、コールバック関数が呼び出されます。コールバック関数でラベルの内容を変更すると、ユーザーは処理結果を画面上で確認できます。

この流れは、GUI電卓の演算ボタンや、○×ゲームの各マスを処理するときにも利用します。

入力欄を使ったGUIアプリ

次に、ユーザーがキーボードから文字を入力できるGUIアプリを作成します。

GTK 4では、1行の文字列を入力するウィジェットとしてGtkEntryを利用できます。

作成する画面

入力欄を使ったGUIアプリには、次のような部品を配置します。

  • 入力内容を説明するラベル
  • 文字を入力する入力欄
  • 入力内容を処理するボタン
  • 処理結果を表示するラベル
  • ウィジェットを整列させるレイアウト

たとえば、名前を入力してボタンをクリックすると、入力された名前を使ったメッセージが表示される画面を考えられます。

学習する内容

入力欄を使ったGUIアプリでは、次の内容を学びます。

  • GtkEntry
  • 入力欄の作成
  • 初期値の設定
  • プレースホルダーの設定
  • 入力された文字列の取得
  • 入力欄の内容変更
  • Enterキーによる処理
  • フォーカス
  • 日本語文字列の扱い
  • 入力内容をラベルへ表示する方法

ボタンをクリックしたときに入力欄から文字列を取得し、その文字列を処理に利用します。

入力欄では文字列を受け取る

入力欄に数字を入力した場合でも、プログラムが最初に受け取るのは文字列です。

たとえば、画面上で123と入力しても、すぐに整数の123として扱えるわけではありません。計算へ使用する場合は、取得した文字列を数値へ変換する必要があります。

この考え方は、第6章のGUI電卓で重要になります。

入力内容を確認する

入力欄を使うGUIアプリでは、ユーザーが正しい内容を入力するとは限りません。

次のような入力も考える必要があります。

  • 入力欄が空になっている
  • 数値が必要な場所へ文字が入力されている
  • 前後に空白が入っている
  • 非常に長い文字列が入力されている
  • 日本語や記号が入力されている

入力内容を確認し、問題がある場合は分かりやすいメッセージを表示することも、GUIアプリの大切な処理です。

複数のウィジェットを組み合わせる

入力欄を使ったGUIアプリでは、1つのコールバック関数から複数のウィジェットを利用する場面が増えます。

たとえば、ボタンのコールバック関数から次のウィジェットを利用します。

  • 入力内容を取得するGtkEntry
  • 処理結果を表示するGtkLabel
  • 操作されたGtkButton
  • ウィジェットをまとめるレイアウト

ウィジェットが増えると、それぞれをどのように管理するかも考える必要があります。

本コンテンツでは、必要なウィジェットを構造体へまとめ、コールバック関数へ渡す方法も学習します。グローバル変数を増やしすぎず、関連するデータを整理するための大切な考え方です。

GUI電卓

ウィンドウ、ボタン、入力欄、ラベル、レイアウトの基本を学んだ後は、それらを組み合わせてGUI電卓を作成します。

GUI電卓では、2つの数値を入力し、足し算、引き算、掛け算、割り算を実行します。

作成する画面

GUI電卓には、次のウィジェットを配置します。

  • 1つ目の数値を入力する入力欄
  • 2つ目の数値を入力する入力欄
  • 足し算ボタン
  • 引き算ボタン
  • 掛け算ボタン
  • 割り算ボタン
  • 入力内容を消すクリアボタン
  • 計算結果を表示するラベル
  • エラーメッセージを表示する領域
  • ウィジェットを整列させるGtkGrid

複数の入力欄、ボタン、ラベルを格子状に配置し、電卓として操作しやすい画面を作ります。

GUI電卓の主な機能

GUI電卓には、次の機能を用意します。

  • 2つの数値を入力する
  • 2つの数値を足す
  • 1つ目の数値から2つ目の数値を引く
  • 2つの数値を掛ける
  • 1つ目の数値を2つ目の数値で割る
  • 計算結果を表示する
  • 入力内容と結果を消去する
  • 入力欄へフォーカスを戻す
  • 入力エラーを表示する

入力エラーに対応する

GUI電卓では、正しい数値だけが入力されるとは限りません。

次のような入力を確認します。

  • 1つ目の入力欄が空
  • 2つ目の入力欄が空
  • 数値以外の文字が含まれている
  • 数値の後ろに不要な文字がある
  • 0で割ろうとしている

問題がある場合は計算を行わず、画面上のラベルへエラーメッセージを表示します。

学習する内容

GUI電卓の作成では、次の内容を組み合わせます。

  • GtkEntryによる数値入力
  • GtkButtonによる演算の選択
  • GtkLabelによる結果表示
  • GtkGridによる画面配置
  • 入力文字列の取得
  • 文字列から数値への変換
  • 四則演算
  • 0による除算の確認
  • エラーメッセージの表示
  • 構造体によるウィジェット管理
  • GTK CSSによる画面装飾

GUI電卓は、これまで個別に学んだGUI部品を1つのアプリとしてまとめる最初の制作課題です。

図3：GUI電卓で組み合わせる機能

この図から分かること

GUI電卓は、1つの特別な機能だけで作られているわけではありません。

入力欄から文字列を受け取り、その文字列を数値へ変換し、選択された演算を行います。入力に問題がないか確認し、計算結果やエラーメッセージをラベルへ表示します。

ウィンドウ、ボタン、入力欄、ラベル、レイアウト、コールバック関数という基本要素を組み合わせることで、1つの実用的なGUIアプリになります。

GTK CSSでGUI電卓の画面を整える

GUI電卓の機能が完成したら、GTK CSSを使って画面を見やすくします。

調整する内容には、次のようなものがあります。

  • ウィンドウ内部の余白
  • ウィジェット間の間隔
  • 入力欄の大きさ
  • ボタンの文字サイズ
  • ボタン内部の余白
  • 計算結果の文字サイズ
  • エラーメッセージの色
  • 結果表示の強調

最初に計算機能を正しく作り、その後で画面の見た目を整えます。

機能と見た目を分けて作業することで、問題が起きたときに原因を確認しやすくなります。

Windows向け配布ファイル

開発環境でGUI電卓を起動できても、別のWindowsパソコンでそのまま起動できるとは限りません。

GTK 4を使ったGUIアプリは、実行時にGTK 4や関連ライブラリのDLLを利用します。そのため、exeファイルだけを別のパソコンへコピーしても、必要なDLLが見つからず起動できない場合があります。

配布用ディレクトリに含めるもの

GUI電卓の配布用ディレクトリには、次のようなファイルやディレクトリを配置します。

calculator
├─ calculator.exe
├─ 必要なDLL
├─ share
├─ etc
└─ README.txt

主な役割は次のとおりです。

内容主な役割
calculator.exeGUI電卓の実行ファイル
GTK関連DLLGTK 4や関連ライブラリの機能を提供する
shareテーマや各種データを配置する
etcGTK 4が利用する設定を配置する
CSSファイルGUI電卓の見た目を設定する
画像ファイルアイコンや画面内の画像に使用する
README.txt起動方法や注意事項を説明する

実際に必要になるファイルは、プログラムで使用する機能や配布方法によって変わります。

開発環境に依存していないか確認する

配布前には、次の内容を確認します。

  • MSYS2 UCRT64ターミナルを起動せずに実行できる
  • 開発用ディレクトリ以外へコピーしても起動できる
  • PATHの設定だけに依存していない
  • 必要なDLLが配布用ディレクトリにそろっている
  • CSSや画像を正しく読み込める
  • 日本語を正しく表示できる
  • 可能であれば別のWindowsパソコンで起動できる

配布用ディレクトリをZIP形式に圧縮することで、ほかの利用者へ渡しやすくなります。

○×ゲーム

最後の制作課題として、3×3のゲーム盤を使った○×ゲームを作成します。

プレイヤーは○、コンピューターは×を使用します。プレイヤーが空いているマスをクリックすると○が表示され、その後でコンピューターが空いているマスを選びます。

作成する画面

○×ゲームには、次のウィジェットを配置します。

  • ゲームの案内を表示するラベル
  • 3×3に配置された9個のボタン
  • 勝敗や引き分けを表示するラベル
  • ゲームを最初からやり直すリセットボタン
  • 全体を整列させるレイアウト

9個のマスはGtkButtonで作成し、GtkGridを使って3行3列に配置します。

○×ゲームの主な機能

○×ゲームには、次の機能を用意します。

  • プレイヤーが空いているマスをクリックする
  • クリックしたマスに○を表示する
  • 使用済みのマスを再び選べないようにする
  • コンピューターが空いているマスを調べる
  • コンピューターが選んだマスに×を表示する
  • 横方向に3つ並んだか確認する
  • 縦方向に3つ並んだか確認する
  • 斜め方向に3つ並んだか確認する
  • プレイヤーの勝利を表示する
  • コンピューターの勝利を表示する
  • 引き分けを表示する
  • ゲーム終了後の操作を無効にする
  • リセットして再試合する

二次元配列でゲーム盤を管理する

画面上には9個のボタンがありますが、プログラム内部では3行3列の二次元配列を使ってゲームの状態を管理します。

各要素には、次のいずれかの状態を記録します。

  • 空いているマス
  • プレイヤーの○
  • コンピューターの×

画面上のボタンと二次元配列の要素を対応させることで、どのマスが使用済みなのか、どこに○や×があるのかを調べられます。

勝敗を判定する

勝敗判定では、次の8通りを確認します。

  • 横方向の3列
  • 縦方向の3列
  • 左上から右下への斜め1列
  • 右上から左下への斜め1列

同じ記号が3つ並んでいれば、その記号のプレイヤーが勝者です。

勝者が決まらず、9個のマスがすべて埋まった場合は引き分けになります。

ゲーム全体の状態を管理する

○×ゲームでは、ボタンだけでなく、ゲーム全体の状態も管理します。

管理する内容には、次のようなものがあります。

  • 9個のボタン
  • 3×3のゲーム盤
  • 結果表示ラベル
  • ゲームが続いているか
  • 現在の手番
  • 勝者
  • 使用済みのマス数

関連するデータを構造体へまとめることで、複数のコールバック関数から同じゲーム状態を利用しやすくします。

○×ゲームにもGTK CSSを利用する

○×ゲームの機能が完成したら、GTK CSSで画面を整えます。

主に次の内容を調整します。

  • 9個のマスを大きくする
  • マスの大きさをそろえる
  • ○と×の文字を大きくする
  • 結果メッセージを見やすくする
  • リセットボタンを装飾する
  • ゲーム盤の余白を調整する

ゲームでは、画面上の状態を見ただけで理解できることが大切です。機能が正しく動くだけでなく、操作しやすく見やすい画面を目指します。

○×ゲームの配布ファイル

○×ゲームが完成したら、第7章で学んだ方法を利用してWindows向けの配布ファイルを作成します。

主な作業は次のとおりです。

  • 配布用にプログラムをビルドする
  • 実行ファイルを配布用ディレクトリへ配置する
  • 必要なDLLを配置する
  • CSSや画像を配置する
  • 開発環境の外で起動する
  • READMEを作成する
  • ZIP形式へ圧縮する

これにより、GUI電卓だけでなく、自分で作成したGUIゲームもWindows向けに配布する流れを体験できます。

図4：完成したGUIアプリをWindows向けに配布する流れ

この図から分かること

GUIアプリを配布するときは、exeファイルだけでなく、実行に必要なDLL、設定、CSS、画像などもまとめます。

配布用ディレクトリを開発環境の外で確認し、問題なく起動できたらZIP形式へ圧縮します。

本コンテンツでは、プログラムを書いて実行するだけでなく、完成したGUI電卓や○×ゲームをWindows向けの配布ファイルにまとめるところまで学習します。