いろいろ備忘録日記

主に .NET とか Go とか Python絡みのメモを公開しています。

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

概要

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

www.gitpod.io

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

利用するのは

github.com

github.com

の2つで試してみました。どちらのライブラリもクロスプラットフォームな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-devxorg-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

確認!

起動するには

$ make run

とします。実際には 上の .gitpod.ymlにて make runするように設定しているので、Gitpodが表示された段階でアプリは起動しています。

下の Open Ports のタブには以下のように表示されているはずです。

f:id:gsf_zero1:20201227003754p:plain

6080の方の Open Browser ボタンを押すと別タブでVNCに接続され、GUIが表示されます。

f:id:gsf_zero1:20201227004010p:plain

ブラウザだけで、コードもかけてコンパイルも出来て、GUIアプリの確認もできるなんて便利な時代になりましたねー。

今回作ったサンプルリポジトリ

今回試したサンプル、勿体ないので Github にアップしました。どんな感じなのかお試しされたい方はどうぞー。

github.com

参考情報

Developing native UI applications in Gitpod

https://hub.docker.com/r/gitpod/workspace-full-vnc/dockerfile

Develop Cypress end-to-end tests on Gitpod.io - Virtual Desktop included

noVNC


過去の記事については、以下のページからご参照下さい。

  • いろいろ備忘録日記まとめ

devlights.github.io

サンプルコードは、以下の場所で公開しています。

  • いろいろ備忘録日記サンプルソース置き場

github.com

github.com

github.com