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

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

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

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

ポイント

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

1. Electronが見つからない

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

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

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

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

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

目次に戻る

2. Electronの環境構築

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

参考

ElectronをMacにインストールする方法 | Macアプリ開発ラボ

目次に戻る

2-1. 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)"

MacにEmacsをインストールした【パッケージ管理システムHomebrew】

MacにEmacsをインストールするには、まずパッケージ管理システムのHomebrewをインストールします。次に、ターミナルから「brew install emacs」コマンドを実行することで、Emacsをインストールできます。これで、「emacs」コマンドを使ってEmacsを起動し、テキスト編集を始めることができるようになります。MacにEmacsをインストールする２つの準備macOS 10.15 Catalinaには、はじめからEmacsが入っているわけではありません...

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

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

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

brew install node

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

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

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

MacにNode.jsをインストールした

MacでローカルにJavaScriptを使うために、Node.jsをインストールしました。手順をメモしておきます。「Node.js」からMac用インストーラをダウンロードして、インストールします。LTS（長期間サポート版）をダウンロードしました。あとは、通常のインストール操作です。Node.js v12.16.3と、npm v6.14.4をインストールできました。続きはこちらからこちらもどうぞ

目次に戻る

2-2. Electronをインストール

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

npm i electron -g

参考

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

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

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

参考

MacにElectronをインストールする手順 | 経験知

これでelectronが通りました。

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

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

目次に戻る

3. electron-packagerのインストール

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

npm i electron-packager

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

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

目次に戻る

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

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

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

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

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

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

目次に戻る

5. electron-packagerコマンドの構文

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

electron-packager ｛ソースディレクトリ｝ ｛アプリ名｝ --platform=｛プラットフォーム｝ --arch=｛アーキテクチャ｝ --version （バージョン｝ ［その他のオプション ...］

コマンド	説明
platform	all, linux, win32, darwin のいずれかを選択。「–all」は全部入りのパッケージング。「darwin」はmacのこと。複数選択はカンマ区切りで指定可能。
arch	all, ia32, x64 のいずれかを選択（32bit or 64bit）
version	Electronのバージョンを指定。(electron -vで確認)

Electron 入門 · GitHub