翻訳|「JavaScriptEverywhere」第18章Electronを使用したデスクトップアプリケーション

一番上に書く

みなさん、こんにちは。フロントエンド開発エンジニアのMaoXiaoyouです。英語の技術書が翻訳されています。

みんなの読書体験を向上させるために、文章の構造と内容がわずかに調整されました。この記事に欠陥を見つけた場合、またはコメントや提案がある場合は、コメント領域にメッセージを残すか、WeChat：を追加して、code\_maomaoコミュニケーションと学習を歓迎します。

（σﾟ∀ﾟ）σ…：*☆ああ、いいね

第18章Electronを使用したデスクトップアプリケーション

私が初めてパソコンに触れたのは、Apple II機械でいっぱいの学校の実験室でした。

週に1回、クラスメートと私は教師によって教室に連れて行かれ、フロッピーディスクをいくつか渡し、アプリケーションの読み込み方法についてOregon Trail大まかな指示を出しました（通常）。これらのコースでは、ぼんやりしていたことを思い出す以外は、はっきりと何も思い出せませんでした。1980パーソナルコンピュータは10年半ばから長い道のりを歩んできましたが、それでも多くのタスクを実行するにはデスクトップアプリケーションに依存する必要があります。

通常、私は電子メールクライアント、テキストエディタ、チャットクライアント、スプレッドシートソフトウェア、音楽ストリーミングサービス、およびその他の複数のデスクトップアプリケーションにアクセスできます。一般に、これらのアプリケーションはアプリケーションとWeb同等の機能を備えていますが、デスクトップアプリケーションの利便性と統合により、ユーザーに多くのメリットをもたらすことができます。ただし、これらのアプリケーションを作成する機能は、長年にわたって非常に不足しています。幸いなことに、今日では、ネットワークテクノロジーを使用して、小さな学習曲線でフル機能のデスクトップアプリケーションを構築できます。

私たちが構築しているもの

次のいくつかの章ではNotedly、ソーシャルノート作成アプリケーション用のデスクトップクライアントを構築します。私たちの目標は、ユーザーが自分のコンピューターにダウンロードしてインストールできるデスクトップアプリケーションを開発するためにJavaScript、Webテクノロジーを使用することです。現在、アプリケーションは、アプリケーションをWebデスクトップアプリケーションにラップする単純な実装になりますshell。この方法でアプリケーションを開発することで、関心のあるユーザーにデスクトップアプリケーションをすばやく送信できると同時に、将来的にデスクトップユーザー向けのカスタムアプリケーションを柔軟に導入できるようになります。

どのように構築するか

アプリケーションを構築するにElectronは、Webテクノロジーを使用してクロスプラットフォームのデスクトップアプリケーションを構築するためのオープンソースフレームワークであるアプリケーションを使用します。それはの利点を取ることができますNode.jsし、Chromeブラウザエンジンの基礎Chromium作業に。

これは、開発者として、Node.js通常はWeb環境で使用できないブラウザーとオペレーティングシステム固有の機能を使用できることを意味します。ElectronもともとGitHubなどAtomのテキストエディタを開発、しかし含む、アプリケーションプラットフォームのサイズとして使用されているのでSlack、VS Code、DiscordとWordPress Desktop。

入門

開発を開始する前に、プロジェクトランチャーファイルをコンピューターにコピーする必要があります。

プロジェクトのソースコードには、アプリケーションの開発に必要なすべてのスクリプトとサードパーティライブラリへの参照が含まれています。

コードをローカルコンピューターに複製するには、ターミナルを開き、git cloneプロジェクトが保存されているディレクトリに切り替えてから、プロジェクトリポジトリに切り替えます。学習APIしてWeb章を作成した場合は、notedly整理されたプロジェクトコードを保持するためのディレクトリが作成されている可能性があります。

$ cd Projects
$ # type the `mkdir notedly` command if you don't yet have a notedly directory
$ cd notedly
$ git clone git@github.com:javascripteverywhere/desktop.git
$ cd desktop
$ npm install

サードパーティの依存関係をインストールする

この本のスターターコードのコピーを作成し、ディレクトリnpm installで実行することにより、サードパーティの依存関係のために再度実行する必要はありませんnpm install。

コードの構造は次のとおりです。

/src

これは、本を使用して開発するディレクトリです。
/solutions

カタログには、各章のソリューションが含まれています。
行き詰まった場合は、これらを参考にしてください。
/final

このディレクトリには、最終的な作業項目が含まれています。

プロジェクトディレクトリを作成して依存関係をインストールしたら、開発を開始できます。

私たちの最初の電子アプリケーション

コードリポジトリをコンピュータに複製した後、最初のElectronアプリケーションを開発しましょう。srcディレクトリを見ると、そこにいくつかのファイルがあります。index.htmlファイルにはHTMLタグが含まれています。現在、このファイルはElectron「レンダラーパス」Electronとして使用されます。つまり、アプリケーションがウィンドウとして表示するWebページになります。

<!DOCTYPE html>
<html>
  <head>
   <meta charset="UTF-8">
   <title>Notedly Desktop</title>
  </head>
  <body>
   <h1>Hello World!</h1>
  </body>
</html>

ファイルにアプリケーションをindex.js設定しElectronます。このアプリケーションでは、このファイルElectronには、アプリケーションを定義するいわゆる「メインプロセス」が含まれますshell。メインプロセスは、アプリケーションとして使用されるインスタンスをElectron作成することによって機能しBrowserWindowますshell。

index.jsおよびmain.js

