はじめに

編集

GUIツールキットは、グラフィカルユーザーインターフェースの開発を可能にするライブラリやフレームワークのコレクションです。

主要なGUIツールキット

編集
  • クロスプラットフォーム
  • C++ベース
  • 豊富なウィジェット
  • 独自のシグナル/スロットシステム
例:
#include <QApplication>
#include <QMainWindow>

auto main(int argc, char *argv[]) -> int {
    QApplication app(argc, argv);
    QMainWindow window;
    window.show();
    return app.exec();
}
  • GNOMEデスクトップの標準
  • C言語ベース
  • 多言語バインディング
  • GObjectシステム
例:
#include <gtk/gtk.h>

int main(int argc, char *argv[]) {
    gtk_init(&argc, &argv);
    GtkWidget *window = gtk_window_new();
    gtk_widget_show(window);
    gtk_main();
    return 0;
}

wxWidgets

編集
  • ネイティブルック&フィール
  • C++ベース
  • 豊富なプラットフォームサポート
例:
#include <wx/wx.h>

class MyApp: public wxApp {
public:
    auto OnInit() -> bool {
        wxFrame *frame = new wxFrame(NULL, wxID_ANY, "Hello");
        frame->Show(true);
        return true;
    }
};

wxIMPLEMENT_APP(MyApp);

Xm (Motif ツールキット)

編集
  • クロスプラットフォーム(主にUNIX系)
  • C言語ベース
  • 伝統的なデザイン
  • ウィジェットライブラリの一部として標準的なGUIコンポーネントを提供
例:
#include <Xm/Xm.h>
#include <Xm/PushB.h>

void on_button_click(Widget widget, XtPointer client_data, XtPointer call_data) {
    printf("Button clicked!\n");
}

int main(int argc, char *argv[]) {
    XtAppContext app_context;
    Widget top_wid, push_button;

    top_wid = XtVaAppInitialize(&app_context, "XmExample", NULL, 0, &argc, argv, NULL, NULL);

    push_button = XmCreatePushButton(top_wid, "Push Me", NULL, 0);
    XtManageChild(push_button);

    XtAddCallback(push_button, XmNactivateCallback, on_button_click, NULL);

    XtRealizeWidget(top_wid);
    XtAppMainLoop(app_context);

    return 0;
}

Xaw (Athena Widget Set)

編集
  • 軽量なウィジェットセット
  • C言語ベース
  • X Window System向け
  • シンプルで構造化されたGUIコンポーネント
例:
#include <X11/Intrinsic.h>
#include <X11/StringDefs.h>
#include <X11/Xaw/Command.h>
#include <X11/Xaw/Box.h>

void on_button_click(Widget widget, XtPointer client_data, XtPointer call_data) {
    printf("Button clicked!\n");
}

int main(int argc, char *argv[]) {
    XtAppContext app_context;
    Widget top_wid, box, button;

    top_wid = XtVaAppInitialize(&app_context, "XawExample", NULL, 0, &argc, argv, NULL, NULL);

    box = XtVaCreateManagedWidget("box", boxWidgetClass, top_wid, NULL);

    button = XtVaCreateManagedWidget("Push Me", commandWidgetClass, box, NULL);
    XtAddCallback(button, XtNcallback, on_button_click, NULL);

    XtRealizeWidget(top_wid);
    XtAppMainLoop(app_context);

    return 0;
}

Xt (X Toolkit Intrinsics)

編集
  • X Window Systemの基盤ライブラリ
  • C言語ベース
  • 他のウィジェットライブラリ(Motif, Xaw)の基礎
  • イベント駆動型GUIプログラムの構築を支援
例:
#include <X11/Intrinsic.h>
#include <X11/StringDefs.h>

void on_expose(Widget widget, XtPointer client_data, XEvent *event, Boolean *continue_to_dispatch) {
    printf("Expose event triggered!\n");
}

int main(int argc, char *argv[]) {
    XtAppContext app_context;
    Widget top_wid;

    top_wid = XtVaAppInitialize(&app_context, "XtExample", NULL, 0, &argc, argv, NULL, NULL);

    XtAddEventHandler(top_wid, ExposureMask, False, on_expose, NULL);

    XtRealizeWidget(top_wid);
    XtAppMainLoop(app_context);

    return 0;
}

