電子入門

多くの革新的で非常に人気のあるクロスプラットフォームアプリケーションを強化するGitHubによって構築されたフレームワークであるElectronの基本を学びます

Electronは、構築のためのオープンソースで無料のツールですクロスプラットフォームのデスクトップアプリGitHubによって構築されたJS、HTML、CSSを使用

これは非常に人気があり、VS Code、Slack、Discordなど、非常に成功しているアプリケーションで使用されています。

Electronは、JavaScriptベースのプロセスとして実行可能にすることで、ネイティブデスクトップアプリの開発に革命をもたらした巨大なプロジェクトです。

注意：Electronより前でも他のツールを使用してJavaScriptベースのデスクトップアプリケーションを作成することは可能でしたが、Electronはそれをはるかに主流にしました。

特に、Electronはクロスプラットフォームのデスクトップアプリの作成を許可しました。以前は、どこでも同じアプリを実行できるツールはありませんでした。

Electronがリリースされた2014年まで。

電子内部の概要

Electronは基本的に、ChromiumレンダリングライブラリとNode.js（Chromeブラウザを構築するGoogleが作成したオープンソースプロジェクトであるChromium）をバンドルしています。

V8 JavaScriptエンジンを実行するChromiumを搭載したキャンバスにアクセスし、任意のNode.jsパッケージを使用して、独自のNode.jsコードを実行することができます。

必要に応じて、これはデスクトップ用の一種のNode.jsです。 GUI要素は提供されませんが、HTML、CSS、およびJavaScriptを使用してUIを作成できます。

Electronは、高速で、サイズが小さく、可能な限りスリムでありながら、すべてのアプリが信頼できるコア機能を提供することを目指しています。

Electronを使用して作成できるアプリの種類

次のようなさまざまな種類のアプリを作成できます。

ドックアイコンとウィンドウを備えた通常のアプリ
ドックアイコンのないメニューバーアプリ
デーモン
コマンドラインユーティリティ

Electronアプリの優れたコレクションは、公式サイトで入手できます。https://electronjs.org/apps。 Electronを使用すると、アプリを作成してWindowsおよびMac AppStoreで公開できます。

ElectronAPIアプリ

あなたはできるElectronAPIデモアプリをダウンロードする、Electronを使用して構築された公式のサンプルデスクトップアプリです。

Electron app demo

このアプリはかなりクールで、Electronのいくつかの機能を試すことができます。これはオープンソースであり、コードは次のURLで入手できます。https://github.com/electron/electron-quick-start。

Electron app demo

最初のElectronアプリを作成する方法

まず、ファイルシステムに新しいフォルダを作成し、その中に実行します。

npm init -y

を作成するにはpackage.jsonファイル：

{
  "name": "testelectron",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

この行をに追加しますscriptsセクション：

"scripts": {
  "start": "electron ."
}

次に、Electronをインストールします。

npm install -D electron

電子は今で始めることができます

npm start

ただし、そうすると、エラーが表示されます。index.jsファイル、これは私たちが書いたものですpackage.json私たちのアプリの主な出発点となるファイル：

Hello World Electron GUIアプリ！

ウィンドウにHelloWorldを表示するアプリケーションを作成しましょう。

2つのファイルを作成し、main.js：

const { app, BrowserWindow } = require('electron')
function createWindow() {
// Create the browser window.
  const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
})
// and load the index.html of the app.
  win.loadFile(‘index.html’)
}
app.whenReady().then(createWindow)

そしてindex.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node
    <script>
      document.write(process.versions.node)
    </script>
    , Chrome
    <script>
      document.write(process.versions.chrome)
    </script>
    , and Electron
    <script>
      document.write(process.versions.electron)
    </script>
    .
  </body>
</html>

もう一度実行しますyarn start、このウィンドウが表示されます。

Activity monitor

これは非常に単純な1ウィンドウのアプリであり、このウィンドウを閉じると、アプリケーションは終了します。

アプリ開発者の生活を楽にする

Electronは、開発者の生活を楽にすることを目的としています。アプリケーションには多くの共通の問題があります。彼らは、ネイティブAPIが想像するよりも少し複雑にすることがあることを実行する必要があります。

電子は簡単な方法を提供しますアプリ内購入を管理する、通知、ドラッグアンドドロップ、キーショートカットの管理など。

それはまた提供しますアプリの更新のためのホステッドサービス、サービスなどを自分で構築する必要がある場合よりも、アプリの更新をはるかに簡単にするため。