はじめてC++で画面を作ろう! (8) アイコン編

26.アプリに「アイコン」を設定しよう!!

mainwindow.uiのwindowIconプロパティにアイコン画像(.ico)を設定しても、起動時には、設定されているが、肝心のアプリ(.exe)には、反映されない。

Windows10の場合は、リソースファイル(.rc)を作って、これをCMakeにいれてコンパイルすると、アイコン画像(.ico)がアプリ(.exe)に組み込まれる。

27.アイコン画像(.ico)を作ろう!!

Windows10の標準の「ペイントブラシ」では、.icoファイルが作れない。
そこで、フリーの画像編集ソフトで有名な「GIMP」で、.icoファイルを作る。

えっ、GIMPを持っていない?
MSYS2を使えば、簡単にインストールができる!!

pacman -S mingw-w64-x86_64-gimp

これで、"mingw64\bin"フォルダー傘下に"gimp.exe"がインストールされているハズだ。

[1] GIMPで、[ファイル | 新しい画像]をクリック
[2] キャンパスサイズ(画像サイズ)を幅(W):24、高さ(H):24、pxで、[OK]ボタンをクリック

[3] アイコンの絵を書いたら、[ファイル | 名前を付けてエクスポート]をクリック

[4] 名前(N):"icon.ico"を定義して、[エクスポート]ボタンをクリック
[5] 「画像をWindowsアイコンでエクスポート」画面で、「8bpp, 1bitアルファ、256色パレット」ぐらいを設定して、[エクスポート]ボタンをクリック

この.icoファイル を 今、作成中のQtプロジェクトのフォルダーにコピーしておきましょう!

画像を透過したい場合は、RGBA アルファチャンネル形式にして、透過する色を設定するば、出来る。上記の「1bit アルファ」とは、この透過設定の事

また、GIMPでは、マルチサイズのアイコンにも対応できる。
(極小アイコン: 16x16 あまり使われない)
タイトルバー用: 24x24
小アイコン: 32x32
(中小アイコン: 48x48 あまり使われない)
中アイコン: 64x64
(中大アイコン: 128x128 あまり使われない)
特大アイコン: 256x256
Windows10は、24x24しかないと、エクスプローラーが自動で拡大/縮小して、アイコン画像を作ります。

特大アイコン表示で、ぼけた画像にしたくない時は、マルチサイズで、画像を作って、おきましょう!!

28.アイコンの組み込み

ここからは、QtCreatorに戻って操作する

[1] プロジェクトの「Source Files」フォルダーをクリック、
そのままマウスの右ボタンをクリック、
ポップアップ メニューより「AddNew...」 をクリック
[2] 「新しいファイル - QtCreator」画面の「ファイルとクラス」より「一般」をクリック、
「空ファイル」をクリック
[選択]ボタンをクリック
[3] 「空ファイル - QtCreator」画面より、「File name:」で、"icon,rc"を入力して、リソースファイル(.rc)を作成する、
[次へ]ボタンをクリック
「プロジェクト管理」で[完了]ボタンをクリック
[4] 画面は、CMakeLists.txtに移って、入力を催促される。
※ここは、自動でやってくれない。

CMakeList.txtのset(PROJECT_SOURCE ...)に今、作った"icon.rc"を追加して、[ファイル | Save All]をクリック

CMakeLists.txt

set(PROJECT_SOURCES
        main.cpp
        mainwindow.cpp
        mainwindow.h
        mainwindow.ui
        icon.rc
)

[5] プロジェクトの「Source Files」フォルダーの傘下に今、作った"icon.rc"をダブルクリック
空ファイルの"icon.rc"が表示されるので、ここに入力

icon.rc

IDI_ICON1   ICON    "icon.ico"

[ファイル | Save All]をクリック

もし、iconsフォルダーの傘下に画像がある場合は、"icons/icon.ico"とパスを設定もできる。

これで、ビルドすれば、アプリ(.exe)のアイコンが、今、作ったicon.icoの画像がアプリに組み込まれるハズだ!!

29.動作確認!!

画面の左下にある、右三角マークの「実行」ボタンをクリックして、「MainWindow」が出てくる!

デバッグ用のフォルダーには、アイコンが組み込まれたアプリ(.exe)があるハズだ!!

QtCreator以外から、アプリを起動すると、黒い画面(コンソール)が表示された後にアプリ画面がでてくる。

30.黒い画面(コンソール)を非表示にする

この黒い画面は、CMakeLists.txtで、調整できる。
add_executable()に"WIN32"と入れるだけだ。

CMakeLists.txt

add_executable(hello
            WIN32
            ${PROJECT_SOURCES}
        )

クロスプラットフォームで、ビルドする人は、CMakeのif文で、"WIN32"を分けておきましょう!!
Windows10 64bitでも、「WIN32」と区別されます。

CMakeLists.txt

    if(ANDROID)
        add_library(hello SHARED
            ${PROJECT_SOURCES}
        )
    elseif(WIN32)
        add_executable(hello
            WIN32
            ${PROJECT_SOURCES}
        )
    else()
        add_executable(hello
            ${PROJECT_SOURCES}
        )
    endif()

31.再び、動作確認!!

デバッグ用のフォルダーには、アイコンが組み込まれたアプリ(.exe)があるハズだ!!

これをダブルクリックすると、黒い画面(コンソール)が出ない状態で、アプリが起動するハズだ!!