macOSでElectronを使用して最初のクロスプラットフォームデスクトップアプリケーションを作成する方法

getdocs

2年前

序章

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 ファイル。

The 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)

これで、新しく生成されたものができます package.json あなたの内部のファイル hello-world プロジェクトディレクトリ。次に、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"
}

The 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 それは重要な違いで識別できます。 The dependencies プロパティは、モジュールが本番環境で実行する必要のある依存関係を定義するために使用されます。 The devDependencies プロパティは通常、モジュールが開発で実行する必要のある依存関係を定義するために使用されます。パッケージを次のようにインストールするには devDependencies 使用 --save-dev コマンドでフラグを立てます。

Electronをマシンにインストールし、アプリケーションをビルドするためのプロジェクトフォルダーを作成しました。今、あなたはあなたの最初を書きます hello-world Electronフレームワークを使用したアプリケーション。

ステップ3—「HelloWorld！」を作成する応用

最初のElectronアプリケーションの作成を始めましょう。

Electronは、メインプロセス（サーバー側）とレンダラープロセス（クライアント側）の2種類のプロセスで動作します。 ElectronメインプロセスはNode.jsランタイムで実行されます。

そのためには、2つのファイルで作業します。 main.js と index.html.

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')

これには、2つの破壊割り当てが含まれています。 app と BrowserWindow、Electronモジュールに必要です。 The Browserwindow モジュールは、Electronアプリケーションで新しいウィンドウを作成するために使用されます。

次に、次のコードを main.js ファイル：

main.js

. . .
function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600
  })

  mainWindow.loadFile('index.html')
}

app.whenReady().then(createWindow)

電子を追加します createWindow あなたに機能する hello-world 応用。この関数では、 new BrowserWindow レンダラープロセスとパス width と height パラメーター。幅と高さは、アプリケーションウィンドウのサイズを設定します。

The mainWindow.loadFile() メソッドは、一部のコンテンツをにレンダリングします BrowserWindow. The 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
 })

次に、新しいリスナーをに追加します BrowserWindow 強調表示されたコード行を内部に追加することにより、インスタンス createWindow 機能本体。また、新しい構成パラメーターをに追加します BrowserWindow 最初に作成されたウィンドウの背景色を変更します。

そのためには、次のコード行を追加する必要があります backgroundColor オブジェクト、内部 BrowserWindow 関数。必要に応じて、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)

}

ガベージコレクションを減らすには、を使用してこのリスナーを1回実行する必要があります。 once キーワード。したがって、 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サイト）コンテンツをロードします。

このチュートリアルでは、 https://www.digitalocean.com アプリケーションの2番目のウィンドウの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でビルドする場合は、SnapとAppImage for x64 出力になります。それ以外の場合、Linuxでビルドする場合、出力は現在のアーキテクチャのSnapファイルとAppImageファイルになります。

これで、すべてのプラットフォーム用のアプリケーションが構築されました。

結論

このチュートリアルでは、Electronフレームワークを使用して最初のクロスプラットフォームアプリケーションを作成し、ネイティブ機能を追加して、macOSで配布用にビルドしました。

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