ハッピーコンピューティングのブログ

ハッピーコンピューティングのブログ

東京都小平市の小さなプログラミング教室のブログです。





Amebaでブログを始めよう!

今年も一年ありがとうございました。

 

うちだけでなく世界中がコロナ禍に振り回された1年でしたが、なんとかハッピーコンピューティングは教室を維持できております。

これも通ってくれている生徒さんたち、およびそのご家族のおかげです。ありがとうございました。

 

年の変わり目は区切りとしてちょうどいいので、ブログを移転しようと思います。

先日、ハッピーコンピューティングのウェブサイトをリニューアルいたしました。

ブログも今後は本家ハッピーコンピューティングのウェブサイトで書いていくことにします。


2015年の3月から書き始めたこのアメブロでのブログは、内容を消してしまうのももったいないので当面このまま凍結です。

今後はぜひ新ウェブサイトをご覧ください。

 

 

 

どうぞよろしくお願いいたします。

 

ハッピーコンピューティング やまもとたかひろ

ピュアなC言語(非C++)でGUIアプリを作りたくて

どうせならおもしろそうなのがいいのでGTKにしようと思って

いっそGTKライブラリそのものをビルドするところからやっちゃおうということで

調べてみたら Windows10 の上で VisualStudio 2019 を使ってビルドする方法があったので

やってみたのが前々回。

 

 

出来上がったライブラリを使って

サンプルアプリをビルドしてみたのが前回。

 

 

ここで「アイコンが見つからないんですけど」というような警告が出てましたがとりあえずアプリは動きました。

 

今回はこの警告をやっつけるためにアイコンとテーマを整えたいと思います。

 

1.Windows 10 Theme for Linuxを取ってくる

とりあえずWindows10な見た目のテーマを取ってきます。下記にアクセスして

 

 

「Code」ボタンをクリックしたのち「Download ZIP」をクリック

 

ダウンロードされたファイルを展開します。

 

2.テーマフォルダを配置

展開された「Windows-10-master」の中の「gtk-3.20」フォルダを右クリックして「コピー」

 

エクスプローラで C:\gtk-build\gtk\x64\release\share\themes フォルダを開く。

これまでの手順通りの人はこの場所になるはず。

違った手順でGTKをビルドした人は適宜パスを読み替えてください。

 

ここで右クリックして「新規作成」→「フォルダー」

 

できたフォルダの名前は「Windows10」にしてください。

 

作ったばかりのWindows10フォルダの中へ入り、右クリックして貼り付け


gtk-3.20フォルダが貼り付けられますがこれを右クリックして「名前の変更」

 

 

「gtk-3.0」にします。

 

 

3.Adwaitaのアイコンテーマをダウンロード

ウェブブラウザで下記のウェブページにアクセスする。
adwaita-icon-theme の最新バージョン(2020年12月3日時点では 3.38)」のフォルダをクリック。
 
次のページで「adwaita-icon-theme-*.**.*.tar.xz」のリンクをクリックしてダウンロードする。
 

4.Adwaitaアイコンをmsys環境で展開

ダウンロードしたadwaita-icon-theme-3.38.0.tar.xzファイルを右クリック→コピー。
 
エクスプローラで msys の homeフォルダ、私の環境だと「C:\msys64\home\admin」を開いて、右クリック→貼り付け。
3.でダウンロードしたadwaita-icon-theme-3.38.0.tar.xzファイルがコピーされる。
 
msysのコンソールを立ち上げる。
 
msysのコンソール上で 下記のコマンドを実行して展開する。 
$ xz -dc adwaita-icon-theme-3.38.0.tar.xz | tar xfv -
 

5. Adwaitaアイコンをnmakeで作成

msysコンソールは閉じて、Windowsのスタートメニューから VisualStudio 2019 → Developer Command Prompt for VS2019 を立ち上げる。
 
下記のコマンドを実行する
cd C:\msys64\home\admin\adwaita-icon-theme-3.38.0\win32
nmake /f adwaita-msvc.mak

 

C:\msys64\home\admin\adwaita-icon-theme-3.38.0\win32の中に index.theme ファイルができていることを確認する。

 

6. AdwaitaアイコンをGTKフォルダへコピー

msysコンソールは閉じて、エクスプローラで C:\msys64\home\admin\adwaita-icon-theme-3.38.0\Adwaita を開いて、内容をすべて選択してコピーする。
 
"C:\gtk-build\gtk\x64\release\share\icons\Adwaita" というパスができるように、icons、Adwaitaというフォルダを作り、中へ入る。
 
