スポンサーリンク

久しぶりにMacでElectronを使えるようにした【node.jsでアプリ自作】

ニッチな話題パソコン基礎知識プログラミング

Macで動く自作ツールをJavaScriptでプログラムするために、Electronを使っていました。

久しぶりにプログラムを修正しようとしたら、electronコマンドが通りません。

改めて環境を構築しました。

ポイント
  • electronのインストールで
    「sudo npm install -g electron –unsafe-perm=true –allow-root」で
    オプションを付加しないとエラーになった
スポンサーリンク

Electronが見つからない

Electronは、「HTML5やJavaScriptで作ったWebアプリをデスクトップアプリケーションにできるフレームワーク」です。デスクトップソフトウェアがJavaScriptで書くことができます。

Atomエディタ(今後はエンジンを変更するらしいけど)やSlackなど本格的なプログラムでも利用されますが、かんたんな自作ツールを作るのにも重宝します。

一年ぶりにElectronでアプリケーションを組み立て直そうと思ったら、コマンドが通りませんでした。

macOSをアップデートしたからなのかな?

ソースコードを見ると、以前使ったのが2020年5月ごろなので、ちょっとわからないですね。

Electronの環境構築

MacでElectronを使うには、ターミナルを使って
node.js
Electron
の順番でインストールしていきます。

node.jsをインストール

node.jsは、「サーバサイドで動くJavaScript実行環境」です。

通常のJavaScriptは、ブラウザ上で動きます。端末内でJavaScriptを使うには、node.js上で動かします。

ターミナルでnode.jsをインストールするには、Homebrewというパッケージマネージャを使います。

Homebrewをターミナルでインストールします。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

私のPCでは、以前にemacsをインストールするときにも使いました。

これで、brewコマンドが使えるようになります。

次は、brewコマンドで、nodeをインストールします。

brew install node

これで、nodenpmコマンドがインストールされます。

npmは、node.jsのパッケージマネージャです。

これも以前インストールしたものが残っていたので、今回はインストールの必要はありませんでした。

Electronをインストール

これでElectronをインストールする下準備ができました。

npm i electron -g

ところが、エラーが出てうまくいきません。

そこで、調べると、管理者権限でオプションを追加すると、インストールできるようです。

sudo npm install -g electron --unsafe-perm=true --allow-root

これでelectronが通りました。

electronを起動すると、GUIプログラムが表示されます。

electronのバージョンは、「v16.0.5」でした。

electron-packagerのインストール

ソースコードから.exe、.appを生成するためには、パッケージング処理が必要になります。そこで役立つのが「electron-packager」です。

npm i electron-packager

これもパーミッションでエラーになったので、先ほど同様のオプションを追加します。

sudo npm install -g electron-packager --unsafe-perm=true --allow-root

Mac用アプリをビルドしてみた

これで、mac用にビルドすることができます。

すでに以前作ったソースコードがあるので、ソースコードのあるフォルダに移動してパッケージコマンドを実行します。

electron-packager . アプリ名 --platform=darwin --arch=x64 --electron-version=16.0.5

これで、アプリがビルドできました。

.appファイルをアプリケーションフォルダにコピーすれば、自分のMacで利用しやすいです。

electron-packagerコマンドの構文

electron-packagerコマンドの構文は、以下の通りです。

electron-packager {ソースディレクトリ} {アプリ名} --platform={プラットフォーム} --arch={アーキテクチャ} --version (バージョン} [その他のオプション ...]
コマンド説明
platformall, linux, win32, darwin のいずれかを選択。「–all」は全部入りのパッケージング。
「darwin」はmacのこと。複数選択はカンマ区切りで指定可能。
archall, ia32, x64 のいずれかを選択(32bit or 64bit)
versionElectronのバージョンを指定。(electron -vで確認)
Electron 入門 · GitHub

このversionは、現在は「electron-version」に変更されていました。

※追記

自分のコードで試したところ、見た目は起動したのですが、ライブラリの依存関係などが解決せず、動作に反応しませんでした。

その辺は、今後の課題です。

こちらもどうぞ

MacにEmacsをインストールした 【パッケージ管理システムHomebrew】
macOS 10.15 Catalinaには、はじめからEmacsが入っているわけではありません。そこでMacでEmacsを使えるようにするまでの手順をまとめておきます。EmacsとはEmacsは、「1970年代からUN...
[Mac] サブフォルダ内のファイルを親フォルダに集める【フラット化のコマンド】
資料用の画像ファイルを、Mac内にフォルダ分けして管理していると、「似たようなフォルダに分かれてしまった中身を一箇所に集めたい」ということがけっこうあります。いちいちファイルをマウス操作で移動したり、不要になったフォルダを削除する...
phina.jsで将棋盤ゲームのプログラミングした話 [JavaScript]
先日、スマホで操作できる将棋盤プログラムを作りました。デザイン将棋盤↑ こちらから動かせます。phina.jsライブラリプログラミング言語は JavaScriptで、phina.jsというライブラリを利...
ブログでJavaScriptプログラムを動かしてみよう【カスタムHTMLとscriptタグ】
ブログの中でJavaScriptを動かして遊ぶ方法をご紹介します。WordPressサイトに直接HTMLコードを入力するために「カスタムHTML」というブロックを挿入します。JavaScriptのコードは最初と最後をのタグで囲んだ中に入力します。
QRコードを読み込むと、関連記事を確認できます。
久しぶりにMacでElectronを使えるようにした【node.jsでアプリ自作】
タイトルとURLをコピーしました