C言語GUI入門｜GUIアプリケーションとは

C言語GUI入門｜GUIアプリケーションとは

パソコンやスマートフォンでは、ウィンドウを開いたり、ボタンをクリックしたり、入力欄に文字を入力したりしながらアプリケーションを操作します。このように、画面上の部品をマウスやキーボードで操作できる仕組みがGUIです。

この記事では、GUIという言葉の意味を確認したうえで、ウィンドウ、ボタン、入力欄、メニューなど、GUIアプリケーションを構成する代表的な部品を紹介します。さらに、Webブラウザやテキストエディターなどの身近な例を通して、ユーザーの操作とアプリケーションの動きがどのようにつながっているのかを見ていきます。

この段階では、具体的なC言語のプログラムはまだ作成しません。まずはGUIアプリケーションの画面と操作の仕組みをイメージできるようになることを目指しましょう。

GUIアプリケーションとは

GUIアプリケーションとは、画面に表示されたウィンドウ、ボタン、入力欄、メニューなどを操作して利用するアプリケーションです。

GUIは、Graphical User Interfaceの略です。日本語では、グラフィカルユーザーインターフェースと呼ばれます。

Graphicalには、図形や画像を使って視覚的に表現するという意味があります。User Interfaceは、ユーザーとコンピューターが情報をやり取りするための接点を表す言葉です。

つまり、GUIはユーザーが画面を見ながら、視覚的にコンピューターを操作するための仕組みです。

たとえば、ファイルを開く場合、GUIアプリケーションでは次のように操作できます。

• フォルダーのアイコンをダブルクリックする
• ファイルの一覧から目的のファイルを選ぶ
• 開くボタンをクリックする
• メニューからファイルを開く機能を選ぶ

画面に表示された情報を見ながら操作できるため、ユーザーは複雑な命令をすべて覚えなくても、アプリケーションを利用できます。

図1：GUIを使ってアプリケーションを操作するイメージ

この図から分かること

GUIアプリケーションでは、画面に表示された部品を見ながら操作します。ユーザーはマウスやキーボードを使って、ボタンを押したり、文字を入力したり、メニューから機能を選んだりできます。

GUIは単に画面をきれいに見せるためのものではありません。ユーザーがアプリケーションに指示を伝え、アプリケーションから結果を受け取るための大切な接点です。

GUIとGUIアプリケーションの違い

GUIとGUIアプリケーションは、よく似た言葉ですが、表している範囲が少し異なります。

GUIは、画面を使って操作するための仕組みや操作方法を指します。GUIアプリケーションは、その仕組みを利用して作られたアプリケーションです。

たとえば、電卓アプリケーションには数字のボタンや演算ボタンがあります。これらの画面上の部品がGUIであり、それらを使って計算できるソフトウェア全体がGUIアプリケーションです。

GUIアプリケーションの画面を構成する部品

GUIアプリケーションの画面は、役割の異なるさまざまな部品を組み合わせて作られています。このような画面上の部品は、一般にGUI部品やウィジェットと呼ばれます。

本コンテンツで使用するGTK 4でも、画面上の部品をウィジェットと呼びます。ウィジェットについては第5章で詳しく学習するため、ここでは代表的な部品の役割を確認しておきましょう。

ウィンドウ

ウィンドウは、GUIアプリケーションの画面全体を収める外側の領域です。

一般的なウィンドウには、次のような要素があります。

• アプリケーションの名前を表示するタイトル
• ウィンドウを閉じるボタン
• ウィンドウを最小化するボタン
• ウィンドウを最大化するボタン
• ボタンや入力欄などを配置する内部の領域

GUIアプリケーションを起動すると、最初にウィンドウが表示されることが多くあります。そのウィンドウの中に、アプリケーションを操作するための部品を配置していきます。

C言語でGUIアプリケーションを作成するときも、最初にウィンドウを用意し、その中へ必要な部品を追加していくのが基本です。

ボタン

ボタンは、クリックすることでアプリケーションに処理を依頼する部品です。

たとえば、次のようなボタンがあります。

• OKボタン
• キャンセルボタン
• 保存ボタン
• 検索ボタン
• 計算ボタン
• リセットボタン

ボタンには、何を実行するのかが分かる文字や記号を表示します。ユーザーがボタンをクリックすると、アプリケーションはその操作を受け取り、ボタンに割り当てられた処理を実行します。

第6章で作成するGUI電卓では、足し算、引き算、掛け算、割り算を行うためのボタンを使用します。第8章の○×ゲームでは、ゲーム盤の各マスをボタンとして作成します。

入力欄

入力欄は、ユーザーが文字や数値を入力するための部品です。テキストボックスと呼ばれることもあります。

入力欄は、次のような場面で使われます。

• 名前を入力する
• 検索する言葉を入力する
• メールアドレスを入力する
• ファイル名を入力する
• 計算に使用する数値を入力する

