node.jsのgui開発からクロスプラットフォーム開発まで

初回公開：2018/09/09
最終更新：未

【　目次　】

nodeのGUIフレームワークを調べていて、クロスプラットフォーム開発の夢を見た。

nodeのGUIフレームワーク - NW.jsとElectron

nodeの有力なGUIフレームワークには「NW.js(旧名はnode-webkit)」と「Electron(旧名はAtom Shell)」。

他のサイトの記事から引用

他のサイトの記事を引用してみると

Electronよりも手軽なNW.jsでデスクトップアプリ開発入門 - WPJ

NW.jsは、HTML、JavaScript、CSSといったWeb技術を使ってネイティブアプリを作るフレームワークです。
一番単純なケースだと、手慣れたワークフローでWebアプリを作り、最後にジェネレーターですべてをコンパイルして、ブラウザー同様にWebアプリを表示できるネイティブアプリを作ります。
このようなアプリケーションは「ハイブリッドアプリ」と呼ばれます。 …
ハイブリッドアプリのためのフレームワークはNW.jsだけではありません。Electronというライバルがいます。
NW.jsから2年遅れて2013年の登場ですがGitHubによって開発されていることから、急速に知られるようになりました。
...
NW.jsアプリはエントリーポイントとしてHTMLファイルを指定します。このHTMLファイルを直接GUIから開きます。
一方、Electronアプリは、エントリーポイントとしてJavaScriptファイルを指定します。このJavaScriptファイルは別のメインプロセスとして開いてから、GUIでHTMLファイルを開きます。つまり理論上はGUIのないElectronアプリが実行できます。GUIを終了してもメインのプロセスは終了しません。APIのメソッドで終了する必要があります。
オープンソースのフレームワーク／NW.jsとは

「NW.js」も「Electron」も「node.js」＋「WebKit」ですが、方向性が異なります。
「NW.js」はChromium寄りです。既存ウェブアプリに「node.js」の機能を追加する方向性です。既存Webサイトのデスクトップアプリ化に向いています。しかし、複雑な処理を追加することには向いていません。
「Electron」は「Node.js」寄りです。「node.js」のプログラムから「WebKit」を呼び出す方向性です。1からクロスプラットフォームアプリケーションを開発することに適しています。
...
Intel社によって開発されています。
元々は「node-webkit」という名称でした。2015年1月に「NW.js」に改名されました。
NW.js(node-webkit) との技術的違い Electron docs gitbook

Note: Electron は以前は Atom Shell と呼ばれていました
NW.jsとElectronをしばらく使ってみての比較

NW.js
パッケージ化が楽、かつ実行に必要なファイルが少なくてすっきりしている。
ソースとnode_modulesをzipで固め、nw.exeと連結するだけ。
※他にも実行に必要なファイルはあるが、Electronに比べてはるかに少ない。
NW.js (node-webkit.js) とは iroha Tech Note

Chromium と Node.js をベースにしており、Intel社によって開発されました。
現在はオープンソース化されており、誰もが無償で利用することができます。
...
Webブラウザのレンダリングエンジンである、Webkit をアプリケーションにバンドルすることで環境ごとの動作の差異を最小限に抑えることができます。
またWebからは通常アクセスできないネイティブの機能へアクセスするAPIも順次公開されています。
NW.jsを使ったデスクトップアプリケーションの開発 | フロントエンドBlog | ミツエーリンクス

NW.jsは、ChromiumとNode.jsに基づいたデスクトップアプリの実行環境です。HTML/CSS/JavaScriptなどのWeb技術を用いてDOMからネイティブアプリケーションを作成する事を目的として作成されています。
元々は「node-webkit」という名称でしたが、2015年1月15日にリリースされた0.12.0-alpha1バージョンからNW.jsに改名されています。ライセンスはnode-webkitから変わらずMIT Licenseにとなる為、商用利用も可能です。
大まかな特徴としては当社のApps Blog中、2015年12月7日の記事であるHello Electron!で紹介されているElectronと似た様な構想となっており、ブラウザ（Chromium）上でNode.jsのAPIを使用する事を前提としている為、簡易的な例としては「アプリケーション上に読み込んだjQueryのイベントから、npmモジュールを実行する」といった事が可能になります。
HTML5＋CSS3＋JSでネイティブGUIアプリが作れる、node-webkitを触ってみる - アシアルブログ

node-webkitはChromium と node.js ベースで作られた、GUIアプリを動作させるランタイムです。
アプリはHTMLやJavascriptで記述を行い、作ったアプリはLinux、Mac OS X、Windowsで動作が可能です。
Electron 入門 GitHub

