Environment  /  Windows  /  Code Blocks

ホーム   C/C++チュートリアル   wxWidgetsへ戻る

Code Blocks

wxWidgetsでビルドしたアプリケーションに任意のアイコンをつけたくて色々調べているうちにCood Blocksに出会いました。

Code Blocks は Visual Studio と同じような IDE(Integrated Development Environment、統合開発環境)です。略して C::B とも呼ばれています。Visual Studio に比べるとシンプルで軽量です。

このC / C++ チュートリアルではあくまでも手書きにこだわって IDE を使っていませんでしたが、ここでは、Code Blocks も使ってみることにします。統合開発環境の一番大きなメリットは GUI をペイントアプリケーションのようにドラッグアンドドラッグで作れる GUI ビルダーがついていることでしょう。

C / C++ のインストール

まず、C / C++ をインストールしておきます。「目次」からそれぞれの Windows のバージョンに合った開発環境のページを参考にしてインストールしてください。

Code Blocks のインストール

次のリンクから codeblocks-20.03-setup.exe を SourceForge.net からダウンロードしてください。

Download binary

このダウンロードページを見ても分かるとおり、Code Blocksには mac 版や Linux 版もあります。

ダウンロードした codeblocks-20.03-setup.exe をダウブルクリックしてください。インストール場所はデフォルトのままの C:\Program Files\CodeBlocks にしておきます。

次のように表示されたら「いいえ」をクリックします。「はい」をクリックすると、インストーラーが起動したまま、Code Blocks も起動するという、少しややこしい状態になります。

Code Blocks の起動

インストールが終わりましたら、デスクトップに Code Blocks のショートカットができますので、それをダブルクリックして Code Blocks を起動します。

前もってインストールしておいた Msys2 の MinGW コンパイラーが 現在のデフォルトコンパイラーとして検出されています。そのまま OK をクリックします。

もう一度変更しなくて良いかと聞かれますので、デフォルトの No, leave everything as it is(そのままで良い)のまま OK をクリックします。

Windows API プロジェクト

この状態で Windows API(Win32)プログラミングができます。

File メニュー → New → Project.. を選びます。


New from template 画面で Win32 GUI project を選んで Go をクリックします。


最初の Win32 GUI project 画面では、何もせずに Next をクリックします。


次の画面では、Frame based を選択して Next をクリックします。


次の画面では、Project title: に win32 などの適当な名前を入力し、Folder to crate project in: に C:\Users\ユーザー名\Documents などを指定します。後の項目は自動的に入力されます。


次の画面では、Compiler: はでデフォルトのまま GNU GCC Compiler にしておきます。そして今回は、Create "Debug" configuration: のチェックを外して、Create "Release" configuration のみにして、Finish をクリックします。


メイン画面に戻りましたら、Build メニューから Build and run を選びます。しばらく待つとアプリケーションが無事にビルドされて表示されます。

確認が終わりましたら、アプリケーションウィンドウを閉じて、File メニューから Quit を選んで、Code Blocks を終了します。

Coldo Blocks を終了する際には、保存するかどうかを確認するダイアログが表示されます。とりあえず Yes をクリックしておきます。


ビルドされたアプリケーションは、ユーザーのドキュメントディレクトリのプロジェクト名ディレクトリの bin ディレクトリの Release ディレクトリに入っています。ビルドされた exe ファイルをダブルクリックしても実行できます。exe ファイルをデスクトップなどに移動してダブルクリックしても実行できます。



wxWidgets プロジェクト

wxWidgets のインストール

まず、wxWidgets をインストールします。

Msys2 経由でインストールした wxWidgets がまだ残っていたら削除してください。Msys2 でインストールした wxWidgets は Msys2 の中にコピーされています。コントロールパネルでアンインストールして、C:\ からも手動で削除してください。

そして、次のリンクから Latest Stable Release: 3.0.5 の Windows Installer をダウンロードして、デフォルトで指定されている C:\wxWidgets-3.0.5 に展開してください。

Downloads - wxWidgets


次にコマンドプロンプトを起動して、次のようにコマンドします。起動するのはコマンドプロンプトです。Msys2 ではありません。


// ディレクトリの移動
cd C:\wxWidgets-3.0.5\build\msw

// インストール。インストールは時間がかかります。
mingw32-make -f makefile.gcc SHARED=0 UNICODE=1 BUILD=release

// 次のように表示されればインストールは完了です。
if exist ..\..\lib\gcc_lib\libwxmsw30u_gl.a del ..\..\lib\gcc_lib\libwxmsw30u_gl.a
ar rcu ..\..\lib\gcc_lib\libwxmsw30u_gl.a gcc_mswu\gllib_dummy.o gcc_mswu\gllib_glcmn.o gcc_mswu\gllib_glcanvas.o
ranlib ..\..\lib\gcc_lib\libwxmsw30u_gl.a
    


環境変数の設定

wxWidgets の場合は、参照するディレクトリを Code Blocks の環境変数に登録しておきます。

