Electron：クロスプラットフォームのデスクトップアプリが簡単に

公開: 2022-03-11

今年の初めに、Githubは有名なオープンソースエディターAtomのコアであるAtom-Shellをリリースし、特別な機会のために名前をElectronに変更しました。

Electronは、Node.jsベースのデスクトップアプリケーションのカテゴリの他の競合他社とは異なり、Node.js（最近のリリースまではio.js）のパワーとChromiumエンジンを組み合わせることで、このすでに確立された市場に独自のひねりをもたらします。サーバー側とクライアント側の両方のJavaScriptの最高のものです。

増え続けるNPMモジュールのリポジトリだけでなく、Bowerレジストリ全体を利用して、パフォーマンスの高いデータ駆動型のクロスプラットフォームデスクトップアプリケーションを構築し、クライアント側のすべてのニーズを満たすことができる世界を想像してみてください。

Electronと入力します。

Electronを使用したクロスプラットフォームデスクトップアプリの構築

Electronを使用したクロスプラットフォームデスクトップアプリの構築
つぶやき

このチュートリアルでは、Electron、Angular.js、Loki.jsを使用して、シンプルなパスワードキーチェーンアプリケーションを構築します。これは、MongoDB開発者にとっておなじみの構文を備えた、軽量でメモリ内のデータベースです。

このアプリケーションの完全なソースコードは、こちらから入手できます。

このチュートリアルでは、次のことを前提としています。

  • リーダーには、Node.jsとBowerがマシンにインストールされています。
  • 彼らはNode.js、Angular.js、MongoDBのようなクエリ構文に精通しています。

商品の入手

まず最初に、アプリをローカルでテストするために、Electronバイナリを取得する必要があります。 グローバルにインストールしてCLIとして使用することも、アプリケーションのパスにローカルにインストールすることもできます。 グローバルにインストールすることをお勧めします。そうすれば、開発するすべてのアプリで何度もインストールする必要がなくなります。

Gulpを使用して配布用にアプリケーションをパッケージ化する方法については後で学習します。 このプロセスにはElectronバイナリのコピーが含まれるため、アプリケーションのパスに手動でインストールしてもほとんど意味がありません。

Electron CLIをインストールするには、ターミナルで次のコマンドを入力します。

 $ npm install -g electron-prebuilt

インストールをテストするには、 electron -hと入力すると、ElectronCLIのバージョンが表示されます。

この記事が書かれた時点では、Electronのバージョンは0.31.2た。

プロジェクトの設定

次の基本的なフォルダ構造を想定しましょう。

 my-app |- cache/ |- dist/ |- src/ |-- app.js | gulpfile.js

…ここで： -cache /は、アプリのビルド時にElectronバイナリをダウンロードするために使用されます。 --dist /には、生成された配布ファイルが含まれます。 --src/にはソースコードが含まれます。 --src/app.jsがアプリケーションのエントリポイントになります。

次に、ターミナルのsrc/フォルダーに移動し、アプリのpackage.jsonファイルとbower.jsonファイルを作成します。

 $ npm init $ bower init

このチュートリアルの後半で、必要なパッケージをインストールします。

電子プロセスを理解する

電子は、2つのタイプのプロセスを区別します。

  • メインプロセス：アプリケーションのエントリポイント、アプリを実行するたびに実行されるファイル。 通常、このファイルはアプリのさまざまなウィンドウを宣言し、オプションで、ElectronのIPCモジュールを使用してグローバルイベントリスナーを定義するために使用できます。
  • レンダラープロセス：アプリケーションの特定のウィンドウのコントローラー。 各ウィンドウは、独自のレンダラープロセスを作成します。

コードを明確にするために、レンダラープロセスごとに個別のファイルを使用する必要があります。 アプリのメインプロセスを定義するには、 src/app.jsを開き、アプリを起動するためのappモジュールと、アプリのさまざまなウィンドウ（両方ともElectronコアの一部）を作成するためのbrowser-windowモジュールを含めます。そのような：

 var app = require('app'), BrowserWindow = require('browser-window');