私たちの場合のアプリケーションでは、他の部分にindex.js名前が付けられていますが、通常、ソフトウェア開発ではmain.js「メインプログラム」と呼ばれます。HTMLページを含むブラウザウィンドウを表示するメインプロセスを設定しましょう。まず、Electronアプリケーションをインポートしてから、src/index.jsにbrowserWindow関数を記述します。

const {
    
     app, BrowserWindow } = require('electron');

これで、アプリケーションbrowserWindowを定義し、アプリケーションがロードするファイルを定義できます。src/index.js、以下を追加します。

const {
    
     app, BrowserWindow } = require('electron');

// to avoid garbage collection, declare the window as a variable
let window;

// specify the details of the browser window
function createWindow() {
    
    
  window = new BrowserWindow({
    
    
   width: 800,
   height: 600,
   webPreferences: {
    
    
    nodeIntegration: true
   }
  });

  // load the HTML file
  window.loadFile('index.html');

  // when the window is closed, reset the window object
  window.on('closed', () => {
    
    
   window = null;
  });
}

// when electron is ready, create the application window
app.on('ready', createWindow);

これで、デスクトップアプリケーションをローカルで実行する準備が整いました。ターミナルアプリケーションで、プロジェクトディレクトリから次のコマンドを実行します。

$ npm start

このコマンドは、electron.jsを実行しsrc/index、アプリケーションの開発環境バージョンを開始します（画像を参照18-1）。

図18-1。startコマンドを実行すると、 " Hello World"Electronアプリケーションが起動します

macOSアプリケーションウィンドウの詳細

macOSアプリケーションウィンドウの処理方法はWindows異なります。ユーザーが[ウィンドウを閉じる]ボタンをクリックすると、アプリケーションウィンドウは閉じますが、アプリケーション自体は終了しません。macOSドックのアプリケーションアイコンをクリックすると、アプリケーションウィンドウが再び開きます。Electronこの機能の実装を許可します。src/index.jsファイルの最後に以下を追加します。

// quit when all windows are closed.
app.on('window-all-closed', () => {
    
    
  // On macOS only quit when a user explicitly quits the application
  if (process.platform !== 'darwin') {
    
    
   app.quit();
  }
});

app.on('activate', () => {
    
    
  // on macOS, re-create the window when the icon is clicked in the dock
  if (window === null) {
    
    
   createWindow();
  }
});

この機能を追加した後、アプリケーションを終了し、npm startコマンドで再実行することで、これらの変更を表示できます。これで、ユーザーがmacOSアプリケーションへのアクセスを使用している場合、ウィンドウを閉じると期待される動作が表示されます。

開発者ツール

のでElectronベースのChromiumブラウザエンジン（Chrome、Microsoft Edge、Operaおよび他の多くのブラウザ）、それはまた、私たちが使用することを可能にするChromium開発ツールを。これにより、ブラウザ環境と同じJavaScriptデバッグをすべて実行できます。アプリケーションが開発モードになっているかどうかを確認しましょう。そうである場合は、アプリケーションの起動時に開発ツールを自動的に開いてください。

このチェックを実行するには、electronic-utilライブラリを使用します。これは、システムの状態を簡単にチェックし、一般的なElectronスタイルのコードを簡素化できるユーティリティの小さなセットです。

次に、isモジュールを使用します。これにより、アプリケーションが開発モードにあるかどうかを確認できます。

src/indexトップたちの.jsファイル、モジュールをインポートします。

const {
    
     is } = require('electron-util');

これで、アプリケーションコードで、ファイルをwindow.loadFile（* index.html*）HTMLにロードできます。アプリケーションが開発環境にある場合、開発ツールが開きます（画像18-2）。

// if in development mode, open the browser dev tools
if (is.development) {
    
    
  window.webContents.openDevTools();
}

図18-2。これで、開発中にアプリケーションを開くと、ブラウザ開発ツールが自動的に開きます。

電子安全警告

現在、Electronアプリケーションに安全でないコンテンツセキュリティポリシーにCSP関連するセキュリティ警告が表示されていることに気付くかもしれません（）。この警告については、次の章で説明します。

ブラウザ開発ツールに簡単にアクセスできるため、クライアントアプリケーションを開発する準備が整っています。

Electron API

デスクトップ開発の利点の1つは、を介してElectron API、Webブラウザ環境では使用できないオペレーティングシステムレベルの機能にアクセスできることです。

通知
ネイティブファイルのドラッグアンドドロップ
macOSダークモード
カスタムメニュー
堅牢なキーボードショートカット
システムダイアログ
アプリケーショントレイ
システムメッセージ

ご想像のとおり、これらのオプションを使用すると、デスクトップクライアントにいくつかの独自の機能を追加して、ユーザーエクスペリエンスを向上させることができます。単純なサンプルアプリケーションでは使用しませんが、それらに精通している必要があります。Electronドキュメントには、それぞれのElectron API詳細な例が記載されています。さらに、Electronチームは多くのユニークな機能を示すelectron-api-demos完全に機能するElectronアプリケーションを作成しましたElectron API。

結論として

この章では、ElectronパススルーWebテクノロジを使用してデスクトップアプリケーションを構築するための基本について説明しました。Electronこの環境は、（開発者として）複数のプログラミング言語やオペレーティングシステムを学ぶ複雑さなしに、クロスプラットフォームのデスクトップエクスペリエンスをユーザーに提供する機会を提供します。この章Webで説明した簡単なセットアップと開発の知識により、堅牢なデスクトップアプリケーションを構築する準備が整いました。次の章では、既存のWebアプリケーションを組み込む方法を学習しますElectron Shell。

理解が不十分な場合は訂正してください。大丈夫だと思ったら、もっと多くの人を助けたいと思って、集めたり共有したりしてください。