Code Blocks を起動して、Settings メニューから Environmenmt... を選びます。

左ペインで Environment variagles を選択して、右ペインで Add をクリックします。表示されたダイアログで Key: を WX、Value: を C:\wxWidgets-3.0.5 にして OK をクリックします。

環境変数が登録されたら OK をクリックして、この画面を閉じます。


コンパイラの設定

Settings メニューから Compiler... を選びます。

Selected Compiler で GNU GCC Compiler が選択されていることを確認して、Copy をクリックします。表示されたダイアログで、名前を wxWidgets Compiler などにして OK をクリックします。

Toolcahin executables を更新してください、という内容のダイアログが表示されます。OK をクリックしてください。今回は、GNU GCC Compiler をコピーしたので、ToolChain executables は更新する必要はありません。

次に Linker settings タブをクリックします。

Add をクリックして次の項目を追加します

次に Search directories タブをクリックします

Add をクリックして C:\wxWidgets-3.0.5\lib\gcc_lib\mswu を追加します

最後に OK をクリックして、この画面を閉じます。


グローバル変数の設定

Settingsメニューから Global variables...を選びます

New をクリックして wx という名前をつけます。そして図を参考にして各値を設定してください。最後に Close をクリックしてメイン画面に戻ります。


wxWidgets プロジェクトの作成

File メニュー → New → Project... を選んでください。

New from template 画面で wxWidgets project を選んで Go をクリックしてください。

次の画面では、何もせずに Next をクリックしてください。

次の画面では、wxWidgets 3.0.x を選択して Next をクリックします

次の画面では、Project title: に wxMSW などと入力します。残りのフィールドは自動的に入力されます。そして Next をクリックします

次の画面ではとりあえず空欄のまま Next をクリックします

次の画面では、Preferred GUI Builder を None に、Application Type を Frame Based に設定して Next をクリックします
Preferred GUI Builder を wxSmith や wxFormBuilder にすると GUI ビルダーつきのプロジェクトになります

次の画面では、wxWidgets’ location: が $(♯wx) になっていることを確認して Next をクリックします

次の画面では、Compileer: を wxWidgets Compiler にして、Create "Debug" configuration のチェックを外し、Create "Release" configuration のみにチェックして、Next をクリックします

次の画面では、Enable unicode のみチェックが入っている状態にして Next をクリックします。

次の画面では、何もせずに Finish をクリックします


メイン画面に戻りましたら、Build メニューから Build and run を選びます

少し待つと無事にアプリケーションが起動します


File メニューには Quit が、Help メニューには About があります。

ビルドしたアプリケーションは設定したフォルダの bin ファルダの Release フォルダにあります。そこからダブルクリックしても起動します。デスクトップなどに移動しても起動します



GTK プロジェクト

Code Blocks で GTK アプリケーションも作ることができます。


GTK+ のインストール

Code Blocksで GTK アプリケーションを作るには、Code Clocks 用に GTK を用意する必要があります。

32bit Windows の場合は、下記リンクから 「gtk+-bundle_2.24.10-20120208_win32.zip」をダウンロードしてください。

Index of /Public/gnome/binaries/win32/gtk+/2.24

64bit Windows の場合は、下記リンクから 「gtk+-bundle_2.22.1_20101229_win64.zip」をダウンロードしてください。

https://ftp.gnome.org/Public/gnome/binaries/win64/gtk+/2.22/

ダウンロードした ZIP ファイルを解凍します。私の場合は C: 直下の gtk+ ディレクトリに解凍しました。そしてWindowsの環境変数に次のパスを登録してください。


C:\gtk+\bin
    

コマンドプロンプトが開いていた場合は、コマンドプロンプトを再起動してください。そして、コマンドプロンプトに、次のように入力してサンプルアプリが起動したら、Gtk のインストールは成功しています。


    gtk-demo
    


Code Blocksの設定

次にCode Blocksで次の設定をします

  1. 環境変数の登録
  2. グローバル変数の登録

コンパイラは Win32 と同じく GNU GCC Compiler をそのまま使います。


環境変数の登録

Code Blocks を起動して Settings メニュー → Environment... を選んで、左ペインで Environment variables を選びます。そして Add ボタンをクリックして、Key を GTK、Value を C:\gtk+ で登録します。最後に OK ボタンをクリックしてください。


グローバル変数の登録

Settings メニューから Global variables... を選び、New をクリックして gtk という新しいグローバル変数を作ります。そして次の図のように base と include と lib を設定して、Close をクリックします。


GTKプロジェクトの作成

File メニュー→ New → Project... を選びます。

そして GTK+ project を選択して Go をクリックします。

次の画面では何もせずに「Next」をクリックします。

次の画面で任意の名前と任意の場所を選び、「Next」をクリックします。

次の画面ではそのまま「Next」をクリックします。

次の画面では Compiler で GNU GCC Compiler を選び、Create "Debug" configuration のチェックを外し、Create "Release" configuration のみにチェックを入れます。そして Finish をクリックします


