Node.js(ノードジェイエス）でアプリ作成

コロナも沖縄ではおさえられている今日このごろ。いかがお過ごしでしょうか？
今回はNode.js（ノードジェイエス）でアプリを作成してみます。

Node.jsとはサーバーサイドで働くjavascript

Node.jsをざっくり一言で表すなら「サーバーサイドのjavascript」です。
通常、javascriptはHTMLから読み込んで様々な処理を行いますが、
Node.jsはスマホやパソコンからのアクセスを処理してHTMLの表示を
コントロールすることができます。

Node.js（ノードジェイエス）の環境設定

HTMLで使用するjavascriptは環境設定は不要で、プログラムを書けば
すぐに動作させることができますが、Node.jsを利用するためには環境設定が必要です。
今回はUbuntu 20.04でNode.jsの環境構築を行なっていきます。
まずは下記のコマンドを入力しましょう。

$ sudo apt install -y nodejs npm
$ sudo npm install n -g
$ sudo n stable

$ sudo apt install -y nodejs npm

$ sudo npm install n -g

$ sudo n stable

1行目で「n」(エヌ) をインストールするためにnode.jsをインストールします。
2行目で「npm」(エヌピーエム)を使用して n をインストールします。
3行目で nを利用して安定版のNode.jsをインストールします。
インストールが完了したら古いNode.jsの削除を行います。

$ sudo apt purge -y nodejs npm
$ exec $SHELL -l

1 2	$ sudo apt purge -y nodejs npm $ exec $SHELL -l

ここまで完了したらバージョンの確認をします。
バージョンナンバーが表示されればOKです。

$node -v
v12.18.1

1 2	$node -v v12.18.1

Node.jsを利用してHello Worldを出力してみる

それではNode.jsを利用して、定番のHelloWorldを出力してみましょう。
次のコードをtest.jsという名前で作成して保存します。

test.js

var http = require('http');

var server = http.createServer(function(req, res){
    res.writeHead(200, {'Content-Type':'text/plain'});
    res.write('Hello World');
});

server.listen(61111);
console.log('start server');

var http = require('http');

var server = http.createServer(function(req, res){

res.writeHead(200, {'Content-Type':'text/plain'});

res.write('Hello World');

});

server.listen(61111);

console.log('start server');

1行目でhttpオブジェクトを生成し、変数に保存しています。
3行目から6行目でサーバを作成し、ヘッダとコンテンツ(Hello World)のレスポンスを
設定しています。
8行目でnode.jsのリッスンポートを設定しています。
保存が完了したらターミナルから次のコマンドを実行します。

$node test.js

1	$node test.js

コマンド実行後「http://127.0.0.1:61111」にアクセスするとHello Worldと
表示されます。
サーバーを停止させる場合は「ctrl + c」で終了することができます。

無事にこの世界に挨拶をかます事ができましたか？
次はテンプレートを使用してHTMLを表示してみましょう。

Node.jsでテンプレートを利用してHTMLを出力する方法

今度はもう少し複雑なHTMLを出力してみます。
Hello Worldの出力はres.writeを利用して文字を出力しましたが、
複数行に渡るHTMLをwriteに記述していくのは効率が悪いため
「テンプレート」と呼ばれるファイルを利用します。
まずはプログラムを見てみましょう。

template.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    test
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

test

</body>

</html>

template.htmlは何のひねりもない普通のhtmlです。
続いてjavascriptを書いていきます。

template.js

var http = require('http');
var fs = require('fs');

var server = http.createServer(function(req,res){
    fs.readFile('./template.html','utf-8', function(err, data){
        res.writeHead(200,{'Content-Type':'text/html'});
        res.write(data);
        res.end();
    })
})

server.listen(61111);
console.log('startServer')

var http = require('http');

var fs = require('fs');

var server = http.createServer(function(req,res){

fs.readFile('./template.html','utf-8', function(err, data){

res.writeHead(200,{'Content-Type':'text/html'});

res.write(data);

res.end();

})

server.listen(61111);

console.log('startServer')

内容はHello Worldの時とほとんど変わりませんが、2行目で
ファイルを読み込むことができる「fs」というオブジェクトを作成しています。
作成されたfsオブジェクトは5行目で作成した「template.html」を読み込み、
writeで出力しています。

実行結果

自由に書いたHTMLが表示されるため少し便利になりました。
次はテンプレートエンジンを利用してHTMLを出力してみます。

Node.jsでテンプレートエンジンを利用する

続いてはテンプレートエンジンEJS（イージェーエス）を利用してみます。
EJSを利用することで複雑なHTMLの表示を手軽に行うことが可能です。
まずはEJSをインストールするところから始めます。
次のコマンドでEJSをインストールすることができます。

npm init
npm install ejs

1 2	npm init npm install ejs

インストールが完了したらプログラムを作成していきましょう。

template.ejs

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <%= d1 %>
    <% for(var i=0; i<3; i++){ %>
        <div><%= i %></div>
    <% } %>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<%= d1 %>

<% for(var i=0; i<3; i++){ %>

<% } %>

</body>

</html>

9行目に見慣れない「<%= 変数名 %>」というコードがあります。
この部分には、node.js側で設定した変数を埋め込むことができるようになります。
また、10行目の「<% %>」というコードは、「<script></script>」タグに
相当し、javascriptのコードを記述することができます。
node.js側は次のようなプログラムになります。

template.js

var http = require('http');
var fs = require('fs');
var ejs = require('ejs')

var tmpl = fs.readFileSync('./template.ejs','utf-8');

var server = http.createServer(function(req,res){
    var data = ejs.render(tmpl, {
        d1 : 'TEST'
    });
    res.writeHead(200,{'Content-Type':'text/html'});
    res.write(data);
})

server.listen(61111);
console.log('startServer')

var http = require('http');

var fs = require('fs');

var ejs = require('ejs')

var tmpl = fs.readFileSync('./template.ejs','utf-8');

var server = http.createServer(function(req,res){

var data = ejs.render(tmpl, {

d1 : 'TEST'

});

res.writeHead(200,{'Content-Type':'text/html'});

res.write(data);

})

server.listen(61111);

console.log('startServer')

3行目でEJSを読み込み、5行目でテンプレートとなるtemplate.htmlを読み込みます。
表示する情報を設定しているのは8行目のejs.renderメソッドで、引数にテンプレートと
テンプレートに渡す値を指定します。
今回の場合はテンプレートに5行目で作成したtmpl、渡すデータにはd1として’TEST’と
いう文字列を渡しています。
ブラウザで確認してみると、template.htmlで<%= d1 %>としている箇所に’TEST’という
文字が埋め込まれていることが確認できると思います。

Node.jsのプログラムをデスクトップアプリ化してみる

これまでNode.jsの簡単に紹介をしてきましたが、
Node.jsでアプリを作成する場合Express(エクスプレス）やKoa（コア）等
Web系のフレームワークを用いて開発することがおおいのですが、これ以外にも
electron(エレクトロン)というフレームワークがあり、これを利用することで
デスクトップアプリを作成することができます。
コーディングで利用するVisualStudioCodeもelectronを用いて作成されています。
今回はNode.jsのelectronのフレームワークを利用して、
ブログでも何度が登場しているブロック崩しをデスクトップアプリに
してみます。
ブロック崩しはここを確認しながら事前に作成しておいてください。
今回はindex.htmlというファイル名で作成しました。
作成が完了したらeletronを導入していきましょう。

まずは新しいディレクトリを作成し、electronをインストールします。
（この中に作成したindex.htmlも入れておいてください）

$mkdir electronSample
$cd electron
$npm init
$npm i -D electron

$mkdir electronSample

$cd electron

$npm init

$npm i -D electron

インストールが完了したら作成されたpackage.jsonを確認します。

package.json

  "name": "electronsample",
  "version": "1.0.0",
  "main": "index.js",

"name": "electronsample",

"version": "1.0.0",

"main": "index.js",

“main”:”index.js”とありますがこれがアプリ起動時に呼ばれるファイルと
なるため、index.jsを次のように作成します。

index.js

// アプリケーション作成用のモジュールを読み込み
const {app, BrowserWindow} = require('electron');

// メインウィンドウ
let mainWindow;

function createWindow() {
  // メインウィンドウを作成します
  mainWindow = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,
    },
    width: 480, height: 345,
  });

  //表示するURL
  mainWindow.loadFile('index.html');

  // メインウィンドウが閉じられたときの処理
  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

//  初期化が完了時の処理
app.on('ready', createWindow);

// 全てのウィンドウが閉じたときの処理
app.on('window-all-closed', () => {
  // macOS以外はアプリケーション終了
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
// アクティブ時の処理
app.on('activate', () => {
  // メインウィンドウが消えている場合は再度メインウィンドウを作成する
  if (mainWindow === null) {
    createWindow();
  }
});

// アプリケーション作成用のモジュールを読み込み

const {app, BrowserWindow} = require('electron');

// メインウィンドウ

let mainWindow;

function createWindow() {

// メインウィンドウを作成します

mainWindow = new BrowserWindow({

webPreferences: {

nodeIntegration: true,

width: 480, height: 345,

});

//表示するURL

mainWindow.loadFile('index.html');

// メインウィンドウが閉じられたときの処理

mainWindow.on('closed', () => {

mainWindow = null;

});

}

// 初期化が完了時の処理

app.on('ready', createWindow);

// 全てのウィンドウが閉じたときの処理

app.on('window-all-closed', () => {

// macOS以外はアプリケーション終了

if (process.platform !== 'darwin') {

app.quit();

}

});

// アクティブ時の処理

app.on('activate', () => {

// メインウィンドウが消えている場合は再度メインウィンドウを作成する

if (mainWindow === null) {

createWindow();

}

});

重要な部分は17行目です。
17行目で実際に表示されるindex.htmlを指定しています。
今回の場合はこのファイルにゲームの処理が記述されています。
ここまで作成が完了したら実際に動作を確認してみます。
下記コマンドでゲームの画面が立ち上がればOKです。

npx electron ./

1	npx electron ./

実行結果

メニューバーがついたアプリがしっかり表示されていることが確認できます。

macOSとWindows向けにパッケージングする。

それではmacOSとWindows向けにパッケージを作成してみます。
各OS向けにビルドするには次のコマンドを実行します。

macOS

npx electron-packager . Sample --platform=darwin --arch=x64 --overwrited

1	npx electron-packager . Sample --platform=darwin --arch=x64 --overwrited

Windows

npx electron-packager . Sample --platform=win32 --arch=x64 --overwrite

1	npx electron-packager . Sample --platform=win32 --arch=x64 --overwrite

このコマンドを実行すると、各OS上で実行可能なファイルが生成されます。

MacOSでファイルをみてみるときちんとアプリとして認識されていることがわかります。

アイコンをダブルクリックすると実行することができます。

もちろんWindowsでも問題ありません。

このように、HTMLとjavascriptでデスクトップアプリ開発が簡単に開発することができます！
今回はelectronというフレームワークを紹介しましたが、Node.jsでよく利用されるExpressも
簡単にWebアプリが作成できるので是非試してみてください。

Pocket

Azure（アジュール）でRestAPI(レストエーピーアイ)を作成する

PyAutoGuiでマウスを作成する