NW.JSを使用してクロスプラットフォームデスクトップアプリを構築します

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で実行する必要があります。

ビューポートコントロール。たとえば、固定または最小/最大のビューポートを定義できます。
ローカルファイルのため、同様のポリシーの制限はありません。ファイルシステムからローカルファイルを開くと、ブラウザは同じディレクトリにないファイルのXMLHTTPREQUEST要求をブロックします。この動作は、NW.JSアプリケーションで無効にすることができます。
また、カスタムAPIも提供しているため、次の利点があります。
• node.js Integration
• クリップボードアクセス
• ファイルシステムへのアクセス
• ハードウェアアクセス（たとえば、プリンターリストを取得します）
• パレットアイコン
• カスタムファイルセレクターダイアログボックス
• シェル統合（デフォルトのファイルブラウザまたはブラウザでファイルまたはURLを開く）
ウィンドウ全体（ボタン、メニューバーを閉じる）およびコンテキストメニューをカスタマイズするためのオプション
ズームレベルを設定して取得する機能。
いいですね？それなら始めましょう。この記事では、実際にNW.JSについて学び、ハイブリッドアプリケーションの作成方法を学びます。 GitHubのこの記事の指示を使用して作成されたサンプルアプリケーションを見つけることができます。

電子と比較したnw.jsの利点

まず第一に、1つのことは次のとおりです。NW.JSは、ハイブリッドアプリケーションの唯一のフレームワークではありません。別の競合他社は電子と呼ばれます。 2013年にNW.JSに2年遅れて発売されましたが、GitHubから来たためすぐによく知られてきました。今、あなたはそれらの違いに興味があるかもしれません。電子と比較したNW.JSの利点は次のとおりです。

サポートChrome。* API。これらのAPIは、ブラウザとの対話に使用できます。 （NW.JSのドキュメントで、より多くの関連情報を見つけることができます。）

クロムアプリをサポートします。 Chromeアプリは、Web言語で記述されたパッケージ化されたアプリケーションです。 （詳細については、Chrome開発者のドキュメントを参照してください。）これらのアプリケーションは、node.js統合がなく、Chrome Webストアを使用して公開されているため、NW.JSとは異なります。 （Chromiumは2018年8月までにサポートをキャンセルします（ブログ投稿を参照）。しかし、この投稿によると、NW.JSは引き続きChromeアプリをサポートします。）
NACL（ネイティブクライアント）およびPNACL（ポータブルネイティブクライアント）アプリケーションをサポートします。彼らはパフォーマンスに焦点を当てているので、主にCとCで書かれています（nw.jsでそれらの使用方法については、このチュートリアルを参照してください）
アプリケーションのソースコードを保護するためのV8スナップショットソースコード保護があります。 NWJCツールを使用すると、コードがネイティブコードにコンパイルされます。 （詳細については、この記事を参照してください。）
内蔵のPDFビューアーがあります。
プレビューを印刷してください。
Webワーカーのnode.jsの統合をサポートしています。マルチスレッドアプリケーションの作成に使用されます。
• しかし、電子には言及する価値のあるいくつかの利点もあります：

組み込み自動更新プログラム（NW.JS自動更新プログラムに関する質問に従うことができます）。

リモートサーバーにクラッシュレポートを自動的に送信します。 NW.JSはローカルファイルにのみ書き込み、その後、手動で提出できます。
• 別の根本的な違いがあります。 NW.JSアプリケーションHTMLファイルとしてエントリポイントを指定します。このHTMLファイルは、GUIで直接開かれます。
一方、電子アプリケーションは、そのエントリポイントとしてJavaScriptファイルを指定します。このJavaScriptファイルは別のメインプロセスで開かれ、HTMLファイルをGUIで開くことができます。これは、理論的にはGUIなしで電子アプリケーションを実行できることを意味します。また、GUIを閉じると、APIメソッドを呼び出すことで手動で終了する必要があります。

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>

指示：

