JavaScriptでデスクトップアプリを開発できるGluonを試す
こんにちは、ナカエです。
寒い日が続き、京都も10年に一度レベルの雪に見舞われておりました。京都市の北側はそうでもないかもしれませんが、3日以上連続で雪が降っているのはほとんど記憶にないですね。
さて、本日の記事は、JavaScriptを用いてデスクトップアプリを開発できる Gluon の紹介です。
Web技術を用いたデスクトップGUIアプリケーション開発の分野において、一番有名かつシェアが高いのは Electron で、最近はより軽量な Tauri がバージョン1に到達して注目を集めているといったところでしょうか。
これらに対しGluonは内蔵のブラウザやWebViewを利用せず、システムにインストールされたブラウザを利用するという特徴をアピールしています。
Gluonの命名はElectronへの対抗やブラウザとNode.jsアプリの糊付けという点を意識したせいかどうかはわかりませんが、物理のハドロン（ex. 陽子や中性子）内の粒子から取ったと思われます。
グルーオン - Wikipediaグルーオン（英: gluon）とは、ハドロン内部で強い相互作用を伝える、スピン1のボース粒子である
競合との比較
GluonのGitHubのリポジトリ に競合との比較表が記載されています。
内部で使われるソフトウェア・技術
GluonはIPC(プロセス間通信)を用いてフロントエンドのブラウザとバックエンドのNode.jsアプリの間でやりとりするシンプルなアーキテクチャになっています。
フロントエンドのブラウザも、バックエンドで動くアプリも双方がシステムにインストールされているものを使っているのが特徴です。
| Part | Gluon | Electron | Tauri | Neutralinojs |
|---|---|---|---|---|
| Frontend | System installed Chromium or Firefox | Self-contained Chromium | System installed webview | System installed webview |
| Backend | System installed or bundled Node.JS | Self-contained Node.JS | Native (Rust) | Native (Any) |
| IPC | Window object | Preload | Window object | Window object |
| Status | Early in development | Production ready | Usable | Usable |
| Ecosystem | Integrated | Distributed | Integrated | Integrated |
https://github.com/gluon-framework/gluon より引用
ベンチマーク/統計情報
ビルドサイズはChromium内蔵のElectronと比較するとそれなりの差がありますが、TauriやNeutralinojsと比べるとストレージが安い時代においてこれを利点とアピールするのは苦しい感じがあります。
ブラウザ側の利用メモリはどれもさほど差はなく、バックエンドのアプリはネイティブアプリであるTauriやNeutralinojsほど使用量が少なくないのは予想通りですね。
ビルドタイムとありますが、Gluonは現在のところビルドのプロセスがない（強いて言えばnpm installくらい）のでNodeのスピンアップタイムを指しているようです。
| Stat | Gluon | Electron | Tauri | Neutralinojs |
|---|---|---|---|---|
| Build Size | <1MB | ~220MB | ~1.8MB | ~2.6MB |
| Memory Usage | ~80MB | ~100MB | ~90MB | ~90MB |
| Backend Memory Usage | ~13MB (Node) | ~22MB (Node) | ~3MB (Native) | ~3MB (Native) |
| Build Time | ~0.7s | ~20s | ~120s | ~2s |
同じく https://github.com/gluon-framework/gluon より引用
注）
- CluonのブラウザはChromeを利用
- Windows 10のマシンの上で、2022/12/09時点での最新版を使って計測したとのこと
対応ブラウザ
A Chromium or Firefox based browser installed (Chrome, Firefox, Edge, etc)
とあり詳細がわからなかったため、Gluonでウィンドウを開く際のオプションの一つであるforceBrowser の型を確認しました。現時点ではSafariには対応していないようですね。
type Browser =
'chrome'|'chrome_beta'|'chrome_dev'|'chrome_canary'|
'chromium'|'chromium_snapshot'|
'edge'|'edge_beta'|'edge_dev'|'edge_canary'|
'firefox'|'firefox_nightly'|
'thorium'|
'librewolf';
Node.jsのバージョン
バックエンドアプリもバンドルされたNode.jsではなく、OSにインストールされているNode.jsを使います。
Node.js – 16.x or newer
とあり、Node.js 16以上に対応しているようです。
また、deno ブランチ や bun ブランチ でそれぞれDenoやBunへの対応が進められています。
個人的にはDenoでTypeScriptでサクッと始められるようになると嬉しいですね。
ブラウザもNodeのバージョンも自由に選択できる自由度が魅力的な反面、開発したアプリケーションの各ブラウザへの対応やインストーラの用意などは大変になりそうな感じがします。
試しにGluonでTwitterのサイトを開く
Quick Start で紹介されている サンプルアプリのリポジトリ には、
- Hello worldのサンプル
- DoomをWASMで動かすサイト https://silentspacemarine.com を開くサンプル
- Discordの公式サイトを開くサンプル
の3つが含まれています。 リポジトリをクローンしてそれぞれのサンプルのディレクトリに移動し、 npm install を実行してから node . ですぐ起動できるようになっています。
あまりに簡単だったので、別途Twitterの公式サイトを開くだけのアプリを作ることにしました。 Mac対応はまだExperimentalのようですが起動くらいまではいけるでしょうという気持ちです。
環境
- OS: macOS Monterey 12.6.3
- CPU: Apple M1 Max
- zsh 5.8.1
- Node 18.1.0
- npm 8.8.0
- Chrome 109.0.5414.119
- Firefox 108.0.1
作成手順
mkdir gluon-twitter
cd gluon-twitter
npmで初期化しpackage.jsonを作成します。
npm init
先程のサンプルに合わせてtypeはmoduleにしておきます。
packager.json
{
"name": "gluon-twitter",
"type": "module",
"version": "1.0.0",
"description": "Gluon twitter",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "n1215",
"license": "UNLICENCED"
}
次にGluonのパッケージをインストールし、
npm install @gluon-framework/gluon
index.js を 書けば準備完了です。
import * as Gluon from "@gluon-framework/gluon";
await Gluon.open(
"https://twitter.com",
{
onLoad: () => {
console.log("Hello from Gluon!");
},
forceBrowser: "chrome",
windowSize: [400, 800]
}
);
アプリ起動
アプリを作成したディレクトリで
node .
とするとアプリが起動してTwitterのサイトが表示され、Developer Toolのコンソールに Hello from Gluon! との表示が確認できました。
ちなみにそのままGoogleアカウントでログインしようとするとエラーになりました。何故だ。
また、Chromeをすでに複数ウィンドウで起動しているとクリックなどの応答が悪い感触があったので、一度Chromeを落としてから起動したほうが良いのかもしれません。
試しにブラウザをFirefoxに変更するとブラウザのウィンドウは起動しましたが、コンソール側でバックエンドのNode.jsアプリがエラーで落ちてしまいました。今のところはChromeやChromiumを使うほうが良さそうです。
[Gluon] starting browser...
[Gluon] found browser firefox (firefox based) at path: /Applications/Firefox.app/Contents/MacOS/firefox
[Gluon] data path: /Users/nextat/workspace/gluon-twitter/gluon_data/firefox
[Gluon] connecting to CDP over websocket (46175)...
.....[Gluon] got main process target websocket url: ws://127.0.0.1:46175/devtools/browser/cace5507-af77-4741-8512-9106c4242a54
file:///Users/nextat/workspace/gluon-twitter/node_modules/@gluon-framework/gluon/src/lib/cdp.js:89
const ws = new WebSocket(wsUrl);
^
TypeError: WebSocket is not a constructor
まとめ
執筆時点でのGluonの最新バージョンは0.12.0であり、流石にまだまだ不安定だと感じました。 しかし、内臓のChromiumやWebViewを利用しないというユーザにとって自由度が高い思想は応援したいですし、APIも手軽に利用できそうでした。
設計方針に依るトレードオフはあるにせよ、安定してくれば選択肢の一つとして検討できるかもしれません。今後に期待です。
