Go言語/gotronで付箋紙みたいなタイトルバーなし＆ドラッグ移動するフォームを作ってみた

2021/03/01

Go言語でElectronを利用するためのAPI 「gotron」を使ってタイトルバーなしタスクバー非表示でどこでもドラッグできる付箋紙のようなものを作ってみました。動きは以下の動画をご覧ください。

外観はこんな感じです。タイトルバーがないので終了ボタンを設置しておきました。

HTML側のソースはこちら。ドラッグを有効にするためにbodyタグのスタイルに-webkit-app-region:dragを加えています。また、それだとボタンが押せなくなってしまうのでbuttonタグのスタイルに-webkit-app-region: no-dragを設定しています。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Sticky Note</title>
</head>
<body style="-webkit-app-region:drag; background-color:antiquewhite;">
    <h1>Sticky Note</h1>
    <button style="-webkit-app-region: no-drag" onclick="window.close();">終了</button>
    <script>
    </script>
</body>
</html>

Go言語側のソースコードはこちら。ソースコード内のコメント参照。

package main

import (
    "github.com/Equanox/gotron"
)

func main() {
    window, err := gotron.New("apps")
    if err != nil {
        panic(err)
    }
    
    window.WindowOptions.Width = 400
    window.WindowOptions.Height = 150
    window.WindowOptions.Title = "Gotron"
    //メニューバーを隠す
    window.WindowOptions.AutoHideMenuBar = true
    //タスクバー非表示
    window.WindowOptions.SkipTaskbar = true
    //ウィンドウのフレーム（タイトルバー含む）を非表示
    window.WindowOptions.Frame = false

    done, err := window.Start()
    if err != nil {
        panic(err)
    }

    <-done
}

- Electron, Go言語