アプリが実際に起動されると、バインド可能なreadyイベントが発生します。 この時点で、アプリのメインウィンドウをインスタンス化できます。

 var mainWindow = null; app.on('ready', function() { mainWindow = new BrowserWindow({ width: 1024, height: 768 }); mainWindow.loadUrl('file://' + __dirname + '/windows/main/main.html'); mainWindow.openDevTools(); });

キーポイント：

  • BrowserWindowオブジェクトの新しいインスタンスを作成することにより、新しいウィンドウを作成します。
  • オブジェクトを単一の引数として取り、さまざまな設定を定義できるようにします。その中には、ウィンドウのデフォルトの幅と高さがあります。
  • ウィンドウインスタンスにはloadUrl()メソッドがあり、現在のウィンドウに実際のHTMLファイルのコンテンツをロードできます。 HTMLファイルは、ローカルまたはリモートのいずれかになります。
  • ウィンドウインスタンスにはオプションのopenDevTools()メソッドがあり、デバッグ目的で現在のウィンドウでChromeDevToolsのインスタンスを開くことができます。

次に、コードを少し整理する必要があります。 src/フォルダーにwindows/フォルダーを作成することをお勧めします。ここで、各ウィンドウのサブフォルダーを作成できます。

 my-app |- src/ |-- windows/ |--- main/ |---- main.controller.js |---- main.html |---- main.view.js

…ここで、 main.controller.jsにはアプリケーションの「サーバー側」ロジックが含まれ、 main.view.jsにはアプリケーションの「クライアント側」ロジックが含まれます。

main.htmlファイルは単純にHTML5Webページであるため、次のように簡単に開始できます。

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Password Keychain</title> </head> <body> <h1>Password Keychain</h1> </body> </html>

この時点で、アプリを実行する準備ができているはずです。 それをテストするには、 srcフォルダーのルートにあるターミナルに次のように入力するだけです。

 $ electron .

package.sonファイルのstartスクリプトを定義することで、このプロセスを自動化できます。

パスワードキーチェーンデスクトップアプリの構築

パスワードキーチェーンアプリケーションを構築するには、次のものが必要です。-パスワードを追加、生成、および保存する方法。 -パスワードをコピーおよび削除するための便利な方法。

パスワードの生成と保存

新しいパスワードを挿入するには、単純なフォームで十分です。 Electronの複数のウィンドウ間の通信を示すために、アプリケーションに2番目のウィンドウを追加することから始めます。これにより、「挿入」フォームが表示されます。 このウィンドウは何度も開いたり閉じたりするので、必要なときに簡単に呼び出せるように、ロジックをメソッドにまとめる必要があります。

 function createInsertWindow() { insertWindow = new BrowserWindow({ width: 640, height: 480, show: false }); insertWindow.loadUrl('file://' + __dirname + '/windows/insert/insert.html'); insertWindow.on('closed',function() { insertWindow = null; }); }

キーポイント：

  • アプリケーションの起動時にウィンドウがデフォルトで開かないようにするには、BrowserWindowコンストラクターのoptionsオブジェクトでshowプロパティをfalseに設定する必要があります。
  • ウィンドウがclosedイベントを発生させるたびに、BrowserWindowインスタンスを破棄する必要があります。

「挿入」ウィンドウの開閉

アイデアは、エンドユーザーが「メイン」ウィンドウのボタンをクリックしたときに「挿入」ウィンドウをトリガーできるようにすることです。 これを行うには、メインウィンドウからメインプロセスにメッセージを送信して、挿入ウィンドウを開くように指示する必要があります。 これは、ElectronのIPCモジュールを使用して実現できます。 IPCモジュールには実際には2つのバリエーションがあります。

  • メインプロセス用の1つで、アプリがWindowsから送信されたメッセージをサブスクライブできるようにします。
  • 1つはレンダラープロセス用で、アプリがメインプロセスにメッセージを送信できるようにします。

