Windowsのイルカのような背景透過不定形GUIの作り方🖼️

はじめに (対象読者・この記事でわかること)

この記事は、Windowsアプリケーション開発に興味があるプログラマー、特にユニークなUI/UXデザインに挑戦したい開発者を対象としています。Win32 APIを用いて、Windowsのイルカのような背景を透過する不定形なGUIを実装する方法を具体的に解説します。

この記事を読むことで、Win32 APIを使用して背景透過の不定形ウィンドウを作成する基本的な手法、ピクセル単位でのウィンドウ形状の制御方法、そしてユーザーインタラクションを実装するための具体的な手順がわかるようになります。伝統的な矩形ウィンドウに飽きた開発者向けに、より創造的で視覚的に魅力的なUIを実現するための知識を提供します。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - C/C++の基本的な知識 - Win32 APIの基礎的な理解 - Visual Studioや他のC++開発環境のセットアップ経験

不定形GUIの概念と背景透過技術の重要性

伝統的なGUIアプリケーションは、ほとんどが矩形のウィンドウで構成されています。しかし、近年のアプリケーションでは、ユーザーの体験を向上させるために、より自由な形状のUIが求められています。Windowsのイルカやペイントのブラシのような不定形なGUIは、ユーザーの関心を引きつけ、アプリケーションの独自性を強調する効果があります。

背景透過技術は、この不定形GUIを実現するための重要な要素です。通常のウィンドウは矩形の領域を占有しますが、背景透過技術を用いることで、ウィンドウの背景部分を透明にし、特定の形状だけを表示することができます。これにより、ウィンドウがデスクトップの背景や他のウィンドウと自然に融合するような効果を実現できます。

Win32 APIでは、ウィンドウのスタイルを拡張することで背景透過を実現できます。WS_EX_LAYEREDとWS_EX_TRANSPARENTスタイルを組み合わせることで、ウィンドウ全体を透過させることができます。さらに、SetLayeredWindowAttributes関数を使用することで、透過度を細かく制御することも可能です。

不定形GUIの具体的な実装方法

ステップ1: 基本的なウィンドウの作成

まず、Win32 APIを使用して基本的なウィンドウを作成します。以下に、WinMain関数とウィンドウプロシージャの実装例を示します。

Cpp

#include <windows.h>

// ウィンドウプロシージャの宣言
LRESULT CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);

int WINAPI WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nCmdShow) {
    // ウィンドウクラスの登録
    WNDCLASSEX wc = {0};
    wc.cbSize = sizeof(WNDCLASSEX);
    wc.style = CS_HREDRAW | CS_VREDRAW;
    wc.lpfnWndProc = WndProc;
    wc.cbClsExtra = 0;
    wc.cbWndExtra = 0;
    wc.hInstance = hInstance;
    wc.hIcon = LoadIcon(NULL, IDI_APPLICATION);
    wc.hCursor = LoadCursor(NULL, IDC_ARROW);
    wc.hbrBackground = (HBRUSH)(COLOR_WINDOW + 1);
    wc.lpszClassName = "IrregularWindow";
    wc.hIconSm = LoadIcon(NULL, IDI_APPLICATION);

    if (!RegisterClassEx(&wc)) {
        MessageBox(NULL, "ウィンドウクラスの登録に失敗しました", "エラー", MB_ICONEXCLAMATION | MB_OK);
        return 0;
    }

    // ウィンドウの作成
    HWND hWnd = CreateWindowEx(
        0,                          // 拡張ウィンドウスタイル
        "IrregularWindow",          // 登録されたウィンドウクラス名
        "不定形ウィンドウ",         // ウィンドウのタイトル
        WS_OVERLAPPEDWINDOW,       // ウィンドウスタイル
        CW_USEDEFAULT, CW_USEDEFAULT, // 位置
        800, 600,                  // サイズ
        NULL, NULL, hInstance, NULL
    );

    if (!hWnd) {
        MessageBox(NULL, "ウィンドウの作成に失敗しました", "エラー", MB_ICONEXCLAMATION | MB_OK);
        return 0;
    }

    // ウィンドウの表示
    ShowWindow(hWnd, nCmdShow);
    UpdateWindow(hWnd);

    // メッセージループ
    MSG msg;
    while (GetMessage(&msg, NULL, 0, 0)) {
        TranslateMessage(&msg);
        DispatchMessage(&msg);
    }

    return (int)msg.wParam;
}

// ウィンドウプロシージャ
LRESULT CALLBACK WndProc(HWND hWnd, UINT message, WPARAM wParam, LPARAM lParam) {
    switch (message) {
        case WM_PAINT: {
            PAINTSTRUCT ps;
            HDC hdc = BeginPaint(hWnd, &ps);

            // ここに描画コードを追加

            EndPaint(hWnd, &ps);
        }
        break;

        case WM_DESTROY:
            PostQuitMessage(0);
            break;

        default:
            return DefWindowProc(hWnd, message, wParam, lParam);
    }
    return 0;
}

