この記事では、Electron.jsを使用して独自のネイティブデスクトップアプリケーションを開発する方法を学習します。 メニューの作成、ローカルデータの操作、ローカルマシンで実行できるものへのアプリのバンドルの背後にある基本をマスターするために、基本的なToDoリストアプリを作成します。 これらのオプションのいずれかをさらに詳しく調べたい場合は、公式ドキュメントをご覧ください。

前提条件

必要なNode.jsの基本は一部だけですが、MongoDBとMongoose上に構築されたNedbを使用するため、NoSQLデータベースの使用に精通していると非常に役立ちます。ここで詳細を確認できます[X215X ]。

インストール

物事を始めるために必要なものはほんのわずかです。

  • electron
  • electromonライブリロード電子アプリ用のnodemonのバージョン。
  • nedb MongoDBとMongooseのバージョンで、データをマシンに直接保存できます。
  • electronic-packagerアプリのビルダー。後で送信してダウンロードできます。
$ npm i electron electromon nedb electron-packager

ファイル構造

本当に始める必要があるのは、さまざまなオペレーティングシステム用のアイコン、クライアント側のJavaScriptファイルを含むHTMLページ、およびサーバー用のファイルを配置する場所です。 また、メニューバーは少し面倒になる可能性があるため、独自のコンポーネントに分割します。

* assets 📂
  * icons 📂 // electron-packager needs a different logo format for every platform
    * mac  // mac and linux, since they take the same file type
    * win 
* src 📂 
  * MenuBar.js
  * index.html 
  * script.js
* app.js
* package.json

設定

プロジェクトのpackage.jsonファイルの場合、scriptsオブジェクトは複雑に見えるかもしれませんが、さまざまなプラットフォームにデプロイする準備ができたときに備えて、開始スクリプトといくつかのビルドコマンドを追加しているだけです。 ビルドコマンドで、--iconパスが正しい場所につながり、ProductNameがアプリの名前と等しいことを確認します。アイコンについては、後で心配します。

package.json
{
  "dependencies": {
    "electromon": "^1.0.10",
    "electron": "^5.0.8",
    "electron-packager": "^14.0.3",
    "nedb": "^1.8.0"
  },
  "name": "electron-app",
  "version": "1.0.0",
  "main": "app.js",
  "devDependencies": {},
  "scripts": {
    "start": "electromon .",
    "package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds",
    "package-win": "electron-packager . --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"Electron App\"",
    "package-linux": "electron-packager . --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

基本的なHTMLページだけでインターフェースを設定しましょう。 Taiwind CSS フレームワークを使用して、見栄えを少し良くします。 本当に必要なのは、新しいアイテムを入力するためのフォームと、後でそれらを追加するための空のulだけです。

index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://unpkg.com/[email protected]^1.0/dist/tailwind.min.css" rel="stylesheet">
  <title>Electron</title>
</head>

<body class="bg-gray-900 text-white flex flex-col items-center">
  <form>
    <input type="text" placeholder="New Item" class="bg-transparent rounded h-12 mt-4 pl-3">
    <button type="submit" class="bg-blue-800 rounded h-12 w-16">Add</button>
  </form>

  <ul></ul>

  <script src="./script.js"></script>
</body>
</html>

エラーが発生しないように、メニューバーを空の配列に設定するだけで、app.jsに渡されてレンダリングされます。 これについては後で詳しく説明します。

MenuBar.js
const menuBar = [];

module.exports = menuBar;

すべてを要求した後、必要なすべてのツールを電子から分解します。

  • appアプリのライフサイクルを制御します。 オン、シャットオフ、リロードなど。
  • BrowserWindowウィンドウ自体を確立し、オプションの長いリストが付属していますが、本当に必要なのは、クライアント側でNode.jsを使用するように指示することだけです。
  • MenuMenuBar.jsのテンプレートからメニューバーを設定します
  • ipcMainサーバーとクライアント間のイベント呼び出しを制御します。 これはクライアント側の対応物であるipcRendererがデータをサーバーに送信し、ipcMainはデータをマシンに保存する前にそれをキャッチします。

基本的にWebページを作成しているだけなので、新しいウィンドウにページURLを渡すだけで、 url.format()を使用してもう少し口当たりを良くすることができます。

app.js
const electron = require('electron');
const url = require('url');
const path = require('path');

// Components
const menuBar = require('./src/components/MenuBar');

const { app, BrowserWindow, Menu, ipcMain } = electron;

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    webPreferences: { nodeIntegration: true } // This will allow us to use node specific tools like require in our client side javascript.
  });
  mainWindow.loadURL(url.format({
    // All this is doing is passing in to file://your_directory/src/index.html
    pathname: path.join(__dirname, 'src/index.html'),
    protocol: 'file:',
    slashes: true
  }));

  // Shut down app when window closes
  mainWindow.on('closed', () => app.quit()); 

  const mainMenu = Menu.buildFromTemplate(menuBar);
  Menu.setApplicationMenu(mainMenu);
});

結論

この記事は長くなりすぎたので、もう少しわかりやすくするために2つに分割することにしました。 これまでのところ、優れた定型文になっています。パート2 では、クライアントとサーバー間の通信、データベースの管理、アプリのバンドルなど、より興味深い部分について説明します。 完成した例のリポジトリはここにあります。