WailsとAngularでのデスクトップアプリの作り方
はじめに
今回はWailsというGo製のWeb技術でデスクトップアプリを作れるフレームワークを使ってAngularアプリをデスクトップアプリ化する手順を示します。
各フレームワークの公式サイトは以下の通りです。
Wailsとは
Wailsは、Go言語で軽量かつ高速なデスクトップアプリケーションを開発できるフレームワークです。Web開発の知識を活かしつつ、高効率なアプリ開発が可能です。
以下のような特徴があります。[1]
- ネイティブなメニュー、ダイアログ、テーマ、透過処理を使用可能です
- Windows、macOS、Linuxをサポートしています
- Svelte、React、Preact、Vue、Lit、バニラJS向けにビルトインテンプレートを用意しています
- GoメソッドをJavaScriptから簡単に呼び出せます
- Go構造体に対応するTypeScript型定義を自動生成します
- WindowsにおいてCGOや外部DLLは必要ありません
- Viteの力を利用したライブ開発が可能です
- アプリケーションを簡単に作成、ビルド、パッケージングするための強力なCLIを備えています
- 豊富なランタイムライブラリを用意しています
- Wailsで構築されたアプリケーションは、Apple StoreおよびMicrosoft Storeに準拠しています
Angularとは
Angularは、Googleが開発したオープンソースのフロントエンドフレームワークで、大規模なWebアプリケーションの開発に特化しています。高機能なエコシステムを活用することで、効率的なアプリケーション開発が可能です。
以下のような特徴があります。
- TypeScriptベースであり、型安全性やコードの保守性が向上します
- コンポーネント指向であり、UIを再利用可能な部品として構築できます
- 双方向データバインディングの仕組みにより、データとUIの同期を自動でおこなってくれます
- 豊富なツール群があり、ルーティング、フォーム管理、HTTP通信などが標準で用意されています
- 依存性注入 (Dependency Injection) によりコードのモジュール化とテストがかんたんです
- リアクティブプログラミングを標準対応しており、RxJSを使用し、非同期処理を簡潔に記述できます
- Angular CLIにより、プロジェクトの生成やビルド、テストを簡単に実行できます
作ったアプリ
以下にてソースコードを公開しています。
以下がアプリの画面になります。
簡単なカウンターアプリを作りました。このように、AngularアプリをWailsでデスクトップアプリケーションとして実装する方法を次の章で紹介します。
作成手順
基本的なAngularやWailsの使い方は公式サイトを読んでいる前提とします。
まず、任意のフォルダーでWailsプロジェクトを起こします。
wails init
そしたら、frontendフォルダーの中身を全部消してしまいます。中にgoの関数のjsバインド関数も入ってますが、ビルドすると勝手に生成されます。
rm -rf frontend/*
削除したらfrontendフォルダーの中でAngularアプリを初期化します。この際に、git管理はしないようにオプションをつけます。
cd frontend
ng new wails-angular-app --skip-git
初期化後、フォルダーの階層を元の状態に合わせます。その後、空フォルダーを削除します。
mv wails-angular-app/* .
rm wails-angular-app
angular.jsonの設定を frontend/dist のパスになるように修正します。
修正箇所は projects:{アプリ名}:architect:build:options:outputPath です。
この後任意のAngularアプリを開発してください。私はカウンターアプリが簡単なのでそれを作りました。
最後にAngularアプリをビルドしておきます。
ng build
distフォルダーにアプリのコードが配置されたらルートディレクトリへ戻り、アプリを起動してみます。
wails dev
アプリが起動すれば成功です。
まとめ
今回はWailsでAngularアプリをデスクトップアプリ化してみました。WailsがデフォルトでAngularをサポートしてくれればいいんですが、その間はこのような手順が必要になります。今後、サポートされることが一番嬉しいですね。
私はこの組み合わせで社内の便利ツールを作ってみようかと思います。
それでは。
Discussion