GTK を使ったシンプルなストップウォッチアプリの作成 | プログラミングチュートリアル

はじめに

このプロジェクトでは、C 言語で GTK ライブラリを使用してシンプルなストップウォッチアプリケーションを作成します。このストップウォッチには、ストップウォッチのタイマーを制御するための開始/一時停止ボタンとリセットボタンがあります。プロジェクトファイルのセットアップから始めて、ストップウォッチアプリケーションの実行まで、プロセスをいくつかのステップに分解します。

👀 プレビュー

Stopwatch app demo

🎯 タスク

このプロジェクトでは、以下のことを学びます。

GTK ライブラリのインストール方法
プロジェクトファイルの作成方法
GTK ヘッダーのインクルードと変数の定義方法
タイマーコールバック関数の作成方法
ボタンクリックコールバックの実装方法
メイン関数と UI 要素の作成方法
プロジェクトのコンパイルと実行方法

🏆 達成目標

このプロジェクトを完了した後、以下のことができるようになります。

C 言語で GTK ライブラリを使用してグラフィカルユーザーインターフェイスを作成する
GTK でボタンクリックイベントを処理する
GTK でタイマーを操作する
GTK でラベルを動的に更新する

プロジェクトファイルの作成

まず、システムにGTKライブラリがインストールされていることを確認してください。インストールされていない場合は、以下のコマンドを使用してインストールできます。

sudo apt update
sudo apt-get install libgtk-3-dev

次に、stopwatch.cという名前の新しいファイルを作成し、好みのコードエディタで開きます。

cd ~/project
touch stopwatch.c

GTK ヘッダーのインクルードと変数の定義

このステップでは、必要な GTK ヘッダーをインクルードし、ストップウォッチアプリケーションの変数を定義します。

#include <gtk/gtk.h>

static guint timer_id = 0;
static gboolean running = FALSE;
static int elapsed_seconds = 0;

static GtkWidget *label;

#include <gtk/gtk.h>: これは、プログラムで GTK 関数とデータ構造を使用するための GTK ライブラリのヘッダーファイルを含んでいます。
static guint timer_id = 0;: これは、GTK タイマーの ID を格納するための変数です。タイマーID は、以下のコードでタイマーの開始と停止を制御するために使用されます。
static gboolean running = FALSE;: これは、ストップウォッチが動作しているかどうかを追跡するためのブール型変数です。ストップウォッチが動作しているときはrunningがTRUE、一時停止しているときはFALSEになります。
static int elapsed_seconds = 0;: これは、経過した秒数を追跡するための整数型変数です。経過時間を計算し、ラベルにストップウォッチの時間を表示するために使用されます。
static GtkWidget *label;: これは、GTK ラベルウィジェットを格納するためのポインタです。このラベルはストップウォッチの時間を表示します。

タイマーコールバック関数の作成

次に、ストップウォッチのタイマーを毎秒更新するコールバック関数を作成します。

static gboolean timer_callback(gpointer data) {
    if (running) {
        elapsed_seconds++;
        int minutes = elapsed_seconds / 60;
        int seconds = elapsed_seconds % 60;
        char time_str[10];
        snprintf(time_str, sizeof(time_str), "%02d:%02d", minutes, seconds);
        gtk_label_set_text(GTK_LABEL(label), time_str);
    }
    return G_SOURCE_CONTINUE;
}

elapsed_seconds++: ストップウォッチが動作している場合、elapsed_seconds変数の値が増加し、経過した秒数が 1 秒増えたことを示します。
1 分は 60 秒に等しいため、elapsed_secondsを 60 で割ってminutesの数を取得します。1 分未満のsecondsの数は、剰余演算子%を使用して取得できます。
snprintf関数を使用して、分と秒をmm:ss形式の文字列にフォーマットします。ここで、%02dは分と秒を 2 桁で表し、2 桁未満の場合は先頭に 0 を埋めます。
gtk_label_set_textは、生成された時間文字列をラベル部分のテキストに設定して、ストップウォッチの表示を更新します。
return G_SOURCE_CONTINUEは、コールバックが完了した後も GTK タイマーにタイマーを継続させ、次のタイマーイベントが再びトリガーされるように指示します。コールバックがG_SOURCE_REMOVEを返すと、タイマーは停止します。

要するに、timer_callback関数は、ストップウォッチが動作している間に経過した秒数を増やし、分と秒を文字列にフォーマットしてからラベルウィジェットのテキストに設定することで、ストップウォッチの時間を動的に更新する役割を担っています。