Electronって？
・クロスプラットフォーム型の実行フレームワーク
Mac、Windows、Linux上で動く
・Webの技術（HTML5やJavaScript）で作ったものをデスクトップアプリケーション化できる
・オープンソース、商用利用可能
・開発元はGitHub社
（もともとはAtomエディタのために作られた）
実用例
・Slack
・Atom
・Kobito
・Docker GUI
・Visual Studio Code (Microsoft)
Electronでアプリケーションを作ってみよう

Electron(旧称: Atom-Shell)は, Atomエディタを開発するために生まれたクロスプラットフォームデスクトップアプリケーションエンジンです.
Node.js + Chromiumをランタイムとしており, Atomだけでなく, Slackや先日のBuildで発表されて話題となったVisualStudio CodeもElectronで実装されています.
Electronとは？アーキテクチャ／API／インストール方法／初期設定 - Build Insider
最新版で学ぶElectron入門 - HTML5でPCアプリを開発する利点と手順 - ICS MEDIA

Introduction Electron docs gitbook

名前対応プラットフォーム言語等ランタイム費用

NW.js Windows / macOS / Linux Node.js + HTML (※1) 内蔵 (Chromium) 無償

PhoneGap (Cordova) Windows 8 / iOS / Android JavaScript + HTML 不要 (OS提供のブラウザー) 有償プラン有り

Adobe AIR Windows / macOS / iOS / Android JavaScript + HTML (※2) / ActionScript 内蔵可 (Adobe AIR) 無償

Qt Windows / macOS / Linux / iOS / Android C++ / QML 不要有償プラン有り

コラム：ElectronとNW.js-マンガで分かる JavaScriptプログラミング講座

『Electron』と『NW.js』では、『NW.js』の方が歴史が古いです。『Electron』は、『NW.js』の不満を解決するために作られました。しかし、どちらに優劣があるわけではありません。2つの実行環境には、利点と欠点があります。
…
『Electron』は、『Node.js』のプログラムのように『index.js』（JavaScriptファイル）から開始します。その中からWebブラウザ部分を起動して、HTMLファイルを読み込みます。
『NW.js』、Webページと同じように『index.html』（HTMLファイル）から開始します。
どちらの場合も、HTMLファイルから『Node.js』の機能を利用できます。
『Electron』は大規模で堅牢なアプリケーションを作るのに向いており、『NW.js』は使い捨てのアプリケーションをサクッと作るのに向いています。
NW.jsのつもりが気づくとElectron（旧Atom Shell）でサンプルアプリ作っていた - わかるかなフロントエンド

最近重宝しているAtomというエディタもElectronです。 Electronは元がAtom Shellと呼ばれていたくらいなので、もともとはAtomを開発するために開発されたのだと思います。
Electron と NW.js の違いについて - カラクリスタ・ノート

既存の Web 技術を使って Cross-Platform な Desktop App が作れる
...
Electron は Web 技術を使って Desktop App を作りたい時に使う
NW.js は Web App に Standalone な Desktop UI を付けたい時に使う

名前	対応プラットフォーム	言語等	ランタイム	費用
NW.js	Windows / macOS / Linux	Node.js + HTML (※1)	内蔵 (Chromium)	無償
PhoneGap (Cordova)	Windows 8 / iOS / Android	JavaScript + HTML	不要 (OS提供のブラウザー)	有償プラン有り
Adobe AIR	Windows / macOS / iOS / Android	JavaScript + HTML (※2) / ActionScript	内蔵可 (Adobe AIR)	無償
Qt	Windows / macOS / Linux / iOS / Android	C++ / QML	不要	有償プラン有り

まとめ

上記の記事を参考に整理してみると

どちらもChromium と Node.js がベース。
HTML、JavaScript、CSSといったWeb技術を使ってネイティブアプリを作るフレームワーク(ハイブリッドアプリ)。
node.jsによりオープンソースブラウザChromiuを利用してWeb技術を使った開発ができるというイメージ。

クロスプラットフォーム

どちらもWindows/macOS/Linuxで動作するアプリの開発が可能。
モバイルアプリの開発はできない。
node.jsでモバイルアプリを開発するにはMeteorというものもあるみたい。

背景

NW.jsの開発元はIntel社(現在はオープンソース)、2011年登場。
Electronの開発元はGitHub、NW.jsから2年遅れて2013年の登場、
NW.jsの影響を受けていて似たような構想。
NW.jsの不満を解決するために作らたが、どちらに優劣があるわけではない。

用途

