NNNNNNote

なのなの の (何でも書く)ノート ※ホントに何でも書きます

Electron使いがMuonをHello, worldしてみた

世間(というか渋谷)では本来の趣旨を大きく外したハロウィン騒ぎが盛り上がっている(?)今日この頃。

何でも書くブログについに純粋技術記事のネタが降臨です。

時代はWebベースのデスクトップアプリか?

私は過去にElectron*1というデスクトップアプリフレームワークを使ったアプリ開発の実践技術書を、 技術書典で頒布したことがあります。

n4plus.booth.pm

次回(技術書典8)あたりでこれの改訂増補版を出そうと進んだり戻ったりしているのですが、 最近「ポストElectron」と言えるかも知れないデスクトップアプリフレームワークがあることをTwitterで知りました。

その名を「Muon」というそれを、Hello, worldして雑感をメモってみることにしました。

電子 vs ミュー粒子

github.com

Electronが「電子」だからなのか、それに対抗した(?)「ミュー粒子」*2というネーミングっぽいMuon。 Chromiumの代わりにUltralightというWebKitベースのエンジンを使うことで、 メモリ使用量の削減やファイルサイズの削減を狙ったデスクトップアプリフレームワーク*3です。 ElectronがNode.js(=JavaScript)なのに対し、 MuonはGoで開発されています*4

GitHubのコミット履歴を追う限りは、できたてホヤホヤの感じがしますね。

なにはともあれ、Hello, worldしてみる

リポジトリに記載のGettingStartedGuideに従って、サンプルプロジェクトを動かしてみます。 なお、実行環境は次の通りです。

$ sw_vers
ProductName:    Mac OS X
ProductVersion: 10.14.6
BuildVersion:   18G103

$ go version
go version go1.13.3 darwin/amd64

$ yarn --version
1.17.3

リポジトリをcloneする

手順に従って、リポジトリをcloneします。

$ git clone https://github.com/ImVexed/muon
$ cd muon/examples/create-react-app

サンプルプロジェクトはReactで書かれているようです。 なお私はReactはド素人です(今回はゴリゴリ実装するわけじゃないからセーフ)。

Reactのプロジェクトをビルドする

サンプルプロジェクトをMuonで動かすためには、一度ビルドする必要があるようです。 Yarnを使って依存関係を解決して、ビルドまで実行してみます(この辺はReactのプロジェクトをビルドするのと一緒っぽいですね)。

$ cd public/
$ yarn  # もしくは、yarn install
$ yarn build

Go用にパッケージング・ビルドする

ガイドによると、ここからGoのパッケージャーでパッケージングしなくてはならないと書かれています。 ここがちょっと分かりづらかったのですが、要はfileb0xというパッケージャーを使えるようにしなさい、ということのようです。 手順としてはgo get github.com/UnnoTed/fileb0xでバイナリをダウンロードし、 ダウンロードされたバイナリがあるディレクト*5環境変数PATHに設定する、 という2つの手順を行います。

その上でひとつ上のcreate-react-appディレクトリに戻り、

$ fileb0x b0x.yml

または

$ go generate

でパッケージング、その後go buildでビルドします。

Ultralightのライブラリを用意する

ここまでで一通りの準備はできているのですが、最後に手動で用意しなくてはならないものがあります。 Chromiumの代わりに使うUltralightのライブラリです。 ガイドには「リンク先からアーカイブをダウンロードして展開、自分でルートディレクトリに配置しなさい」とありますが、 実はリポジトリ*6にちゃんと用意してあり、 それをそのままコピーして使えばよさそうです(動いたには動いたけどいいのか……?)。

ただしLinuxMacOSの場合はルートディレクトリに置いただけではダメなようで(ここで長時間罠にはまった)、 環境変数LD_LIBRARY_PATHにライブラリファイルを配置したパスを設定する必要があります(Windowsはこの設定は不要らしいです)。

動かしてみる

いよいよ動かしてみます。 create-react-appディレクトリで、次のコマンドを実行します。

$ go run main.go

上手くいけば、新規ウィンドウが立ち上がってHello, worldに成功します。

f:id:nano2_aloerina:20191031223042p:plain

気になったこと

事前にビルドしているからか、 run main.goコマンドで起動したときのウィンドウの立ち上がる早さはElectronで開発しているときと比にならないくらい早いですね。 しかしながら、事前ビルドだとホットリロードできないんじゃ……?という疑問もわいてきます。 一応README.mdには「Hot-reloading」がFeaturesとして挙げられているのですが、いまいちその方法が分かりませんでした。 ホットリロードができないとyarn buildgo generateを毎回実行しなくてはならなくなるので、結構面倒です。

また、まだできたてホヤホヤということもあり不具合も多く (ウィンドウサイズを変えようとしたところフリーズしてしまい強制終了する羽目に)、 実用レベルで使うにはハードルが高そうです。 ほとんどはUltralight自身が未対応になっている部分が影響しているらしいので、 ここは時間が解決してくれるのを待つしかなさそうです。

あと、個人的にはReact以外も使えるのかちょっと気になります。Vue.jsとか。

まとめ

現時点では当然Electronの方に軍配が上がるわけですが、 今後未対応機能が対応されるにつれて、Muon自身の一番のウリとも言える「省メモリ」「省ファイルサイズ」が着目されて、 Electronの良きライバルになるかも知れません。 それを期待しながら首を長くして待ってみる、という感じでしょうね。

開発が進んでできることが増えてきたら、JavaScript - Go間の相互運用なども試してみようと思います。

*1:https://electronjs.org/

*2:https://ja.wikipedia.org/wiki/%E3%83%9F%E3%83%A5%E3%83%BC%E7%B2%92%E5%AD%90

*3:の割には、質量的にはミュー粒子の方が電子より大きいということはツッコんだら負け?

*4:Goで開発されているとはいいつつも、JavaScriptとの相互運用性をうたってはいるようです

*5:環境変数 GOPATH に設定されたディレクト

*6:https://github.com/ImVexed/muon/tree/master/ultralight/libs