このコードは、基本的なウィンドウを作成するためのテンプレートです。このウィンドウはまだ矩形の形状をしていますが、次のステップで背景透過と不定形の形状を実装していきます。

ステップ2: 背景透過の設定

次に、ウィンドウに背景透過を設定します。CreateWindowEx関数の拡張ウィンドウスタイルにWS_EX_LAYEREDとWS_EX_TRANSPARENTを指定し、SetLayeredWindowAttributes関数を使用して透過度を設定します。

Cpp

// ウィンドウの作成（修正版）
HWND hWnd = CreateWindowEx(
    WS_EX_LAYERED | WS_EX_TRANSPARENT, // 背景透過とマウス透過を有効にする
    "IrregularWindow",                 // 登録されたウィンドウクラス名
    "不定形ウィンドウ",                // ウィンドウのタイトル
    WS_OVERLAPPEDWINDOW,               // ウィンドウスタイル
    CW_USEDEFAULT, CW_USEDEFAULT,     // 位置
    800, 600,                         // サイズ
    NULL, NULL, hInstance, NULL
);

// 透過度の設定（0-255の値を指定）
SetLayeredWindowAttributes(hWnd, 0, 200, LWA_ALPHA);

WS_EX_LAYEREDは、ウィンドウをレイヤードウィンドウとして扱い、透過効果を有効にします。WS_EX_TRANSPARENTは、ウィンドウの透明な部分をマウスイベントが通過させるようにします。SetLayeredWindowAttributes関数の第3引数は透過度を表し、0は完全に透明、255は完全不透明です。

ステップ3: 不定形ウィンドウの作成

次に、ウィンドウの形状を不定形に変更します。Win32 APIでは、リージョン（Region）という概念を使用してウィンドウの形状を定義します。CreateRoundRectRegionやCreatePolygonRegionなどの関数を使用してリージョンを作成し、SetWindowRgn関数でウィンドウの形状を設定します。

Cpp

#include <wingdi.h>

// ウィンドウプロシージャ内でのリージョンの設定
case WM_CREATE: {
    // 不定形のリージョンを作成（ここでは楕円形の例）
    HRGN hRgn = CreateEllipticRgn(50, 50, 750, 550);
    SetWindowRgn(hWnd, hRgn, TRUE);
    break;
}

このコードは、ウィンドウを楕円形に変更する例です。CreateElliptonRgn関数で楕円形のリージョンを作成し、SetWindowRgn関数でウィンドウの形状を設定しています。第3引数のTRUEは、ウィンドウのサイズ変更時にリージョンを再計算するかどうかを指定します。

より複雑な形状を作成するには、CreatePolygonRegion関数を使用して多角形のリージョンを作成するか、複数のリージョンを組み合わせることもできます。

Cpp

// 複数のリージョンを組み合わせる例
HRGN hRgn1 = CreateEllipticRgn(50, 50, 300, 300);
HRGN hRgn2 = CreateEllipticRgn(500, 50, 750, 300);
HRGN hRgn3 = CreateEllipticRgn(275, 275, 525, 550);

// リージョンを結合
CombineRgn(hRgn1, hRgn1, hRgn2, RGN_OR);
CombineRgn(hRgn1, hRgn1, hRgn3, RGN_OR);

// ウィンドウの形状を設定
SetWindowRgn(hWnd, hRgn1, TRUE);

この例では、3つの楕円形のリージョンを作成し、CombineRgn関数でそれらを結合しています。RGN_ORは、リージョンの論理和を計算するオプションです。

ステップ4: イルカのようなUIデザインの実装

WindowsのイルカのようなUIを実現するには、カスタム描画とアルファチャネルを利用したピクセル単位の透過処理が必要です。WM_PAINTメッセージ内でカスタム描画を行い、アルファチャネルを持つビットマップを使用します。

Cpp

case WM_PAINT: {
    PAINTSTRUCT ps;
    HDC hdc = BeginPaint(hWnd, &ps);

    // メモリDCの作成
    HDC memDC = CreateCompatibleDC(hdc);
    HBITMAP hBitmap = CreateCompatibleBitmap(hdc, 800, 600);
    SelectObject(memDC, hBitmap);

    // 背景を透明にする
    TransparentBlt(memDC, 0, 0, 800, 600, hdc, 0, 0, 800, 600, RGB(0, 0, 0));

    // イルカのイメージを描画（ここでは単純な楕円で代用）
    HBRUSH hBrush = CreateSolidBrush(RGB(0, 150, 255));
    SelectObject(memDC, hBrush);
    Ellipse(memDC, 100, 200, 700, 400);

    // メインDCに描画
    BitBlt(hdc, 0, 0, 800, 600, memDC, 0, 0, SRCCOPY);

    // リソースの解放
    DeleteObject(hBrush);
    DeleteObject(hBitmap);
    DeleteDC(memDC);

    EndPaint(hWnd, &ps);
}
break;