入力欄には、何を入力する場所なのかを示す案内文が表示されていることがあります。この案内文はプレースホルダーと呼ばれ、ユーザーが文字を入力すると見えなくなります。

GUI電卓では、計算に使用する2つの数値を入力欄から受け取ります。ただし、画面に数字を入力しても、C言語のプログラムが最初に受け取るのは文字列です。文字列を数値へ変換する方法は、第6章で詳しく学習します。

メニュー

メニューは、アプリケーションが持つ機能を項目としてまとめた部品です。ユーザーは目的の項目を選び、必要な機能を実行できます。

たとえば、テキストエディターには次のようなメニューがあります。

• 新規作成
• 開く
• 保存
• 名前を付けて保存
• 印刷
• 終了

メニューには、たくさんの機能を整理できるという利点があります。すべての機能を画面上のボタンとして並べると、画面が狭くなり、目的の機能も探しにくくなります。メニューを使えば、関連する機能をグループごとにまとめられます。

そのほかの代表的な部品

GUIアプリケーションでは、ウィンドウ、ボタン、入力欄、メニュー以外にも、さまざまな部品が使われています。

これらの部品を目的に合わせて組み合わせることで、ユーザーが操作しやすい画面を作れます。

図2：GUI画面を構成する代表的な部品

この図から分かること

GUIアプリケーションの画面は、1つの大きな画像として作られているわけではありません。ウィンドウの中に、ボタン、入力欄、メニューなど、役割の異なる部品が配置されています。

それぞれの部品には役割があります。入力欄は情報を受け取り、ボタンは処理の開始を指示し、メニューは多くの機能を整理します。GUIアプリケーションは、このような部品を組み合わせて作られています。

身近にあるGUIアプリケーション

普段使用しているアプリケーションの多くはGUIアプリケーションです。GUIは特別な場面だけで使われているものではなく、パソコンやスマートフォンを操作するときに毎日のように利用しています。

Webブラウザ

Webブラウザは、Webサイトを閲覧するためのGUIアプリケーションです。

Webブラウザの画面には、次のような部品があります。

• Webページを表示するウィンドウ
• URLや検索語句を入力する入力欄
• 前のページへ戻るボタン
• ページを再読み込みするボタン
• 設定や履歴を開くメニュー
• 複数のページを切り替えるタブ

ユーザーがリンクをクリックすると別のページへ移動し、入力欄に検索語句を入力すると検索結果が表示されます。

テキストエディター

テキストエディターは、文章やプログラムのソースファイルを作成、編集するGUIアプリケーションです。本コンテンツで使用するVisual Studio Codeもテキストエディターの一種です。

テキストエディターでは、次のような操作を行います。

• ファイルを開く
• キーボードから文字を入力する
• 入力した文字を削除する
• 文章の一部を選択する
• ファイルを保存する
• 複数のファイルを切り替える

Visual Studio Codeでは、C言語のソースファイルを編集する領域、ファイルの一覧、メニュー、タブなどが1つのウィンドウ内に配置されています。

ファイル管理アプリケーション

Windowsのエクスプローラーは、ファイルやフォルダーを管理するGUIアプリケーションです。

ファイルやフォルダーは、名前やアイコンを使って一覧表示されます。ユーザーは目的のファイルを選び、開く、コピーする、移動する、名前を変更する、削除するといった操作を行えます。

電卓アプリケーション

電卓は、数字や演算記号のボタンをクリックして計算するGUIアプリケーションです。

電卓には、主に次の部品があります。

• 入力した数値を表示する領域
• 0から9までの数字ボタン
• 足し算や引き算などの演算ボタン
• 計算を実行するボタン
• 入力を消去するボタン

第6章では、このような電卓の仕組みを参考にしながら、2つの数値を入力して四則演算を行うGUI電卓を作成します。

設定アプリケーション

Windowsの設定画面もGUIアプリケーションです。

設定項目には、ボタンだけでなく、チェックボックス、スイッチ、リスト、スライダーなどが使われています。音量をスライダーで調整したり、機能をスイッチで有効にしたりできるため、現在の設定状態を画面で確認しながら変更できます。

図3：身近なGUIアプリケーション

この図から分かること

GUIアプリケーションは、Webブラウザ、テキストエディター、ファイル管理、電卓など、さまざまな目的で利用されています。

アプリケーションごとに機能は異なりますが、画面上の部品を見て、クリック、文字入力、項目の選択などの操作を行う点は共通しています。一度GUIの基本的な操作に慣れると、初めて使うアプリケーションでも画面を見ながら操作方法を予想しやすくなります。

マウスによる操作

マウスは、GUIアプリケーションを操作する代表的な入力装置です。画面上に表示されるマウスポインターを動かし、目的の部品を選択します。

クリック

クリックは、マウスのボタンを1回押して離す操作です。

主に次のような目的で使います。

• ボタンを押す
• 入力欄を選択する
• メニューを開く
• ファイルを選択する
• チェックボックスの状態を変更する

