MENU
未経験から実務レベルのWeb制作スキルを学ぶ基礎講座 見てみる
  1. ホーム
  2. Web制作
  3. 【学習ログ17】 JavaScript 「 Electronto」と「NW.js」について学ぶ

【学習ログ17】 JavaScript 「 Electronto」と「NW.js」について学ぶ

広告
Web制作
こんにちは！つるぴよ(@tsurupiyoo)です

JavaScriptを勉強してフロントエンジニアを目指しています！
今回は学習ロードマップの１番目「マンガJavaScript」を読んでのまとめ、アウトプットを記事にしています。

https://tsurupiyoblog.com/moriken-javascript-16

目次

コラム　ElectronとNW.js

「Electron」と「NW.js」とは？
「Node.js」は「GUI」を持たない実行環境です。
この「Node.jd」にHTMLのレンダリングエンジン「WebKit」を合成した実行環境がいくつか存在します。
それを使うと、HTMLでユーザーインターフェースを作りながら「Node.js」のファイル操作などの機能を利用してアプリケーション作成ができる。
そうした実行環境のことです。

つるぴよ
つるぴよ
難しい言葉がいっぱい出てきたので調べました
「GUI」とは？
「グラフィカルユーザーインターフェース」の略で「ぐい」と読みます。
昔のパソコンは文字コードで操作の命令をしていたので詳しい人でないとパソコンを扱えない状況でした。
そこで「GUI」が開発されて、マウスやタッチパネルで操作ができるようになり多くの人がパソコンを扱えるようになりました！
ちなみに「GUI」についてはこちらのサイトがわかりやすかったです。
HTMLレンダリングエンジンとは？
レンダリングとは直訳すると「もとになる情報を整形して表示すること」です。
HTMLレンダリングエンジンとは「Webブラウザの脳みそに相当する部品」のことで
役割としてはWebブラウザの中からホームページの見た目を整えて表示します。
「WebKit」とは？
「Safari」に採用されているHTMLレンダリングエンジンのこと。
HTMLレンダリングエンジンにはいくつかの種類があってそのうちの1つです。

主なHTMLレンダリングエンジン
Trident (Internet Explorer) EdgeHTML (Microsoft Edge)
Gecko (Firefox, Camino, SeaMonkey他) Servo.
Presto (Opera)
KHTML (Konqueror)　etc‥

「Electron」「NW.js」の違い

「NW.js」の不満を解決するために作られたのが「Electron」です。
なので「NW.js」の方が歴史が古くなっています。

ただこの2つに優劣はありません。
それぞれの利点と欠点があるので表にして違いをみていきましょう！

