驚くほど簡単にWindows/Mac両対応のデスクトップアプリが作れた話

こんにちは。

ちょっと仕事でElectronというNode.jsのフレームワーク？を使ってツールを作ったのですが、これがなんとも簡単にWindowsもMacも対応できてすげーなって思ったので紹介します。

最初はElectronでツール作ってって言われて「？」って感じだったのですが、調べてみて驚愕でした。

ググってまず見つかったのが下記のサイト

“https://ics.media/entry/7298”

※なぜかリンクカードにするとログインポップアップが表示される為、わざと文字列化してます。URL直貼りで遷移してください。

Node.jsも使ったことなかったので、まずNode.jsからインストール。

書いてある通りにいくつかコマンド打ってファイル用意したら、動いた！

で、ここからがびっくり。1コマンドでパッケージングして実行ファイルを作成。特に何の設定もいらなかった！！

MacでWindowsの実行ファイルを作成するにはxquartzとwineっていうのが必要らしいので入れて、これも1コマンドで実行ファイル作成！！

すげー、すげー。確かにHTMLとJSだけで作ってるならブラウザの機能で動く訳やし、WindowsでもMacでも動くわな。

で、今回エクセルを操作しないといけないツールだったんですが、それもxlsxというパッケージをnpmでインストールしたらJSから操作できた！

でもxlsxはそこまで使い勝手は良くないかな。

まあできれば何でもいいや。

色々試行錯誤しながらツール完成。

よし、実行ファイル作って動かしてみよう。

あれ？動かない。デバッグ実行では動いていたのに。。。

上記URLのページの通りにパッケージングしていたことが原因でした。

参考にしたコマンドは

npx electron-packager src FirstApp –platform=darwin –arch=x64 –overwrite

だったんですが、これ、srcフォルダだけをパッケージングしてますね。

npmでインストールしたもの(xlsx等)はその一個上のnode_modulesってフォルダに保存されるようですので、「src」のところを「.」に変えたら上手く動くか？

動かない。。というか逆に何も表示されなくなって悪化している気がするんですが。

それもそのはず、上記ページではsrc内のpackage.jsonを読み込んで実行していた為、main.jsが動いていましたが、今回は./package.jsonを読み込んで動かしている為、index.jsを読み込もうとしていました。

./package.jsonのmainキーをmain.jsに変えたら動いた！

※パス参照位置が変わるので、相対パス指定しているところがあれば注意が必要です。

うん。よかった。

少し最後手こずったけど、でもかなり簡単に作れたなと思いました。

是非、Windows、Mac両方で動く必要のあるデスクトップアプリを作る時は試してみてください。

ではまた！