右クリックして貼り付ける。
 
また同様に、"C:\msys64\home\admin\adwaita-icon-theme-3.38.0\win32\index.theme" ファイルも "C:\gtk-build\gtk\x64\release\share\icons\Adwaita"にコピーする。
 

7.hicolorアイコンをダウンロードする

hicolorのアイコンテーマをダウンロードするために下記のページにアクセスする。

 

hicolor-icon-theme-0.17.tar.gzのリンクをクリックしてダウンロードする。

このとき、Google Chromeだと「安全にダウンロードできません」とか言われますが「保存」ボタンを押す。

 

8.hicolorアイコンをmsys環境で作成

ダウンロードしたhicolor-icon-theme-0.17.tar.xzファイルを右クリック→コピー。

 

エクスプローラで msys の homeフォルダ、私の環境だと「C:\msys64\home\admin」を開いて、右クリック→貼り付け。
6.でダウンロードした hicolor-icon-theme-0.17.tar.xz ファイルがコピーされる。

 

msysのコンソールを立ち上げる。

 

msysのコンソール上で 下記のコマンドを実行して展開する。 
$  xz -dc hicolor-icon-theme-0.17.tar.xz | tar xfv -
 
下記のコマンドを順番に実行する
$ cd hicolor-icon-theme-0.17/
$ ./configure --prefix=/home/admin/hicolor-icon-theme-0.17
$ make
$ make install


9. hicolorアイコンをGTKフォルダへコピー

msysコンソールは閉じて、C:\msys64\home\admin\hicolor-icon-theme-0.17\share\icons を開いて、hicolorフォルダをコピーする。
 
"C:\gtk-build\gtk\x64\release\share\icons" に移動後、貼り付け。
 

10. settings.iniファイルの作成

エクスプローラで C:\gtk-build\gtk\x64\release\etc\gtk-3.0 に移動して、settings.iniというテキストファイルを作る。

 

メモ帳でsettings.ini を開いて (右クリックして「編集」でメモ帳で開ける)、下記のように書き込んで保存する。

[Settings]
gtk-theme-name=Windows10
gtk-font-name=Segoe UI 9

 

11. セッティングスキーマをコンパイル

コマンドプロンプトを立ち上げて、下記のコマンドで セッティングスキーマをコンパイルする。

cd C:\gtk-build\gtk\x64\release

glib-compile-schemas share/glib-2.0/schemas

 

お疲れさまでした。下記のGTK公式ページで書かれていることは一通りできたかな。

 

 

 

前回のテストアプリをビルドしなおして、テストしてみましょう。

 

 

Warningはでなくなりました。見た目もちょっと良くなりました。

でも、ウィンドウの最小化ボタンと最大化ボタンがなんかヘンですね。やれやれ。

次回以降、解決を目指したいなと思います。

 

※ 2021年1月9日追記

ブログをハッピーコンピューティングのウェブサイトに統合したので、次回はこちらに書いています

 

 

 
 
 
 
 

 

WindowsのVisual Studio Community 2019 でGTKのビルドができました。

せっかくなので動かしてみたいと思います。

 

gtk本家のトップページにサンプルコードが載っていますが

 

なんの説明もなしにいきなりこれをコピペするといろいろ困難が待ち受けているので

 

いったん下記のTARNYKOさんのページのチュートリアルがおすすめです。

これをやりましょう。

 

(1)サンプルファイルダウンロード

下記赤丸のリンクを右クリック、名前を付けてリンク先を保存してください。

"gtk3test.c" というファイルが保存できるはずです。

 

(2)VisualStudio2019で新しいプロジェクトを作る

VisualStudio2019を立ち上げて「新しいプロジェクトの作成」をクリック。
 
「空のプロジェクト」をクリックして「次へ」
 
プロジェクト名はなんでもいいんですが(1)でダウンロードしてきたファイル名に倣って、「gtk3test」とでもしておきましょう。
プロジェクト名以外はそのままで「作成」ボタンをクリック。
 
無事にプロジェクトができました。
 

(3)ソースコードをプロジェクトへ組み込む

ソリューションエクスプローラの中の「gtk3test」プロジェクトを右クリックし、「エクスプローラーでフォルダを開く」をクリック。
 
開いたフォルダ内に(1)でダウンロードした「gtk3test.c」ファイルを移動する。
 
ソリューションエクスプローラー内の「ソースファイル」フォルダを右クリックし、「追加」→「既存の項目」をクリック。
 
