GitHub - wailsapp/wails: Create beautiful applications using Go
goのtauri的なデスクトップアプリケーションフレームワーク。
WebViewを使用するところも同じ。
今のところモバイル対応はして無さそう。
CLI | Wails
モバイル対応しているフレームワークにはfyneというのがある。
こちらはWebViewではなくGLFWというOpenGL上で動かすフレームワークを使っているらしい。
ただしUIはfyneの物を使うことになる。マテリアルデザインを参考にしているらしく、そこそこリッチではある。
GoでクロスプラットフォームGUI(2022)
GitHub - fyne-io/fyne: Cross platform GUI toolkit in Go inspired by Material Design
全部GoがいいならGioというのも。TailScaleに使われた実績が強すぎる。
ソースがGitHub管理ではなさそう。即時モードっぽい。
Gio UI
Medium
デバッグ
バックエンドは適当にlaunch属性で仕掛ければ動く。ただしビルドにタグを付けないと怒られるのでbuildFlagsを忘れずに。
{
"name": "Go Backend Only",
"type": "go",
"request": "launch",
"mode": "auto",
"program": "${workspaceFolder}",
"env": {},
"console": "integratedTerminal",
"buildFlags": "-tags=dev"
},フロントエンドはバックエンドを起動→デバッグモードでchrome起動→chromeに対してattachという流れ。なので三つプロセスを動かす。
edgeではなんかポートが見つからなくて動かなかった。
{
"name": "Launch Browser",
"type": "chrome",
"request": "launch",
"url": "http://localhost:34115",
"runtimeArgs": [
"--remote-debugging-port=5173",
],
"runtimeExecutable": "D:\\Scoop\\shims\\chrome.exe"
},
{
"name": "attach to chrome",
"type": "chrome",
"request": "attach",
"port": 5173,
"webRoot": "${workspaceFolder}/frontend",
"sourceMaps": true,
}scoopで入れたchromeだとruntimeを見つけてくれないのでruntimeExecutableもいる。
portの5173はwailsがなんかこれにしてたから。urlのポートは何でもいい。
Wails を始めてみた - Qiita
ChatGPT - Wails エラー対策
How to debug frontend through vite on vscode · wailsapp/wails · Discussion #2877
goが無いとtype goがセットできない。
typescriptがある場合はソースマップの専用設定がないとブレークポイントが付かない。
VSCodeでTypeScriptファイルをデバッグする方法（esbuildを使用） - Qiita
フロントエンドとバックエンドは結局同時にデバッグできない？
Option.App
wails.Runに渡してるのはoption.App構造体。
ゲームで言ういわゆる設定項目。
オプション | Wails
svelte
<script>
import logo from './assets/images/logo-universal.png'
import {Greet} from '../wailsjs/go/main/App.js'
let resultText = "Please enter your name below 👇"
let name
function greet() {
Greet(name).then(result => resultText = result)
}
</script>
<main>
<img alt="Wails logo" id="logo" src="{logo}">
<div class="result" id="result">{resultText}</div>
<div class="input-box" id="input">
<input autocomplete="off" bind:value={name} class="input" id="name" type="text"/>
<button class="btn" on:click={greet}>Greet</button>
</div>
</main>
<style>
#logo {
display: block;
width: 50%;
height: 50%;
margin: auto;
padding: 10% 0 0;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
background-origin: content-box;
}
.result {
height: 20px;
line-height: 20px;
margin: 1.5rem auto;
}
.input-box .btn {
width: 60px;
height: 30px;
line-height: 30px;
border-radius: 3px;
border: none;
margin: 0 0 0 20px;
padding: 0 8px;
cursor: pointer;
}
.input-box .btn:hover {
background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
color: #333333;
}
.input-box .input {
border: none;
border-radius: 3px;
outline: none;
height: 30px;
line-height: 30px;
padding: 0 10px;
background-color: rgba(240, 240, 240, 1);
-webkit-font-smoothing: antialiased;
}
.input-box .input:hover {
border: none;
background-color: rgba(255, 255, 255, 1);
}
.input-box .input:focus {
border: none;
background-color: rgba(255, 255, 255, 1);
}
</style>
マルチウィンドウ
wails2.xでは対応していない。3からは対応。