NW.jsは既存Webサイトのデスクトップアプリ化に向いてる。
NW.jsの方が作りやすそうだが複雑な処理にはElectron。

手軽にアプリを作れるのはNW.jsみたいだけど、複雑な処理はElectronの方が得意みたい。
Atomエディタ,Slack,VisualStudio CodeはElectronで実装されていて有力なアプリはElectronの方が...

エントリーポイント

NW.js はアプリケーションが webページから開始されるのに対して、
ElectronはJavaScriptのスクリプトがエントリポイントとなっている。

ファイルサイズ

どちらも通常のアプリよりも大きくなるが、NW.jsと比べるとElectronの方が更に大きい。

ハイブリッドアプリ開発ツール

ここからは、node.jsに限定せずにクロスプラットフォーム開発ツールをみていく。

【2017年版】スマホアプリ開発環境の種類一覧と選び方 | シンプルアップ工房

Apache Cordova(コルドバ)

Apache Cordova - Wikipedia

Apache Cordova（アパッチ・コルドバ）は、オープンソース（Apache 2.0 License）のモバイルアプリケーション開発フレームワーク。
ニトビ・ソフトウエア社によってPhonegap（フォンギャップ）として開発が始められ、その後アドビシステムズがニトビ・ソフトウェア社を買収したことによりPhoneGapはAdobeのプロダクトとなったが、そのソースコードがApache CordovaとしてApacheソフトウェア財団に寄贈され、コミュニティによってメンテナンスされている。
…
モバイルデバイスのカメラ、GPS、加速度センサーなどにアクセスするためのAPIを追加することにより、JavaScript、HTML、CSSといったウェブアプリケーション開発の技術でモバイルアプリケーションを開発することができるのが特徴である。
ハイブリッドアプリとは?

Cordovaをベースにしたフレームワークやプラットフォーム
…
ハイブリッドアプリ開発フレームワークやプラットフォームは多数存在するが、Cordovaをベースにしたものが多いらしい。
● Adobe PhoneGap（Cordovaと大体同じものという認識で問題ないらしい）
● Ionic（UIフレームワーク）
● Onsen UI（UIフレームワーク）
● Monaca（開発プラットフォーム）
● Cordovaのドキュメント

ドキュメント

概要 - Apache Cordova

「Visual Studio」でも開発できる。

第1回 Apache Cordovaでできること (1/6)：連載：Visual Studio＋Apache Cordovaで始めるiOS／Androidアプリ開発 - ＠IT

phonegapとは

アドビシステムズが提供しているCordovaの事を「Adobe PhoneGap」といっているがほとんど同じものなのかな。

【2017年版】スマホアプリ開発環境の種類一覧と選び方 | シンプルアップ工房

PhoneGapとは、Adobeが提供するオープンソースのモバイルアプリ開発フレームワークです。Cordovaという下層のフレームワークの上にAdobeのサービスと連携するレイヤーとして被さっている感じです。
このPhoneGapとCordovaの関係が複雑で、元々Nitobiという会社がPhoneGapを開発していて、そのNitobiをAdobeが買収し、それと同時にPhoneGapのソースコードをApache Foundationに寄付してCordovaが誕生。
その後にAdobeがCordovaのラッパーとしてPhoneGapをリリース。
正直、買収して寄付する意図が全く分かりません。
色々歴史がありますが、結局 PhoneGap と Cordova は大体同じものと認識しておけば問題ありません。
ハイブリッドアプリ開発といえばこれ！PhoneGap/Cordova事始め | HTML5Experts.jp

PhoneGapとは、ハイブリッドアプリのフレームワークです。
つまり、HTML5コンテンツをラッピングして、いろんなデバイスやOSでネイティブアプリとしてインストール可能なアプリケーションを作成できる技術です。
元々は2009年にiPhoneDevCamp（ハッカソンのようなイベント）で生まれ、Nitobiという会社によって開発されました。
2011年にアドビがNitobiを買収し、同時にPhoneGapのソースコードをApache Foundationに寄付して、Apache Cordovaというオープンソースプロジェクトが作られました。
現在では、Cordovaという下層のフレームワークの上に、アドビのサービスに連携するPhoneGapのレイヤーが乗っています。
しかし使い方はほぼ同じであるため、PhoneGapとCordovaは大体同じものという認識で問題ありません。
第1回　PhoneGapとは：PhoneGapで手軽にiPhone/Androidアプリを作ろう｜gihyo.jp … 技術評論社

PhoneGap:Build

第1回　PhoneGapとは：PhoneGapで手軽にiPhone/Androidアプリを作ろう｜gihyo.jp … 技術評論社

