電子付きのクロスプラットフォームデスクトップノードアプリを作成します

キーテイクアウト

GitHubが開発したツールである
• 電子により、開発者はJavaScriptとWebテクノロジーを使用してクロスプラットフォームデスクトップアプリを作成できます。 Flash、Air、Java、Silverlightなど、以前のオプションよりも安定した安全なソリューションを提供します。
電子プロジェクトには、index.html、main.js、およびpackage.jsonの3つのファイルが必要です。 index.htmlファイルはデフォルトでレンダリングされたWebページ、main.jsファイルはアプリを起動し、HTMLをレンダリングするブラウザウィンドウを作成し、package.jsonファイルはアプリケーション依存関係、メタデータ、および必要なファイルをリストします。
• 電子アプリは、電子パッカーNPMモジュールなどのツールを使用して「ネイティブ」アプリケーションにパッケージ化できます。これにより、Windows、MacOS、Linuxなどのさまざまなプラットフォームで実行できる実行可能なバイナリが作成されます。
電子は単純なアプリだけではありません。複雑な機能を処理し、クリップボードアクセス、アプリケーションメニューバーツール、デバッグ用のChrome開発ツールなどの機能へのアクセスを提供できます。 Atom、Slack、Kitematicなどのいくつかの一般的なアプリケーションは、電子で構築されています。
私を昔ながらと呼んでいますが、各目的に適したデスクトップアプリを使用することを常に好んでいます。私が使用するのが私が行うすべてのブラウザだけであるなら、なぜ「適切な」コンピューターを持っているのでしょうか？実用的なレベルでは、私は頻繁に旅行し、一般にインターネット接続の間に「間に」または不安定なインターネット接続を使用しています。通常、「実際の」アプリケーションは、効果的なオフラインの動作を可能にするのにはるかに優れています。
• ネイティブのデスクトップアプリケーションがどれほど複雑であるかを感謝し、企業がユーザーをWebまたはクロスプラットフォームバージョンにプッシュする理由を理解できます。何十年にもわたってこれを達成するための多くの選択肢がありました。フラッシュ、エア、ジャワ、スライバライトはすべて、さまざまな程度の成功でこの機能を約束するオプションです。
これらのオプションの主な問題は、通常、別の言語（ポイントを打ち負かす）を学ぶか、ユーザーが安定性、パフォーマンス、セキュリティの問題に悩まされているプラ​​グインをインストールすることを強制したことです。

私たちは皆、JavaScriptとWebテクノロジーの力を知っており、この知識を使用してクロスプラットフォームのデスクトップアプリを開発およびパッケージ化するためのオプションの波を見てきました。

電子、Githubによる電子は1つのオプションですが、すでにいくつかのアプリを使用しているので、調査するのに適したオプションのように思えました。 1つの名前の変更（原子シェルから）を含む2年間の開発の後、電子は最近バージョン1.0に達しました。これは常にプロジェクトの存在のマイルストーンです。それが何ができるかを見るのにもっと良い時間

電子の取り付け

Electronにはクイックスタートプロジェクトがあり、事前に構築されたリリースが利用可能ですが、NPMを介して深い端にまっすぐに飛び込み、電子をインストールしましょう。

またはMac Homebrew愛好家の場合、Cask経由：

<span>npm install electron-prebuilt -g
</span>

どのオプションをフォローしても、実行可能な電子バイナリになってしまうはずです。

このアプリケーションは、最終プロジェクトの作成と実行にのみ使用されますが、それを作成するためではありません。このためには、標準のテキストエディターまたはIDEを使用できます。

電子プロジェクトには、3つのファイルが必要です

index.html：デフォルトでレンダリングされたWebページ

Main.js：アプリを起動し、HTMLをレンダリングするためのブラウザウィンドウを作成します。
• package.json：アプリケーションの依存関係、メタデータ、および必要なファイルをリストします。
ヒーローが必要です

この例では、Marvel APIに接続し、25人のスーパーヒーローを引き込み、名前とサムネイルの画像を表示する簡単なアプリケーションを作成します。プロセスが完了したときにシステム通知が表示され、OSのようなアプリケーションアイコンがあります。エンドユーザーは、アプリケーションがどのように作成されたか、またはソースコードを表示できることを認識していません。

githubで最終プロジェクトを見つけることができます。

Package.jsonを開き、次のものを追加します

これは標準のpackage.jsonファイルであり、node.jsと同じ形式とオプションに従います。ここで、アプリケーション名、バージョン、メインJavaScriptファイル、依存関係を設定します。

npmインストールを追加して、これらを追加して、依存関係をインストールしていることを確認してください。

Main.jsは、ホストオペレーティングシステムとJavaScriptコード間の相互作用を処理します。これは簡単な例です。電子のドキュメントで何が可能かについて詳しく知ることができます。

