Gitpod で GUI アプリを動作 (gitpod-full-vnc)

概要
Dockerfileを用意 (.gitpod.Dockerfile)
gitpod.yml を用意
サンプルアプリを用意
Makefileを用意
確認！
今回作ったサンプルリポジトリ
参考情報

概要

Gitpod で VNC を使って、GUIアプリを動作できるとのことなので、試してみました。

www.gitpod.io

今回は、GoでGUIアプリを作って表示してみます。

利用するのは

github.com

の２つで試してみました。どちらのライブラリもクロスプラットフォームなUIライブラリなので便利です。

Dockerfileを用意 (.gitpod.Dockerfile)

利用する Dockerfile は、gitpod-full-vnc を使います。

以下のような形で .gitpod.Dockerfile を用意。

FROM gitpod/workspace-full-vnc

USER gitpod

# Install custom tools, runtime, etc. using apt-get
# For example, the command below would install "bastet" - a command line tetris clone:
#
# RUN sudo apt-get -q update && \
#     sudo apt-get install -yq bastet && \
#     sudo rm -rf /var/lib/apt/lists/*
#
# More information: https://www.gitpod.io/docs/config-docker/
#
# ---------------------------------------------------------------------
# libgtk-3-dev             : for https://github.com/andlabs/ui
# libgl1-mesa-dev, xorg-dev: for https://github.com/fyne-io/fyne
# ---------------------------------------------------------------------
RUN sudo apt-get update && \
    sudo apt-get install -y libgtk-3-dev && \ 
    sudo apt-get install -y libgl1-mesa-dev xorg-dev && \
    sudo rm -rf /var/lib/apt/lists/*

github.com/andlabs/ui を linux で動作させるには、libgtk-3-dev が

fyne.io/fyne を linux で動作させるには、 libgl1-mesa-devとxorg-dev が必要となるので、インストールするようにしています。

gitpod.yml を用意

あとは、Gitpodの設定ファイル .gitpod.yml を以下のようにして用意。

image:
  file: .gitpod.Dockerfile
ports:
  - port: 6080
tasks:
  - init: make init
    command: make run

ports のところで、VNCでアクセスするためのポートを設定します。デフォルトは 6080 となっています。

サンプルアプリを用意

libui と fyne を利用したサンプルアプリを用意しました。

package main

import (
    "os"

    "github.com/andlabs/ui"
)

func main() {
    os.Exit(run())
}

func run() int {
    setupUI()
    return 0
}

func setupUI() {
    err := ui.Main(func() {
        label := ui.NewLabel("hello world")
        button := ui.NewButton("quit")

        box := ui.NewVerticalBox()
        box.Append(label, false)
        box.Append(button, false)

        window := ui.NewWindow("Hello libui", 200, 100, false)
        window.SetMargined(true)
        window.SetChild(box)

        button.OnClicked(func(*ui.Button) {
            ui.Quit()
        })

        window.OnClosing(func(*ui.Window) bool {
            ui.Quit()
            return true
        })

        window.Show()
    })

    if err != nil {
        panic(err)
    }
}

package main

import (
    "os"

    "fyne.io/fyne"
    "fyne.io/fyne/app"
    "fyne.io/fyne/widget"
)

func main() {
    os.Exit(run())
}

func run() int {
    setupUI()
    return 0
}

func setupUI() {
    a := app.New()

    w := a.NewWindow("Hello Fyne")
    w.Resize(fyne.NewSize(200, 100))
    w.SetContent(widget.NewVBox(
        widget.NewLabel("hello world"),
        widget.NewButton("quit", func() {
            w.Close()
        }),
    ))

    w.ShowAndRun()
}

Makefileを用意

コマンドを毎回打つのが面倒なので、Makefileを用意。

init:
  go get -v ./...

clean:
  rm -rf ./bin

prepare:
  mkdir -p bin

build: prepare
  go build -o ./bin/fyneapp ./cmd/fyneapp
  go build -o ./bin/uiapp ./cmd/uiapp

run: build
  ./bin/fyneapp &
  echo "$!" > ./bin/fyneapp.pid
  ./bin/uiapp &
  echo "$!" > ./bin/uiapp.pid