驚くほど簡単に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両方で動く必要のあるデスクトップアプリを作る時は試してみてください。

ではまた!

「驚くほど簡単にWindows/Mac両対応のデスクトップアプリが作れた話」への1件のフィードバック

  1. 【EA作成及びご出品のご依頼】

    突然のブログからのご連絡で申し訳ございません。
    初めまして。投資情報サイトGogoJungle(旧fx-on)を運営しています
    株式会社ゴゴジャンの浅野と申します。

    ブログの記事を拝読いたしまして、お客様の知識で独自のEA及びインディケータを作成できるのではないかと思い、ご連絡させて頂きました。
    既に作成された商品、作成していただいた商品を弊社で販売させて頂ければと思っております。もしご興味がございましたら是非ご検討ください。
    お客様の知識を電子書籍として販売することもしております。

    また、弊社ではアフィリエイト広告もお願いしております。
    報酬も高めに設定しておりますのでよろしければ弊社サイトをお調べくださいませ。

    その他疑問点などがございましたらお気軽にお問い合わせいただければと思います。
    株式会社ゴゴジャン 浅野
    メール tasano@gogojungle.co.jp    
    URL   https://www.gogojungle.co.jp/

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です