Electronの通信チャネルはほとんど単方向ですが、リモートモジュールを使用することにより、レンダラープロセスでメインプロセスのIPCモジュールにアクセスすることができます。 また、メインプロセスは、Event.sender.send（）メソッドを使用して、イベントの発生元であるレンダラープロセスにメッセージを送り返すことができます。

IPCモジュールを使用するには、メインプロセススクリプトの他のNPMモジュールと同じように必要です。

 var ipc = require('ipc');

…次に、 on()メソッドを使用してイベントにバインドします。

 ipc.on('toggle-insert-view', function() { if(!insertWindow) { createInsertWindow(); } return (!insertWindow.isClosed() && insertWindow.isVisible()) ? insertWindow.hide() : insertWindow.show(); });

キーポイント：

  • イベントには任意の名前を付けることができます。例は任意です。
  • BrowserWindowインスタンスがすでに作成されているかどうかを確認することを忘れないでください。作成されていない場合は、インスタンス化してください。
  • BrowserWindowインスタンスには、いくつかの便利なメソッドがあります。
    • isClosed（）は、ウィンドウが現在closed状態であるかどうかに関係なく、ブール値を返します。
    • isVisible（） ：ウィンドウが現在表示されているかどうかに関係なく、ブール値を返します。
    • show（）/ hidden（） ：ウィンドウを表示および非表示にする便利なメソッド。

次に、実際にレンダラープロセスからそのイベントを発生させる必要があります。 main.view.jsという新しいスクリプトファイルを作成し、通常のスクリプトと同じようにHTMLページに追加します。

 <script src="./main.view.js"></script>

HTML scriptタグを介してスクリプトファイルをロードすると、このファイルがクライアント側のコンテキストでロードされます。 これは、たとえば、グローバル変数がwindow.<varname>を介して利用できることを意味します。 サーバー側のコンテキストでスクリプトをロードするには、HTMLページでrequire()メソッドを直接使用できますrequire('./main.controller.js'); 。

スクリプトはクライアント側のコンテキストで読み込まれますが、メインプロセスの場合と同じ方法で、レンダラープロセスのIPCモジュールにアクセスし、イベントを次のように送信できます。

 var ipc = require('ipc'); angular .module('Utils', []) .directive('toggleInsertView', function() { return function(scope, el) { el.bind('click', function(e) { e.preventDefault(); ipc.send('toggle-insert-view'); }); }; });

イベントを同期的に送信する必要がある場合に備えて、sendSync（）メソッドも使用できます。

これで、「挿入」ウィンドウを開くためにあとは、一致するAngularディレクティブを含むHTMLボタンを作成するだけです。

 <div ng-controller="MainCtrl as vm"> <button toggle-insert-view class="mdl-button"> <i class="material-icons">add</i> </button> </div>

そして、そのディレクティブをメインウィンドウのAngularコントローラーの依存関係として追加します。

 angular .module('MainWindow', ['Utils']) .controller('MainCtrl', function() { var vm = this; });

パスワードの生成

簡単にするために、NPM uuidモジュールを使用して、このチュートリアルの目的でパスワードとして機能する一意のIDを生成できます。 他のNPMモジュールと同じようにインストールし、「Utils」スクリプトでそれを要求してから、一意のIDを返す単純なファクトリを作成できます。

 var uuid = require('uuid'); angular .module('Utils', []) ... .factory('Generator', function() { return { create: function() { return uuid.v4(); } }; })

あとは、挿入ビューでボタンを作成し、ボタンのクリックイベントをリッスンしてcreate（）メソッドを呼び出すディレクティブをアタッチするだけです。

 <!-- in insert.html --> <button generate-password class="mdl-button">generate</button>
 // in Utils.js angular .module('Utils', []) ... .directive('generatePassword', ['Generator', function(Generator) { return function(scope, el) { el.bind('click', function(e) { e.preventDefault(); if(!scope.vm.formData) scope.vm.formData = {}; scope.vm.formData.password = Generator.create(); scope.$apply(); }); }; }])