最初に、必要な要件（つまり電子）を設定し、アプリ、ネイティブブラウザウィンドウ、およびメインウィンドウプレースホルダーを作成して作業しましょう。

Windowsが閉じている場合は、アプリケーションを終了する次のハンドル。プラットフォームがOS Xの場合、通常、すべてのウィンドウが閉じられ、ユーザーは通常明示的に終了する後、アプリケーションは通常開いたままであるため、そのユースケースを処理します。

brew <span>install Caskroom/cask/electron
</span>

電子が初期化されたら、ブラウザウィンドウを作成し、アプリケーションコードをロードします。ウィンドウが閉じている場合、ウィンドウオブジェクトを抑制します。

アプリと呼ばれるサブフォルダーを作成します。 app/index.htmlで、必要なスタイルシートとjavascriptファイルに参照を追加し、インターフェイスのHTML構造をセットアップします。

app/css/index.cssを作成し、レイアウトを支援するために基本的なCSSを追加します。

app/js/index.jsを作成します。これは、アプリケーション機能のほとんどが行われる場所です。必要な依存関係と変数をセットアップすることから始めます：

<span>npm install electron-prebuilt -g
</span>

Marvel APIは使用するのが楽しいAPIですが、認証とデータ構造は混乱を招く可能性があります。ここでキーについてサインアップし、次の指示に従って、上記の3つのパラメーターを取得します。認証に必要なパブリックおよびプライベートキーは、.ENVファイルに保存され、dotenvパッケージを使用してアクセスされます。

brew <span>install Caskroom/cask/electron
</span>

制限値は、要求するレコードの数を設定し、設定できる他のパラメーターがあります。

Marvel APIでの接続と認証をスキップしたい場合は、代わりに使用できるデータのJSONファイルを作成しました。上記のJavaScriptコードを次のものに置き換えます

次に、各文字をCharacter_List Divに出力するために必要なHTMLおよびプレースホルダー変数を作成します：

<span>{
</span>  <span>"name": "hero-browser",
</span>  <span>"version": "0.1.0",
</span>  <span>"main": "main.js",
</span>  <span>"dependencies": {
</span>    <span>"dotenv": "^2.0.0",
</span>    <span>"md5": "^2.1.0"
</span>  <span>}
</span><span>}
</span>

次に、APIを呼び出して応答を処理し、resp.data.results。

各文字にHTML要素を作成し、Character_Listに追加します。 Marvel APIの画像は、ファイル名と拡張子に分けられます。利用可能な画像がない場合、「利用可能な画像なし」画像が表示されますが、これを処理できますが、この例ではわかりません。

<span>'use strict';
</span>
<span>const electron = require('electron');
</span><span>const app = electron.app;  // Module to control application life.
</span><span>const BrowserWindow = electron.<span>BrowserWindow</span>;  // Module to create native browser window.
</span><span>var mainWindow = null;
</span>

ループが完了したら、システム通知、閉鎖方法、およびAPIに接続する潜在的なエラーを処理します。

プロジェクトのルートディレクトリで以下のコマンドを実行して、アプリケーションを実行します：

app<span>.on('window-all-closed', function() {
</span>    <span>if (process.platform != 'darwin') {
</span>        app<span>.quit();
</span>    <span>}
</span><span>});
</span>

アプリケーションのパッケージ

app<span>.on('ready', function() {
</span>  mainWindow <span>= new BrowserWindow({width: 800, height: 600});
</span>  mainWindow<span>.loadURL('file://' + __dirname + '/app/index.html');
</span>
  mainWindow<span>.on('closed', function() {
</span>    mainWindow <span>= null;
</span>  <span>});
</span><span>});
</span>

コードを「ネイティブ」アプリケーションにパッケージ化するのは簡単ですが、いくつかのピースが必要です。最初にアプリケーションバッジのアイコン。これの外観とファイルの種類は、ターゲットを絞っているオペレーティングシステムに依存しますが、Marvelの公式Androidアプリから撮影したアイコンは次のとおりです。

注：ここでは、著作権で保護されたマーベルプロパティを使用しています。それらを自分のものとして配布しないでください！

その後、iconverticons.com/online/を使用してPNGをMacアイコンファイルに変換しましたが、他にも利用できるツールがあります。

プロジェクトをパッケージ化する最も簡単な方法は、電子パッカーNPMモジュールを使用することです（注：これは個別にインストールする必要があります）。デスクトップアプリの場合、これは問題ではないかもしれませんが、他のオプションがここで説明されている場合は、大規模なバイナリを生成できます。

ウィンドウ以外のプラットフォームでWindows用のパッケージングを使用している場合、ワインをインストールする必要があります。これは大きな依存関係です。

