はじめに

こんにちは。@af-2784です。
入社してから1年半、バッチやAPIなど、Goでバックエンド中心の開発をしてきましたが、
たまにはGUIの開発をしてみたい、オシャンな画面を作ってみたい…！
調べてみたら、GoにはFyneというGUIライブラリがあると知り、今回はこちらを少し触ってみたいと思います。

準備

Fyneをインストールします。

$ go get fyne.io/fyne/v2/app
$ go get fyne.io/fyne/v2/widget
$ go get fyne.io/fyne/v2/container
$ go get fyne.io/fyne/v2/canvas

Hello World

何事もまずはHello Worldから。
hello := widget.NewLabel("Hello World!")のようにウィンドウに表示したいオブジェクトを定義し、SetContentの中に定義したオブジェクトを入れれば、GUIの画面に表示できるようです。

package main

import (
    "fyne.io/fyne/v2/app"
    "fyne.io/fyne/v2/widget"
    "fyne.io/fyne/v2/container"
)

func main() {
    a := app.New()
    w := a.NewWindow("Hello")
    hello := widget.NewLabel("Hello World!")

    w.SetContent(container.NewVBox(
        hello,
    ))
    w.ShowAndRun()
}

これを実行すると、以下のようなウィンドウが表示されました！

ボタンの追加

先ほどのHello Worldの画面にボタンを追加し、ウィンドウの中のテキストを変えてみようと思います。
先ほどのコードに以下を追加します。

widget.NewButton("Button", func() {
	hello.SetText("Merry Christmas!")
}),

全体像

package main

import (
    "fyne.io/fyne/v2/app"
    "fyne.io/fyne/v2/widget"
    "fyne.io/fyne/v2/container"
)

func main() {
    a := app.New()
    w := a.NewWindow("Hello")
    hello := widget.NewLabel("Hello World!")

    w.SetContent(container.NewVBox(
        hello,
        widget.NewButton("Button", func() {
            hello.SetText("Merry Christmas!")
        }),
    ))
    w.ShowAndRun()
}

これを実行すると、ボタンが表示されていますね。

ボタンを押すと、テキストがHello World!からMerry Christmas!に変わりました！

終了ボタンを追加する

一般的なGUIアプリケーションんのように、ウィンドウの左上の閉じるボタンを押せば、ウィンドウを閉じることができますが、Fyneを使って閉じるボタンを自作することも可能です。
先ほどのプログラムに以下を追加します。main関数の最初に定義した変数a := app.New()に対してQuit()を実行することで、アプリケーションを終了することができるようです。

widget.NewButton("Quit", func() {
       a.Quit()
}),

全体像

package main

import (
    "fyne.io/fyne/v2/app"
    "fyne.io/fyne/v2/widget"
    "fyne.io/fyne/v2/container"
)

func main() {
    a := app.New()
    w := a.NewWindow("Hello")
    hello := widget.NewLabel("Hello World!")

    w.SetContent(container.NewVBox(
        hello,
        widget.NewButton("Button", func() {
            hello.SetText("Merry Christmas!")
        }),
        widget.NewButton("Quit", func() {
            a.Quit()
        }),
    ))
    w.ShowAndRun()
}

これを実行すると、ボタンが１つ増えました。新しく追加されたQuitボタンを押したらウィンドウが消えました。

オブジェクトを表示したり消したりする

まずは、以下のような変数を定義します。Hello Worldの時に定義したNewLabel()と似て新たなテキストオブジェクトを定義できますが、canvasを使えば、オブジェクトの色を変えたり、オブジェクトを動かしたり、オブジェクトに対して様々な操作を行うことができます。

text := canvas.NewText("Mele Kalikimaka", color.RGBA{255, 0, 0, 255});

そして、SetContentの中に以下を追加します。Visible()で対象のオブジェクトが現在、画面に表示されているか確認することができます。オブジェクトが表示されている時は、Hide()でオブジェクトを非表示にし、表示されていない時はShow()でオブジェクトを表示します。

text,
widget.NewButton("ON/OFF", func() {
       if text.Visible() {
           text.Hide()
       } else { 
           text.Show()
       }
}),

全体像

package main

import (
    "fyne.io/fyne/v2/app"
    "fyne.io/fyne/v2/widget"
    "fyne.io/fyne/v2/container"
    "fyne.io/fyne/v2/canvas"
    "image/color"
)

func main() {
    a := app.New()
    w := a.NewWindow("Hello")
    hello := widget.NewLabel("Hello World!")
    text := canvas.NewText("Mele Kalikimaka", color.RGBA{255, 0, 0, 255});

    w.SetContent(container.NewVBox(
        hello,
        text,
        widget.NewButton("ON/OFF", func() {
            if text.Visible() {
                text.Hide()
            } else { 
                text.Show()
            }
        }),
        widget.NewButton("Button", func() {
            hello.SetText("Merry Christmas!")
        }),
        widget.NewButton("Quit", func() {
            a.Quit()
        }),
    ))
    w.ShowAndRun()
}

これを実行してみます。

上の状態でON/OFFボタンを押すと、Mele Kalikimakaという文字が消えました。

そして、もう一度ON/OFFボタンを押すと、Mele Kalikimakaが再び表示されました。

まとめ

Fyneを使いこなせれば、ゲームやメモアプリなど、様々なGUIアプリを作れるようです。以下のサイトでは、Fyneを使った様々なアプリが提供されています。
https://apps.fyne.io/all
今回は初歩的な部分しか触れていませんが、また時間があるときにもっとFyneを触ってみたいと思います。