Clever Geek Handbook

ElectronおよびWebテクノロジーを使用したデスクトップアプリケーションの作成

電子の紹介


Electronプロジェクトの公式ページ 。



Electronは、もともとGitHubによってAtom用に開発されました。



Electron（以前のAtom Shell）は、HTML、CSS、JavaScriptを使用してクロスプラットフォームアプリケーションを作成することを可能にします。 これは、Web開発に携わっているチームにとって大きなプラスです。 既存のプロジェクトのデスクトップバージョンを作成するために新しい開発者を探す必要はありません。



Electronは、アプリケーションが動作し、オペレーティングシステムのネイティブAPIにアクセスするために必要なプリコンパイルされたバイナリとライブラリです。 これには、デスクトップ環境での作業を目的としたNode.jsと、JavaScriptによって制御されるChromiumブラウザーの最小バージョンが含まれています。



したがって、これはWebアプリケーションが実行される環境に他なりません。



現在、Electron v0.35.0には以下が含まれます。





Electronの代替は、 NW.jsプロジェクト（以前はnode-webkitとして知られていました）です。 ここで違いについて読むことができます 。



私の意見では、Webテクノロジを使用したデスクトップアプリケーションの開発、つまりユーザーインターフェイスの作成に制限がないことを示しています。



ユーザーインタラクションインターフェイスは、作成したWebページです。 この場合、プラットフォームのインターフェイス要素のシステムセットに限定されず、Webテクノロジーを使用して必要なUI要素を作成できます。 そして、ボックス内に最も先進的なブラウザーの1つがあることを考えると、最新のWebテクノロジーを使用できます。



メインテキストエディター（またはIDE）を使用し、 Node.js / npmがインストールされていると仮定します。 また、Webページの作成についての理解を心配することがないように、HTML / CSS / JavaScriptの知識（Node.jsの知識は害にならないがオプションです）があることを願っています。 そのような知識がない場合は、おそらくいくらか失われたと感じるでしょう。最初にWeb開発の基礎を学ぶことをお勧めします。



それでは、Electronはどのように機能しますか。



入力ポイントはpackage.jsonファイルで定義されているメインファイルであり、アプリケーションの起動時に実行されるのはそれです。 このメインファイル（通常はメインと呼ばれます）には、Webページがレンダリングおよび表示されるアプリケーションウィンドウが作成され、オペレーティングシステムのネイティブGUIと対話する追加機能があります。 メインスクリプトを実行するプロセスは、メインプロセスと呼ばれます。



ElectronはChromiumを使用してウェブページを表示し、Chromiumのマルチプロセッサアーキテクチャも使用されています。 Electronの各Webページは、レンダラープロセスと呼ばれる独自のプロセスで実行されます。



通常のブラウザでは、Webページは閉じられた環境（いわゆるサンドボックス）で実行され、ネイティブリソースにアクセスできません。 ただし、Electronユーザーは、オペレーティングシステムへの低レベルのアクセス権で、WebページでNode.js APIを使用できます。



すでにわかっていることに基づいて、最も単純なアプリケーションを作成するには、次の3つのファイルのみが必要です。



package.json

main.js

index.html



簡単なHello worldアプリケーションを作成しましょう


最初のアプリケーションでは、Electronに含まれる部品のバージョンに関する情報を表示します。



この場合のpackage.jsonは次のようになります。 



{ "name" : "electron-simple-app", "version" : "0.0.1", "main" : "main.js" }


「名前」：「electron-simple-app」は、アプリケーションの名前です。

「バージョン」：「0.0.1」はそれぞれバージョンです。

「メイン」：「main.js」-およびメインスクリプト。



メインフィールドがpakage.jsonで指定されていない場合、デフォルトでElectronはindex.jsファイルをロードしようとします。



main.jsでは、アプリケーションのウィンドウを作成し、システムイベントを処理する必要があります。これが、アプリケーションのメインスクリプトの外観です。 



 const electron = require('electron'); const app = electron.app; //      . const BrowserWindow = electron.BrowserWindow; //    . //          Electron. electron.crashReporter.start(); //    ,    ,  //      JavaScript     . var mainWindow = null; //        . app.on('window-all-closed', function() { //  OS X      menu bar //             Cmd + Q if (process.platform != 'darwin') { app.quit(); } }); //      Electron   //       . app.on('ready', function() { //   . mainWindow = new BrowserWindow({width: 800, height: 600}); //    index.html   . mainWindow.loadURL('file://' + __dirname + '/index.html'); //  DevTools. mainWindow.webContents.openDevTools(); //         . mainWindow.on('closed', function() { //    ,       //       ,   //     . mainWindow = null; }); });


index.htmlは、表示するWebページです。 



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


コードを含むリポジトリ-https://github.com/DangelZM/electron-simple-app



すべてのファイルを作成するか、リポジトリを傾ける場合、アプリケーションをローカルで実行して、意図したとおりに機能するかどうかを確認してください。



アプリケーションを実行するには、 electron-prebuilt moduleが必要です 。



npmを使用して、アプリケーションにグローバルまたはローカルに配信できます。



グローバルインストールの場合、アプリケーションを実行するには、アプリケーションのルートでコマンドを実行します。 



 electron .


ローカルインストールの場合、以下を実行します。 



 ./node_modules/.bin/electron .


アプリケーションを実行する準備をしたリポジトリに、依存関係をインストールする必要があります。 



 npm install


npmを使用してスクリプトを実行します。 



 npm start


作成されたアプリケーションを起動する例は、以下のビデオで見ることができます：





More articles:


All Articles