MacOSでElectronを使用して最初のクロスプラットフォームデスクトップアプリケーションを作成する方法
著者は、 Write for DOnations プログラムの一環として、 Apache SoftwareFoundationを選択して寄付を受け取りました。
序章
Electron は、JavaScript、HTML、CSSなどのWebテクノロジーを使用してネイティブアプリケーションを作成するためのオープンソースフレームワークです。 これは、Mac、Windows、およびLinuxでクロスプラットフォームのアプリケーションを構築および実行するためのサポートを組み合わせたものです。 Visual Studio Code、WhatsApp、Twitch、Slack、Figmaなど、多くの人気のあるデスクトップアプリケーションがElectronを使用して構築されています。
Electronは、自動更新やネイティブメニューなど、より複雑なアプリケーション機能の設計を容易にします。つまり、開発者はアプリケーションのコア設計に集中できます。 さらに、Electronは、GitHubによって維持されているオープンソースプロジェクトであり、活発な貢献者のコミュニティがあります。
このチュートリアルでは、最初にプロジェクトを設定し、Electronをインストールします。 その後、最初の「HelloWorld!」を作成します。 Electronを使用してアプリケーションをカスタマイズします。 グレースフルウィンドウセットアップを実装し、アプリケーション用の新しいウィンドウを作成します。 これらのすべての手順を実行すると、macOS上にElectronクロスプラットフォームデスクトップアプリケーションが作成されます。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- Node.jsがマシンにインストールされ、ローカル開発環境がmacOSにインストールされています。 Node.jsをインストールし、macOSでローカル開発環境を作成する方法チュートリアルに従ってください。
注:このチュートリアルはmacOS10.15.3でテストされました。
ステップ1—プロジェクトの作成
まず、Electronをマシンにインストールし、プロジェクトフォルダーを作成してデスクトップアプリケーションをビルドします。
Electronのインストールプロセスを開始するには、hello-world
というプロジェクトフォルダーを作成し、次のコマンドを使用してフォルダーに移動します。
mkdir hello-world cd hello-world
次に、package.json
ファイルを作成してプロジェクトを開始します。
package.json
ファイルはNode.jsアプリケーションの重要な部分であり、次のことを実行します。
- プロジェクトが依存するパッケージを一覧表示します。
- プロジェクトで使用できるパッケージバージョンを指定します。
package.json
ファイルを作成するには、次のコマンドを実行します。
npm init
パッケージ名から始まる一連の質問が表示されます。 パッケージ名として、デフォルトのアプリケーション名hello-world
を使用できます。
次に、バージョンを要求します。 デフォルトで付属しているv1.0.0を使用するには、ENTER
を押します。
その後、説明を求めます。 そこで、hello world application on Electron.js
のようなプロジェクトの説明を追加できます。
次に、エントリポイントとしてmain.js
と入力します。
アプリケーションの最初の実行時に呼び出されるファイルは、エントリポイントと呼ばれます。 この場合、main.js
はpackage.json
ファイルのエントリポイントです。
残りの質問については、ENTER
でデフォルトを受け入れます。
注:このチュートリアルでは、作成者とライセンスを空のままにしますが、プロジェクトのステータスに応じて、作成者として名前と名前を使用できます。 パッケージのライセンスは、他の人がアプリケーションを使用することを許可される方法、およびあなたがそれに課している制限を指定します。 最も一般的なライセンスは、 MIT 、 BSD-2-Clause 、およびISCです。 詳細については、SPDXライセンスIDの全リストを確認してください。 そこから、プロジェクトの優先ライセンスを使用できますが、これは必須ではありません。
プロンプトに従うと、次の出力が表示されます。
Output:. . . Use `npm install <pkg>` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (hello-world) version: (1.0.0) description: hello world application on Electron.js entry point: (index.js) main.js test command: git repository: keywords: author: license: (ISC)
その後、構成を確認するように求められます。
Output:About to write to /hello-world/package.json: { "name": "hello-world", "version": "1.0.0", "description": "hello world application on Electron.js", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } Is this OK? (yes)
これで、hello-world
プロジェクトディレクトリ内に新しく生成されたpackage.json
ファイルが作成されます。 次に、Electronをインストールします。
ステップ2—Electronのインストール
次に、package.json
ファイルの構成を実装し、Electronをインストールします。
そのためには、お好みのテキストエディタでpackage.json
ファイルを開きます。
nano package.json
scripts
オブジェクト内に次の強調表示された行を追加します。
package.json
{ "name": "hello-world", "version": "1.0.0", "description": "hello world application on Electron.js", "main": "main.js", "scripts": { "start": "electron .", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }
scripts
プロパティは、必要な数のキーと値のペアを持つオブジェクトを取得します。 これらのキーと値のペアの各キーは、実行できるコマンドの名前です。 各キーの対応する値は、実行できる実際のコマンドです。 スクリプトは、必要なコマンドのテスト、構築、および合理化に頻繁に使用されます。
このプロジェクトでは、start
をキーとして使用し、electron .
を値として使用します。
完了したら、ファイルを保存して終了します。
次に、プロジェクトの開発依存関係としてElectronをインストールします。 hello-world
プロジェクトディレクトリ内で次のコマンドを実行します。
npm install --save-dev electron
Electron依存関係をプロジェクトに正常にインストールすると、package.json
ファイルは次のようになります。
package.json
{ "name": "hello-world", "version": "1.0.0", "description": "hello world application on Electron.js", "main": "main.js", "scripts": { "start": "electron .", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "electron": "^8.2.1" } }
依存関係プロパティは、各依存関係の名前とバージョンを持つオブジェクトを取ります。
キーの違いで識別できる2つの依存関係プロパティdependencies
とdevDependencies
があります。 dependencies
プロパティは、モジュールが本番環境で実行する必要のある依存関係を定義するために使用されます。 devDependencies
プロパティは通常、モジュールが開発で実行する必要のある依存関係を定義するために使用されます。 パッケージをdevDependencies
としてインストールするには、コマンドで--save-dev
フラグを使用します。
Electronをマシンにインストールし、アプリケーションをビルドするためのプロジェクトフォルダーを作成しました。 次に、Electronフレームワークを使用して最初のhello-world
アプリケーションを作成します。
ステップ3—「HelloWorld!」を作成する応用
最初のElectronアプリケーションの作成を始めましょう。
Electronは、メインプロセス(サーバー側)とレンダラープロセス(クライアント側)の2種類のプロセスで動作します。 ElectronメインプロセスはNode.jsランタイムで実行されます。
そのためには、main.js
とindex.html
の2つのファイルを使用します。
main.js
はアプリケーションのメインプロセスであり、index.html
はElectronアプリケーションレンダラープロセスです。
hello-world +-- package.json +-- main.js +-- index.html
次に、手動のブラウザウィンドウを作成し、 Electron API 呼び出しを使用してコンテンツをロードします。これを使用して、HTML、CSS、JavaScriptなどを実行できます。
まず、main.js
ファイルを開きます。
nano main.js
次に、次のコード行を追加して、BrowserWindow
モジュールを実装します。
main.js
const { app, BrowserWindow } = require('electron')
これには、Electronモジュールに必要なapp
およびBrowserWindow
と呼ばれる2つの破壊割り当てが含まれています。 Browserwindow
モジュールは、Electronアプリケーションに新しいウィンドウを作成するために使用されます。
次に、main.js
ファイルに次のコードを追加します。
main.js
. . . function createWindow () { const mainWindow = new BrowserWindow({ width: 800, height: 600 }) mainWindow.loadFile('index.html') } app.whenReady().then(createWindow)
ElectroncreateWindow
関数をhello-world
アプリケーションに追加します。 この関数では、new BrowserWindow
レンダラープロセスを作成し、width
およびheight
パラメーターを渡します。 幅と高さは、アプリケーションウィンドウのサイズを設定します。
mainWindow.loadFile()
メソッドは、一部のコンテンツをBrowserWindow
にレンダリングします。 index.html
ファイルがコンテンツをロードします。
app.whenReady().then(windowName)
メソッドの準備ができると、メインプロセスが開始されます。 この時点で、メインプロセスはcreateWindow
関数を呼び出します。 この関数は、幅800ピクセル、高さ600ピクセルの新しいレンダラープロセスまたはブラウザーウィンドウインスタンスを作成します。 次に、レンダラープロセスは、mainWindow.loadFile('index.html')
メソッドを使用してコンテンツのロードに進みます。 このチュートリアルでは、ファイル名としてindex.html
を使用します。
次に、次のイベントコードをファイルに追加します。
main.js
. . . app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } })
2つのメインシステムイベントをプロジェクトに追加します— window-all-closed
およびactivate
イベント:
window-all-closed
:すべてのウィンドウが閉じられたときにアプリケーションを終了します。 macOSでは、ユーザーがCMD
+Q
で明示的に終了するまで、アプリケーションとそのメニューバーがアクティブなままになるのが一般的です。activate
:アプリケーションを初めて起動する、アプリケーションが既に実行されているときにアプリケーションを再起動しようとする、アプリケーションのドック(macOS)またはタスクバーアイコンをクリックするなど、さまざまなアクションによってこのイベントがトリガーされる可能性があります。
これらのコードブロックを追加すると、main.js
ファイルの最終出力は次のようになります。
main.js
const { app, BrowserWindow } = require('electron') function createWindow () { const mainWindow = new BrowserWindow({ width: 800, height: 600 }) mainWindow.loadFile('index.html') } app.whenReady().then(createWindow) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } })
完了したら、このファイルを保存して終了します。
次に、index.html
ファイルを作成して開きます。
nano index.html
最終出力として送信される次のコードを追加します。
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> </head> <body <h1>Hello World!</h1> </body> </html>
ここでは、静的HTMLWebページを作成します。 ElectronはレンダリングプロセスにChromiumを使用するため、ElectronアプリケーションレンダラープロセスはすべてのHTML構文をサポートします。
これで、アプリケーションを実行できます。
npm start
アプリケーションウィンドウが出力として表示されます。
これで、Electronフレームワークを使用して最初のクロスプラットフォームアプリケーションを作成しました。 次に、インタラクティブ機能のために追加できるいくつかのカスタマイズを行います。
ステップ4—「HelloWorld!」アプリケーションのカスタマイズ
これで、Electronフレームワークを使用した最初のクロスプラットフォームアプリケーションの初期セットアップが完了しました。 アプリケーションのネイティブ動作を改善するために他に何ができるか見てみましょう。
Electronには、ダイアログボックス、ウィンドウオプション、新しいウィンドウ、メニュー、ショートカット、通知、タッチバー、セッションコントロールなど、デスクトップアプリケーションのユーザーエクスペリエンスを向上させる多くの組み込み機能があります。 hello-world
アプリケーションをカスタマイズするための機能をいくつか追加してみましょう。
アプリケーションの優雅なウィンドウセットアップ
ページをウィンドウに直接ロードする場合、アプリケーションの起動時に、ページが一度にロードされないことがあります。 これは、ネイティブアプリケーションでは素晴らしい経験ではありません。 この問題をいくつかの手順で修正しましょう。
これを行うには、作成時に新しい構成パラメーターを渡してBrowserWindow
を非表示にする必要があります。
そのためには、main.js
ファイルを開きます。
nano main.js
show: false
パラメーターをBrowserWindow
オブジェクトの本体に追加します。
main.js
const mainWindow = new BrowserWindow({ width: 800, height: 600, show: false })
次に、createWindow
関数本体内に強調表示されたコード行を追加して、BrowserWindow
インスタンスに新しいリスナーを追加します。 また、BrowserWindow
に新しい構成パラメーターを追加して、最初に作成されたウィンドウの背景色を変更します。
そのためには、BrowserWindow
関数内にbackgroundColor
オブジェクトの次のコード行を追加する必要があります。 必要に応じて、16進数のカラーコードを自由に変更してください。
backgroundColor: '#Your hex color code'
次の強調表示されたコードのようなこの行をcreateWindow
関数に追加します。
main.js
function createWindow () { const mainWindow = new BrowserWindow({ width: 800, height: 600, show: false, backgroundColor: '#ffff00' }) mainWindow.loadFile('index.html') mainWindow.once('ready-to-show', mainWindow.show) }
ガベージコレクションを減らすには、once
キーワードを使用してこのリスナーを1回実行する必要があります。 したがって、mainWindow.show
メソッドは、このアプリケーションの実行時に1回だけ実行されます。
次に、ファイルを保存し、ターミナルを使用してアプリケーションを実行します。
npm start
アプリケーションは黄色の背景で表示されます。
最後に、アプリケーションウィンドウが正常に読み込まれるのがわかります。
アプリケーションの新しいウィンドウの作成
複数のウィンドウの使用は、基本的なアプリケーションから高度なアプリケーションに共通の機能です。 その機能を新しく作成したアプリケーションに追加しましょう。
Electronは、単一のメインプロセスから複数のレンダラープロセス(複数のウィンドウ)を作成できます。
まず、main.js
を開きます。
nano main.js
secWindow
という新しいメソッドを作成し、強調表示されたコードを追加して、新しく作成したウィンドウのwidth
およびheight
パラメーターを設定します。
main.js
function createWindow () { const mainWindow = new BrowserWindow({ width: 800, height: 600, show: false, backgroundColor: '#ffff00' }) const secWindow = new BrowserWindow({ width: 600, height: 400, }) . . . }
次に、新しく作成されたBrowserWindow
レンダラープロセスにコンテンツをロードします。 この時点で、いくつかのリモートURL(Webサイト)コンテンツをロードします。
このチュートリアルでは、アプリケーションの2番目のウィンドウにhttps://www.digitalocean.com
Webコンテンツを使用しています。 そのために、2番目のウィンドウの初期化secWindow.loadURL
で、createWindow
関数の本体に次のコード行を追加します。
main.js
function createWindow () { const mainWindow = new BrowserWindow({ width: 800, height: 600, show: false, backgroundColor: '#ffff00' }) const secWindow = new BrowserWindow({ width: 600, height: 400, }) mainWindow.loadFile('index.html') secWindow.loadURL('https://www.digitalocean.com/') mainWindow.once('ready-to-show', mainWindow.show) }
次に、ファイルを保存して終了し、ターミナルでアプリケーションを実行します。
npm start
背景が黄色の初期ウィンドウと、ロードされたURLの新しいアプリケーションが表示されます。
新しく作成したアプリケーションをカスタマイズして、ユーザーにとってよりインタラクティブなものにしました。 次に、Electronアプリケーションを作成します。
ステップ5—最初のアプリケーションを構築する
アプリケーションにいくつかの機能を追加した後、配布のためにそれを構築する必要があります。 このセクションでは、さまざまなプラットフォーム用のアプリケーションを構築する方法を学習します。
Electronアプリケーションのビルドプロセスは、多くのツールを必要とするため、やや難しいと考えられています。 ただし、ここでは、 electronic-builder CLIツールを使用します。このツールは、あらゆるプラットフォーム向けのアプリケーションを構築するための最良の方法を提供します。
まず、electron-builder
CLIツールをグローバルにインストールします。 これを行うには、次のコマンドを実行します。
sudo npm install -g electron-builder
注:npm
またはyarn
のいずれかを使用してelectron-builder
をインストールできます。パフォーマンスに顕著な違いはありません。 長期的にアプリケーションを開発する場合、electron-builder
のメーカーは、潜在的な互換性の問題を回避するためにyarn
を推奨しています。 yarn
を使用してインストールするには、コンピューターにがインストールされていることを確認してからyarn add electron-builder --dev
を実行して、electron-builder
をyarn
とともにインストールする必要があります。 ]。
electron-builder
のインストールが完了したら、端末で次のコマンドを実行して、インストールが成功したことを確認できます。
electron-builder --version
出力に現在のバージョンのElectronが含まれます。
これで、最初のクロスプラットフォームアプリケーションを構築できます。 これを行うには、ターミナルを開き、プロジェクトディレクトリで次のコマンドを実行します。
electron-builder -mwl
フラグ-mwl
を使用して、それぞれmacOS、Windows、およびLinux用のアプリケーションを構築します。
注:すべてのプラットフォームでビルドできるのはmacOSユーザーのみです。 Windowsユーザーは、WindowsおよびLinuxプラットフォーム専用のアプリケーションを構築できます。 Linuxユーザーは、Linuxプラットフォーム用にのみビルドできます。 詳細については、ドキュメントを参照してください。
個別のオペレーティングシステム用のアプリケーションを構築するには、以下を使用します。
macOS
のアプリケーションをビルドします。
electron-builder --mac
Windows:
用のアプリケーションをビルドする
electron-builder --win
Linux
のアプリケーションをビルドします。
electron-builder --linux
このプロセスは、依存関係がダウンロードされてアプリケーションがビルドされるまでに時間がかかります。
プロジェクトディレクトリは、dist
という名前の新しいフォルダを作成します。 ビルドしたすべてのアプリケーションとアプリケーションの解凍バージョンは、そのフォルダーにあります。
たとえば、すべてのプラットフォーム用にアプリケーションをビルドする場合、プロジェクトのdist
フォルダーは次のファイル構造に似ています。
hello-world +-- hello-world-1.0.0-mac.zip +-- hello-world-1.0.0.dmg +-- hello-world Setup 1.0.0.exe +-- win-unpacked +-- mac +-- linux-unpacked +-- hello-world_1.0.0_amd64.snap
electron-builder
は、現在のプラットフォームと現在のアーキテクチャ用のElectronアプリをデフォルトのターゲットとしてビルドします。
- macOS:Squirrel.Mac用のDMGとZIP
- Windows:NSIS(.exe)
- Linux:WindowsまたはmacOSでビルドする場合、
x64
のSnapとAppImageが出力されます。 それ以外の場合、Linuxでビルドする場合、出力は現在のアーキテクチャのSnapファイルとAppImageファイルになります。
これで、すべてのプラットフォーム用のアプリケーションが構築されました。
結論
このチュートリアルでは、Electronフレームワークを使用して最初のクロスプラットフォームアプリケーションを作成し、ネイティブ機能を追加して、macOSで配布用にビルドしました。
Electronの詳細については、ドキュメントをご覧ください。 インストーラーを作成することで、新しく作成したデスクトップアプリケーションを誰とでも共有できるようになりました。