UP
Node.jsのバージョン
前のページへ
node.js
次のページへ
node Modules API


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 を付けたい時に使う

まとめ

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

どちらも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の方が更に大きい。

関連ワード

WebKit

WebKitはWebブラウザで使われているHTMLレンダリングエンジン。

  • WebKit - Wikipedia

    WebKit(ウェブキット)は、アップルが中心となって開発されているオープンソースのHTMLレンダリングエンジン群の総称である。
    HTML、CSS、JavaScript、SVG、MathMLなどを解釈する。
    WebKitは、元々アップルのmacOSに搭載されるSafariのレンダリングエンジンとして、LinuxやBSDといった、Unix系用のレンダリングエンジンであるKHTMLをフォークして開発された。
    現在はその他の多くのプラットフォームに移植されている。

  • WebKitとは|「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

  • ASCII.jp:GoogleとAppleが争う「WebKit」ってどうして重要?

    レンダリングエンジンの主流は、現在は「WebKit」(SafariやChromeに採用)、「Gecko」(Firefox)、「Trident」(Internet Explorer)の3つです。
    Operaも独自エンジンから、WebKit(その後、Blinkに)への移行を発表しています。

今やBlinkが主流に

  • Blink (レンダリングエンジン) - Wikipedia

    マシンの性能をフル回転させるため、当初普及が遅れた。
    gs.statcounter.comの履歴には特にドイツはFirefox、日本はIE、開発途上国ではPresto版Operaが好まれる傾向[10]にありBlink内蔵のブラウザは人気が悪かった。
    しかし、Presto版Operaの開発が終了したことと、FirefoxがAustralis UIを採用してChromeに似せたこと、またMicrosoft EdgeがWebKit互換を発表したことから全世界的にブラウザの乗り換えが進んだ。
    その結果、2016年3月現在ではBlinkを内蔵したブラウザの普及率は全世界で60%を達して未だに増え続けており、2016年5月にはシェアが逆転する可能性が高いと言っている[11]。
    日本では2015年にIEとChromeのユーザー比率が逆転したが、これは先進国の中では最も遅い乗り換えである。

CSSの記述にも影響が

Chromiumとは

  • Chromium - Wikipedia Chromium(クロミウム)はオープンソースのウェブブラウザのプロジェクトで、Google Chromeはこのソースコードを引き抜いて開発されたものである[1]。 オペラ・ソフトウェアが開発するウェブブラウザのOperaも、2013年7月に安定版がリリースされたバージョン15以降、Chromiumをベースとしている[2]。

Chromium windows

ハイブリッドアプリ

  • Apache Cordovaで本格スマホアプリに挑戦しよう (1/5):CodeZine(コードジン)

    ハイブリッドアプリとは何か、という定義は厳密には定まっていません。スマートフォンアプリの業界内でいえば、Cordovaなどを用い、Web技術で開発した通常のアプリを示します。

    1.JavaScriptなどWeb技術でアプリケーションが実現可能
    2.複数のOSに対して同じコードで対応できる
    3.プラグイン形式等によりネイティブ部分での拡張が可能

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

    HTML5、CSS、JavaScriptなどのWeb技術で開発しており、且つカメラやGPSなどのデバイスのネイティブ機能を利用しているアプリのこと。
    ブラウザ上で動作するWebアプリとは異なり、Android OSやiOSに標準で組み込まれているWebView上で動作する。

    ハイブリッドアプリの特徴やメリット(ネイティブアプリと比べて強い点)
    クロスプラットフォーム(1つのコードでiOS、Androidで動作する)
    iOS、Androidを同時に開発できるため、ネイティブアプリと比べて開発コストは非常に小さくなる
    Web技術でアプリを開発できる(Web開発経験がある人ならアプリを開発できる)
    UIの構築にhtml5、css3を利用できるため、ネイティブアプリと比べて自由度が高い
    など、開発コストが魅力に挙げられることが多い。
    ハイブリッドアプリのデメリット(ネイティブアプリと比べて弱い点)
    動作が遅い。
    複雑、またはマイナーなネイティブ機能を利用することは難しい(または利用できない)。

    Cordovaなどのフレームワークが、ネイティブ機能を利用できるようにするプラグインを提供しているかどうか次第らしい。
    プラグインの多くは個人開発のものなので、欲しいプラグインがなかったら自分で開発するという手段もある。

    ハイブリッドアプリの説明を見ると
    「Webアプリとネイティブアプリを組み合わせたようなアプリ」
    「Webアプリとネイティブアプリの良いとこどりをしたアプリ」

ハイブリッドとは「異なった要素を混ぜ合わせたもの・組合わせたもの」の意味。

本来の意味でのハイブリッドアプリとは、異なった要素を組み合わせたアプリ。
そして、ここで言うハイブリッドアプリとは、Web技術と通常、Web技術では利用できないネイティブ機能を組み合わせてネイティブなアプリを作ってしまおうという事。
そしてWeb技術では利用できないネイティブ機能にアクセスするための手段をCordova等のフレームワークがサポートしてくれる。
Web技術を使う事のメリットはWeb開発の経験を生かして、クロスプラットフォームのネイティブアプリが開発できる事。
そんなところかな?

Meteor

NW.jsやElectronではモバイルアプリの開発はできないがMeteorならnode.jsを使ってモバイルアプリの開発ができるみたい。

  • アプリ開発を謳うJavaScriptフレームワークElectronとMeteorの違いとは? - WPJ

    MeteorはWeb、モバイル、デスクトップ用のJavaScriptアプリを作成するものです。
    プログラムをOSにインストールしてプロジェクト上でコマンドを実行すれば使えます。
    MeteorはNode.js、一般的なJavaScriptコミュニティのAPI、ビルドツール、キュレーションされたパッケージを含むフルスタックなJavaScriptプラットホームです。
    Meteor自体がNode.jsを含んでいますが、Nodeをローカルにインストールもできます。

hta

NW.jsやElectronを調べていて、昔ちょっと触ったことのあるHTAアプリケーションを思い出した。

Windows限定だが、見方によってはハイブリッドアプリのはしりのようなものかな。

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

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

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のドキュメント

ドキュメント

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

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とは

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

Titanium Mobile

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

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

Titaniumはオワコン?

オワコン

Titaniumは有料?

  • Titanium SDK バージョン毎の差異

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

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

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

Xamarin(ザマリン)

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

Linux対応は?

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

React Native

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

  • React Nativeとは何なのか

    ReactはFacebookが開発したJavaScriptのフレームワークであり、React Nativeはそれをモバイルで使えるようにしたものである。
    React Nativeを使用することでネイティブに描画されるiOSとAndroidのアプリを作ることができる。1つのコードで、両方のプラットフォームで動くものが作れる。
    さらに、JavaやObjective-Cのライブラリを自分で書いてReact Native自体を拡張することもできる。
    WebでReactを使っているなら、ターゲットがモバイルに代わるだけなので簡単に使い始めることができる。

    他の多くのクロスプラットフォームを謳う開発方法(CordovaやIonic)と違い、WebViewではなくネイティブで描画されるのが大きな利点となる。

  • 一部の企業でReact Native離れが始まる - CIOニュース:CIO Magazine

React Native vs Cordova

Flutter

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

Dart言語

目指すは

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

ページのトップへ戻る