パスワードの保存

この時点で、パスワードを保存します。 パスワードエントリのデータ構造は非常に単純です。

 { "id": String "description": String, "username": String, "password": String }

したがって、本当に必要なのは、バックアップのためにオプションでファイルに同期できる、ある種のインメモリデータベースです。 この目的のために、Loki.jsは理想的な候補のようです。 このアプリケーションの目的に必要なことを正確に実行し、その上に動的ビュー機能を提供して、MongoDBの集約モジュールと同様のことを実行できるようにします。

動的ビューは、MongodDBの集約モジュールが提供するすべての機能を提供するわけではありません。 詳細については、ドキュメントを参照してください。

簡単なHTMLフォームを作成することから始めましょう。

 <div class="insert" ng-controller="InsertCtrl as vm"> <form name="insertForm" no-validate> <fieldset ng-disabled="!vm.loaded"> <div class="mdl-textfield"> <input class="mdl-textfield__input" type="text" ng-model="vm.formData.description" required /> <label class="mdl-textfield__label" for="description">Description...</label> </div> <div class="mdl-textfield"> <input class="mdl-textfield__input" type="text" ng-model="vm.formData.username" /> <label class="mdl-textfield__label" for="username">Username...</label> </div> <div class="mdl-textfield"> <input class="mdl-textfield__input" type="password" ng-model="vm.formData.password" required /> <label class="mdl-textfield__label" for="password">Password...</label> </div> <div class=""> <button generate-password class="mdl-button">generate</button> <button toggle-insert-view class="mdl-button">cancel</button> <button save-password class="mdl-button" ng-disabled="insertForm.$invalid">save</button> </div> </fieldset> </form> </div>

