Category: Javascript

先日、ノート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します。 その後、ダウンロード先のディレクトリで下記コマンドを実行して解凍します。このときに、すでにビルド済みのバイナリが展開されます。 ここから先はちょっとしたアレンジになります。今回のように解凍したバイナリに対し、直接/usr/binや/usr/local/binなどに置くことや、ディレクトリにPATHを通すことがよくおすすめされます。しかし、個人的には管理が面倒であるので避けたいと考えています。そこで、代わりにシンボリックリンクファイルを/usr/binに配置することを推奨します。まずは先程解凍したnodejsのバイナリを/optへ移動しましょう。 そしてバイナリのシンボリックリンクを/usr/binに配置しましょう。nodejsのバイナリはnode-v18.15.0….の中にあるbinフォルダに実体があります。 ここまで操作することで、nodejsのインストールに成功します。試しにnodeコマンドを打ってみると動作することがわかります。 Electronのインストール Level1: 実行環境の準備 nodejsのインストールに成功したら、次はElectronの導入に移ります。ここから先はElectronの公式サイトにあるチュートリアルに沿って進めます。まず、作業用ディレクトリを適当に作りnpm initします。 npm init実行後に、いくつかインタラクティブ入力を要求されます。重要なのは、entorypointをmain.jsに変更し、authorとdiscriptionを適切に入力することだそうです。自分はついでにgithubのURL等も入れておきました。nodejsでの初期化が完了したら、いよいよElectronのインストールを実行します。下記コマンドを入力しましょう。 また、nodejsでのアプリ起動時にelectronが発動するようにpackage.jsonのscripts項に追記します。※この辺はまだ私もよく理解できていないのですが、雰囲気はそんな感じです。 Level2: パッケージ化環境の準備 まだアプリの作成も行っていない段階で気が早いですが、Electronで作成したアプリケーションをパッケージ化するための拡張も先に入れておきます。 ここで注意していただきたい点がひとつ。上記のコマンドを実行することで生成されるforge.config.jsにはpackage化のためのmakeを実行した際に、どのようなパッケージを出力するかが規定されています。この中の設定でRPMパッケージを作ることになっていますが、そこを削除してください。そうしないとRPMパッケージを作ろうとしてエラーを吐いて止まってしまいます。UbuntuではDEBパッケージが標準ですが、Web上では「RPMを入れれば良い」などのトンチンカンな回答も多く見られるので本当に注意。最悪システムを管理しきれなくなります。この情報はWebには無く自分で挙動を見ながら解決したので、同じ轍を他の人がふまないよう記して置きます。 サンプルアプリの作成 サンプルアプリ起動まで…