GoSuda

GoにおけるTkを用いたGUI構築

By Yunjin Lee
views ...

PythonにはTkinterのようなGUIライブラリが標準で組み込まれています。最近ではGo言語でもTcl/Tkを利用できるように、CGo-Free, Cross Platform Tkライブラリが開発されました。本日はその基礎的な使用法を確認します。

Hello, Tkの作成

まず、簡単な「Hello, TK!」の例から始めます。

 1package main
 2
 3import tk "modernc.org/tk9.0"
 4
 5func main() {
 6    tk.Pack(
 7        tk.TButton(
 8            tk.Txt("Hello, TK!"), // ボタンのテキストを設定
 9            tk.Command(func() {   // ボタンが押されたときに実行されるコマンドを設定
10                tk.Destroy(tk.App) // アプリケーションを終了
11            })),
12        tk.Ipadx(10), tk.Ipady(5), tk.Padx(15), tk.Pady(10),
13    )
14    tk.App.Wait() // アプリケーションのイベントループを開始し、終了するまで待機
15}

hello-tk 実行結果


上記のサンプルコードと実行結果を詳細に確認します。

PythonのTkを使用した経験がある方であれば、ウィンドウ内にウィジェットがパッキングされる構造、あるいはウィンドウの下に直接ウィジェットがパッキングされる構造を理解されているでしょう。ウィジェットの種類に応じて、ラベルなどがその中に含まれます。

IpadxとIpadyはInternal paddingの略で、内部ウィジェットの余白を調整します。この例ではボタンの余白が調整されます。

このライブラリにはWindow構造体があり、Appという変数が最上位ウィンドウを管理します。これはライブラリ内部で事前に定義されています。したがって、tk.App.Wait()を終了するtk.App.Destroy()関数が最上位ウィンドウを閉じる役割を果たします。

次に、GitLabの_examplesフォルダーにあるいくつかの例を確認します。

SVGファイルの処理

以下は、SVGファイルをラベルウィジェットに表示する例です。

 1package main
 2
 3import . "modernc.org/tk9.0"
 4
 5// https://en.wikipedia.org/wiki/SVG
 6const svg = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 7<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 8<svg width="391" height="391" viewBox="-70.5 -70.5 391 391" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 9<rect fill="#fff" stroke="#000" x="-70" y="-70" width="390" height="390"/>