ボタンクリックコールバックの実装

開始/一時停止ボタンとリセットボタンのコールバック関数が必要です。

static void start_stop_button_clicked(GtkButton *button, gpointer data) {
    running =!running;
    if (running) {
        gtk_button_set_label(button, "Pause");
    } else {
        gtk_button_set_label(button, "Start");
    }
}

static void reset_button_clicked(GtkButton *button, gpointer data) {
    elapsed_seconds = 0;
    gtk_label_set_text(GTK_LABEL(label), "00:00");
}

start_stop_button_clickedは、ストップウォッチの状態を動作中と一時停止の間で切り替えます。
reset_button_clickedは、ストップウォッチのタイマーをリセットします。

メイン関数と UI 要素の作成

では、main関数を作成し、ユーザーインターフェイスを設定しましょう。

int main(int argc, char *argv[]) {
    GtkWidget *window;
    GtkWidget *grid;
    GtkWidget *start_stop_button;
    GtkWidget *reset_button;

    gtk_init(&argc, &argv); // Initialize GTK

    window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_title(GTK_WINDOW(window), "Stopwatch"); // Set the window title
    gtk_window_set_default_size(GTK_WINDOW(window), 200, 200); // Set the default window size
    g_signal_connect(G_OBJECT(window), "destroy", G_CALLBACK(gtk_main_quit), NULL); // Connect the window close event

    grid = gtk_grid_new(); // Create a grid layout
    gtk_container_add(GTK_CONTAINER(window), grid); // Add the grid to the window

    label = gtk_label_new("00:00"); // Create a GTK label initially displaying "00:00"
    gtk_widget_set_hexpand(label, TRUE); // Allow the label to expand horizontally
    gtk_widget_set_vexpand(label, TRUE); // Allow the label to expand vertically
    gtk_grid_attach(GTK_GRID(grid), label, 0, 0, 1, 1); // Add the label to the grid

    start_stop_button = gtk_button_new_with_label("Start"); // Create a button with the label "Start"
    gtk_widget_set_hexpand(start_stop_button, TRUE); // Allow the button to expand horizontally
    gtk_widget_set_vexpand(start_stop_button, TRUE); // Allow the button to expand vertically
    g_signal_connect(G_OBJECT(start_stop_button), "clicked", G_CALLBACK(start_stop_button_clicked), NULL); // Connect the button click event
    gtk_grid_attach(GTK_GRID(grid), start_stop_button, 0, 1, 1, 1); // Add the button to the grid

    reset_button = gtk_button_new_with_label("Reset"); // Create a button with the label "Reset"
    gtk_widget_set_hexpand(reset_button, TRUE); // Allow the button to expand horizontally
    gtk_widget_set_vexpand(reset_button, TRUE); // Allow the button to expand vertically
    g_signal_connect(G_OBJECT(reset_button), "clicked", G_CALLBACK(reset_button_clicked), NULL); // Connect the button click event
    gtk_grid_attach(GTK_GRID(grid), reset_button, 0, 2, 1, 1); // Add the button to the grid

    gtk_widget_show_all(window); // Show the window and all its child widgets

    timer_id = g_timeout_add(1000, timer_callback, NULL); // Create a timer that triggers every 1000 ms (1 second) and calls timer_callback

    gtk_main(); // Start the GTK main event loop

    return 0;
}

main関数は、GTK ウィンドウ、ラベル、ボタン、およびそれらのクリックイベントハンドラを設定します。

プロジェクトのコンパイルと実行

これでストップウォッチアプリケーションを作成しましたので、コンパイルして実行しましょう。

ターミナルを開き、プロジェクトディレクトリに移動します。

cd ~/project

次のコマンドを使用してコードをコンパイルします。

gcc -o stopwatch stopwatch.c $(pkg-config --cflags --libs gtk+-3.0)

アプリケーションを実行します。

./stopwatch

ストップウォッチが表示されたウィンドウが表示されるはずです。Startボタンをクリックしてタイマーを開始し、Pauseで一時停止し、Resetでタイマーをリセットします。

Stopwatch app demonstration

まとめ

このプロジェクトでは、C 言語と GTK ライブラリを使用してシンプルなストップウォッチアプリケーションを作成しました。プロジェクトファイルを設定し、変数を定義し、タイマーコールバック関数を実装し、ボタンクリックコールバックを作成しました。このアプリケーションでは、ストップウォッチのタイマーを開始、一時停止、およびリセットすることができます。コードをコンパイルして生成されたプログラムを実行することで、アプリケーションを実行できます。