4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

オークファングループAdvent Calendar 2021

Day 13

Go Fyneで遊んでみた

Last updated at Posted at 2021-12-12

はじめに

こんにちは。@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()
}

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

スクリーンショット 2021-12-08 19.33.12.png

ボタンの追加

先ほどの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()
}

これを実行すると、ボタンが表示されていますね。
スクリーンショット 2021-12-08 19.34.07.png

ボタンを押すと、テキストがHello World!からMerry Christmas!に変わりました!
スクリーンショット 2021-12-08 19.34.52.png

終了ボタンを追加する

一般的な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()
}

これを実行すると、ボタンが1つ増えました。新しく追加されたQuitボタンを押したらウィンドウが消えました。
スクリーンショット 2021-12-08 19.43.53.png

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

まずは、以下のような変数を定義します。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()
}

これを実行してみます。
スクリーンショット 2021-12-08 20.13.21.png

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

スクリーンショット 2021-12-08 20.14.40.png

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

スクリーンショット 2021-12-08 20.13.21.png

まとめ

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

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?