このコードは、単純な楕円形でイルカのイメージを描画する例です。実際には、アルファチャネルを持つビットマップを使用して、より詳細なイルカのイメージを描画します。

ハマった点やエラー解決

問題1: 透過領域でのマウスイベント処理 背景透過のウィンドウでは、透過部分でマウスイベントが発生しないように設定していますが、これによりユーザーがウィンドウの一部をクリックできない問題が発生しました。

解決策: マウスイベントを処理するために、ウィンドウプロシージャでWM_NCHITTESTメッセージを処理し、透過部分であってもマウスイベントを発生させるようにしました。

Cpp

case WM_NCHITTEST: {
    POINT pt;
    pt.x = LOWORD(lParam);
    pt.y = HIWORD(lParam);

    // ウィンドウのクライアント座標に変換
    ScreenToClient(hWnd, &pt);

    // ここで、クリックされた位置がウィンドウの有効な領域内かどうかを判定
    // 例えば、楕円形のウィンドウの場合:
    RECT rect;
    GetClientRect(hWnd, &rect);
    double centerX = (rect.right - rect.left) / 2.0;
    double centerY = (rect.bottom - rect.top) / 2.0;
    double radiusX = (rect.right - rect.left) / 2.0;
    double radiusY = (rect.bottom - rect.top) / 2.0;

    double dx = pt.x - centerX;
    double dy = pt.y - centerY;
    double distance = (dx * dx) / (radiusX * radiusX) + (dy * dy) / (radiusY * radiusY);

    if (distance <= 1.0) {
        return HTCLIENT; // ウィンドウ内として扱う
    } else {
        return HTNOWHERE; // ウィンドウ外として扱う
    }
}
break;

このコードでは、クリックされた位置が楕円形のウィンドウ内にあるかどうかを判定し、ウィンドウ内であればHTCLIENTを返してマウスイベントを発生させています。

問題2: 高DPI環境での表示問題 高DPI環境では、ウィンドウの表示がぼやけたり、位置がずれたりする問題が発生しました。

解決策: アプリケーションが高DPI対応であることをシステムに通知し、適切なスケーリングを行うようにしました。

Cpp

// WinMain関�数の先頭に追加
// 高DPI対応の設定
SetProcessDPIAware();

// または、より新しいAPIを使用
// SetProcessDPIAwarenessContext(DPI_AWARENESS_CONTEXT_PER_MONITOR_AWARE_V2);

また、ウィンドウのサイズと位置を設定する際に、GetSystemMetricsForDpi関数を使用してDPIに応じた値を取得するように変更しました。

Cpp

// DPIに応じた値を取得
int dpi = GetDpiForWindow(hWnd);
int scalingFactor = dpi / 96; // 96dpiを基準とする

// ウィンドウサイズを設定
int width = 800 * scalingFactor;
int height = 600 * scalingFactor;

問題3: ウィンドウのリサイズ時の形状維持 ウィンドウのサイズを変更した際に、リージョンの形状が維持されず、ウィンドウが矩形に戻ってしまう問題が発生しました。

解決策: WM_SIZEメッセージを処理し、ウィンドウのサイズ変更時にリージョンを再計算するようにしました。

Cpp

case WM_SIZE: {
    // ウィンドウサイズが変更された場合、リージョンを再計算
    RECT rect;
    GetClientRect(hWnd, &rect);

    // 新しいリージョンを作成（ここでは楕円形の例）
    HRGN hRgn = CreateEllipticRgn(0, 0, rect.right, rect.bottom);
    SetWindowRgn(hWnd, hRgn, TRUE);

    break;
}

このコードでは、ウィンドウのサイズ変更時に新しいリージョンを作成し、ウィンドウの形状を更新しています。

まとめ

本記事では、Win32 APIを使用して背景透過の不定形GUI（Windowsのイルカのような）を実装する方法について解説しました。

• 背景透過技術を利用したウィンドウの作成方法
• リージョンを使用した不定形ウィンドウの実装手法
• 高DPI環境での対応策
• マウスイベントの適切な処理方法

この記事を通して、従来の矩形ウィンドウに縛られない、より創造的でユニークなUIを実現するための具体的な手法を学ぶことができたと思います。背景透過と不定形形状の組み合わせにより、ユーザーの体験を向上させる魅力的なアプリケーションを開発できるようになるでしょう。

今後は、アニメーション効果の追加方法や、より複雑な形状の実装、マルチモニタ環境での対応など、さらに高度なトピックについても記事にする予定です。

参考資料

• Microsoft Docs - Win32 API リファレンス
• Win32プログラミング - 不定形ウィンドウの作成
• Windowsの高DPI対応に関するドキュメント
• 透明なウィンドウと非矩形ウィンドウの作成