それでは、フォームのコンテンツの投稿と保存を処理するJavaScriptロジックを追加しましょう。

 var loki = require('lokijs'), path = require('path'); angular .module('Utils', []) ... .service('Storage', ['$q', function($q) { this.db = new loki(path.resolve(__dirname, '../..', 'app.db')); this.collection = null; this.loaded = false; this.init = function() { var d = $q.defer(); this.reload() .then(function() { this.collection = this.db.getCollection('keychain'); d.resolve(this); }.bind(this)) .catch(function(e) { // create collection this.db.addCollection('keychain'); // save and create file this.db.saveDatabase(); this.collection = this.db.getCollection('keychain'); d.resolve(this); }.bind(this)); return d.promise; }; this.addDoc = function(data) { var d = $q.defer(); if(this.isLoaded() && this.getCollection()) { this.getCollection().insert(data); this.db.saveDatabase(); d.resolve(this.getCollection()); } else { d.reject(new Error('DB NOT READY')); } return d.promise; }; }) .directive('savePassword', ['Storage', function(Storage) { return function(scope, el) { el.bind('click', function(e) { e.preventDefault(); if(scope.vm.formData) { Storage .addDoc(scope.vm.formData) .then(function() { // reset form & close insert window scope.vm.formData = {}; ipc.send('toggle-insert-view'); }); } }); }; }])

キーポイント：

  • まず、データベースを初期化する必要があります。 このプロセスでは、Lokiオブジェクトの新しいインスタンスを作成し、引数としてデータベースファイルへのパスを指定し、そのバックアップファイルが存在するかどうかを調べ、必要に応じて作成し（「キーチェーン」コレクションを含む）、このファイルはメモリ内にあります。
  • getCollection()メソッドを使用して、データベース内の特定のコレクションを取得できます。
  • コレクションオブジェクトは、 insert()メソッドを含むいくつかのメソッドを公開し、コレクションに新しいドキュメントを追加できるようにします。
  • データベースの内容をファイルに永続化するために、LokiオブジェクトはsaveDatabase()メソッドを公開します。
  • フォームのデータをリセットし、IPCイベントを送信して、ドキュメントが保存されたらウィンドウを閉じるようにメインプロセスに指示する必要があります。

これで、新しいパスワードを生成して保存できる簡単なフォームができました。 メインビューに戻って、これらのエントリを一覧表示してみましょう。

パスワードの一覧表示

ここでいくつかのことが起こる必要があります：

  • コレクション内のすべてのドキュメントを取得できる必要があります。
  • ビューを更新できるように、新しいパスワードが保存されるたびにメインビューに通知する必要があります。

LokiオブジェクトでgetCollection()メソッドを呼び出すことにより、ドキュメントのリストを取得できます。 このメソッドは、 dataというプロパティを持つオブジェクトを返します。これは、そのコレクション内のすべてのドキュメントの配列です。

 this.getCollection = function() { this.collection = this.db.getCollection('keychain'); return this.collection; }; this.getDocs = function() { return (this.getCollection()) ? this.getCollection().data : null; };

次に、AngularコントローラーでgetDocs（）を呼び出し、データベースを初期化した後、データベースに保存されているすべてのパスワードを取得できます。

 angular .module('MainView', ['Utils']) .controller('MainCtrl', ['Storage', function(Storage) { var vm = this; vm.keychain = null; Storage .init() .then(function(db) { vm.keychain = db.getDocs(); }); });

少しAngularテンプレートを作成し、パスワードリストを用意しました。

 <tr ng-repeat="item in vm.keychain track by $index" class="item--{{$index}}"> <td class="mdl-data-table__cell--non-numeric">{{item.description}}</td> <td>{{item.username || 'n/a'}}</td> <td> <span ng-repeat="n in [1,2,3,4,5,6]">&bull;</span> </td> <td> <a href="#" copy-password="{{$index}}">copy</a> <a href="#" remove-password="{{item}}">remove</a> </td> </tr>

追加された優れた機能は、新しいパスワードを挿入した後にパスワードのリストを更新することです。 このために、ElectronのIPCモジュールを使用できます。 前述のように、メインプロセスのIPCモジュールは、リモートモジュールを使用して、レンダラープロセスで呼び出してリスナープロセスに変えることができます。 main.view.jsに実装する方法の例を次に示します。

 var remote = require('remote'), remoteIpc = remote.require('ipc'); angular .module('MainView', ['Utils']) .controller('MainCtrl', ['Storage', function(Storage) { var vm = this; vm.keychain = null; Storage .init() .then(function(db) { vm.keychain = db.getDocs(); remoteIpc.on('update-main-view', function() { Storage .reload() .then(function() { vm.keychain = db.getDocs(); }); }); }); }]);

キーポイント：

  • メインプロセスからリモートIPCモジュールを要求するには、独自のrequire()メソッドを介してリモートモジュールを使用する必要があります。
  • 次に、 on()メソッドを介してレンダラープロセスをイベントリスナーとして設定し、コールバック関数をこれらのイベントにバインドできます。

挿入ビューは、新しいドキュメントが保存されるたびにこのイベントのディスパッチを担当します。

 Storage .addDoc(scope.vm.formData) .then(function() { // refresh list in main view ipc.send('update-main-view'); // reset form & close insert window scope.vm.formData = {}; ipc.send('toggle-insert-view'); });

パスワードのコピー

通常、パスワードをプレーンテキストで表示することはお勧めできません。 代わりに、エンドユーザーが特定のエントリのパスワードを直接コピーできるようにする便利なボタンを非表示にして提供します。

ここでも、Electronは、テキストコンテンツだけでなく、画像やHTMLコードもコピーして貼り付ける簡単な方法を備えたクリップボードモジュールを提供することで、私たちを助けてくれます。

 var clipboard = require('clipboard'); angular .module('Utils', []) ... .directive('copyPassword', [function() { return function(scope, el, attrs) { el.bind('click', function(e) { e.preventDefault(); var text = (scope.vm.keychain[attrs.copyPassword]) ? scope.vm.keychain[attrs.copyPassword].password : ''; // atom's clipboard module clipboard.clear(); clipboard.writeText(text); }); }; }]);

生成されるパスワードは単純な文字列になるため、 writeText()メソッドを使用して、パスワードをシステムのクリップボードにコピーできます。 次に、メインビューのHTMLを更新し、 copy-passwordディレクティブを含むコピーボタンを追加して、パスワードの配列のインデックスを提供します。

 <a href="#" copy-password="{{$index}}">copy</a>

パスワードの削除

エンドユーザーは、パスワードが廃止された場合に備えて、パスワードを削除できるようにすることもできます。 これを行うには、キーチェーンコレクションでremove()メソッドを呼び出すだけです。 ドキュメント全体を「remove（）」メソッドに提供する必要があります。

 this.removeDoc = function(doc) { return function() { var d = $q.defer(); if(this.isLoaded() && this.getCollection()) { // remove the doc from the collection & persist changes this.getCollection().remove(doc); this.db.saveDatabase(); // inform the insert view that the db content has changed ipc.send('reload-insert-view'); d.resolve(true); } else { d.reject(new Error('DB NOT READY')); } return d.promise; }.bind(this); };

Loki.jsのドキュメントには、IDでドキュメントを削除することもできると記載されていますが、期待どおりに機能していないようです。

デスクトップメニューの作成

ElectronはOSデスクトップ環境とシームレスに統合され、アプリに「ネイティブ」なユーザーエクスペリエンスのルックアンドフィールを提供します。 そのため、Electronには、アプリの複雑なデスクトップメニュー構造の作成専用のメニューモジュールがバンドルされています。

メニューモジュールは広大なトピックであり、ほとんど独自のチュートリアルに値します。 このモジュールのすべての機能を見つけるために、Electronのデスクトップ環境統合チュートリアルを読むことを強くお勧めします。

この現在のチュートリアルの範囲では、カスタムメニューを作成し、それにカスタムコマンドを追加し、標準のquitコマンドを実装する方法を説明します。

カスタムメニューの作成とアプリへの割り当て

通常、ElectronメニューのJavaScriptロジックは、メインプロセスが定義されているアプリのメインスクリプトファイルに属します。 ただし、それを別のファイルに抽象化し、リモートモジュールを介してメニューモジュールにアクセスすることはできます。

 var remote = require('remote'), Menu = remote.require('menu');

簡単なメニューを定義するには、 buildFromTemplate()メソッドを使用する必要があります。

 var appMenu = Menu.buildFromTemplate([ { label: 'Electron', submenu: [{ label: 'Credits', click: function() { alert('Built with Electron & Loki.js.'); } }] } ]);

配列の最初の項目は、常に「デフォルト」メニュー項目として使用されます。

labelプロパティの値は、デフォルトのメニュー項目ではあまり重要ではありません。 開発モードでは、常にElectronが表示されます。 ビルドフェーズでデフォルトのメニュー項目にカスタム名を割り当てる方法については、後で説明します。

最後に、 setApplicationMenu()メソッドを使用して、このカスタムメニューをアプリのデフォルトメニューとして割り当てる必要があります。

 Menu.setApplicationMenu(appMenu);

キーボードショートカットのマッピング

Electronは、実際のキーボードの組み合わせにマップする事前定義された文字列のセットである「アクセラレータ」を提供します。例： Command+AまたはCtrl+Shift+Z 。

Commandアクセラレータは、WindowsまたはLinuxでは機能しません。 パスワードキーチェーンアプリケーションでは、次の2つのコマンドを提供するFile ]メニュー項目を追加する必要があります。

  • パスワードの作成： Cmd（またはCtrl）+Nで挿入ビューを開きます
  • 終了： Cmd（またはCtrl）+Qを使用してアプリを完全に終了します
... { label: 'File', submenu: [ { label: 'Create Password', accelerator: 'CmdOrCtrl+N', click: function() { ipc.send('toggle-insert-view'); } }, { type: 'separator' // to create a visual separator }, { label: 'Quit', accelerator: 'CmdOrCtrl+Q', selector: 'terminate:' // OS X only!!! } ] } ...

キーポイント：

  • typeプロパティをseparatorに設定して配列に項目を追加することにより、視覚的な区切り文字を追加できます。
  • CmdOrCtrlアクセラレータは、MacとPCの両方のキーボードと互換性があります
  • selectorプロパティはOSX互換のみです！

私たちのアプリのスタイリング

さまざまなコード例を通して、 mdl-で始まるクラス名への参照におそらく気づいたでしょう。 このチュートリアルでは、Material Design Lite UIフレームワークを使用することを選択しましたが、任意のUIフレームワークを自由に使用できます。

HTML5でできることはすべて、Electronで行うことができます。 アプリのバイナリのサイズが大きくなり、サードパーティのライブラリを使いすぎるとパフォーマンスの問題が発生する可能性があることに注意してください。

配布用のElectronアプリのパッケージ化

あなたはElectronアプリを作成し、見栄えが良く、SeleniumとWebDriverを使用してe2eテストを作成し、それを世界中に配布する準備ができました。

ただし、それでもパーソナライズし、デフォルトの「Electron」以外のカスタム名を付け、MacとPCの両方のプラットフォームにカスタムアプリケーションアイコンを提供することもできます。

Gulpで構築する

最近、私たちが考えることができるあらゆるもののためのGulpプラグインがあります。 私がしなければならなかったのはグーグルでgulp electronをタイプすることだけです、そして確かにgulp-electronプラグインがあります！

このプラグインは、このチュートリアルの冒頭で説明したフォルダー構造が維持されている限り、かなり簡単に使用できます。 そうでない場合は、物事を少し動かす必要があるかもしれません。

このプラグインは、他のGulpプラグインと同じようにインストールできます。

 $ npm install gulp-electron --save-dev

そして、Gulpタスクを次のように定義できます。

 var gulp = require('gulp'), electron = require('gulp-electron'), info = require('./src/package.json'); gulp.task('electron', function() { gulp.src("") .pipe(electron({ src: './src', packageJson: info, release: './dist', cache: './cache', version: 'v0.31.2', packaging: true, platforms: ['win32-ia32', 'darwin-x64'], platformResources: { darwin: { CFBundleDisplayName: info.name, CFBundleIdentifier: info.bundle, CFBundleName: info.name, CFBundleVersion: info.version }, win: { "version-string": info.version, "file-version": info.version, "product-version": info.version } } })) .pipe(gulp.dest("")); });

キーポイント：

  • src/フォルダーは、Gulpfile.jsが存在するフォルダーと同じにすることも、配布フォルダーと同じフォルダーにすることもできません。
  • platforms配列を介して、エクスポート先のプラットフォームを定義できます。
  • Electronバイナリがダウンロードされるcacheフォルダを定義して、アプリと一緒にパッケージ化できるようにする必要があります。
  • アプリのpackage.jsonファイルの内容は、 packageJsonプロパティを介してgulpタスクに渡す必要があります。
  • オプションのpackagingプロパティがあり、生成されたアプリのzipアーカイブを作成することもできます。
  • プラットフォームごとに、定義できる「プラットフォームリソース」の異なるセットがあります。

アプリアイコンの追加

platformResourcesプロパティの1つはiconプロパティであり、アプリのカスタムアイコンを定義できます。

 "icon": "keychain.ico"

OS Xには、ファイル拡張子が.icnsのアイコンが必要です。 .pngファイルを無料で.icoおよび.icnsに変換できる複数のオンラインツールがあります。

結論

この記事では、Electronが実際に実行できることのほんの一部にすぎません。 AtomやSlackのような優れたアプリを、このツールを使用できるインスピレーションの源として考えてください。

このチュートリアルがお役に立てば幸いです。コメントを残して、Electronでの経験を共有してください。