nw.js：Webテクノロジーを使用したネイティブアプリケーションを構築するためのフレームワーク
nw.jsは、開発者がHTML、JavaScript、CSSなどのWebテクノロジーを使用してネイティブアプリケーションを作成して、通常のWebアプリケーションよりも大きな利点を持つハイブリッドアプリケーションを生成できる強力なフレームワークです。
別のハイブリッドアプリケーションフレームワークと比較して、電子、NW.JSには次の利点があります。* API、Chromeアプリケーション、NACLおよびPNACLアプリケーション、V8スナップショットソースコード保護、ビルトインPDFビューア、印刷プレビュー、 node.jsをWebワーカーに統合します。NW.JSを使用してハイブリッドアプリケーションを作成するプロセスには、プロジェクト構造のセットアップ、マニフェストファイルの作成、メインビューの作成が含まれます。 GitHubのサンプルアプリケーションを参照できます。
nw.jsは、それぞれ
およびnwパッケージを使用して開発および作成およびインストールできます。 NPMスクリプトをnw-builderファイルに追加することにより、パッケージングと配布プロセスを簡素化できます。 package.json
NW.JSはChromiumに基づいているため、NW.JSアプリケーションのテストとデバッグは手動で実行できます。自動化されたユニットテストは、KarmaのNW.JSランチャープラグイン（Karma-Nodewebkit-Launcherなど）を使用して実装できます。
この記事は、Tim SeverienとJoan Yinによってレビューされました。 SetePointのコンテンツを完璧にしてくれたSetePointのすべてのピアレビューアに感謝します！
nw.jsは、HTML、JavaScript、CSSなどのWebテクノロジーを使用してネイティブアプリケーションを作成するためのフレームワークです。簡単に言えば、通常のプロセスを使用してWebアプリケーションを開発します。プロセスの最後に、すべてをネイティブアプリケーションにコンパイルするジェネレーターを実行し、アプリケーションはブラウザのようにWebアプリケーションを表示します。これらのアプリケーションは「ハイブリッドアプリケーション」と呼ばれます。
ハイブリッドアプリケーションは、既によく知っている言語（HTML、JavaScript、およびCSS）で書かれているだけでなく、通常のWebアプリケーションよりも次の重要な利点があるためにも優れています。
ブラウザとブラウザのバージョンの制御（アプリケーションが呼び出されるブラウザがわかっています）。 NW.JSハイブリッドアプリケーションは、Chromium（Google Chromeの背後にあるオープンソースブラウザ）を使用して表示されます。したがって、Chromeで実行されているアプリケーションもNW.JSで実行する必要があります。
電子と比較したnw.jsの利点
サポートChrome。* API。これらのAPIは、ブラウザとの対話に使用できます。 （NW.JSのドキュメントで、より多くの関連情報を見つけることができます。）
組み込み自動更新プログラム（NW.JS自動更新プログラムに関する質問に従うことができます）。
javascriptで書かれたデスクトップアプリケーションのドアをElectronが開きますが、GUIなしでは、HTMLベースのアプリケーションを表示するだけではNW.JSアプリケーションがセットアップしやすい場合があります。
注：電子の利点が本当に気に入っている場合は、電子を使用したデスクトップアプリケーションの作成に関するSitePointの最近の記事をご覧ください。
後でネイティブアプリケーションにコンパイルされるアプリケーションの作成を開始しましょう。さまざまなJS言語（TypeScript、coffeescriptなど）、モジュールローダー（requirejs、webpack、systemjsなど）を使用して、Webアプリケーションをセットアップする方法がたくさんあるため、Frameworks（Angularjs、React、vue.js、など）およびプリプロセッサ（SCS、LESS、HAMLなど） - そして誰もが独自の好みを持っています。基本的なHTML、CSS、およびJS（ES6標準）テクノロジーのみを使用します。
任意の設定にnw.jsボイラープレート（開始プロジェクト）はありません。これらはすべて、特定のフレームワーク、モジュールローダー、またはプリプロセッサ用に構築されています。そのため、簡単なNW.JSアプリケーションをゼロから実装します。理解しやすく、後でニーズに合わせて簡単にカスタマイズしたり、ボイラープレートに切り替えることができます。
最初に、プロジェクト構造とファイルを作成する必要があります：
<code>nw.js-example/ ├── src/ │ ├── app/ │ │ └── main.js │ ├── assets/ │ │ └── icon.png │ ├── styles/ │ │ └── common.css │ ├── views/ │ │ └── main.html │ └── package.json └── package.json</code>
指示：
プロジェクト構造とファイルを作成したので、nw.jsマニフェストファイルsrc/package.jsonの使用を開始できます。ドキュメントによると、ファイルには基本的に、名前（アプリケーション名）とメイン（エントリポイントとして使用されるHTMLファイルへのパス）の2つのプロパティのみが必要です。しかし、ユーザーが予期しないものを見ないようにするために、ウィンドウアイコンのパスや最小幅と高さなどの情報を追加しました。
<code>{
"name":"nw.js-example",
"main":"views/main.html",
"window":{
"min_width":400,
"min_height":400,
"icon":"assets/icon.png"
}
}</code>ホームビューを作成します
あなたが決定するものは何でも、少なくともSRC/Views/main.htmlファイルを作成する必要があります。これはアプリケーションのエントリポイントであるためです。このように見えるかもしれません：
<code>nw.js-example/ ├── src/ │ ├── app/ │ │ └── main.js │ ├── assets/ │ │ └── icon.png │ ├── styles/ │ │ └── common.css │ ├── views/ │ │ └── main.html │ └── package.json └── package.json</code>
実際のアプリケーションでは、他のいくつかのビューファイルがあり、Ajaxを使用してロードする場合があります。簡単にするために、ネイティブのハイパーリンクを作成して、他のHTMLファイルを参照することもできます。たとえば、
<code>{
"name":"nw.js-example",
"main":"views/main.html",
"window":{
"min_width":400,
"min_height":400,
"icon":"assets/icon.png"
}
}</code>次に、https://www.php.cn/link/58c1dbad4977b4c106bca8015477757e src/views/を作成します。これが私が例プロジェクトでそれを行う方法です。
マニフェストやメインビューを含むNW.JSプロジェクトを作成しました。最終的に、開発のために開発マシンでNW.JSを直接実行し、複数のオペレーティングシステムのネイティブアプリケーションを生成するビルドプロセスを実装する方法が必要です。
これを行うには、次の2つのパッケージが必要です。nw（開発）
ここで、プロジェクトのルートフォルダーで次のコマンドを実行して、開発者をインストールする必要があります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>NW.js-example | main</title>
<link rel="stylesheet" href="../styles/common.css">
</head>
<body>
<h1>Hello World :-)</h1>
<🎜>
</body>
</html>完成！構築しましょう。
<a href="https://www.php.cn/link/58c1dbad4977b4c106bca8015477757e">Something</a>
パッケージを簡素化するには、npmスクリプトをpackage.jsonファイルに追加します。それらは、右側に定義され、ショートカットを使用して左側でnpm実行を使用してCLIコマンドを実行できるようにします。 2つのスクリプトを追加しました。1つは開発用、もう1つは生産用です。
NW.JSアプリケーションを直接開始するには、実行するだけです
{
"name":"nw.js-example",
"version":"1.0.0",
"devDependencies":{
"nw":"^0.18.2",
"nw-builder":"^3.1.2"
}
}生産ビルドは、Windows、Linux、およびMacOSからの出力をサポートするNWビルダーを使用します。この例では、32ビットと64ビットのバージョンを含むこれらすべてのプラットフォーム向けのパッケージを構築しました。現在、MacOSの場合、古いバージョンモードでは32ビットのみを構築できます。 （Githubのこの質問を参照してください。）したがって、64ビットのみが構築されています。
$ npm install
生産ビルドを実行するには、実行するだけです：
しばらく時間がかかります...
{
"name":"nw.js-example",
"version":"1.0.0",
"devDependencies":{
"nw":"^0.18.2",
"nw-builder":"^3.1.2"
},
"scripts":{
"dev":"nw src/",
"prod":"nwbuild --platforms win32,win64,osx64,linux32,linux64 --buildDir dist/ src/"
}
}終了したら、dist/フォルダーを確認してください。このように見えるはずです：
素晴らしい、私たちはほとんど完了です！
テストとデバッグ
マニュアル
NW.JSはChromiumに基づいているため、手動テストはChromeと同じくらい簡単です。エラー（視覚的または機能的）に遭遇したら、キーボードショートカットF12またはプログラムで開発者ツールを開くことができます。<code>nw.js-example/ ├── src/ │ ├── app/ │ │ └── main.js │ ├── assets/ │ │ └── icon.png │ ├── styles/ │ │ └── common.css │ ├── views/ │ │ └── main.html │ └── package.json └── package.json</code>
これにはSDKビルドスタイルが必要であることに注意してください。開発者ツールを生産中に無効にしたい場合は、別のスタイルでNW.JSを構築したり、F12イベントを無効にしたりできます。
自動化されたユニットテスト（幸運にも）は、継続的な手動テストを必要とせずに、さまざまな実装で適切に機能することを保証するために広く使用されています。
アプリケーションがNW.JS固有のAPIメソッドを使用していない場合、理論的には通常のWebアプリケーションワークフローを維持できます。たとえば、カルマを仕様ランナーとして使用して、テストフレームワークとしてジャスミンと組み合わせています。
ただし、NW.JS固有のAPIメソッドを使用している場合、APIメソッドが定義されていることを確認するには、NW.JSアプリケーションでテストを実行する必要があります。 1つの方法は、Karma-Nodewebkit-LauncherなどのKarmaのNW.JSランチャープラグインを使用することです。 Karmaの他のブラウザランチャープラグインと同じように機能します。NW.JSコンテナでアプリケーションを開き、チェックを実行し、自動的に閉じます。ただし、NW.JSはヘッドレスではないため（PhantomJSなどとは異なり）、常に物理的なディスプレイが必要です。これは、純粋なCLIサーバーでテストを実行することが不可能であることを意味します。幸いなことに、この場合、XVFBを使用してディスプレイをエミュレートできます。これは、たとえばTravis CIで動作します。 Jenkinsの場合、XVFBプラグインをインストールする必要があります。詳細については、GitHubのこの質問をご覧ください。
結論
新しいNW.JSプロジェクトを作成するとき、最初に使用するフレームワーク、モジュールローダー、プリプロセッサを決定します。これらの決定を下した後、あなたのニーズに合ったNW.JSボイラープレートを見つけることができます。適切なボイラープレートがない場合は、このチュートリアルに基づいてアプリケーションを使用することができます。
あなたの好みのモデルは何ですか？または、NW.JSアプリケーションを開発するためにどのテクノロジーを選択しますか？この記事では、To Doアプリケーションの実装ではなく、NW.JSの例を使用することは効果的ですか？コメントで教えてください。NW.JS nw.jsは、クロスプラットフォームデスクトップアプリケーションを開発するための強力なツールです。他のフレームワークとは異なり、NW.JSを使用すると、開発者はWeb開発で一般的に使用されるHTML、CSS、およびJavaScriptでコードを作成できます。これにより、Web開発者がデスクトップアプリケーション開発に移行しやすくなります。さらに、NW.JSには、DOMのnode.js APIに直接アクセスできるユニークな機能があり、より複雑で強力な機能を可能にします。 nw.jsを開始するには、まず公式Webサイトからダウンロードしてインストールする必要があります。インストールが完了したら、新しいプロジェクトディレクトリを作成し、HTML、CSS、およびJavaScriptファイルを追加してから、NW.JS実行可能ファイルを使用してアプリケーションを実行できます。 NW.JSドキュメントは、開始方法に関する詳細なガイドを提供します。 はい、商用プロジェクトにはNW.JSを使用できます。 NW.JSはオープンソースで無料で利用可能であるため、クロスプラットフォームのデスクトップアプリケーションを開発するための費用対効果の高いソリューションです。ただし、使用されるサードパーティモジュールには独自のライセンス要件があることに注意する必要があります。
を使用したクロスプラットフォームデスクトップアプリケーションに関する
FAQ（FAQ）
NW.JSと他のクロスプラットフォームデスクトップアプリケーションフレームワークの主な違いは何ですか？
nw.jsを始めるにはどうすればよいですか？
商用プロジェクトにNW.JSを使用できますか？
nw.jsアプリケーションをパッケージ化して配布する方法は？
NW.JSアプリケーションの梱包と配布には、ターゲットプラットフォームで実行できるスタンドアロン実行可能ファイルの作成が含まれます。これは、NWビルダーやWebパックなどのツールを使用して実行できます。パッケージ化すると、直接ダウンロードやアプリストアなど、さまざまなチャネルを通じてアプリケーションを配布できます。
nw.jsはさまざまなプラットフォームをサポートしています。 Windows、Mac、Linuxのアプリケーションを開発するために使用できます。このクロスプラットフォームサポートは、開発者が一度にコードを作成して複数のプラットフォームで実行できるため、NW.JSを使用することの重要な利点の1つです。
nw.jsアプリケーションのデバッグは、Webアプリケーションのデバッグに似ています。 NW.JSバンドルが提供するChrome開発者ツールを使用してデバッグできます。これらのツールは、コードをチェックおよびデバッグするための多くの機能を提供します。
はい、NW.JSの重要な機能の1つは、node.jsモジュールをDOMで直接使用できることです。これにより、アプリケーションでより複雑で強力な機能を実装できます。 NW.JSアプリケーションでNPMで利用可能な数千のモジュールを使用できます。
NW.JSアプリケーションの更新には、アプリケーションの古いバージョンを新しいバージョンのアプリケーションに置き換えることが含まれます。これは、ユーザーが手動で実行することも、NW-Updaterなどのモジュールを使用してアプリケーションに自動更新を実装することもできます。
はい、NW.JSはnode.jsを介してネイティブAPIに直接アクセスできますこれは、アプリケーションでファイルシステム、ネットワーク、デバイスなどのネイティブ機能を使用できることを意味します。これは、従来のWebテクノロジーよりもNW.JSの重要な利点です。
nw.jsアプリケーションのパフォーマンスを最適化する方法は？
NW.JSアプリケーションのパフォーマンスの最適化には、JavaScriptファイルの最小化と接続、画像の最適化、効率的なアルゴリズムとデータ構造の使用など、さまざまなテクノロジーが含まれます。さらに、Chrome開発者ツールを使用して、パフォーマンスの問題を分析およびデバッグできます。
以上がNW.JSを使用してクロスプラットフォームデスクトップアプリを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
