この記事はHRBrain Advent Calendar 2024 7日目の記事です。
はじめに
今年の1月に入社したyakiniku0220です。
早いもので入社してもう少しで1年経ちます。
今回は少し興味があったライブラリのGioを使ってデスクトップGUIを作ってみます。
作ると言っても本格的なものではなくてサンプルを用いてどういったことができるのかを見ていけたらと思います。
Gioとは
GioはGoでクロスプラットフォームのイミディエイトモードGUIを書くためのライブラリです。
デスクトップ（Windows, macOS, Linux）だけでなく、モバイル（iOS, Android）でも動作するアプリケーションを一つのコードベースで開発できるのが特徴です。
Gioのセットアップ
Gioのinstall
まずはGioのinstallを行います。
go install gioui.org/cmd/gogio@latest
次にmain.goファイルです。
今回はGioに書かれているサンプルをそのまま持ってきます。
package main
import (
"image/color"
"log"
"os"
"gioui.org/app"
"gioui.org/op"
"gioui.org/text"
"gioui.org/widget/material"
)
func main() {
go func() {
window := new(app.Window)
err := run(window)
if err != nil {
log.Fatal(err)
}
os.Exit(0)
}()
app.Main()
}
func run(window *app.Window) error {
theme := material.NewTheme()
var ops op.Ops
for {
switch e := window.Event().(type) {
case app.DestroyEvent:
return e.Err
case app.FrameEvent:
gtx := app.NewContext(&ops, e)
title := material.H1(theme, "Hello, Gio")
maroon := color.NRGBA{R: 127, G: 0, B: 0, A: 255}
title.Color = maroon
title.Alignment = text.Middle
title.Layout(gtx)
e.Frame(gtx.Ops)
}
}
}
最後に依存関係の更新をします。
go mod tidy
起動させる
先ほど作ったmain.goファイルを実行してみます。
go run .
するとこのように起動します。
サンプルコードでどのような処理が行われてGUIが起動していくか見ていきます。
func main() {
go func() {
window := new(app.Window)
err := run(window)
if err != nil {
log.Fatal(err)
}
os.Exit(0)
}()
app.Main()
}
この部分では、main関数はアプリケーションループを起動してOSとやり取りし、ウィンドウの動作を別のゴルーチンで開始しています。
theme := material.NewTheme()
次の処理ではテーマを使ってウィンドウ内のUIを設定しています。
for {
switch e := window.Event().(type) {
case app.DestroyEvent:
return e.Err
case app.FrameEvent:
...
app.DestroyEventはユーザーが閉じるボタンを押した時に処理されるコードになっており、app.FrameEventはプログラムが入力を処理し、新しいフレームをレンダリングする処理になっています。このようにして、各イベントに応じた処理を行うことで、アプリケーションの動作を制御します。
// このグラフィックスコンテキストはレンダリング状態を管理するために使用されます。
gtx := app.NewContext(&ops, e)
// 適切なテキストで大きなラベルを定義します。
title := material.H1(theme, "Hello, Gio")
// ラベルの色を変更します。
maroon := color.NRGBA{R: 127, G: 0, B: 0, A: 255}
title.Color = maroon
// ラベルの位置を変更します。
title.Alignment = text.Middle
// ラベルをグラフィックスコンテキストに描画します。
title.Layout(gtx)
// 描画操作をGPUに渡します。
e.Frame(gtx.Ops)
最後にGUI上に表示するtextの処理です。
サンプルではtextですが、他にもinputだったりbuttonなどの描画も可能です。
まとめ
初めてGioを触ってみましたがドキュメントが丁寧に書かれているのでGo歴が浅い私でも簡単に扱えました。
Gioを使って作られたGUIがドキュメント内にあったりするので、それを参考に自分が作りたいGUIを作ってみるのは良さそうです。
https://gioui.org/doc/showcase
最後に
株式会社HRBrainでは新しいメンバーを募集中です。
興味がある方は下記のリンクから宜しくお願い致します。