Electronの開発環境　(Ubuntu)

先日、ノートPCに続きデスクトップPCも更新しました。もちろんこちらにもUbuntuをインストールして使っているのですが、せっかくですのでアプリでも作ってみたいなあと思い、最近流行りのElectronを使ってみることにしました。しかし、Ubuntu×Electronの導入方法を説明した日本語Webサイトが乏しく苦戦したので、日記を兼ねてここに示します。

Ubuntuへのnodejsインストール

Electron導入はUbuntu DesktopにElectron環境を構築する(Qiita)を参考にしながた進めていきます。しかし、nodejsのインストール部分でnodebrewコマンドを打っても権限の関係で上手く行かない場所がありました。記事もだいぶ古いですし、このときのnodejsバージョンが6.x、現在が19.xなのでそのままでは上手くいかないのも頷けます。
したがって、別の方法でUbuntu×nodejsの環境を構築することになります。こういうときは公式サイトが最強だと思うので、公式サイトのDL場所を見に行きます。しかし、置いてあるのは謎のTar.gzファイルだけ。どうすればいいのか・・・？

外人エンジニアの動画を参考にして成功

ここで日本語でのドキュメントを探してみたのですが一向に見つからず。そこで、Youtubeにて検索してみると「NodeJS Installation on Ubuntu 22.04」という完璧なタイトルの動画を発見。視聴してみると、設定方法が詳しく説明されていました。英語自体も簡単な単語で説明されているのでわかりやすかったです。

導入方法解説(日本語)

まずは公式サイトへ行き、LTSバージョンを右クリック→リンク先を保存でDLします。

その後、ダウンロード先のディレクトリで下記コマンドを実行して解凍します。このときに、すでにビルド済みのバイナリが展開されます。

sudo tar -xf node-v18.15.0-linux-x64.tar.xz 

ここから先はちょっとしたアレンジになります。今回のように解凍したバイナリに対し、直接/usr/binや/usr/local/binなどに置くことや、ディレクトリにPATHを通すことがよくおすすめされます。しかし、個人的には管理が面倒であるので避けたいと考えています。そこで、代わりにシンボリックリンクファイルを/usr/binに配置することを推奨します。まずは先程解凍したnodejsのバイナリを/optへ移動しましょう。

sudo mv node-v18.15.0-linux-x64 /opt/

そしてバイナリのシンボリックリンクを/usr/binに配置しましょう。nodejsのバイナリはnode-v18.15.0….の中にあるbinフォルダに実体があります。

sudo ln -s /opt/node-v18.15.0-linux-x64/bin/node /usr/bin/node
sudo ln -s /opt/node-v18.15.0-linux-x64/bin/npm /usr/bin/npm
sudo ln -s /opt/node-v18.15.0-linux-x64/bin/npx /usr/bin/npx

ここまで操作することで、nodejsのインストールに成功します。試しにnodeコマンドを打ってみると動作することがわかります。

$ node -v
v18.15.0

Electronのインストール

Level1: 実行環境の準備

nodejsのインストールに成功したら、次はElectronの導入に移ります。
ここから先はElectronの公式サイトにあるチュートリアルに沿って進めます。
まず、作業用ディレクトリを適当に作りnpm initします。

npm init

npm init実行後に、いくつかインタラクティブ入力を要求されます。重要なのは、entorypointをmain.jsに変更し、authorとdiscriptionを適切に入力することだそうです。自分はついでにgithubのURL等も入れておきました。
nodejsでの初期化が完了したら、いよいよElectronのインストールを実行します。下記コマンドを入力しましょう。

npm install --save-dev electron

また、nodejsでのアプリ起動時にelectronが発動するようにpackage.jsonのscripts項に追記します。
※この辺はまだ私もよく理解できていないのですが、雰囲気はそんな感じです。

  "scripts": {
    "start": "electron ."
  }

Level2: パッケージ化環境の準備

まだアプリの作成も行っていない段階で気が早いですが、Electronで作成したアプリケーションをパッケージ化するための拡張も先に入れておきます。

npm install --save-dev @electron-forge/cli
npx electron-forge import

ここで注意していただきたい点がひとつ。上記のコマンドを実行することで生成されるforge.config.jsにはpackage化のためのmakeを実行した際に、どのようなパッケージを出力するかが規定されています。この中の設定でRPMパッケージを作ることになっていますが、そこを削除してください。そうしないとRPMパッケージを作ろうとしてエラーを吐いて止まってしまいます。UbuntuではDEBパッケージが標準ですが、Web上では「RPMを入れれば良い」などのトンチンカンな回答も多く見られるので本当に注意。最悪システムを管理しきれなくなります。
この情報はWebには無く自分で挙動を見ながら解決したので、同じ轍を他の人がふまないよう記して置きます。

サンプルアプリの作成

サンプルアプリ起動まで

サンプルアプリは、DOCS/FIDDLES/QUICK-START (23.1.3)からmain.js, index.html, preload.jsを丸コピすればまずはOKです。これを動作させるには下記コマンドを実行します。

npm start

npm startの呪文を唱えたあとの挙動を見る限り、HTMLで記述されたページを独自のWebブラウザで開いているような感じです。なので、ここから味付けをしていくにはHTML+CSS+JSの改造をしていくイメージなのかな？と思いました。（初心者の感想）

サンプルアプリのパッケージ化

サンプルアプリのパッケージ化には下記コマンドを実行する必要があります。

npm run make

このとき生成される.debファイルはmain.jsのあるディレクトリから数えてout/make/deb/x64/に存在します。また実行バイナリの本体はout/{プロジェクト名}/{プロジェクト名}に存在します。このバイナリを実行した際の挙動はnpm startと何も変わらないです。

まとめ

Ubuntu22.04/Nodejs/Electronの環境構築に挑戦しました。Web上には参考記事が少なく苦戦したので、この記事が今後同様の挑戦をする人の助けになればと思います。
それではここまで読んでいただき、ありがとうございました。

参考記事の一覧

• Ubuntu DesktopにElectron環境を構築する(Qiita)
• node.js.orgのDL場所
• Electronの公式サイト(quickstart)
• DOCS/FIDDLES/QUICK-START (23.1.3)