開発者ドキュメント

Electron.jsの紹介-パート1：セットアップ

getdocs

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

前提条件

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

インストール

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

$ 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/tailwindcss@^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;

窓

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

基本的に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 では、クライアントとサーバー間の通信、データベースの管理、アプリのバンドルなど、より興味深い部分について説明します。 完成した例のリポジトリはここにあります。

モバイルバージョンを終了