はじめて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)があるハズだ!!

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