また，PhoneGapに関連する興味深いサービスとしてPhoneGap:Buildが挙げられます。
PhoneGap:Buildはクラウドベースでのビルド/コンパイル環境です。
これまでスマートフォン向けの開発環境を揃えるためには，あらかじめ各種SDKやJDKのインストール，IDEのコンフィギュレーションをおこなう必要がありました。
PhoneGap:Buildではビルド環境がクラウド上に用意されているので，PCにビルド環境を用意する必要がありません。
デベロッパはHTML，CSS，JavaScriptでアプリケーションを実装し，PhoneGap:Buildにアップロードするだけでスマートフォン向けのバイナリが作成されるというわけです。

WebViewとは

ハイブリッドアプリとは?

Android OSやiOSに標準で組み込まれているソフトウェア（ネイティブコンポーネント）のこと。
Webページを読み込んで表示する機能を提供する。Webページ表示の機能を独自で開発・実装しなくても、WebViewを利用すればWebページを表示する機能をアプリに組み込むことができる。
第693回：WebView とは - ケータイ Watch Watch
WebView | 用語集 | KDDI株式会社

NW.jsやElectroのWebKitに相当する部分をモバイルアプリではWebViewと呼んでいるのかな。

Titanium Mobile

Titaniumがハイブリッドアプリと呼べるのかよくわからないが、JavaScriptでクロスプラットフォームなモバイルアプリが作れるらしい。

でもググってでてくる記事が古い

Titaniumはオワコン？

Titaniumはオワコンか

オワコン

Titaniumは有料？

Titanium SDK バージョン毎の差異

2015年4月にAppcelerator Platform 4.0が発表され、世間的にはTitaniumが有料化したと認識されている感じがします。
実際Appcelerator Platformは基本的に有料なのですが、Titanium Open Source版が提供され続けていて、実はいまでも無料で使えます。

Titanium Desktopというのあるらしいがよくわからない。

ネイティブなクロスプラットフォーム開発ツール

Xamarin と React Native と Flutter の違いを正しく理解しよう

Xamarin(ザマリン)

.NET技術でiOS, Android, Win, Macのクロスプラットフォーム開発

Linux対応は?

C# - XamarinでLinux&Windowsで動くソフトは作れるのか(45507)｜teratail

Linux向けは、 mono+MonoDevelop+GtkSharp で作るんじゃないですかね（あまり詳しくないですが）。
...
C# でワンソースで「Linux&Windows&MacOSで動くGUIソフトウェア」を作ることはできますよ。
質問者がXamarinとMonoを混同してしまっているようですが。。。
ASCII.jp：.NET Core / .NET Framework / Xamarin / Monoの関係を整理する (1/3)

Mono Projectは現在も続いており、そのスポンサーは他ならぬMicrosoftだ。

Xamarinの開発言語はC#のみ？，VB.NETでも使える？

Visual Basic で Xamarin.Forms アプリ開発どこまでいける？

Xamarin アプリ開発で使用できる言語は、公式には C# と F# のみですが、…
Xamarin での言語サポートのプログラミング - Xamarin | Microsoft Docs

React Native

JavaScriptのUIフレームワークReactからのモバイルアプリフレームワーク。
ハイブリッドアプリ開発ツールと言えないことも。

React Nativeとは何なのか

ReactはFacebookが開発したJavaScriptのフレームワークであり、React Nativeはそれをモバイルで使えるようにしたものである。
React Nativeを使用することでネイティブに描画されるiOSとAndroidのアプリを作ることができる。１つのコードで、両方のプラットフォームで動くものが作れる。
さらに、JavaやObjective-Cのライブラリを自分で書いてReact Native自体を拡張することもできる。
WebでReactを使っているなら、ターゲットがモバイルに代わるだけなので簡単に使い始めることができる。
…
他の多くのクロスプラットフォームを謳う開発方法（CordovaやIonic）と違い、WebViewではなくネイティブで描画されるのが大きな利点となる。
一部の企業でReact Native離れが始まる - CIOニュース：CIO Magazine

React Native vs Cordova

CordovaとReact Nativeの違いとは？２大クロスプラットフォーム開発ツールを徹底比較！ | モナカプレス

Flutter

Googleよって開発されたDart言語によるモバイルアプリケーションフレームワーク。

Dart言語

目指すは

HTML、JavaScript、CSSといったWeb技術を応用して、nodeのGUIを開発したり，Cordova等を使ってモバイルアプリをクロスプラットフォームで開発。
一方、XamarinやMonoによりC#.,NET技術を使ってモバイルアプリからディスクトップアプリまでをカバーできそう。