基本コンポーネント

編集

ウィンドウ管理

編集
  • メインウィンドウ
  • ダイアログ
  • ポップアップ
  • モーダルウィンドウ

レイアウト管理

編集
  • 垂直/水平ボックス
  • グリッドレイアウト
  • フレックスレイアウト
  • アンカーレイアウト

基本ウィジェット

編集
  1. ボタン
  2. テキスト入力
  3. ラベル
  4. チェックボックス
  5. ラジオボタン
  6. コンボボックス

高度なウィジェット

編集
  1. ツリービュー
  2. テーブル
  3. タブコントロール
  4. プログレスバー
  5. スライダー

イベント処理

編集

イベントモデル

編集
// Qt例
connect(button, &QPushButton::clicked, this, &MyClass::handleClick);

// GTK例
g_signal_connect(button, "clicked", G_CALLBACK(handle_click), NULL);

シグナル/スロット

編集
class MyWidget : public QWidget {
    Q_OBJECT
public slots:
    void handleEvent();
signals:
    void eventOccurred();
};

スタイリング

編集

CSS統合

編集
/* QSSスタイル (Qt) */
QPushButton {
    background-color: #4CAF50;
    color: white;
    border-radius: 4px;
}

/* GTKスタイル */
button {
    background-color: #4CAF50;
    color: white;
    border-radius: 4px;
}

テーマ設定

編集
// Qt
app.setStyle("Fusion");

// GTK
gtk_style_context_add_provider_for_display(display, provider, priority);

データバインディング

編集

モデル/ビューアーキテクチャ

編集
// Qtの例
QStringListModel *model = new QStringListModel();
QListView *view = new QListView();
view->setModel(model);

プロパティバインディング

編集
// Qt
QObject::connect(source, SIGNAL(valueChanged(int)),
                target, SLOT(setValue(int)));

グラフィックスとアニメーション

編集

2Dグラフィックス

編集
void paintEvent(QPaintEvent *) {
    QPainter painter(this);
    painter.drawRect(10, 10, 100, 100);
}

アニメーション

編集
QPropertyAnimation *animation = new QPropertyAnimation(widget, "geometry");
animation->setDuration(1000);
animation->setStartValue(QRect(0, 0, 100, 100));
animation->setEndValue(QRect(200, 200, 100, 100));

国際化

編集

文字列の翻訳

編集
// Qt
QString text = tr("Hello World");

// GTK
char *text = _("Hello World");

ロケール設定

編集
QLocale::setDefault(QLocale(QLocale::Japanese));

アクセシビリティ

編集

スクリーンリーダーサポート

編集
widget->setAccessibleName("Button Description");
widget->setAccessibleDescription("Detailed description");

キーボードナビゲーション

編集
widget->setFocusPolicy(Qt::StrongFocus);
widget->setTabOrder(widget1, widget2);

パフォーマンス最適化

編集

レンダリング最適化

編集
// ダブルバッファリング
widget->setAttribute(Qt::WA_DoubleBuffered);

// 部分更新
widget->update(rect);

メモリ管理

編集
// オブジェクト所有権
widget->setParent(parent);
QScopedPointer<QWidget> widget(new QWidget);

デバッグとテスト

編集

デバッグツール

編集
// Qtデバッグ出力
qDebug() << "Debug message";
qWarning() << "Warning message";

ユニットテスト

編集
class TestGui : public QTest {
    Q_OBJECT
private slots:
    void testButton() {
        QTest::mouseClick(button, Qt::LeftButton);
        QCOMPARE(result, expected);
    }
};

クロスプラットフォーム対応

編集

プラットフォーム固有のコード

編集
#ifdef Q_OS_WIN
    // Windowsの場合
#elif defined(Q_OS_MAC)
    // macOSの場合
#else
    // その他のプラットフォーム
#endif

環境検出

編集
if (QSysInfo::productType() == "windows") {
    // Windows固有の処理
}

まとめ

編集

GUIツールキットは現代のアプリケーション開発に不可欠なツールです。主要な考慮点:

  1. 適切なツールキットの選択
  2. プラットフォーム要件の理解
  3. パフォーマンスとメモリ管理
  4. アクセシビリティとユーザビリティ
  5. テストと品質保証

これらの要素を適切に考慮することで、高品質なGUIアプリケーションを開発できます。