出てきたダイアログで「gtk3test.c」を追加する。
 
無事に追加された「gtk3test.c」をクリックしてソースコードを表示する。
 

(4)プロジェクト設定(インクルードとライブラリとか)

ソリューションエクスプローラの「gtk3test」プロジェクトを右クリックし「プロパティ」をクリック。
 
プロジェクトのプロパティページで、
構成 : すべての構成
プラットフォーム : x64
構成のプロパティ → C/C++ → 全般の中の「追加のインクルードディレクトリ」を編集する。
 
下記行を追加して「OK」をクリック。
先日の記事の通りにGTKをビルドすればこのパスになるはずです。
違うディレクトリでビルドした場合は適宜変えてください。
  • C:\gtk-build\gtk\x64\release\include\pango-1.0
  • C:\gtk-build\gtk\x64\release\include\gtk-3.0
  • C:\gtk-build\gtk\x64\release\lib\glib-2.0\include
  • C:\gtk-build\gtk\x64\release\include\glib-2.0
  • C:\gtk-build\gtk\x64\release\include\gdk-pixbuf-2.0
  • C:\gtk-build\gtk\x64\release\include\cairo
  • C:\gtk-build\gtk\x64\release\include\atk-1.0
  • C:\gtk-build\gtk\x64\release\include\harfbuzz
 
プロジェクトのプロパティページで、
構成のプロパティ → リンカ → 「全般」の中の「追加のライブラリディレクトリ」に「C:\gtk-build\gtk\x64\release\lib;」を書いておく。
先日の記事の通りにGTKをビルドすればこのパスになるはずです。
違うディレクトリでビルドした場合は適宜変えてください。
 
プロジェクトのプロパティページで、
構成のプロパティ → リンカ →「入力」の中の「追加の依存ファイル」を「編集」
 
下記2つを入力してOKをクリック。
  • gobject-2.0.lib
  • gtk-3.0.lib
 
 
プロジェクトのプロパティページで、
構成のプロパティ → C/C++→「コマンドライン」の中の「追加のオプション」欄に「-Dinline=」と書いておく。
TARNYKOさんによると、Visual C++はinlineディレクティブを理解しないからこれを書いておくのだそうです。へー。
 

(5)GTKにパスを通す(環境変数)

Tarnykoさんのチュートリアルによればここで「F5」キーを押してビルド、実行すればいい!ってことになっています。
構成を「Debug」「x64」に設定して、言われた通り「F5」キーを押してください。
 
コンパイルエラーもリンクエラーもありませんが、実行時のエラーになりました。

 
原因はGTKにパスを通していないためです。
Windowsのスタートボタンをクリックして「環境変数」と文字を打ち込めば「システム環境変数の編集」を開くことができます。
 
 
システムのプロパティダイアログで「詳細設定」タブにある「環境変数」ボタンをクリック
 
システム環境変数の「Path」をクリックして編集ボタンを押す。
 
「新規」ボタンを押して「C:\gtk-build\gtk\x64\release\bin」を入力する。
先日の記事の通りにGTKをビルドすればこのパスになるはずです。
違うディレクトリでビルドした場合は適宜変えてください。
このままだと最下行に入りますが、これを選択したまま「上へ」ボタンを連打し、一番上まで持ってきてから「OK」ボタンを押してください。
 
 
この時、一番上まで持ってきていないと、下記のようなエラーが出る場合があるようです。
プロシージャエントリポイント fooがダイナミックリンクライブラリ bar.dllから見つかりませんでしたってなんのこっちゃ?ですが
パスの設定でGTKを最後にしていると、システムにすでにインストールされている別のライブラリがリンクされてしまうために発生するバグのようです。
環境変数PATHにおいて、GTKが最初に(一番上に)くるようにしておけば正しいライブラリをリンクしてくれます。
 

(5)環境変数PATHの適用のためにVisualStudioを立ち上げなおす

PATHを反映させるためにはVisualStudioの再起動が必要です。再起動してまたこのソリューションファイルを開いてください。
 

(6)「F5」キーで実行

F5キーを押してビルド、実行してみてください。
小さなGUIアプリケーションが表示されたでしょうか。
 
見た目があんまりかっこよくないなとか、同時に開いているコンソールウィンドウにWarningが出ているじゃないかとか
ツッコミどころはありますが、次回以降コツコツ解決していきましょう。
ひとまず初めてのGTKアプリケーションの作成が終わりました。
お疲れさまでした。