10<g opacity="0.8">
11    <rect x="25" y="25" width="200" height="200" fill="lime" stroke-width="4" stroke="pink" />
12    <circle cx="125" cy="125" r="75" fill="orange" />
13    <polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" />
14    <line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />
15</g>
16</svg>`
17
18func main() {
19    Pack(Label(Image(NewPhoto(Data(svg)))),
20        TExit(),
21        Padx("1m"), Pady("2m"), Ipadx("1m"), Ipady("1m"))
22    App.Center().Wait()
23}

go-tk-svg 実行結果

このライブラリにおけるSVGの処理方法は以下の通りです。

  1. SVGファイルの内容を文字列として読み込みます(または上記の例のように直接含めます)。
  2. この内容をData関数に渡し、オプションを含む文字列に変換します(-dataオプション)。
  3. 変換されたバイト値はNewPhoto関数に渡され、Tcl/Tkイメージを表すImg構造体ポインタを返します。
  4. Image関数を通過する際に、Img構造体ポインタは-Imageオプションが追加された文字列に変換されます。
  5. 構造体RAW値を格納した文字列に変換する理由は、Labelウィジェットの生成のためです。

ICOおよびPNGファイルも同様の方式で処理されます。

PNGファイルの処理

 1package main
 2
 3import _ "embed"
 4import . "modernc.org/tk9.0"
 5
 6//go:embed gopher.png
 7var gopher []byte
 8
 9func main() {
10    Pack(Label(Image(NewPhoto(Data(gopher)))),
11        TExit(),
12        Padx("1m"), Pady("2m"), Ipadx("1m"), Ipady("1m"))
13    App.Center().Wait()
14}

go-tk-png 実行結果

PNGファイルの処理過程は以下の通りです。

  1. 埋め込まれたgopher.pngをオプションを含む文字列型に変換します。
  2. NewPhoto関数を通じて*Img型に変換します。
  3. Image関数を経てRAW文字列に変換された後、ラベルウィジェットとして生成されます。

ICOファイルも同様の方式で処理され、SVGフォーマットとの違いはData関数内部の処理方式のみです。

ここで、「オプションを含む文字列」の正体を確認します。

1type rawOption string

前述のオプションを含む文字列は、単にフォーマットされた文字列に過ぎません。

1func (w *Window) optionString(_ *Window) string {
2    return w.String()
3}

optionStringメソッドはWindowポインタに対するメソッドであり、文字列を返します。

最後に、Data関数の内部構造を簡単に確認します。

 1func Data(val any) Opt {
 2    switch x := val.(type) {
 3    case []byte:
 4        switch {
 5        case bytes.HasPrefix(x, pngSig):
 6            // ok
 7        case bytes.HasPrefix(x, icoSig):
 8            b := bytes.NewBuffer(x)
 9            img, err := ico.Decode(bytes.NewReader(x))
10            if err != nil {
11                fail(err)
12                return rawOption("")
13            }
14
15            b.Reset()
16            if err := png.Encode(b, img); err != nil {
17                fail(err)
18                return rawOption("")
19            }
20
21            val = b.Bytes()
22        }
23    }
24    return rawOption(fmt.Sprintf(`-data %s`, optionString(val)))
25}

コードを見ると、ICOやPNGファイルの場合、エンコーディング/デコーディングの過程が必要です。それ以外の場合、特別な変換なしにバイト型に変換された文字列に-dataオプションのみを追加し、Data関数の結果であることを示します。

メニューウィジェットによる画像の読み込み

先ほど練習したPNG、ICOの読み込み例にメニューウィジェットを追加すると、必要な画像を表示するアプリケーションを作成できます。

まず、簡単なメニューウィジェットの例を確認します。

 1package main
 2
 3import (
 4    "fmt"
 5    . "modernc.org/tk9.0"
 6    "runtime"
 7)
 8
 9func main() {
10    menubar := Menu() // メニューバーを作成
11
12    fileMenu := menubar.Menu() // ファイルメニューを作成
13    fileMenu.AddCommand(Lbl("New"), Underline(0), Accelerator("Ctrl+N")) // 「New」コマンドを追加
14    fileMenu.AddCommand(Lbl("Open..."), Underline(0), Accelerator("Ctrl+O"), Command(func() { GetOpenFile() })) // 「Open...」コマンドを追加し、ファイル選択ダイアログを表示する関数を呼び出す
15    Bind(App, "<Control-o>", Command(func() { fileMenu.Invoke(1) })) // Ctrl+Oで「Open...」コマンドをトリガー
16    fileMenu.AddCommand(Lbl("Save As..."), Underline(5)) // 「Save As...」コマンドを追加
17    fileMenu.AddSeparator() // 区切り線を追加
18    fileMenu.AddCommand(Lbl("Exit"), Underline(1), Accelerator("Ctrl+Q"), ExitHandler()) // 「Exit」コマンドを追加し、アプリケーションを終了するハンドラを設定
19    Bind(App, "<Control-q>", Command(func() { fileMenu.Invoke(4) })) // Ctrl+Qで「Exit」コマンドをトリガー
20    menubar.AddCascade(Lbl("File"), Underline(0), Mnu(fileMenu)) // メニューバーに「File」カスケードメニューを追加
21
22    App.WmTitle(fmt.Sprintf("%s on %s", App.WmTitle(""), runtime.GOOS)) // ウィンドウタイトルを設定
23    App.Configure(Mnu(menubar), Width("8c"), Height("6c")).Wait() // アプリケーションの設定を行い、イベントループを開始
24}

go-tk-メニューバー-実行結果

この例では、メニューバーとメニューの作成、文字の強調表示、Commandオプション、ショートカットキーのバインディング、そしてアプリケーションウィンドウの初期サイズ設定を行いました。

次に、GetOpenFileで指定されたCommand関数を修正し、画像を読み込んで表示するプログラムを作成します。

プログラム作成の計画は以下の通りです。

  1. PNGとICOファイルのみを開けるように制限
  2. ファイルダイアログで選択したファイルを処理
  3. 画像表示のためのウィジェット実装

以下は、これらの計画を反映したコードです。

 1package main
 2
 3import (
 4    "fmt"
 5    "log"
 6    "os"
 7    "runtime"
 8    "strings"
 9
10    . "modernc.org/tk9.0"
11)
12
13func handleFileOpen() {
14    s := GetOpenFile() // ファイル選択ダイアログを開き、選択されたファイルのパスを取得
15    for _, photo := range s { // 選択された各ファイルについてループ
16        formatCheck := strings.Split(photo, ".") // ファイル名を'.'で分割して拡張子を取得
17        format := formatCheck[len(formatCheck)-1] // 最後の要素が拡張子
18
19        if (strings.Compare(format, "png") == 0) || (strings.Compare(format, "ico") == 0) { // 拡張子がpngまたはicoの場合
20            picFile, err := os.Open(photo) // ファイルを開く
21            if err != nil {
22                log.Println("Error while opening photo, error is: ", err) // エラーログを出力
23            }
24
25            pictureRawData := make([]byte, 10000*10000) // 画像データを格納するバイトスライスを確保
26            picFile.Read(pictureRawData) // ファイルからデータを読み込む
27
28            imageLabel := Label(Image(NewPhoto(Data(pictureRawData)))) // 画像データからラベルウィジェットを作成
29            Pack(imageLabel, // ラベルウィジェットをパック
30                TExit(),
31                Padx("1m"), Pady("2m"), Ipadx("1m"), Ipady("1m"))
32        }
33        picFile.Close() // ファイルを閉じる
34    }
35}
36
37func main() {
38    menubar := Menu() // メニューバーを作成
39
40    fileMenu := menubar.Menu() // ファイルメニューを作成
41    fileMenu.AddCommand(Lbl("Open..."), Underline(0), Accelerator("Ctrl+O"), Command(handleFileOpen)) // 「Open...」コマンドを追加し、handleFileOpen関数を呼び出す
42    Bind(App, "<Control-o>", Command(func() { fileMenu.Invoke(0) })) // Ctrl+Oでファイルメニューの最初のコマンド(Open...)をトリガー
43    fileMenu.AddCommand(Lbl("Exit"), Underline(1), Accelerator("Ctrl+Q"), ExitHandler()) // 「Exit」コマンドを追加し、アプリケーションを終了するハンドラを設定
44    Bind(App, "<Control-q>", Command(func() { fileMenu.Invoke(1) })) // Ctrl+Qでファイルメニューの2番目のコマンド(Exit)をトリガー
45    menubar.AddCascade(Lbl("File"), Underline(0), Mnu(fileMenu)) // メニューバーに「File」カスケードメニューを追加
46
47    App.WmTitle(fmt.Sprintf("%s on %s", App.WmTitle(""), runtime.GOOS)) // ウィンドウタイトルを設定
48    App.Configure(Mnu(menubar), Width("10c"), Height("10c")).Wait() // アプリケーションの設定を行い、イベントループを開始
49}

go-tk-画像-読み込み-実行結果

上記のコードは以下の方式で動作します。

  1. stringsパッケージの文字列比較関数でファイル拡張子を確認します。
  2. osパッケージを使用してファイルを開き、読み込んだ後に閉じます。
  3. 読み込まれた画像はラベルウィジェットとして表示されます。

まとめ

本稿では、Go言語のTcl/Tkライブラリを活用し、以下の内容を取り上げました。

  1. GUIアプリケーションの基本構造
  2. SVG、PNG、ICOなど多様な画像フォーマットの処理
  3. ウィジェットのパッキングとレイアウト管理
  4. 画像データ処理の構造
  5. ショートカットキーのバインディングとウィジェットコマンド

Go言語とTcl/Tkを組み合わせることで、シンプルかつ実用的なGUIプログラムを作成できます。これを基に、より複雑なGUIアプリケーションの開発に挑戦されることを推奨します。