• src/は、アプリケーションのソースファイルを含みます。
• src/ app/ javascriptファイルが含まれています。
• SRC/ ASSETS/ INCAMES IMAGES。この例では、ファイルicon.png（ウィンドウアイコンとして表示される）のみが正方形である必要があります。
• src/ styles/ scss以下のファイルが含まれています。この例では、単純なCSSファイルです。
• src/ views/ contable htmlビューファイル。
• src/package.jsonは、nw.jsアプリケーションのマニフェストファイルです（マニフェスト形式を参照）。また、ここでアプリケーションの依存関係を指定します。
• package.jsonは、ビルドワークフローを実行し、実際のNW.JSアプリケーション（ビルディング依存関係など）では必要ない依存関係を指定する必要があるNPMパッケージファイルです。

リスト

を作成します

プロジェクト構造とファイルを作成したので、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を起動時に開きます。

ホームビューを作成します

この時点で、To Doアプリケーションを書くことができます。しかし、NW.JSとその機能に焦点を当てたいと考えています。このために、私は

あなたがアプリが何をするかを決定させることを好みます。 githubでnw.js-examplesの例を作成して、node.jsの統合やクリップボードアクセスなどのいくつかのNW.JS機能を実証しました。アプリケーションでお気軽にお試しください。ただし、他のコンテンツも使用できます。

あなたが決定するものは何でも、少なくとも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プロジェクトを作成しました。最終的に、開発のために開発マシンでNW.JSを直接実行し、複数のオペレーティングシステムのネイティブアプリケーションを生成するビルドプロセスを実装する方法が必要です。

これを行うには、次の2つのパッケージが必要です。

nw（開発）

• nw-builder（生産）
実際のアプリケーションとは関係がないため（開発目的と生産ビルドにのみ使用されます）、2番目のpackage.jsonのdevdependiciesとして作成され、必要な名前とバージョンフィールドとともに作成します。

ここで、プロジェクトのルートフォルダーで次のコマンドを実行して、開発者をインストールする必要があります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>NW.js-example | main</title>
    <link rel="stylesheet" href="../styles/common.css">
</head>
<body>
    <h1 id="Hello-World">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を直接実行します

NW.JSアプリケーションを直接開始するには、実行するだけです

{
  "name":"nw.js-example",
  "version":"1.0.0",
  "devDependencies":{
    "nw":"^0.18.2",
    "nw-builder":"^3.1.2"
  }
}

このショートカットは、NWパッケージを使用して、DEVの下のスクリプトで定義したコマンドを呼び出します。開発マシンに新しいウィンドウを直接開く必要があり、SRC/Views/Main.htmlを表示します。

生産構造

生産ビルドは、Windows、Linux、およびMacOSからの出力をサポートするNWビルダーを使用します。この例では、32ビットと64ビットのバージョンを含むこれらすべてのプラットフォーム向けのパッケージを構築しました。現在、MacOSの場合、古いバージョンモードでは32ビットのみを構築できます。 （Githubのこの質問を参照してください。）したがって、64ビットのみが構築されています。

$ npm install

生産ビルドを実行するには、実行するだけです：

NW.JSを直接実行する場合と同様に、これはスクリプトで定義したCLIコマンドを使用します。

しばらく時間がかかります...