ボタンをクリックした場合、アプリケーションはボタンに割り当てられた処理を実行します。

ダブルクリック

ダブルクリックは、マウスのボタンを素早く2回押す操作です。

Windowsのエクスプローラーでは、ファイルやフォルダーをダブルクリックすると、そのファイルやフォルダーを開けます。

GUIアプリケーションによっては、1回のクリックと2回のクリックに異なる操作が割り当てられています。

右クリック

右クリックは、マウスの右ボタンを1回押す操作です。選択している項目に関係するメニューを表示するときによく使われます。

たとえば、ファイルを右クリックすると、コピー、削除、名前の変更など、そのファイルに対して実行できる機能が表示されます。

ドラッグ

ドラッグは、マウスのボタンを押したままマウスを動かす操作です。

次のような場面で使用します。

• ウィンドウを移動する
• ファイルを別のフォルダーへ移動する
• 文章の範囲を選択する
• スライダーの値を変更する
• 図形の大きさを変更する

ドラッグした後にマウスのボタンを離す操作は、ドロップと呼ばれます。ファイルをつかむように移動し、目的の場所で離す操作はドラッグアンドドロップと呼ばれます。

スクロール

スクロールは、画面に収まらない内容を上下または左右へ移動して表示する操作です。

Webページや長い文書では、マウスホイールを回して表示位置を移動します。スクロールバーをドラッグして移動することもできます。

キーボードによる操作

GUIアプリケーションはマウスだけでなく、キーボードからも操作できます。文字や数値の入力だけでなく、画面上の部品を選択したり、機能を実行したりすることもできます。

文字や数値を入力する

入力欄をクリックして選択すると、キーボードから文字や数値を入力できます。

入力中の位置には、縦線などのカーソルが表示されます。ユーザーがキーボードのキーを押すと、選択されている入力欄へ文字が追加されます。

Enterキーで処理を実行する

入力欄へ文字を入力した後、Enterキーを押すことで処理を実行できるアプリケーションがあります。

たとえば、Webブラウザの検索欄へ言葉を入力してEnterキーを押すと、検索が開始されます。GUI電卓でも、入力後にEnterキーを押して計算を実行する仕組みを作ることができます。

Tabキーで部品を移動する

Tabキーを押すと、操作対象となるボタンや入力欄を順番に切り替えられます。

現在キーボードで操作できる部品は、枠線や色の変化によって示されます。この状態は、その部品にフォーカスがあると表現します。

たとえば、名前の入力欄にフォーカスがある状態でTabキーを押すと、次の入力欄やボタンへフォーカスが移動します。

Spaceキーでボタンなどを操作する

フォーカスがボタンやチェックボックスにある場合、Spaceキーを押して操作できることがあります。

マウスを使わなくても、Tabキーで目的の部品へ移動し、Spaceキーで選択できます。

ショートカットキーを使用する

GUIアプリケーションには、よく使う機能をすばやく実行するためのショートカットキーが用意されていることがあります。

実際の役割はアプリケーションによって異なる場合がありますが、同じようなキー操作が多くのGUIアプリケーションで使用されています。

ユーザーの操作とアプリケーションの反応

GUIアプリケーションでは、ユーザーの操作に応じて処理が始まります。

たとえば、GUI電卓で計算ボタンをクリックする場面を考えてみましょう。

1. ユーザーが入力欄に数値を入力する
2. ユーザーが計算ボタンをクリックする
3. アプリケーションがクリックされたことを受け取る
4. アプリケーションが入力された数値を使って計算する
5. 計算結果を画面に表示する

ユーザーが何も操作していない間、GUIアプリケーションはすぐに終了するのではなく、次の操作を待ち続けます。

ユーザーがボタンをクリックした、キーボードのキーを押した、ウィンドウを閉じようとしたといった出来事を、GUIプログラミングではイベントと呼びます。

GUIアプリケーションは、発生したイベントに対応する処理を実行します。

C言語でGUIアプリケーションを作成するときは、ボタンがクリックされたら何を行うのか、文字が入力されたらどう処理するのかをプログラムで用意します。

このようにユーザーの操作をきっかけとして処理を進める考え方を、イベント駆動型プログラミングといいます。詳しい仕組みは、第1章の「イベント駆動型プログラミングとは」で解説します。

図4：マウスやキーボードの操作に反応する流れ

この図から分かること

GUIアプリケーションは、ユーザーの操作を受け取ると、その操作に対応する処理を実行して結果を画面へ反映します。

ボタンをクリックすればボタンに対応した処理が始まり、キーボードから文字を入力すれば入力欄の表示が変化します。ウィンドウを閉じる操作も、アプリケーションが受け取る操作の1つです。

これからC言語とGTK 4を使ってGUIアプリケーションを作成するときは、画面上の部品を配置するだけでなく、それぞれの部品が操作されたときの動作も考えていきます。