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.comWebコンテンツを使用しています。そのために、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-builderCLIツールをグローバルにインストールします。これを行うには、次のコマンドを実行します。

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の詳細については、ドキュメントをご覧ください。インストーラーを作成することで、新しく作成したデスクトップアプリケーションを誰とでも共有できるようになりました。