{
  "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の利点とユースケースについて詳しく理解することを願っています。 HTMLファイルを含む.ZIPフォルダー（およびファイルシステムから実行されている）を含む.ZIPフォルダーを配布するよりも優れている理由は、多くの理由があります。 NW.JSは、複雑なGUIに集中する必要がなく、ビデオプレーヤーなどの多くの組み込み機能があるため、ネイティブアプリケーションの代替品としても使用できます。環境を検出できるため、NW.JSを使用して通常のWebサーバーとクライアントマシンで実行できるアプリケーションを開発することもできます。いくつかのトリックがあり、強力なChromiumエンジンのおかげで、ユーザーはネイティブアプリケーションとの違いをほとんど感じることができません。

新しいNW.JSプロジェクトを作成するとき、最初に使用するフレームワーク、モジュールローダー、プリプロセッサを決定します。これらの決定を下した後、あなたのニーズに合ったNW.JSボイラープレートを見つけることができます。適切なボイラープレートがない場合は、このチュートリアルに基づいてアプリケーションを使用することができます。

あなたの好みのモデルは何ですか？または、NW.JSアプリケーションを開発するためにどのテクノロジーを選択しますか？この記事では、To Doアプリケーションの実装ではなく、NW.JSの例を使用することは効果的ですか？コメントで教えてください。

NW.JS

を使用したクロスプラットフォームデスクトップアプリケーションに関する

FAQ（FAQ）

NW.JSと他のクロスプラットフォームデスクトップアプリケーションフレームワークの主な違いは何ですか？

nw.jsは、クロスプラットフォームデスクトップアプリケーションを開発するための強力なツールです。他のフレームワークとは異なり、NW.JSを使用すると、開発者はWeb開発で一般的に使用されるHTML、CSS、およびJavaScriptでコードを作成できます。これにより、Web開発者がデスクトップアプリケーション開発に移行しやすくなります。さらに、NW.JSには、DOMのnode.js APIに直接アクセスできるユニークな機能があり、より複雑で強力な機能を可能にします。

nw.jsを始めるにはどうすればよいですか？

nw.jsを開始するには、まず公式Webサイトからダウンロードしてインストールする必要があります。インストールが完了したら、新しいプロジェクトディレクトリを作成し、HTML、CSS、およびJavaScriptファイルを追加してから、NW.JS実行可能ファイルを使用してアプリケーションを実行できます。 NW.JSドキュメントは、開始方法に関する詳細なガイドを提供します。

商用プロジェクトにNW.JSを使用できますか？

はい、商用プロジェクトにはNW.JSを使用できます。 NW.JSはオープンソースで無料で利用可能であるため、クロスプラットフォームのデスクトップアプリケーションを開発するための費用対効果の高いソリューションです。ただし、使用されるサードパーティモジュールには独自のライセンス要件があることに注意する必要があります。

nw.jsアプリケーションをパッケージ化して配布する方法は？

NW.JSアプリケーションの梱包と配布には、ターゲットプラットフォームで実行できるスタンドアロン実行可能ファイルの作成が含まれます。これは、NWビルダーやWebパックなどのツールを使用して実行できます。パッケージ化すると、直接ダウンロードやアプリストアなど、さまざまなチャネルを通じてアプリケーションを配布できます。

nw.jsでサポートされているプラ​​ットフォームは何ですか？

nw.jsはさまざまなプラットフォームをサポートしています。 Windows、Mac、Linuxのアプリケーションを開発するために使用できます。このクロスプラットフォームサポートは、開発者が一度にコードを作成して複数のプラットフォームで実行できるため、NW.JSを使用することの重要な利点の1つです。

nw.jsアプリケーションをデバッグする方法は？

nw.jsアプリケーションのデバッグは、Webアプリケーションのデバッグに似ています。 NW.JSバンドルが提供するChrome開発者ツールを使用してデバッグできます。これらのツールは、コードをチェックおよびデバッグするための多くの機能を提供します。

nw.jsアプリケーションでnode.jsモジュールを使用できますか？

はい、NW.JSの重要な機能の1つは、node.jsモジュールをDOMで直接使用できることです。これにより、アプリケーションでより複雑で強力な機能を実装できます。 NW.JSアプリケーションでNPMで利用可能な数千のモジュールを使用できます。

nw.jsアプリケーションを更新する方法は？

NW.JSアプリケーションの更新には、アプリケーションの古いバージョンを新しいバージョンのアプリケーションに置き換えることが含まれます。これは、ユーザーが手動で実行することも、NW-Updaterなどのモジュールを使用してアプリケーションに自動更新を実装することもできます。

nw.jsを使用してネイティブAPIにアクセスできますか？

はい、NW.JSはnode.jsを介してネイティブAPIに直接アクセスできますこれは、アプリケーションでファイルシステム、ネットワーク、デバイスなどのネイティブ機能を使用できることを意味します。これは、従来のWebテクノロジーよりもNW.JSの重要な利点です。

nw.jsアプリケーションのパフォーマンスを最適化する方法は？

NW.JSアプリケーションのパフォーマンスの最適化には、JavaScriptファイルの最小化と接続、画像の最適化、効率的なアルゴリズムとデータ構造の使用など、さまざまなテクノロジーが含まれます。さらに、Chrome開発者ツールを使用して、パフォーマンスの問題を分析およびデバッグできます。

この改訂された出力は、元の画像の配置と形式を維持し、コアの意味を維持しながら、独創性の文章と段落を繰り返し、より簡潔でインパクトのある言語にも対処します。

以上がNW.JSを使用してクロスプラットフォームデスクトップアプリを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。