これらの警告はさておき、アプリケーションのバイナリを作成する方法は次のとおりです。プロジェクトフォルダで、プロジェクトに関連する値に置き換えます）：

を実行します）

順番に、これらのパラメーターが設定されています：

• プロジェクトフォルダー。
• 生成されたアプリケーション名。
• プラットフォーム：これらは、Windows、Linux、Vanilla Mac OS XのDarwin、Mac App StoreリリースのMASの場合はWin32です。すべてを設定すると、すべてのプラットフォームのバイナリが生成されます。
• アーキテクチャ：32および64ビットCPUアーキテクチャのIA32およびX64、またはすべて。
使用する電子バージョン。
出力バイナリの場所と既存のファイルを上書きするために。
• 使用するアイコン。
注：すべてのパラメーターは複数の値に対してコンマを分離できます。すべてのプラットフォームとアーキテクチャを生成する場合は、関連するパラメーターを-all。

に置き換えることができます。

さらなる手順

これは、電子の可能性を示す簡単な例であり、さらに多くの例が可能です。純粋なJavaScriptで達成できることを別にすることは、次のように見たいかもしれません。

Mac App Storeの送信。

Chrome Dev Toolsを使用しています
• クリップボードアクセス。
• アプリケーションメニューバーツールの作成。
• Electronの新しいインタラクティブAPIエクスプローラー。
• デボルトロン、特に電子開発専用のChrome開発ツールの拡張。
• まだ懐疑的ですか？この記事をAtomで書いている間、この記事の編集者とSlackの編集者と通信し、Kitematicで作成されたDockerコンテナでアプリケーションをテストしたことを指摘したいと思います。これらはすべて電子生成アプリケーションです。わかりました、彼らには問題がありますが、それはかなり印象的です！
• 以下のコメントで、電子で構築するアプリケーションについて聞いてみたいです。

電子

を備えたデスクトップノードアプリに関するよくある質問

電子を使用してデスクトップアプリを開発するための前提条件は何ですか？

電子を使用してデスクトップアプリケーションの開発を開始する前に、システムにnode.jsとnpm（ノードパッケージマネージャー）をインストールする必要があります。 node.jsは、サーバーまたはマシンでJavaScriptを実行できるJavaScriptランタイムであり、NPMはnode.jsパッケージのパッケージマネージャーです。公式node.js Webサイトからnode.jsとnpmをダウンロードできます。これらをインストールしたら、npmを使用して電子をインストールできます。

システムに電子をインストールするにはどうすればよいですか？ Node.jsとNPMをインストールしたら、端末またはコマンドプロンプトの次のコマンドを使用して、システムにグローバルに電子をインストールできます。NPMインストール-G Electron。このコマンドはグローバルに電子をインストールし、システム上の任意のディレクトリからアクセスできるようにします。

新しい電子プロジェクトを作成するにはどうすればよいですか？

新しい電子プロジェクトを作成するには、最初に、プロジェクトの新しいディレクトリを作成します。ターミナルまたはコマンドプロンプトのこのディレクトリに移動し、コマンドNPM initを使用して新しいnode.jsプロジェクトを初期化します。このコマンドは、プロジェクトディレクトリに新しいpackage.jsonファイルを作成します。次に、コマンドnpmインストール - 保存電子を使用してプロジェクトに電子をインストールできます。 package.json、main.js、およびindex.html。 Package.jsonファイルには、アプリケーションとその依存関係に関するメタデータが含まれています。 main.jsファイルは、アプリケーションのライフサイクルイベントを制御できるアプリケーションのエントリポイントです。 index.htmlファイルは、アプリケーションが起動したときに表示されるWebページです。端末またはコマンドプロンプト、次にコマンド電子を使用します。このコマンドはアプリケーションを起動します。電子パッカーや電子ビルダーなどのモジュールを使用できます。これらのモジュールを使用すると、さまざまなプラットフォームで実行できる実行可能ファイルにアプリケーションをパッケージ化できます。

電子アプリケーションでnode.jsモジュールを使用できますか？電子アプリケーションの.JSモジュール。 Electronはnode.jsランタイムを使用するため、アプリケーションで任意のnode.jsモジュールを使用できます。

電子アプリケーションでWebテクノロジーを使用できますか？電子アプリケーション。 Electronは基本的に、HTML、CSS、JavaScriptなどのWebテクノロジーを使用してデスクトップアプリケーションを作成できるWebブラウザーです。 Chrome開発者ツールを使用します。電子はクロム上に構築されているため、アプリケーションをデバッグするために使用できる組み込み開発者ツールが含まれています。電子を使用してクロスプラットフォームアプリケーションを構築します。 Electronを使用すると、Windows、MacOS、Linuxで実行されるアプリケーションを構築できます。

以上が電子付きのクロスプラットフォームデスクトップノードアプリを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。