ビルドと実行

Build メニューから Build and run を選びます。しばらくするとアプリケーションがビルドされて起動します。

ビルドしたアプリケーションは設定したフォルダの bin ファルダの Release フォルダにあります。そこからダブルクリックしても起動します。デスクトップなどに移動しても起動します


コードの編集

プロジェクトを閉じてしまった場合は、File メニュー → Open... で gtkapp.cbp を開きます。Code Blocksのプロジェクトの拡張子は .cbp です。コードグロックスプロジェクトの略だと思えば覚えやすいでしょう。

左ペインで Project タブの Sources グループの main.c をダブルクリックすると、右ペインにソースコードが表示されます。

初めてソースコードを編集する時には次の画面が表示されるかもしれません。私の場合は「Code::Blocksのエディタで開く」を選択して「OK」しました。

ソースココードを例えば次のように書き換えます。


#include <gtk/gtk.h>

int main(int argc, char *argv[])
{
    GtkWidget * window;
    
    gtk_init(&argc, &argv);
    
    window = gtk_window_new    (GTK_WINDOW_TOPLEVEL);
    gtk_window_set_title       (GTK_WINDOW(window), "Hello GTK!");
    gtk_window_set_default_size(GTK_WINDOW(window), 300, 200);
    gtk_window_set_position    (GTK_WINDOW(window), GTK_WIN_POS_CENTER);
    
    g_signal_connect(window, "destroy", G_CALLBACK(gtk_main_quit), NULL);
    
    gtk_widget_show(window);
    gtk_main();
    return 0;
}
    

そして File メニュー → Save file で保存してから、 Build メニューの Build and run で起動すると。次のように変わっています。



wxWidgets アプリケーションにアイコンをつける

この節は、一つ古い Code blocks 17.12 で記述しています。17.12 は日本語化キットが出ていて、メニューなどが日本語化されています。

Code Blocksを使うとWindowsアプリケーションに任意のアイコンをつけることができます。

まずアイコンを用意します。Windowsでは .ico というアイコンファイルを使います。ご自身で用意できない場合は、次のサイトなどから .ico をダウンロードしてください。

フリーアイコンSVG、PNG、ICO、ICNS

私は、次のようなアイコンをダウンロードして、phone.icoという名前にしました。

次に、Code Blocksで、wxWidgetsのプロジェクトを作ります。私は phone というプロジェクト名にしました。プロジェクト画面の左ペインで「プロジェクト」タブを選ぶと次のようになっていると思います。

「ファイル」メニュー→「新規」→「空のファイル」を選びます。次のように表示されたら「はい」をクリックします。

次の画面でファイル名に「phone.cpp」などと任意の名前を入力して「保存」ボタンをクリックします。

プロジェクトの左ペインの「プロジェクト」タブの「Sources」グループに新規ファイルが追加されました。

次に最初からあった phoneApp.cpp、phoneMain.cpp、phoneApp.h、phoneMain.h を右クリックして削除します。ただし resource.rc は残しておきます。

プロジェクトの左ペインの「プロジェクト」タブは次のようになります。

アイコンファイルをプロジェクトのディレクトリに移動します。プロジェクトから削除したファイルもディレクトリには残っています。プロジェクトから削除したファイルはディレクトリから削除しても大丈夫です。

プロジェクト画面に戻り phone.cpp に次のように記述します

phone.cpp


#include <wx/wx.h>

class Hello : public wxFrame
{
public:
    Hello();
};

class App : public wxApp
{
public:
    virtual bool OnInit();
};

Hello::Hello() : wxFrame(NULL, -1, wxT("Hello wxWidgets!"),
                         wxDefaultPosition, wxSize(400, 250))
{
    Center();
}

IMPLEMENT_APP(App)

bool App::OnInit()
{
    Hello *hello = new Hello();
    hello->SetIcon(wxICON(aaaa));
    hello->Show();

    return true;
}
    

「ファイル」メニュー →「上書き保存」で保存します。

次に、resource.rcを次のように変更します。

初めてソースコードを編集する時には次の画面が表示されるかもしれません。私の場合は「Code::Blocksのエディタで開く」を選択して「OK」しました。

resource.rc


aaaa ICON "phone.ico"

#include "wx/msw/wx.rc"

    

「ファイル」メニュー →「上書き保存」で保存します。そして「ビルド」メニュー →「ビルドして実行」を選択して、しばらく待つと設定したアイコンがついたアプリケーションが起動します。

実行ファイルにも設定したアイコンがついています。

実行ファイルのアイコンが変更されていない場合もありますが、実行ファイルを他の場所へ移動すると、アイコンが正常に変更されます。


実行ファイルはプロジェクトディレクトリの bin ディレクトリの release ディレクトリにあります。



なお、GTKアプリケーションに任意のアイコンをつける方法はわかりません。


37234 visits
Posted: Jan. 17, 2020
Update: Jun. 24, 2020

ホーム   C/C++チュートリアル   wxWidgetsへ戻る   目次