LoginSignup
2
1

WindowsデスクトップアプリをGoで作成する① ~WSL+Docker+Wails~

Last updated at Posted at 2023-12-21

はじめに

この記事は「Qiita Advent Calendar 2023 Go言語」の22日目の記事です。

ゴール

Windows11上に構築したWSLでGoデスクトップアプリケーションを構築し、開発モードでアプリを起動できるところまでを目指します

前提

前記事 に基づいて、Windows上にWSL+Docker+VSCode の開発環境が出来ているものとします

公式手順

Wails: Getting Started

全体の流れ

  1. VSCodeで開発コンテナーを開く
  2. npmのインストール
  3. ブラウザを開くためのライブラリインストール
  4. Wails のインストール
  5. 実行中のコンテナーにアタッチする
  6. Wails プロジェクトの実行

VSCodeで開発コンテナーを開く

image.png

npmのインストール

  1. cURL(CLIダウンロードツール) をインストールする
sudo apt-get install curl

image.png

  1. nvm(Node.jsバージョン管理ツール) をインストールする
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash

image.png

  1. ターミナルを立ち上げ直し、nvm コマンドを実行してみる
nvm --version

image.png

  1. 安定バージョンのNode.js をインストールする
nvm install --lts

image.png

  1. Node.js と npm のインストールを確認する
node --version
npm --version

image.png

ブラウザを開くためのライブラリインストール

sudo apt install xdg-utils

image.png

Wails のインストール

  1. 依存ライブラリをインストールする
sudo apt update -y
sudo apt install libgtk-3-dev libwebkit2gtk-4.0-dev

image.png

image.png

  1. 新しいターミナルを立ち上げる

  2. Wails CLI をインストールする

go install github.com/wailsapp/wails/v2/cmd/wails@latest

(キャプチャ忘れ)

  1. Wails のシステムチェックを行う
wails doctor

image.png

実行中のコンテナーにアタッチする

  1. コンテナーアイコン(><)から「実行中のコンテナーにアタッチ…」を選択

image.png

  1. コンテナーを選択する

image.png

image.png

Wails プロジェクトの実行

  1. お好みのフレームワークで初期化
wails init -n hello_wails -t vue-ts

image.png

  1. go.mod 内のモジュール名 (デフォルト:changeme) を任意のモジュール名に修正する

image.png

  1. プロジェクトのディレクトリに入って、アプリをライブ開発モードで実行する
cd hello_wails
wails dev -assetdir ./frontend/dist -wailsjsdir ./frontend/src

image.png

image.png

おわりに

本当はexe作成まで行きたかったんですけど、権限周りで苦戦中ですw
また記事を上げられるよう頑張ります~

Merry Christmas & Happy New Year !!!

参考URL

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1