相違点 Electron NW.js
エントリーポイント index.js
(javaScriptファイル)		 index.html
(HTMLファイル）
index.htmlを開く手順 起動後index.jsを実行(メインプロセス)。
メインプロセスからWebkitを利用して
index.htmlを開く(レンダリングプロセス)		 起動後すぐにWebKitでindex.html
を開く。
特性 1から堅牢(けんろう:堅くて丈夫という意味)
なアプリを開発するのに向いている		 1枚ペラの、WebアプリをEXE化する
のに向いている

「エントリーポイント」とは？
プログラムを実行する際に、1番最初に開始するファイルのこと。

「Electron」は大規模で堅牢なプリケーション制作に向いている。
「NW.js」は使い捨てのアプリケーションをサクッと制作するのに向いている。

「Electron」

「Electron」の公式サイトとドキュメンとはこちらです。

【インストール方法】

「nodist」でインストールした「npm」を利用してコマンドプロンプトから以下のコマンドで行う。

npm install electron -g --log level verbose

【解説】
「-g」
グローバルを意味しています。
個別のアプリケーションではなく、「Node.js」全体の機能としてインストールするフラグです。
「– -loglevel verbose」
ログを詳細に表示するモードです。
付けておくと進行がわかるのでダウンロード時間が長くかかる時は良いです。

インストール後にコマンドプロンプトで以下のコマンドを実行してください。

electron

確認のために「Electron」のウィンドウが起動します。

プログラムを書いてみましょう！
「electron.」と入力してアプリケーションを実行します。

【ファイル構成】

●electron_test
┣●js-lib
┃┗○jquery-3.2.1.min.js
┣●js-my
┃┗○app.main.js
┣○index.html
┣○main.js
┣○package.json
┗○run.bat

【run.bat】

electron .

【package.json】

{
  "name": "electron_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

【index.js】

'use strict';

//モジュールの読み込み
const electron            = require('electron');
const app                  = electron.app; //APP
const BrowserWindow = electron.BrowserWindow; //ブラウザウィンドウ

//デバッグ表示
console.log('This is a Main Process');

//変数の初期化
var mainWin = null;
var urlIndex = file; //$[__dirname}/index.html;

//全ウィンドウ終了時の処理
app.on('window-all-closed', () => {app.quit()});

//準備が整った際の処理
app.on('ready', () => {
//ブラウザの起動
　mainWin = new BrowserWindow( { width: 1200, height:800});
  mainWin.loadURL(urlIndex); //index.htmlを開く
});

「Electron」の2つのプロセス
・メインプロセス→最初に起動
・レンダープロセス→「BrowserWindow」を利用して起動
HTMLファイルを読み込みます。

【index.html】

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8" />
  <title></title>

 <!-- /* jQuery, other... */ -->
 <script>
   window.jQuery = window.$ = require(' ./js-Lib/jquery-3.2.1.min.js');
 </script>

 <!-- /* main */-->
 <script src="js-my/app.main.js"></script>
</head>
<body>
 <div id="paaTtl">Hello World</div>
 <div id="appBdy"></div>
</body>
</html>

「Electron」で「jQuery」を読み込むには「require」を利用します。
「<script>」では読み込めません。

【js-my/app.main.js】

'use strict';

//DOM準備完了後の処理
$(function(){
  var msg= 'This is a Renderer Process';
   console.log(msg);
   $('#appBdy').text(msg);
});

「NW.js」

『NW.js』の公式サイトやドキュメント、ダウンロードページは以下になります。

「NW.js」の環境作り
①公式サイトから使用しているOS用の環境を入手する。
ダウンロードしたZIPファイルを解凍する。
②ダウンロード可能なファイルは２種類あります。
・「NORMAL」→配布ファイルを作る際のもの。開発者ツールが表示されない。
・「SDK」→開発用のファイル

「NW.js」の実行例

解凍したファイル内の「nw.exe」の引数に、実行したいディレクトリを指定。
末尾に「.」と付けて実行。
その後にアプリケーションの引数を続ける。

C:\nose-webkit\nwjs-sdk-v0.24.4-win-ia32\nw.exe
"D:\nwjs_test\.""argument"

 

【ファイル構成】

●nwjs_test
┣●js-lib
┃┗○jquery-3.2.1.min.js
┣●js-my
┃┗○app.main.js
┣○index.html
┣○package.json
┗○run.bat

【run.bat】

:: バッチファイルのディレクトリを取得
set THIS_DIR=%~dp0
 
:: アプリのパスを作成
set APP_PTH="%THIS_DIR%."
 
:: 開始
start "" "%NW_PATH%" %APP_PTH% %*

【package.json】

{
  "name": "nwjs_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

【index.html】

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="./js-lib/jquery-3.2.1.min.js"></script>
    <script src="js-my/app.main.js"></script>
  </head>
  <body>
    <div id="appTtl">Hello World</div>
    <div id="appBdy"></div>
  </body>
</html>

「NW.js」は「<script>」を利用して「jQuery」を読み込むことができる。

【js-my/app.main.js】

'use strict';
 
// DOM準備完了後の処理
$(function() {
    var msg = 'Insert Message.';
    console.log(msg);
    $('#appBdy').text(msg);
});

ElectronとNW.js　まとめ

ここまでのまとめです。

・「Node.js」に「WebKit」を合成した実行環境
・「Electron」は大規模で堅牢なプリケーション制作に向いている。
・「NW.js」は使い捨てのアプリケーションをサクッと制作するのに向いている。
・「jQuery」の読み込み
「Electron」は「require」
「NW.js」は「<script>」
もりけん塾を運営している森田賢二さんのブログはこちらから👇

武骨日記

Twitterフロントエンジニア（@terrace_tech）のフォローは👇

フォローはこちら

Web制作

関連記事

目次