ElectronでMySQLへ接続するアプリを作る 🌴 officeの杜

個人利用のアプリであるならば、データの保管場所はsqliteなどで良いかと思います。しかし、複数名共有して使うデータベースの場合には、やはりMySQLなどのDBサーバが必要になります。中央集権なこのDBがあることで、様々な社内ツールをElectronで実現する事ができます。

相手のサーバにWeb Serverがなくとも、Electron側がそれを担うので、非常に単純な構成でちょっとしたウェブアプリケーション的なクラサバ構築できるのは魅力的です。VBA卒業して挑戦するならElectronは良い選択肢だと思います。ウェブアプリと同じUI表現が利用できますし。

今回は、MySQL接続に加えて、DB接続パスワードなどを安全に格納できるように、keytarモジュールを利用してOS標準のキーストアを使ったセキュリティ対策も実施しておこうと思います。

図：今回作るアプリはこんな感じです

1 今回使用するモジュール他
2 事前準備
3 ソースコード
4 指定時刻に座席を強制リリース
5 実行ファイルと結果
- 5.1 実行ファイルのダウンロード
- 5.2 こんな感じに動きます
6 関連リンク

今回使用するモジュール他

Node.jsモジュール

keytarモジュール – OS標準のパスワード管理システムを利用して、安全にパスワード等のやり取りをする
electron-store – 各種設定情報を格納する為のモジュール
Promise-MySQLモジュール – Promiseが使えるMySQLへアクセスする為のモジュール
jQueryモジュール – ElectronでjQueryを使えるようにする為のモジュール
node-gyp – keytarモジュールをリビルドする為に使用する

HTML側で利用するライブラリ

jQuery UIライブラリ – プロジェクトファイルに同梱
jQuery Shapeshiftライブラリ – プロジェクトファイルに同梱

使用するDBファイルとプロジェクトファイル

また、今回のサンプルアプリで用いたファイル類は以下からダウンロードできます。今回はローカル仮想環境内のMySQLを利用しましたが、Google Cloud SQLへ接続して利用も可能です。Cloud SQLの場合一旦、Cloud Storageにバケットを作成して、SQLファイルを配置しなければ、インポートが出来ないので注意（GB/月あたりの価格: $0.023）。なぜか1回目はインポート失敗するけれど、2回目は成功します。

useridテーブルのSQLファイル – MySQLでインポートして利用する
seatテーブルのSQLファイル – MySQLでインポートして利用する
座席表アプリプロジェクトファイル – package.jsonやnode_modulesは含んでいません

図：Cloud StorageのバケットからSQLファイルインポート中

図：Cloud SQLにインポートしてみた

事前準備

モジュールを追加する

まずは、プロジェクトファイル作成、package.json作成、index.htmlおよびindex.jsを作成して置きます。ターミナルを起動して以下のコマンドで今回利用する予定のモジュールを入れておきましょう。

npm install promise-mysql --save
npm install keytar
npm install -g node-gyp
npm install electron-store

npm install promise-mysql --save

npm install keytar

npm install -g node-gyp

npm install electron-store

promise、promise-mysql、keytarの３つを追加しました。

keytarについて

keytarの概要と使い方

現代のOSには、OS標準のパスワード管理の為のセキュリティシステムが用意されています。macOSで言えば「keychain」、Linuxならば「libsecret」や「Gnome Keyring」、Windowsですと「Credential Vault（資格情報マネージャ）」がそれになります、keytarはElectronでセンシティブな情報を扱う場合に、ローカルストレージではなく、こうした管理システムへの情報の登録と呼び出しをサポートする為のモジュールです。

接続パスワードの保管や、OAuth2認証で使うClient_IDとSecretの格納、Access_TokenやRefresh_Tokenの格納などを安全に格納する事が可能で、この手のアプリケーションを作る上では必須とも言える機能ですね。

メソッドもえらくシンプルで

keytar.addPassword('サービス名', 'アカウント名', 'パスワード')
keytar.getPassword('サービス名', 'アカウント名')

1 2	keytar.addPassword('サービス名', 'アカウント名', 'パスワード') keytar.getPassword('サービス名', 'アカウント名')

が基本。他に削除、検索のコマンドがあります。但しパスワードの取得だけは少しだけコードが異なります。非同期処理なので、注意してください。

const secret = keytar.getPassword(servicename,account);
secret.then((result) => {
pass = result;
});

const secret = keytar.getPassword(servicename,account);

secret.then((result) => {

pass = result;

});

もしくはIPC通信を利用して

//メインプロセス側
ipcMain.on('get-password', (event, user) => {
event.returnValue = keytar.getPassword('ServiceName', user);
});
//レンダラプロセス側
const password = ipcRenderer.sendSync('get-password', user);

//メインプロセス側

ipcMain.on('get-password', (event, user) => {

event.returnValue = keytar.getPassword('ServiceName', user);

});

//レンダラプロセス側

const password = ipcRenderer.sendSync('get-password', user);

といった取り出し方をすると良いでしょう。

Linuxに於けるKeytarの問題点

まだ、Linux上でElectronのビルドを試してはいないのですが、少なくともNode.jsアプリとして、Ubuntu 18.04上でkeytarモジュールを動かす為には、以下のライブラリをインストールしておかなければなりません。

//libsecretと依存ライブラリのインストール
sudo apt install libssl-dev libsodium-dev libsecret-1-dev

1 2	//libsecretと依存ライブラリのインストール sudo apt install libssl-dev libsodium-dev libsecret-1-dev

macOSに於けるkeytarの問題点

また、環境によってはそのままだと動かないことがあるので、keytarモジュールをリビルドする必要があります。表示されるエラーは以下のような感じ。electron v4.0.3, keytar 4.3.1でテストしています。

dyld: lazy symbol binding failed: Symbol not found: __ZN2v816FunctionTemplate3NewEPNS_7IsolateEPFvRKNS_20FunctionCallbackInfoINS_5ValueEEEENS_5LocalIS4_EENSA_INS_9SignatureEEEiNS_19ConstructorBehaviorENS_14SideEffectTypeE
Referenced from: /[... route to project folder ...]/node_modules/keytar/build/Release/keytar.node
Expected in: flat namespace
dyld: Symbol not found: __ZN2v816FunctionTemplate3NewEPNS_7IsolateEPFvRKNS_20FunctionCallbackInfoINS_5ValueEEEENS_5LocalIS4_EENSA_INS_9SignatureEEEiNS_19ConstructorBehaviorENS_14SideEffectTypeE
Referenced from: /[... route to project folder ...]/node_modules/keytar/build/Release/keytar.node
Expected in: flat namespace

dyld: lazy symbol binding failed: Symbol not found: __ZN2v816FunctionTemplate3NewEPNS_7IsolateEPFvRKNS_20FunctionCallbackInfoINS_5ValueEEEENS_5LocalIS4_EENSA_INS_9SignatureEEEiNS_19ConstructorBehaviorENS_14SideEffectTypeE

Referenced from: /[... route to project folder ...]/node_modules/keytar/build/Release/keytar.node

Expected in: flat namespace

dyld: Symbol not found: __ZN2v816FunctionTemplate3NewEPNS_7IsolateEPFvRKNS_20FunctionCallbackInfoINS_5ValueEEEENS_5LocalIS4_EENSA_INS_9SignatureEEEiNS_19ConstructorBehaviorENS_14SideEffectTypeE

Referenced from: /[... route to project folder ...]/node_modules/keytar/build/Release/keytar.node

Expected in: flat namespace

この問題は、素で入れたkeytarがelectronのバージョンに合っていない為に起こる問題で以下のような形でリビルドをすると、osxであれば無事にキーチェーンに資格情報が格納されます。

electronのバージョンを、electron -vで調べておく
使用している環境が32bit環境下？64bit環境かしらべておく。通常今どきは64bitだと思うので、x64だと思います。
ターミナルを立ち上げて、プロジェクトフォルダの中のnode-modulesフォルダ、さらに其の中のkeytarフォルダに入ります。
以下のコマンドを実行する（electronのバージョンは4.0.2で、アーキテクチャはx64で指定しています。）

//keytarをリビルドするコマンド
HOME=~/.electron-gyp node-gyp rebuild --target=4.0.2 --arch=x64 --dist-url=https://atom.io/download/atom-shell

1 2	//keytarをリビルドするコマンド HOME=~/.electron-gyp node-gyp rebuild --target=4.0.2 --arch=x64 --dist-url=https://atom.io/download/atom-shell

electronで実際にリファレンスに従い、setPasswordをしてみたところキーチェーンに無事に資格情報が格納されました。getPasswordで取り出す事が可能です。

図：keytarをリビルド中

図：zasekiというサービス名にアカウント名とパスワードが格納される

Windowsでkeytarを使う場合

macOSの場合は前項のようにkeytarモジュールをリビルドするだけで利用する事ができました。しかし、問題はWindows。そもそもリビルドするにもビルド環境が必要だったり、リビルドしても動かずに停止してしまったりと、問題解決が非常に大変でした。すごく良いモジュールなのに、この問題が残念ですね。。。ネイティブモジュール特有の問題です。

結果的には、electronはv3.0.0、keytarは4.2.1を利用し、electron-rebuildを使ってのリビルドで使えるようにはなりました。以下に使えるようにする為の手順を残しておきます。参考になったのは、こちらのサイトと、issue議論のサイト、issue議論サイト２、バージョン指定でインストールする方法サイト、node-gypインストール方法サイトでした。

electronは一旦、npm uninstall -g electronでアンインストールする
keytarも一旦、プロジェクトフォルダに入ってから、npm uninstall keytarでアンインストールする（Windowsでは、keytar v4.3.0は問題有り）
npm install -g electron@3.0.0でバージョン指定でインストール
keytarをインストールする前に、管理者権限のPowerShellにてnpm install –global windows-build-toolsを実行して、インストールする（結構時間が掛かる）
Visual C++ Buildtoolsをインストールする（Visual Studio 2017相当）
npm config set msvs_version 2017コマンドを実行
エクスプローラの検索にて、python.exeがある場所を探しだし、npm config set python python.exeのフルパス　コマンドを実行する
npm install -g node-gypで、node-gypをインストール
npm install -g electron-rebuildで、electron-rebuildをインストール
プロジェクトフォルダに入り、npm install keytar@4.2.1を実行して、ネイティブコンパイルインストールする
keytarディレクトリに入り、node-gyp configureを実行する
electron-rebuild -w keytarでリビルドをする
これで、Windowsでもkeytarが使えるようになり、アプリが落ちることがなくなりました。
試しにkeytarを使ってパスワードをセットしてみて、該当の設定がWindows資格情報に入っていれば成功！！

図：Windowsの資格情報マネージャに登録できた

※keytar4.3.0やelectron4.0.3でもelectron-rebuildをすれば使えるようになるかもしれませんが、試していません。とりあえず、動く環境にたどりつけたので良かったです。

※keytarを使ったアプリをmacOSとWindowsの両方でリリースする場合は、それぞれに環境を作ってビルドするほうが良いと思います。

社内で使うと接続が途切れる場合

小さな企業内の場合、せいぜいルーターが1個ある程度の環境なので、普通にサーバを立てれば普通に運用が可能だと思いますが、ある程度の組織の場合、途中に存在するルータ、スイッチその他いろいろなものが入っています。ネットワークの設計上早めにTCPのコネクションを解除するような設定が入っていると、立てたMySQL Serverに他の方が接続できなくなったり、しにくくなったりすることがあります。

そこで、OS側に定期的に生存している旨のパケットを送る設定がありますが、これを少し変更しておくと接続を維持できるようになります。もちろん、OS自体が勝手にスリープしてしまったり、サスペンドしないように設定しておくようにしましょう。今回はUbuntu Linuxをベースに記述します。これらの作業はターミナルとテキストエディタで行います。

logind.confでサスペンドをオフ

//geditでlogind.confを編集
sudo gedit /etc/systemd/logind.conf

1 2	//geditでlogind.confを編集 sudo gedit /etc/systemd/logind.conf

geditが起動したら、以下の項目を新規に追記

HandleLidSwitch=ignore

1	HandleLidSwitch=ignore

追記したら再起動すればサスペンドしないようになります。

InterfacesにDNS設定

//geditでlogind.confを編集
sudo gedit /etc/network/interfaces

1 2	//geditでlogind.confを編集 sudo gedit /etc/network/interfaces

geditが起動したら以下の項目を新規に追記。すでにあるdns-nameserversはコメントアウト。DNSは社内にあるならそれを指定。

dns-nameservers 8.8.8.8

1	dns-nameservers 8.8.8.8

追記したら再起動するだけです。

nsswitch.confでhostsの設定

//geditでnsswitch.confを編集
sudo gedit /etc/nsswitch.conf

1 2	//geditでnsswitch.confを編集 sudo gedit /etc/nsswitch.conf

geditが起動したら以下の項目に編集しなおす。

hosts:     files dns

1	hosts: files dns

追記したら再起動するだけです。

resolv.conf関係にDNSを設定

//geditで編集
sudo gedit /etc/resolvconf/resolv.conf.d/base

1 2	//geditで編集 sudo gedit /etc/resolvconf/resolv.conf.d/base

geditが起動したら、以下の項目を追記する

nameserver 8.8.8.8

1	nameserver 8.8.8.8

さらに以下のコマンドで編集を行う

sudo resolvconf -u
sudo gedit /etc/resolv.conf

1 2	sudo resolvconf -u sudo gedit /etc/resolv.conf

起動したら既存のdns-nameserversをコメントアウトして、以下の項目を追記

nameserver 8.8.8.8

1	nameserver 8.8.8.8

追記したら再起動するだけです。

sysctl.confでkeepaliveの設定

最後に一番重要な設定。キープアライブの設定とIPv6の設定を行います。UbuntuはIPv6の設定をオフにしておきます。

//geditでsysctl.confを編集する
sudo gedit /etc/sysctl.conf

1 2	//geditでsysctl.confを編集する sudo gedit /etc/sysctl.conf

geditが起動したら以下の項目を追記する

#IPv6の設定を無効にする
net.ipv6.conf.all.disable_ipv6 = 1
net.ipv6.conf.default.disable_ipv6 = 1
#キープアライブの設定
net.ipv4.tcp_keepalive_time = 10
net.ipv4.tcp_keepalive_probes = 2
net.ipv4.tcp_keepalive_intvl = 3

#IPv6の設定を無効にする

net.ipv6.conf.all.disable_ipv6 = 1

net.ipv6.conf.default.disable_ipv6 = 1

#キープアライブの設定

net.ipv4.tcp_keepalive_time = 10

net.ipv4.tcp_keepalive_probes = 2

net.ipv4.tcp_keepalive_intvl = 3

追記したら以下のコマンドで設定を反映する。sysctl -a | grep keepalive_timeは保存した設定を確認するコマンドです。

sudo sysctl -p
sysctl -a | grep keepalive_time

1 2	sudo sysctl -p sysctl -a \| grep keepalive_time

これで即時にキープアライブとIPv6の設定が反映されます。

MySQL側の準備

MySQL Serverのインストール

今回、仮想環境上のLinuxやmacOS上に、MySQL Serverをインストールして開発を行っております。今回はmacOSで以下の手順でインストールしております。以前、XAMPPを使っていた関係で、以前のバージョンのMySQLが残っていたため、トラブルになりつつも、無事にサーバを用意する事ができました。

macOSでのMySQLはHome Brewを使ってのインストールが一般的ですね。まずはターミナルを起動します。
brew updateでアップデートをまずは実行
続けて、brew install mysqlで本体をインストールします。
完了したら、mysql_secure_installationコマンドでセットアップを開始するのですが、今回エラーが出ました。「Can’t connect to local MySQL server through socket ‘/tmp/mysql.sock’」
sudo touch /tmp/mysql.sockでソケットファイルをつくってあげる
また、作成したソケットの権限を、sudo chown ユーザ名 /tmp/mysql.sockで変更
mysql_secure_installationコマンドで、セットアップ開始。rootのパスワード設定他、基本的にはYで回答しておけばオッケー。
ERROR! The server quit without updating PID fileというエラーが出る場合には、以下のコマンドを実行して、mysqlを一度再インストールすると良いです。

rm -rf /usr/local/mysql
rm -rf /Library/StartupItems/MYSQL
rm -rf /Library/PreferencePanes/MySQL.prefPane
rm -rf /Library/Receipts/mysql-.pkg

rm -rf /usr/local/mysql

rm -rf /Library/StartupItems/MYSQL

rm -rf /Library/PreferencePanes/MySQL.prefPane

rm -rf /Library/Receipts/mysql-.pkg

brew uninstall mysqlでアンインストール可能です。macOSでHomeBrewで入るバージョンは、5.7ではなく8.0系なので注意が必要です。

テーブルの定義

今回は以前、Google Apps Scriptにて作成した座席表アプリを、MySQL + Electronで移植をしてみようと思います。MySQL側では、スプレッドシートで構成したシートレイアウトを元に、予めテーブルを作っておきましょう。自分が用意した構成は以下の通りです。

MySQLに新たなschemeとして「zaseki」を作成
zasekiスキーマに対して、「ユーザ表」と「シートデータ」のテーブルを準備
MySQLにログインするユーザアカウントの作成とパスワードの設定を済ませておく
ユーザ表はuseridとして定義、シートデータはseatとして定義しました。
２つのテーブルには3.で作ったアカウントでのアクセス権限は付与しておきましょう。

図：新しいテーブルスキーマを作成

図：ユーザ表のテーブル定義

図：シート表のテーブル定義

MySQLのTimeoutを設定等

MySQLを動かすUbuntu上のサーバでいろいろとKeepaliveの設定を行っていても、MySQLにはMySQLのコネクションの処理に関する設定があります。こちらも設定しておくべきでしょう。

skip-resolve-name

my.cnfもしくはmysqld.cnfに対して、skip-resolve-nameの設定を追記します。これは固定IPで運用する場合に設定するもので、DNSでの逆引きを利用しない設定です。少しだけ早くなると同時に余計なDNS参照をする事がなくなります。単純にskip-resolve-nameを追記するだけでオッケーです。

ただしこの設定を追加すると、localhostでの接続ができなくなります。127.0.0.1での接続は可能ですが、MySQL側で例えば、root@localhostでアカウントを作っている場合、接続出来ません。root@127.0.0.1で作成している場合には接続が可能です。

wait_timeout

MySQLに接続する時に用いられる、接続してからの維持時間がコレです。デフォルトでは8時間(28800秒）で設定されています。正直これは長すぎるので、短く設定してみたいと思います。

これを300秒とする場合には、my.cnfもしくはmysqld.cnfに対して、wait_timeout=300を追記するだけです。

ソースコード

ログイン画面の作成(setting.html)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
var $ = jQuery = require("jquery")
</script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script src="js/jquery.touch-punch.min.js"></script>
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/setting.css">
<script src="index.js"></script>
<script>
$(function() {
$( "input[type=submit], a, button" )
.button()
.click(function() {
});
});
// IPC通信を行う
var ipcRenderer = require( 'electron' ).ipcRenderer;
window.onload = function () {
//受信レンダラーの準備
testAsync();
};
//メインプロセス側からの非同期に通信を受信待機する（1回だけ実行）
function testAsync() {
//各種雑多なメッセージを受け取る
ipcRenderer.on('msg', function(event,arg) {
alert(arg);
});
//保存済みデータを受け取る
ipcRenderer.on('init',function(event,arg){
//受け取ったデータをHTMLのボックスに反映する
var array = arg;
//配列データを各項目に入れてあげる
document.getElementById("server").value = array[0];
document.getElementById("dbname").value = array[1];
document.getElementById("user").value = array[2];
document.getElementById("pass").value = array[3];
})
//DB設定初期値をもらう
ipcRenderer.send('async', "dbname");
}
//キャンセル時に設定ウィンドウを閉じる
function notsetting(){
ipcRenderer.send('closeset', "setting");
}
//セッティング項目を保存する
function savesetting(){
//入力値のvalidation
var validata = "";
var array = [];
//サーバーアドレス
validata = document.getElementById("server").value;
if(validata == ""){
alert("サーバアドレスが入っていませんよ");
document.getElementById("server").focus();
return;
}else{
array.push(validata);
}
//使用DB名
validata = document.getElementById("dbname").value;
if(validata == ""){
alert("使用するDB名が入っていませんよ");
document.getElementById("dbname").focus();
return;
}else{
array.push(validata);
}
//ユーザID
validata = document.getElementById("user").value;
if(validata == ""){
alert("ユーザIDが入っていませんよ");
document.getElementById("user").focus();
return;
}else{
array.push(validata);
}
//パスワード
validata = document.getElementById("pass").value;
if(validata == ""){
alert("パスワードが入っていませんよ");
document.getElementById("pass").focus();
return;
}else{
array.push(validata);
}
//メインプロセスに処理を送る
ipcRenderer.send('keytar', array);
}
</script>
<title>座席表 Plusのセッティング</title>
</head>
<body>
<!-- セッティング項目を表示　-->
<form class="contact_form" action="#" method="post" name="contact_form">
<ul>
<li>
<h2>DB接続設定</h2>
<span class="required_notification">*印は、必須入力項目です</span>
</li>
<li>
<label for="name">サーバーアドレス</label>
<input type="text"  placeholder="192.168.1.100" style="width:100px" id="server" required />
<span class="form_hint">ポートは3306決め打ちなので入力不要</span>
</li>
<li>
<label for="name">使用DB名:</label>
<input type="text" name="dbname" placeholder="database名"  style="width:80px" id="dbname" required />
<span class="form_hint">接続するデータベース名を入力</span>
</li>
<li>
<label for="uid">ユーザID:</label>
<input type="uid" name="uid" placeholder=""  style="width:80px" id="user" required />
<span class="form_hint">DB接続用のユーザIDを入力します。"</span>
</li>
<li>
<label for="name">パスワード:</label>
<input type="password" name="password" placeholder="********"  style="width:100px" id="pass" required />
<span class="form_hint">DB接続用のパスワードを入力します。"</span>
</li>
</ul>
</form>
<p>
<center>
<button onClick='savesetting()' id="saveman" class="action" title='設定を保存する'>設定保存</button>
<button onClick='notsetting()' id="cancelman" class="action" title='キャンセル'>キャンセル</button>
</center>
</p>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

<!DOCTYPE html>

<html>

<head>

var $ = jQuery = require("jquery")

</script>

$(function() {

$( "input[type=submit], a, button" )

.button()

.click(function() {

});

// IPC通信を行う

var ipcRenderer = require( 'electron' ).ipcRenderer;

window.onload = function () {

//受信レンダラーの準備

testAsync();

};

//メインプロセス側からの非同期に通信を受信待機する（1回だけ実行）

function testAsync() {

//各種雑多なメッセージを受け取る

ipcRenderer.on('msg', function(event,arg) {

alert(arg);

});

//保存済みデータを受け取る

ipcRenderer.on('init',function(event,arg){

//受け取ったデータをHTMLのボックスに反映する

var array = arg;

//配列データを各項目に入れてあげる

document.getElementById("server").value = array[0];

document.getElementById("dbname").value = array[1];

document.getElementById("user").value = array[2];

document.getElementById("pass").value = array[3];

})

//DB設定初期値をもらう

ipcRenderer.send('async', "dbname");

}

//キャンセル時に設定ウィンドウを閉じる

function notsetting(){

ipcRenderer.send('closeset', "setting");

}

//セッティング項目を保存する

function savesetting(){

//入力値のvalidation

var validata = "";

var array = [];

//サーバーアドレス

validata = document.getElementById("server").value;

if(validata == ""){

alert("サーバアドレスが入っていませんよ");

document.getElementById("server").focus();

return;

}else{

array.push(validata);

}

//使用DB名

validata = document.getElementById("dbname").value;

if(validata == ""){

alert("使用するDB名が入っていませんよ");

document.getElementById("dbname").focus();

return;

}else{

array.push(validata);

}

//ユーザID

validata = document.getElementById("user").value;

if(validata == ""){

alert("ユーザIDが入っていませんよ");

document.getElementById("user").focus();

return;

}else{

array.push(validata);

}

//パスワード

validata = document.getElementById("pass").value;

if(validata == ""){

alert("パスワードが入っていませんよ");

document.getElementById("pass").focus();

return;

}else{

array.push(validata);

}

//メインプロセスに処理を送る

ipcRenderer.send('keytar', array);

}

</script>

<title>座席表 Plusのセッティング</title>

</head>

<body>

<ul>

<li>

<h2>DB接続設定</h2>

<span class="required_notification">*印は、必須入力項目です</span>

</li>

<li>

<label for="name">サーバーアドレス</label>

<span class="form_hint">ポートは3306決め打ちなので入力不要</span>

</li>

<li>

<label for="name">使用DB名:</label>

<span class="form_hint">接続するデータベース名を入力</span>

</li>

<li>

<label for="uid">ユーザID:</label>

<span class="form_hint">DB接続用のユーザIDを入力します。"</span>

</li>

<li>

<label for="name">パスワード:</label>

<span class="form_hint">DB接続用のパスワードを入力します。"</span>

</li>

</ul>

</form>

<p>

<button onClick='notsetting()' id="cancelman" class="action" title='キャンセル'>キャンセル</button>

</center>

</p>

</body>

</html>

メイン画面の子Windowとして呼び出されます。macOSの場合は上からにゅっと出てくるようになるのですが、Windowsの場合はモーダルダイアログとして表示されます。
サーバアドレス、使用DB名、ユーザID、パスワードを入力し、メインプロセスのkeytarにて情報をOS管理の資格情報システムに登録します。また、起動時には資格情報システムから呼び出してロードします。
今回の画面のCSSはこちらのサイトのスタイルシートを利用しています。

メイン画面の作成（index.html）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script>
var $ = jQuery = require("jquery")
</script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script src="js/jquery.touch-punch.min.js"></script>
<script src="js/jquery.shapeshift.js"></script>
<link rel="stylesheet" href="css/jquery-ui.css">
<style>
.container {
border: 0px dashed #CCC;
position: relative;
line-height: 40px;
}
.container > div {
background: #FFFFFF;
position: absolute;
height: 40px;
width: 60px;
border-style: solid;
border-color: #5882FA;
font-size: 10px;
font-weight:bold;
text-align:center;
display: inline-block;
}
.container > div:hover{
background-color: #f5ffaa;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all  0.2s ease;
}
.container > div:active{
background-color: #ffc9d7;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all  0.2s ease;
}
.container > div[data-ss-colspan="2"] { width: 130px; background:#d3ffd7;}
.container > div[nothing="1"] { visibility:hidden; }
.container > div[cabinet="1"] { background:#A4A4A4; color:#fff;}
.container > .ss-placeholder-child {
background: transparent;
border: 1px dashed blue;
}
/* ダイアログの背景画像変更用 */
.ui-widget-overlay {
background: #000 url(images/halloween.png) 10% 100% repeat-x;
opacity: .50;
background-size: 100% 100%;
filter: Alpha(Opacity=70);
}
.box {
float: left;
width: 180px;
text-align: center;
}
.box2 {
float: left;
width: 180px;
text-align: center;
}
.boxContainer {
overflow: hidden;
width:100%;
}
/* clearfix */
.boxContainer:before,
.boxContainer:after {
content: "";
display: table;
}
.boxContainer:after {
clear: both;
}
/* For IE 6/7 (trigger hasLayout) */
.boxContainer {
zoom: 1;
}
</style>
<script src="index.js"></script>
<script>
//クリック時に確保する一時座席ID
var tempseat = "";
//ダイアログ表示用
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
width:400,
height: 270,
title: "ログイン",
modal: true,
show: {
effect: "explode",
duration: 500
},
hide: {
effect: "explode",
duration: 500
}
});
});
//登録用ダイアログ表示設定
$(function() {
$( "#dialog2" ).dialog({
autoOpen: false,
closeText: "保存せずに閉じます",
width: 400,
height: 300,
title: "作業内容",
modal: true,
show: {
effect: "clip",
duration: 500
},
hide: {
effect: "clip",
duration: 500
},
position: {
of : 'body',
at: 'center',
my: 'center'
}
});
});
$(function() {
$( "input[type=submit], a, button" )
.button()
.click(function() {
});
});
// IPC通信を行う
var ipcRenderer = require( 'electron' ).ipcRenderer;
window.onload = function () {
//受信レンダラーの準備
testAsync();
};
//メインプロセス側からの非同期に通信を受信待機させる（1回だけ）
function testAsync() {
//各種雑多なメッセージを受け取る
ipcRenderer.on('message', function(event,arg) {
alert(arg);
return;
});
//シート確保時
ipcRenderer.on('ongetsheet', function(event,arg) {
//メッセージ表示
alert(arg);
//シートデータを更新
connectSQL();
return;
});
//seatデータを取得してHTMLへ反映する
ipcRenderer.on('record',function(event,arg){
//JSONデータを取得する
var json = arg;
//データを分解
var dlength = json.count;
var record = json.recman;
//データ生成ルーチンへ渡す
onSeat(dlength,record);
return;
})
//シートの空き具合データを取得する
ipcRenderer.on('seatok',function(event,arg){
//JSONデータを取得する
var json = arg;
//データを分解
var record = json.data;
//データ生成ルーチンへ渡す
onSuccess(record);
})
}
//シート状況をチャートに反映するコード
function onSeat(dlength,record){
//データをパースする
var json = record;
var length = dlength;
//ループを回してシート状況を反映する
for(var i = 0;i<length;i++){
try{
//固定フラグがONのデータの場合スルーする
if(json[i].koteiflg == true){
//ユーザ名がからの場合
if(json[i].username == null || json[i].username == ""){
//スルーする
}else{
//既定値を反映する
document.getElementById(json[i].seatname).innerHTML  = json[i].username;
//既定値のみ背景色を変更
document.getElementById(json[i].seatname).style.background = "#d3f1ff";
}
}else{
//データが空の場合には、スルーし、ある場合には反映する
if(json[i].username == ""　 || json[i].username == null){
//データが空なので空として反映する
document.getElementById(json[i].seatname).innerHTML  = json[i].username;
document.getElementById(json[i].seatname).style.background = "";
continue;
}else{
//キープ済み
document.getElementById(json[i].seatname).innerHTML  = json[i].username;
//キープ済席の背景色を変更
document.getElementById(json[i].seatname).style.background = "#f6d3ff";
}
}
}catch(e){
}
}
}
//シートの空き状況を取得して処理をする関数
function onSuccess(data){
var flag = false;
//ユーザ名が空ならばflagはtrueとする
if(data[0].username == null || data[0].username == ""){
flag = true;
}
//返り値を元に処理を分岐
if(flag == true){
//シート確保用のダイアログを表示する
//ダイアログ表示
$('#dialog').dialog({
title: "席の確保",
close : function(){
}
});
$( "#dialog" ).dialog( "open" );
$( "#dialog" ).dialog("moveToTop");
document.getElementById("dialog").focus();
//IEに保存されてるIDを呼び出せるなら呼び出す
document.getElementById("wasabi").value = getData("mannum");
}else{
alert("シート取られてしまったようです・・・画面をリロードして、やり直してみてください。");
}
}
//LocalStorageへのデータの挿入
function setData(key, data){
localStorage.setItem(key, data);
}
//LocalStorageからのデータの取得
function getData(key){
var ret = localStorage.getItem(key);
//null値判定
if(ret == null){
return "";
}else{
return ret;
}
}
//シートをキープする処理
function seatkeep(){
//ダイアログ内のIDを取得する
var manid = document.getElementById("wasabi").value;
if(manid == ""){
alert("社員IDが入っていませんよ");
document.getElementById("wasabi").focus();
return;
}else{
//ダイアログ内のIDをLocalStorageへ記憶する
setData("mannum",manid);
}
//GAS側へシート確保処理をなげる
ipcRenderer.send('async', "keepsheet",[manid,tempseat]);
//ダイアログを閉じる
document.getElementById("wasabi").value = "";
$( "#dialog" ).dialog( "close" );
}
//シート確保をキャンセルする関数
function seatcancel(){
//ダイアログを閉じる
document.getElementById("wasabi").value = "";
$( "#dialog" ).dialog( "close" );
//メッセージ表示
alert("キャンセルされますた。");
}
//座席の解放ボタンを押した時のダイアログ表示用処理
function releaseseat(){
//シート確保用のダイアログを表示する
//ダイアログ表示
$('#dialog2').dialog({
title: "席の解放",
close : function(){
}
});
$( "#dialog2" ).dialog( "open" );
$( "#dialog2" ).dialog("moveToTop");
document.getElementById("dialog2").focus();
//IEに保存されてるIDを呼び出せるなら呼び出す
document.getElementById("wasabi2").value = getData("mannum");
}
//席の解放ボタンクリック時の処理
function release(){
//ダイアログ内のIDを取得する
var manid = document.getElementById("wasabi2").value;
if(manid == ""){
alert("社員IDが入っていませんよ");
document.getElementById("wasabi2").focus();
return;
}else{
//ダイアログ内のIDをLocalStorageへ記憶する
setData("mannum",manid);
}
//シートリリース処理をメインプロセスへ
ipcRenderer.send('async', "releaseseat",[manid,tempseat]);
//ダイアログを閉じる
document.getElementById("wasabi2").value = "";
$( "#dialog2" ).dialog( "close" );
}
//シート確保をキャンセルする関数
function seatcancel2(){
//ダイアログを閉じる
document.getElementById("wasabi2").value = "";
$( "#dialog2" ).dialog( "close" );
//メッセージ表示
alert("キャンセルされますた。");
}
//現在のシートデータをDBから取得する
function connectSQL(){
// メインプロセスに引数を送信
ipcRenderer.send('async', "connect");
}
//接続設定ウィンドウを表示する
function setman(){
//メインプロセスに引数を送信
ipcRenderer.send('closeset', "open");
}
//パネルを反映
function shapeshifter(){
$(".container").shapeshift({
enableDrag: false,
enableCrossDrop: false,
enableResize: false,
minColumns: 3,
minHeight:50,
gutterX:5,
gutterY:5,
paddingX:5,
paddingY:5
});
//パネルのクリックアクションを設定
$('.ss-active-child').on('click', function(){
//クリックした要素のIDを取得
var id =  $(this).attr("id");
//一時変数に座席IDを確保
tempseat = id;
//DIVの値を取得
var manname = $(this).html();
//取得したID要素を表示
if(id == undefined){
alert("<img draggable="false" data-mce-resize="false" data-mce-placeholder="1" data-wp-emoji="1" class="emoji" alt="💁" src="https://s.w.org/images/core/emoji/11/svg/1f481.svg">この席は座る事が出来ません！！");
}else{
//名前が入ってるかどうかをチェック
if(manname != ""){
//確保されてるのでユーザ情報ダイアログを表示する
alert("この席はすでに【" + manname + "】さんが座ってますよ。");
return;
}else{
//スプレッドシートを参照して空いてるかチェック
//google.script.run.withSuccessHandler(onSuccess).checkseat(id);
ipcRenderer.send('async', "checkman",id);
}
}
});
}
//座席データのHTML挿入
$(function(){
$("#zasekin").load("zaseki.html",
function() {
shapeshifter();
connectSQL();
});
});
</script>
<title>座席表 Plus</title>
</head>
<body>
<div>
<button onClick='connectSQL()' id="releaseman" class="action" title='席をリリースします。'>再読込</button>
<button onClick='setman()' id="setwindow" class="action" title='接続設定を表示'>接続設定</button>
<button onClick='releaseseat()' id="releaseman" class="action" title='席をリリースします。'>座席の解放</button>
<hr>
</div>
<!-- 座席用HTMLを呼び出す　-->
<div style="width:1000px">
<div id="zasekin"></div>
</div>
<!-- 座席位置設定ダイアログ -->
<div id="dialog" title="Basic dialog">
<p>
今日はこの席でお仕事しますか？座る場合は、IDを入れて、キープをクリックしてください。
</p>
<div align="center">
<b>あなたのID:</b>&nbsp;&nbsp;<input type="text" id="wasabi" size="10" maxlength="9" placeholder="例：R91001">
</div>
<p>
<div class='boxContainer'>
<div class='box2'>
<span><button onClick='seatkeep()' id="button1" style="font-size: 16px;vertical-align: middle" class="ponyo" title='席を確保します。'><img src='images/icon_check2.png' />&nbsp; キープ</button></span>
</div>
<div class='box'>
<span><button onClick='seatcancel()' id="button2" style="font-size: 16px;vertical-align: middle" class="ponyo" title='キャンセルします。'><img src='images/cross.png' />&nbsp; キャンセル</button></span>
</div>
</div>
</div>
<!-- 座席位置解除送信ダイアログ -->
<div id="dialog2" title="Basic dialog">
<p>
<img draggable="false" data-mce-resize="false" data-mce-placeholder="1" data-wp-emoji="1" class="emoji" alt="🍲" src="https://s.w.org/images/core/emoji/11/svg/1f372.svg">今日はもうお帰りですか？座席を解放する場合は、IDを入れて、リリースをクリックしてください。
</p>
<div align="center">
<b>あなたのID:</b>&nbsp;&nbsp;<input type="text" id="wasabi2" size="10" maxlength="6" placeholder="例：R91001">
</div>
<p></p>
<div class='boxContainer'>
<div class='box2'>
<span><button onClick='release()' id="button3" style="font-size: 16px;vertical-align: middle" class="ponyo" title='席を解放します。'><img src='images/icon_check2.png' />&nbsp; リリース</button></span>
</div>
<div class='box'>
<span><button onClick='seatcancel2()' id="button4" style="font-size: 16px;vertical-align: middle" class="ponyo" title='キャンセルします。'><img src='images/cross.png' />&nbsp; キャンセル</button></span>
</div>
</div>
</div>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

464

465

466

467

468

469

470

471

472

473

474

475

476

477

478

479

480

481

482

483

484

485

486

487

488

489

490

491

492

493

494

495

496

497

498

499

<!DOCTYPE html>

<html>

<head>

var $ = jQuery = require("jquery")

</script>

<style>

.container {

border: 0px dashed #CCC;

position: relative;

line-height: 40px;

}

.container > div {

background: #FFFFFF;

position: absolute;

height: 40px;

width: 60px;

border-style: solid;

border-color: #5882FA;

font-size: 10px;

font-weight:bold;

text-align:center;

display: inline-block;

}

.container > div:hover{

background-color: #f5ffaa;

-webkit-transition: all 0.2s ease;

-moz-transition: all 0.2s ease;

-o-transition: all 0.2s ease;

transition: all 0.2s ease;

}

.container > div:active{

background-color: #ffc9d7;

-webkit-transition: all 0.2s ease;

-moz-transition: all 0.2s ease;

-o-transition: all 0.2s ease;

transition: all 0.2s ease;

}

.container > div[data-ss-colspan="2"] { width: 130px; background:#d3ffd7;}

.container > div[nothing="1"] { visibility:hidden; }

.container > div[cabinet="1"] { background:#A4A4A4; color:#fff;}

.container > .ss-placeholder-child {

background: transparent;

border: 1px dashed blue;

}

/* ダイアログの背景画像変更用 */

.ui-widget-overlay {

background: #000 url(images/halloween.png) 10% 100% repeat-x;

opacity: .50;

background-size: 100% 100%;

filter: Alpha(Opacity=70);

}

.box {

float: left;

width: 180px;

text-align: center;

}

.box2 {

float: left;

width: 180px;

text-align: center;

}

.boxContainer {

overflow: hidden;

width:100%;

}

/* clearfix */

.boxContainer:before,

.boxContainer:after {

content: "";

display: table;

}

.boxContainer:after {

clear: both;

}

/* For IE 6/7 (trigger hasLayout) */

.boxContainer {

zoom: 1;

}

</style>

//クリック時に確保する一時座席ID

var tempseat = "";

//ダイアログ表示用

$(function() {

$( "#dialog" ).dialog({

autoOpen: false,

width:400,

height: 270,

title: "ログイン",

modal: true,

show: {

effect: "explode",

duration: 500

hide: {

effect: "explode",

duration: 500

}

});

//登録用ダイアログ表示設定

$(function() {

$( "#dialog2" ).dialog({

autoOpen: false,

closeText: "保存せずに閉じます",

width: 400,

height: 300,

title: "作業内容",

modal: true,

show: {

effect: "clip",

duration: 500

hide: {

effect: "clip",

duration: 500

position: {

of : 'body',

at: 'center',

my: 'center'

}

});

$(function() {

$( "input[type=submit], a, button" )

.button()

.click(function() {

});

// IPC通信を行う

var ipcRenderer = require( 'electron' ).ipcRenderer;

window.onload = function () {

//受信レンダラーの準備

testAsync();

};

//メインプロセス側からの非同期に通信を受信待機させる（1回だけ）

function testAsync() {

//各種雑多なメッセージを受け取る

ipcRenderer.on('message', function(event,arg) {

alert(arg);

return;

});

//シート確保時

ipcRenderer.on('ongetsheet', function(event,arg) {

//メッセージ表示

alert(arg);

//シートデータを更新

connectSQL();

return;

});

//seatデータを取得してHTMLへ反映する

ipcRenderer.on('record',function(event,arg){

//JSONデータを取得する

var json = arg;

//データを分解

var dlength = json.count;

var record = json.recman;

//データ生成ルーチンへ渡す

onSeat(dlength,record);

return;

})

//シートの空き具合データを取得する

ipcRenderer.on('seatok',function(event,arg){

//JSONデータを取得する

var json = arg;

//データを分解

var record = json.data;

//データ生成ルーチンへ渡す

onSuccess(record);

})

}

//シート状況をチャートに反映するコード

function onSeat(dlength,record){

//データをパースする

var json = record;

var length = dlength;

//ループを回してシート状況を反映する

for(var i = 0;i<length;i++){

try{

//固定フラグがONのデータの場合スルーする

if(json[i].koteiflg == true){

//ユーザ名がからの場合

if(json[i].username == null || json[i].username == ""){

//スルーする

}else{

//既定値を反映する

document.getElementById(json[i].seatname).innerHTML = json[i].username;

//既定値のみ背景色を変更

document.getElementById(json[i].seatname).style.background = "#d3f1ff";

}

}else{

//データが空の場合には、スルーし、ある場合には反映する

if(json[i].username == ""　 || json[i].username == null){

//データが空なので空として反映する

document.getElementById(json[i].seatname).innerHTML = json[i].username;

document.getElementById(json[i].seatname).style.background = "";

continue;

}else{

//キープ済み

document.getElementById(json[i].seatname).innerHTML = json[i].username;

//キープ済席の背景色を変更

document.getElementById(json[i].seatname).style.background = "#f6d3ff";

}

}catch(e){

}

//シートの空き状況を取得して処理をする関数

function onSuccess(data){

var flag = false;

//ユーザ名が空ならばflagはtrueとする

if(data[0].username == null || data[0].username == ""){

flag = true;

}

//返り値を元に処理を分岐

if(flag == true){

//シート確保用のダイアログを表示する

//ダイアログ表示

$('#dialog').dialog({

title: "席の確保",

close : function(){

}

});

$( "#dialog" ).dialog( "open" );

$( "#dialog" ).dialog("moveToTop");

document.getElementById("dialog").focus();

//IEに保存されてるIDを呼び出せるなら呼び出す

document.getElementById("wasabi").value = getData("mannum");

}else{

alert("シート取られてしまったようです・・・画面をリロードして、やり直してみてください。");

}

//LocalStorageへのデータの挿入

function setData(key, data){

localStorage.setItem(key, data);

}

//LocalStorageからのデータの取得

function getData(key){

var ret = localStorage.getItem(key);

//null値判定

if(ret == null){

return "";

}else{

return ret;

}

//シートをキープする処理

function seatkeep(){

//ダイアログ内のIDを取得する

var manid = document.getElementById("wasabi").value;

if(manid == ""){

alert("社員IDが入っていませんよ");

document.getElementById("wasabi").focus();

return;

}else{

//ダイアログ内のIDをLocalStorageへ記憶する

setData("mannum",manid);

}

//GAS側へシート確保処理をなげる

ipcRenderer.send('async', "keepsheet",[manid,tempseat]);

//ダイアログを閉じる

document.getElementById("wasabi").value = "";

$( "#dialog" ).dialog( "close" );

}

//シート確保をキャンセルする関数

function seatcancel(){

//ダイアログを閉じる

document.getElementById("wasabi").value = "";

$( "#dialog" ).dialog( "close" );

//メッセージ表示

alert("キャンセルされますた。");

}

//座席の解放ボタンを押した時のダイアログ表示用処理

function releaseseat(){

//シート確保用のダイアログを表示する

//ダイアログ表示

$('#dialog2').dialog({

title: "席の解放",

close : function(){

}

});

$( "#dialog2" ).dialog( "open" );

$( "#dialog2" ).dialog("moveToTop");

document.getElementById("dialog2").focus();

//IEに保存されてるIDを呼び出せるなら呼び出す

document.getElementById("wasabi2").value = getData("mannum");

}

//席の解放ボタンクリック時の処理

function release(){

//ダイアログ内のIDを取得する

var manid = document.getElementById("wasabi2").value;

if(manid == ""){

alert("社員IDが入っていませんよ");

document.getElementById("wasabi2").focus();

return;

}else{

//ダイアログ内のIDをLocalStorageへ記憶する

setData("mannum",manid);

}

//シートリリース処理をメインプロセスへ

ipcRenderer.send('async', "releaseseat",[manid,tempseat]);

//ダイアログを閉じる

document.getElementById("wasabi2").value = "";

$( "#dialog2" ).dialog( "close" );

}

//シート確保をキャンセルする関数

function seatcancel2(){

//ダイアログを閉じる

document.getElementById("wasabi2").value = "";

$( "#dialog2" ).dialog( "close" );

//メッセージ表示

alert("キャンセルされますた。");

}

//現在のシートデータをDBから取得する

function connectSQL(){

// メインプロセスに引数を送信

ipcRenderer.send('async', "connect");

}

//接続設定ウィンドウを表示する

function setman(){

//メインプロセスに引数を送信

ipcRenderer.send('closeset', "open");

}

//パネルを反映

function shapeshifter(){

$(".container").shapeshift({

enableDrag: false,

enableCrossDrop: false,

enableResize: false,

minColumns: 3,

minHeight:50,

gutterX:5,

gutterY:5,

paddingX:5,

paddingY:5

});

//パネルのクリックアクションを設定

$('.ss-active-child').on('click', function(){

//クリックした要素のIDを取得

var id = $(this).attr("id");

//一時変数に座席IDを確保

tempseat = id;

//DIVの値を取得

var manname = $(this).html();

//取得したID要素を表示

if(id == undefined){

alert("<img draggable="false" data-mce-resize="false" data-mce-placeholder="1" data-wp-emoji="1" class="emoji" alt="💁" src="https://s.w.org/images/core/emoji/11/svg/1f481.svg">この席は座る事が出来ません！！");

}else{

//名前が入ってるかどうかをチェック

if(manname != ""){

//確保されてるのでユーザ情報ダイアログを表示する

alert("この席はすでに【" + manname + "】さんが座ってますよ。");

return;

}else{

//スプレッドシートを参照して空いてるかチェック

//google.script.run.withSuccessHandler(onSuccess).checkseat(id);

ipcRenderer.send('async', "checkman",id);

}

});

}

//座席データのHTML挿入

$(function(){

$("#zasekin").load("zaseki.html",

function() {

shapeshifter();

connectSQL();

});

</script>

</head>

<body>

<div>

<button onClick='releaseseat()' id="releaseman" class="action" title='席をリリースします。'>座席の解放</button>

<hr>

</div>

</div>

<p>

今日はこの席でお仕事しますか？座る場合は、IDを入れて、キープをクリックしてください。

</p>

<b>あなたのID:</b>  <input type="text" id="wasabi" size="10" maxlength="9" placeholder="例：R91001">

</div>

<p>

</div>

<span><button onClick='seatcancel()' id="button2" style="font-size: 16px;vertical-align: middle" class="ponyo" title='キャンセルします。'><img src='images/cross.png' />  キャンセル</button></span>

</div>

<p>

<img draggable="false" data-mce-resize="false" data-mce-placeholder="1" data-wp-emoji="1" class="emoji" alt="🍲" src="https://s.w.org/images/core/emoji/11/svg/1f372.svg">今日はもうお帰りですか？座席を解放する場合は、IDを入れて、リリースをクリックしてください。

</p>

<b>あなたのID:</b>  <input type="text" id="wasabi2" size="10" maxlength="6" placeholder="例：R91001">

</div>

<p></p>

</div>

<span><button onClick='seatcancel2()' id="button4" style="font-size: 16px;vertical-align: middle" class="ponyo" title='キャンセルします。'><img src='images/cross.png' />  キャンセル</button></span>

</div>

</body>

</html>

メインの座席表を表示するレンダラープロセスのコードです。
座席確保やリリース時に入力するダイアログでの値はLocalstorageに保存されます。画面表示する際には呼び出されます
座席表の基本データはzaseki.htmlに記述してあり、起動時にidがzasekinの場所にロードされます。ロードが完了してから、shapeshifterの適用を行い、またMySQLから現在のシート確保状況データをconnectSQLでロードさせています。
座席のレイアウトや確保対象外とするパネルはzaseki.html側を編集します。nothingが1のものは、確保対象外のパネル（非表示になります）を意味します。cabinetはそもそも椅子ではない場所を意味します。data-ss-colspanは横長のパネルで役員席などに適用する為のものです（横に2パネル消費します）
testsync関数では、メインプロセスからの通信を受け取るipcrenderer.onを待機させる為の関数です。各関数はメインプロセスからプッシュされると自動的に応答して処理がなされます。
メインプロセス側にデータを送る役目をしてるのが、ipcRenderer.sendでメインプロセス側で受け取ると処理が開始されます。

Node.js側コード（index.js）

'use strict';
//標準モジュールの宣言
const electron = require('electron');
const { app } = require('electron');
const BrowserWindow = electron.BrowserWindow;
var fs = require('fs');
var readline = require('readline');
//Node.js側とHTML側で通信をするモジュール
const ipcMain = require('electron').ipcMain;
//追加モジュールの宣言
const keytar = require('keytar');
const mysql = require('promise-mysql');
const Store = require('electron-store');
const store = new Store();
// メインウィンドウはグローバル宣言
let mainWindow = null;
let setWindow = null;
app.on('ready', function() {
//とりあえず、キャッシュをクリアしておく
electron.session.defaultSession.clearCache(() => {})
// メイン画面の表示。ウィンドウの幅、高さを指定できる
mainWindow = new BrowserWindow({
'width': 1030,
'height': 750,
'autoHideMenuBar':true,
//nodeIntegrationを有効にしないとrenderProcessでrequireを使えない。v5.0.0ではデフォルトで廃止
webPreferences: {
nodeIntegration: true
},
'resizable':false,
'fullscreenable':false,
'fullscreen':false
});
//セッティングウィンドウ
setWindow = new BrowserWindow({
'width': 520,
'height': 400,
'autoHideMenuBar':true,
//nodeIntegrationを有効にしないとrenderProcessでrequireを使えない。v5.0.0ではデフォルトで廃止
webPreferences: {
nodeIntegration: true
},
'resizable':false,
'fullscreenable':false,
'fullscreen':false,
'alwaysOnTop':true,
'modal':true,
'parent':mainWindow,
'show':false
})
//初期ページの表示
mainWindow.loadURL('file://' + __dirname + '/index.html');
//キー管理情報が存在しているかどうかで判定
setWindow.loadURL('file://' + __dirname + '/setting.html');
if(store.get("id") == "undefined"){
setWindow.show();  //idがないので最初から表示
}
//デベロッパーツールを有効化
//mainWindow.webContents.openDevTools();
mainWindow.on('closed', function() {
mainWindow = null;
});
setWindow.on('closed', function() {
//キャッシュを捨てる
electron.session.defaultSession.clearCache(() => {})
setWindow = null;
});
});
// 全てのウィンドウが閉じたときの処理
app.on('window-all-closed', () => {
// macOSの時以外はアプリケーションを終了させます（osxだとドックに残る）
if (process.platform !== 'darwin') {
app.quit();
}
});
//mysql関係をコントロールする
ipcMain.on('async', function( event, args, args2){
//コマンド名によって処理を開始
switch(args){
case "connect":
//接続テスト
conncloudsql(function (ret){
var json = ret;
switch(json.status){
case "NOSET":
//接続設定がないため繋がなかった場合の処理
mainWindow.webContents.send('message', "DB接続設定がありませんよ");
break;
case "ERR":
//エラーが発生した場合の処理
mainWindow.webContents.send('message', json.error);
break;
case "OK":
//カウントデータを取得する
event.sender.send('record', json);
break;
}
});
break;
case "dbname":
//DB接続設定をもらう
//レンダラー側に送りつける設定を集める
var array = [];
array.push(store.get("server"));
array.push(store.get("dbname"));
array.push(store.get("id"));
//idを元にkeyを探索する
if(store.get("id") != "undefined"){
var servicename = "zaseki_" + store.get("id");
if(keytar.findPassword(servicename)){
const secret = keytar.getPassword(servicename,store.get("id"));
secret.then((result) => {
array.push(result);
event.sender.send('init', array);
return;
});
}else{
array.push("");
event.sender.send('init', array);
}
}else{
array.push("");
event.sender.send('init', array);
}
break;
case "checkman":
//シートの空き状況を確認する
var seatid = args2;
//SQLで空き状況確認
checkseatsql(seatid,function (ret){
var json = ret;
//ステータスで判定して処理
switch(json.status){
case "NOSET":
//接続設定がないため繋がなかった場合の処理
mainWindow.webContents.send('message', "DB接続設定がありませんよ");
break;
case "ERR":
//エラーが発生した場合の処理
mainWindow.webContents.send('message', json.error);
break;
case "OK":
//カウントデータを取得する
event.sender.send('seatok', json);
break;
}
});
break;
case "keepsheet":
//シートを確保する
var uid = args2[0];
var seat = args2[1];
//ユーザの存在確認
chkhumansql(uid,function (ret){
var json = ret;
//ステータスで判定して処理
switch(json.status){
case "NOSET":
//接続設定がないため繋がなかった場合の処理
mainWindow.webContents.send('message', "DB接続設定がありませんよ");
break;
case "ERR":
//エラーが発生した場合の処理
mainWindow.webContents.send('message', json.error);
console.log("check");
break;
case "OK":
//カウントデータを取得する
if(json.count == 0){
//ユーザがいませんでした。
event.sender.send('message', "ユーザの登録情報がありませんでした。");
return;
}
//ユーザ名を取得して席取得処理
var human = json.data[0].name;
//シートの重複確保チェックと実際の確保ルーチン
keepsheetsql([uid,human,seat],function (ret){
var json = ret;
switch(json.status){
case "NOSET":
//接続設定がないため繋がなかった場合の処理
mainWindow.webContents.send('message', "DB接続設定がありませんよ");
break;
case "ERR":
//エラーが発生した場合の処理
mainWindow.webContents.send('message', json.msg);
console.log("keep");
break;
case "OK":
//完了メッセージを送る
event.sender.send('ongetsheet', json.msg);
break;
}
});
break;
}
});
break;
case "releaseseat":
//確保した席をリリースします
//シートを確保する
var uid = args2[0];
var seat = args2[1];
//ユーザの存在確認
chkhumansql(uid,function (ret){
var json = ret;
//ステータスで判定して処理
switch(json.status){
case "NOSET":
//接続設定がないため繋がなかった場合の処理
mainWindow.webContents.send('message', "DB接続設定がありませんよ");
break;
case "ERR":
//エラーが発生した場合の処理
mainWindow.webContents.send('message', json.error);
console.log("check");
break;
case "OK":
//カウントデータを取得する
if(json.count == 0){
//ユーザがいませんでした。
event.sender.send('message', "ユーザの登録情報がありませんでした。");
return;
}
//ユーザ名を取得して席取得処理
var human = json.data[0].name;
//シートの重複確保チェックと実際のリリースルーチン
relsheetsql([uid,human,seat],function (ret){
var json = ret;
switch(json.status){
case "NOSET":
//接続設定がないため繋がなかった場合の処理
mainWindow.webContents.send('message', "DB接続設定がありませんよ");
break;
case "ERR":
//エラーが発生した場合の処理
mainWindow.webContents.send('message', json.msg);
console.log("keep");
break;
case "OK":
//完了メッセージを送る
event.sender.send('ongetsheet', json.msg);
break;
}
});
break;
}
});
break;
default:
break;
}
});
//ウィンドウをコントロールする
ipcMain.on('closeset', function( event, args ){
//コマンド名によって処理を開始
switch(args){
case "setting":
//セッティングウィンドウを非表示にする
setWindow.hide();
break;
case "open":
//セッティングウィンドウを表示する
setWindow.show();
break;
default:
break;
}
});
//keytar関係をコントロールする
ipcMain.on('keytar', function( event, args ){
//配列データを受け取る
var array = args;
//サービス名を構築する
var servicename = "zaseki_" + array[2];
//キーワードを保存する
keytar.setPassword(servicename,array[2],array[3]);
//他の情報はelectron-storeで保存する
store.set("server",array[0]);
store.set("dbname",array[1]);
store.set("id",array[2]);
//セッティングウィンドウを非表示にする
setWindow.hide();
});
//シートをリリースする処理
function relsheetsql(args,callback){
var uid = args[0];
var uname = args[1];
var seatnum = "";
var connection;
var retman = {};
var pass = [];
var result = "";
var pafu = "";
//サービス名を構築する
var servicename = "zaseki_" + store.get("id");
//接続設定があるかないか判定
if(store.get("id") == "undefined" || store.get("id") == null){
//エラーでコールバックさせる
retman.status = "NOSET";
callback(retman);
return;
}
var secret = keytar.getPassword(servicename,store.get("id"));
secret.then((result) => {
//パスワードを取得する
pass = result;
//MySQLに接続してデータを取得する
//createConnectionでは接続が時々切れる
mysql.createConnection({
host: store.get("server"),
port: 3306,
user: store.get("id"),
password: pass,
database: store.get("dbname")
}).then(function(conn){
//seat確保済みかどうかのチェック
connection = conn;
//該当のIDでの登録数が何件かしらべる
var result = connection.query('select *  from seat where emp_id = "' + uid + '";');
return result;
}).then(function(rows){
//データ件数を取得する
var dlength = rows.length;
seatnum = rows[0].seatname;
//返り値を判定する
if(dlength != 0){
//0件じゃないのでクエリを実行
//seatnumをRowsから取得
console.log(seatnum);
//シートを確保する
var result = connection.query('update seat set username = ?, emp_id = ? where seatname = ?;',
["","",seatnum],
(err,result)=> {
//エラーが発生した場合
if (err) {
console.log("接続エラー");
retman.status = "ERR";
retman.msg = error;
connection.end();
callback(retman);
return;
}
//取得データを返す
retman.status = "OK";
retman.msg = "該当のシートをリリースしました。";
callback(retman);
connection.end();
return;
}
);
}else{
//確保はされていないのでそのまま返す
//取得データを返す
retman.status = "OK";
retman.msg = "該当の席は既にリリースされているみたいですよ。";
callback(retman);
connection.end();
return;
}
}).catch(function(error){
if (connection && connection.end) connection.end();
//logs out the error
retman.status = "ERR";
retman.msg = "接続エラーですよ。パスワードが違うとかサーバアドレス間違ってるとか、ありませんか？";
callback(retman);
return;
});
});
}
//シートをキープする処理
function keepsheetsql(args,callback){
var uid = args[0];
var uname = args[1];
var seatnum = args[2];
var connection;
var retman = {};
var pass = [];
var result = "";
var pafu = "";
//サービス名を構築する
var servicename = "zaseki_" + store.get("id");
//接続設定があるかないか判定
if(store.get("id") == "undefined" || store.get("id") == null){
//エラーでコールバックさせる
retman.status = "NOSET";
callback(retman);
return;
}
var secret = keytar.getPassword(servicename,store.get("id"));
secret.then((result) => {
//パスワードを取得する
pass = result;
//MySQLに接続してデータを取得する
//createConnectionでは接続が時々切れる
mysql.createConnection({
host: store.get("server"),
port: 3306,
user: store.get("id"),
password: pass,
database: store.get("dbname")
}).then(function(conn){
//seat確保済みかどうかのチェック
connection = conn;
//該当のIDでの登録数が何件かしらべる
var result = connection.query('select *  from seat where emp_id = "' + uid + '";');
return result;
}).then(function(rows){
//データ件数を取得する
var dlength = rows.length;
//返り値を判定する
if(dlength == 0){
//0件なのでクエリを実行
//シートを確保する
var result = connection.query('update seat set username = ?, emp_id = ? where seatname = ?;',
[uname,uid,seatnum],
(err,result)=> {
//エラーが発生した場合
if (err) {
console.log("接続エラー");
retman.status = "ERR";
retman.msg = error;
connection.end();
callback(retman);
return;
}
//取得データを返す
retman.status = "OK";
retman.msg = seatnum + "のシートをID:" + uid + "で確保しました。";
callback(retman);
connection.end();
return;
}
);
}else{
//すでに登録済みなのでメッセージを返す
//取得データを返す
retman.status = "OK";
retman.msg = "すでに別の席が" + uid + "にて確保されているみたいですよ。";
callback(retman);
connection.end();
return;
}
}).catch(function(error){
if (connection && connection.end) connection.end();
//logs out the error
retman.status = "ERR";
retman.msg = "接続エラーですよ。パスワードが違うとかサーバアドレス間違ってるとか、ありませんか？";
callback(retman);
return;
});
});
}
//ユーザがいるかどうかチェック
function chkhumansql(args,callback){
var connection;
var retman = {};
var pass = [];
var result = ""
//サービス名を構築する
var servicename = "zaseki_" + store.get("id");
//接続設定があるかないか判定
if(store.get("id") == "undefined" || store.get("id") == null){
//エラーでコールバックさせる
retman.status = "NOSET";
callback(retman);
return;
}
var secret = keytar.getPassword(servicename,store.get("id"));
secret.then((result) => {
//パスワードを取得する
pass = result;
//MySQLに接続してデータを取得する
//createConnectionでは接続が時々切れる
mysql.createConnection({
host: store.get("server"),
port: 3306,
user: store.get("id"),
password: pass,
database: store.get("dbname")
}).then(function(conn){
//レコード用変数
var hflg = false; //椅子の空き状況
//クエリの実行
connection = conn;
var result = connection.query('select *  from userid where userid = "' + args + '";', function (err, rows, fields) {
//エラーが発生した場合
if (err) {
console.log("接続エラー");
retman.status = "ERR";
retman.error = error;
callback(retman);
connection.end();
return;
}
//取得データを返す
retman.status = "OK";
retman.data = rows;
retman.count = rows.length;
console.log("OK");
callback(retman);
connection.end();
return;
});
}).catch(function(error){
if (connection && connection.end) connection.end();
//logs out the error
retman.status = "ERR";
retman.error = "接続エラーですよ。パスワードが違うとかサーバアドレス間違ってるとか、ありませんか？";
callback(retman);
return;
});
});
}
//MySQL Serverに接続してシートの空き状況を確認する
function checkseatsql(seatnum,callback){
var connection;
var retman = {};
var pass = [];
var result = ""
//サービス名を構築する
var servicename = "zaseki_" + store.get("id");
//接続設定があるかないか判定
if(store.get("id") == "undefined" || store.get("id") == null){
//エラーでコールバックさせる
retman.status = "NOSET";
callback(retman);
return;
}
var secret = keytar.getPassword(servicename,store.get("id"));
secret.then((result) => {
//パスワードを取得する
pass = result;
//MySQLに接続してデータを取得する
//createConnectionでは接続が時々切れる
mysql.createConnection({
host: store.get("server"),
port: 3306,
user: store.get("id"),
password: pass,
database: store.get("dbname")
}).then(function(conn){
//レコード用変数
var checkseat = ""; //椅子の空き状況
//クエリの実行
connection = conn;
var result = connection.query('select * from seat where seatname = "' + seatnum + '";', function (err, rows, fields) {
//エラーが発生した場合
if (err) {
console.log("接続エラー");
retman.status = "ERR";
retman.error = error;
callback(retman);
connection.end();
return;
}
//取得データを返す
retman.status = "OK";
retman.data = rows
console.log("OK");
callback(retman);
connection.end();
return;
});
}).catch(function(error){
if (connection && connection.end) connection.end();
//logs out the error
retman.status = "ERR";
retman.error = "接続エラーですよ。パスワードが違うとかサーバアドレス間違ってるとか、ありませんか？";
callback(retman);
return;
});
});
}
//MySQL Serverに接続してシートデータを取得する関数
function conncloudsql(callback){
var connection;
var retman = {};
var pass = [];
var result = ""
//サービス名を構築する
var servicename = "zaseki_" + store.get("id");
//接続設定があるかないか判定
if(store.get("id") == "undefined" || store.get("id") == null){
//エラーでコールバックさせる
retman.status = "NOSET";
callback(retman);
return;
}
//パスワードを取得する
var secret = keytar.getPassword(servicename,store.get("id"));
secret.then((result) => {
//パスワードを取得する
pass = result;
//MySQLに接続してデータを取得する
//createConnectionでは接続が時々切れる
mysql.createConnection({
host: store.get("server"),
port: 3306,
user: store.get("id"),
password: pass,
database: store.get("dbname")
}).then(function(conn){
//レコード用変数
var rlength = 0;    //レコードの数
var record = ""     //レコードデータを格納する
//クエリの実行
connection = conn;
var result = connection.query('select * from seat;', function (err, rows, fields) {
//エラーが発生した場合
if (err) {
console.log("接続エラー");
retman.status = "ERR";
retman.error = error;
callback(retman);
connection.end();
return;
}
//レコードデータを格納する
rlength = rows.length;
//取得データを返す
retman.status = "OK";
retman.count = rlength;
retman.recman = rows;
console.log("OK");
callback(retman);
connection.end();
return;
});
}).catch(function(error){
if (connection && connection.end) connection.end();
//logs out the error
retman.status = "ERR";
retman.error = "接続エラーですよ。パスワードが違うとかサーバアドレス間違ってるとか、ありませんか？";
callback(retman);
return;
});
});
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

464

465

466

467

468

469

470

471

472

473

474

475

476

477

478

479

480

481

482

483

484

485

486

487

488

489

490

491

492

493

494

495

496

497

498

499

500

501

502

503

504

505

506

507

508

509

510

511

512

513

514

515

516

517

518

519

520

521

522

523

524

525

526

527

528

529

530

531

532

533

534

535

536

537

538

539

540

541

542

543

544

545

546

547

548

549

550

551

552

553

554

555

556

557

558

559

560

561

562

563

564

565

566

567

568

569

570

571

572

573

574

575

576

577

578

579

580

581

582

583

584

585

586

587

588

589

590

591

592

593

594

595

596

597

598

599

600

601

602

603

604

605

606

607

608

609

610

611

612

613

614

615

616

617

618

619

620

621

622

623

624

625

626

627

628

629

630

631

632

633

634

635

636

637

638

639

640

641

642

643

644

645

646

647

648

649

650

651

652

653

654

655

656

657

658

659

660

661

662

663

664

665

666

667

668

669

670

671

672

673

674

675

676

677

678

679

680

681

682

683

684

685

686

687

688

689

690

691

692

693

694

695

696

697

698

699

700

701

702

703

704

705

706

707

708

709

710

711

'use strict';

//標準モジュールの宣言

const electron = require('electron');

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

const BrowserWindow = electron.BrowserWindow;

var fs = require('fs');

var readline = require('readline');

//Node.js側とHTML側で通信をするモジュール

const ipcMain = require('electron').ipcMain;

//追加モジュールの宣言

const keytar = require('keytar');

const mysql = require('promise-mysql');

const Store = require('electron-store');

const store = new Store();

// メインウィンドウはグローバル宣言

let mainWindow = null;

let setWindow = null;

app.on('ready', function() {

//とりあえず、キャッシュをクリアしておく

electron.session.defaultSession.clearCache(() => {})

// メイン画面の表示。ウィンドウの幅、高さを指定できる

mainWindow = new BrowserWindow({

'width': 1030,

'height': 750,

'autoHideMenuBar':true,

//nodeIntegrationを有効にしないとrenderProcessでrequireを使えない。v5.0.0ではデフォルトで廃止

webPreferences: {

nodeIntegration: true

'resizable':false,

'fullscreenable':false,

'fullscreen':false

});

//セッティングウィンドウ

setWindow = new BrowserWindow({

'width': 520,

'height': 400,

'autoHideMenuBar':true,

//nodeIntegrationを有効にしないとrenderProcessでrequireを使えない。v5.0.0ではデフォルトで廃止

webPreferences: {

nodeIntegration: true

'resizable':false,

'fullscreenable':false,

'fullscreen':false,

'alwaysOnTop':true,

'modal':true,

'parent':mainWindow,

'show':false

})

//初期ページの表示

mainWindow.loadURL('file://' + __dirname + '/index.html');

//キー管理情報が存在しているかどうかで判定

setWindow.loadURL('file://' + __dirname + '/setting.html');

if(store.get("id") == "undefined"){

setWindow.show(); //idがないので最初から表示

}

//デベロッパーツールを有効化

//mainWindow.webContents.openDevTools();

mainWindow.on('closed', function() {

mainWindow = null;

});

setWindow.on('closed', function() {

//キャッシュを捨てる

electron.session.defaultSession.clearCache(() => {})

setWindow = null;

});

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

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

// macOSの時以外はアプリケーションを終了させます（osxだとドックに残る）

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

app.quit();

}

});

//mysql関係をコントロールする

ipcMain.on('async', function( event, args, args2){

//コマンド名によって処理を開始

switch(args){

case "connect":

//接続テスト

conncloudsql(function (ret){

var json = ret;

switch(json.status){

case "NOSET":

//接続設定がないため繋がなかった場合の処理

mainWindow.webContents.send('message', "DB接続設定がありませんよ");

break;

case "ERR":

//エラーが発生した場合の処理

mainWindow.webContents.send('message', json.error);

break;

case "OK":

//カウントデータを取得する

event.sender.send('record', json);

break;

}

});

break;

case "dbname":

//DB接続設定をもらう

//レンダラー側に送りつける設定を集める

var array = [];

array.push(store.get("server"));

array.push(store.get("dbname"));

array.push(store.get("id"));

//idを元にkeyを探索する

if(store.get("id") != "undefined"){

var servicename = "zaseki_" + store.get("id");

if(keytar.findPassword(servicename)){

const secret = keytar.getPassword(servicename,store.get("id"));

secret.then((result) => {

array.push(result);

event.sender.send('init', array);

return;

});

}else{

array.push("");

event.sender.send('init', array);

}

}else{

array.push("");

event.sender.send('init', array);

}

break;

case "checkman":

//シートの空き状況を確認する

var seatid = args2;

//SQLで空き状況確認

checkseatsql(seatid,function (ret){

var json = ret;

//ステータスで判定して処理

switch(json.status){

case "NOSET":

//接続設定がないため繋がなかった場合の処理

mainWindow.webContents.send('message', "DB接続設定がありませんよ");

break;

case "ERR":

//エラーが発生した場合の処理

mainWindow.webContents.send('message', json.error);

break;

case "OK":

//カウントデータを取得する

event.sender.send('seatok', json);

break;

}

});

break;

case "keepsheet":

//シートを確保する

var uid = args2[0];

var seat = args2[1];

//ユーザの存在確認

chkhumansql(uid,function (ret){

var json = ret;

//ステータスで判定して処理

switch(json.status){

case "NOSET":

//接続設定がないため繋がなかった場合の処理

mainWindow.webContents.send('message', "DB接続設定がありませんよ");

break;

case "ERR":

//エラーが発生した場合の処理

mainWindow.webContents.send('message', json.error);

console.log("check");

break;

case "OK":

//カウントデータを取得する

if(json.count == 0){

//ユーザがいませんでした。

event.sender.send('message', "ユーザの登録情報がありませんでした。");

return;

}

//ユーザ名を取得して席取得処理

var human = json.data[0].name;

//シートの重複確保チェックと実際の確保ルーチン

keepsheetsql([uid,human,seat],function (ret){

var json = ret;

switch(json.status){

case "NOSET":

//接続設定がないため繋がなかった場合の処理

mainWindow.webContents.send('message', "DB接続設定がありませんよ");

break;

case "ERR":

//エラーが発生した場合の処理

mainWindow.webContents.send('message', json.msg);

console.log("keep");

break;

case "OK":

//完了メッセージを送る

event.sender.send('ongetsheet', json.msg);

break;

}

});

break;

}

});

break;

case "releaseseat":

//確保した席をリリースします

//シートを確保する

var uid = args2[0];

var seat = args2[1];

//ユーザの存在確認

chkhumansql(uid,function (ret){

var json = ret;

//ステータスで判定して処理

switch(json.status){

case "NOSET":

//接続設定がないため繋がなかった場合の処理

mainWindow.webContents.send('message', "DB接続設定がありませんよ");

break;

case "ERR":

//エラーが発生した場合の処理

mainWindow.webContents.send('message', json.error);

console.log("check");

break;

case "OK":

//カウントデータを取得する

if(json.count == 0){

//ユーザがいませんでした。

event.sender.send('message', "ユーザの登録情報がありませんでした。");

return;

}

//ユーザ名を取得して席取得処理

var human = json.data[0].name;

//シートの重複確保チェックと実際のリリースルーチン

relsheetsql([uid,human,seat],function (ret){

var json = ret;

switch(json.status){

case "NOSET":

//接続設定がないため繋がなかった場合の処理

mainWindow.webContents.send('message', "DB接続設定がありませんよ");

break;

case "ERR":

//エラーが発生した場合の処理

mainWindow.webContents.send('message', json.msg);

console.log("keep");

break;

case "OK":

//完了メッセージを送る

event.sender.send('ongetsheet', json.msg);

break;

}

});

break;

}

});

break;

default:

break;

}

});

//ウィンドウをコントロールする

ipcMain.on('closeset', function( event, args ){

//コマンド名によって処理を開始

switch(args){

case "setting":

//セッティングウィンドウを非表示にする

setWindow.hide();

break;

case "open":

//セッティングウィンドウを表示する

setWindow.show();

break;

default:

break;

}

});

//keytar関係をコントロールする

ipcMain.on('keytar', function( event, args ){

//配列データを受け取る

var array = args;

//サービス名を構築する

var servicename = "zaseki_" + array[2];

//キーワードを保存する

keytar.setPassword(servicename,array[2],array[3]);

//他の情報はelectron-storeで保存する

store.set("server",array[0]);

store.set("dbname",array[1]);

store.set("id",array[2]);

//セッティングウィンドウを非表示にする

setWindow.hide();

});

//シートをリリースする処理

function relsheetsql(args,callback){

var uid = args[0];

var uname = args[1];

var seatnum = "";

var connection;

var retman = {};

var pass = [];

var result = "";

var pafu = "";

//サービス名を構築する

var servicename = "zaseki_" + store.get("id");

//接続設定があるかないか判定

if(store.get("id") == "undefined" || store.get("id") == null){

//エラーでコールバックさせる

retman.status = "NOSET";

callback(retman);

return;

}

var secret = keytar.getPassword(servicename,store.get("id"));

secret.then((result) => {

//パスワードを取得する

pass = result;

//MySQLに接続してデータを取得する

//createConnectionでは接続が時々切れる

mysql.createConnection({

host: store.get("server"),

port: 3306,

user: store.get("id"),

password: pass,

database: store.get("dbname")

}).then(function(conn){

//seat確保済みかどうかのチェック

connection = conn;

//該当のIDでの登録数が何件かしらべる

var result = connection.query('select * from seat where emp_id = "' + uid + '";');

return result;

}).then(function(rows){

//データ件数を取得する

var dlength = rows.length;

seatnum = rows[0].seatname;

//返り値を判定する

if(dlength != 0){

//0件じゃないのでクエリを実行

//seatnumをRowsから取得

console.log(seatnum);

//シートを確保する

var result = connection.query('update seat set username = ?, emp_id = ? where seatname = ?;',

["","",seatnum],

(err,result)=> {

//エラーが発生した場合

if (err) {

console.log("接続エラー");

retman.status = "ERR";

retman.msg = error;

connection.end();

callback(retman);

return;

}

//取得データを返す

retman.status = "OK";

retman.msg = "該当のシートをリリースしました。";

callback(retman);

connection.end();

return;

}

);

}else{

//確保はされていないのでそのまま返す

//取得データを返す

retman.status = "OK";

retman.msg = "該当の席は既にリリースされているみたいですよ。";

callback(retman);

connection.end();

return;

}

}).catch(function(error){

if (connection && connection.end) connection.end();

//logs out the error

retman.status = "ERR";

retman.msg = "接続エラーですよ。パスワードが違うとかサーバアドレス間違ってるとか、ありませんか？";

callback(retman);

return;

});

}

//シートをキープする処理

function keepsheetsql(args,callback){

var uid = args[0];

var uname = args[1];

var seatnum = args[2];

var connection;

var retman = {};

var pass = [];

var result = "";

var pafu = "";

//サービス名を構築する

var servicename = "zaseki_" + store.get("id");

//接続設定があるかないか判定

if(store.get("id") == "undefined" || store.get("id") == null){

//エラーでコールバックさせる

retman.status = "NOSET";

callback(retman);

return;

}

var secret = keytar.getPassword(servicename,store.get("id"));

secret.then((result) => {

//パスワードを取得する

pass = result;

//MySQLに接続してデータを取得する

//createConnectionでは接続が時々切れる

mysql.createConnection({

host: store.get("server"),

port: 3306,

user: store.get("id"),

password: pass,

database: store.get("dbname")

}).then(function(conn){

//seat確保済みかどうかのチェック

connection = conn;

//該当のIDでの登録数が何件かしらべる

var result = connection.query('select * from seat where emp_id = "' + uid + '";');

return result;

}).then(function(rows){

//データ件数を取得する

var dlength = rows.length;

//返り値を判定する

if(dlength == 0){

//0件なのでクエリを実行

//シートを確保する

var result = connection.query('update seat set username = ?, emp_id = ? where seatname = ?;',

[uname,uid,seatnum],

(err,result)=> {

//エラーが発生した場合

if (err) {

console.log("接続エラー");

retman.status = "ERR";

retman.msg = error;

connection.end();

callback(retman);

return;

}

//取得データを返す

retman.status = "OK";

retman.msg = seatnum + "のシートをID:" + uid + "で確保しました。";

callback(retman);

connection.end();

return;

}

);

}else{

//すでに登録済みなのでメッセージを返す

//取得データを返す

retman.status = "OK";

retman.msg = "すでに別の席が" + uid + "にて確保されているみたいですよ。";

callback(retman);

connection.end();

return;

}

}).catch(function(error){

if (connection && connection.end) connection.end();

//logs out the error

retman.status = "ERR";

retman.msg = "接続エラーですよ。パスワードが違うとかサーバアドレス間違ってるとか、ありませんか？";

callback(retman);

return;

});

}

//ユーザがいるかどうかチェック

function chkhumansql(args,callback){

var connection;

var retman = {};

var pass = [];

var result = ""

//サービス名を構築する

var servicename = "zaseki_" + store.get("id");

//接続設定があるかないか判定

if(store.get("id") == "undefined" || store.get("id") == null){

//エラーでコールバックさせる

retman.status = "NOSET";

callback(retman);

return;

}

var secret = keytar.getPassword(servicename,store.get("id"));

secret.then((result) => {

//パスワードを取得する

pass = result;

//MySQLに接続してデータを取得する

//createConnectionでは接続が時々切れる

mysql.createConnection({

host: store.get("server"),

port: 3306,

user: store.get("id"),

password: pass,

database: store.get("dbname")

}).then(function(conn){

//レコード用変数

var hflg = false; //椅子の空き状況

//クエリの実行

connection = conn;

var result = connection.query('select * from userid where userid = "' + args + '";', function (err, rows, fields) {

//エラーが発生した場合

if (err) {

console.log("接続エラー");

retman.status = "ERR";

retman.error = error;

callback(retman);

connection.end();

return;

}

//取得データを返す

retman.status = "OK";

retman.data = rows;

retman.count = rows.length;

console.log("OK");

callback(retman);

connection.end();

return;

});

}).catch(function(error){

if (connection && connection.end) connection.end();

//logs out the error

retman.status = "ERR";

retman.error = "接続エラーですよ。パスワードが違うとかサーバアドレス間違ってるとか、ありませんか？";

callback(retman);

return;

});

}

//MySQL Serverに接続してシートの空き状況を確認する

function checkseatsql(seatnum,callback){

var connection;

var retman = {};

var pass = [];

var result = ""

//サービス名を構築する

var servicename = "zaseki_" + store.get("id");

//接続設定があるかないか判定

if(store.get("id") == "undefined" || store.get("id") == null){

//エラーでコールバックさせる

retman.status = "NOSET";

callback(retman);

return;

}

var secret = keytar.getPassword(servicename,store.get("id"));

secret.then((result) => {

//パスワードを取得する

pass = result;

//MySQLに接続してデータを取得する

//createConnectionでは接続が時々切れる

mysql.createConnection({

host: store.get("server"),

port: 3306,

user: store.get("id"),

password: pass,

database: store.get("dbname")

}).then(function(conn){

//レコード用変数

var checkseat = ""; //椅子の空き状況

//クエリの実行

connection = conn;

var result = connection.query('select * from seat where seatname = "' + seatnum + '";', function (err, rows, fields) {

//エラーが発生した場合

if (err) {

console.log("接続エラー");

retman.status = "ERR";

retman.error = error;

callback(retman);

connection.end();

return;

}

//取得データを返す

retman.status = "OK";

retman.data = rows

console.log("OK");

callback(retman);

connection.end();

return;

});

}).catch(function(error){

if (connection && connection.end) connection.end();

//logs out the error

retman.status = "ERR";

retman.error = "接続エラーですよ。パスワードが違うとかサーバアドレス間違ってるとか、ありませんか？";

callback(retman);

return;

});

}

//MySQL Serverに接続してシートデータを取得する関数

function conncloudsql(callback){

var connection;

var retman = {};

var pass = [];

var result = ""

//サービス名を構築する

var servicename = "zaseki_" + store.get("id");

//接続設定があるかないか判定

if(store.get("id") == "undefined" || store.get("id") == null){

//エラーでコールバックさせる

retman.status = "NOSET";

callback(retman);

return;

}

//パスワードを取得する

var secret = keytar.getPassword(servicename,store.get("id"));

secret.then((result) => {

//パスワードを取得する

pass = result;

//MySQLに接続してデータを取得する

//createConnectionでは接続が時々切れる

mysql.createConnection({

host: store.get("server"),

port: 3306,

user: store.get("id"),

password: pass,

database: store.get("dbname")

}).then(function(conn){

//レコード用変数

var rlength = 0; //レコードの数

var record = "" //レコードデータを格納する

//クエリの実行

connection = conn;

var result = connection.query('select * from seat;', function (err, rows, fields) {

//エラーが発生した場合

if (err) {

console.log("接続エラー");

retman.status = "ERR";

retman.error = error;

callback(retman);

connection.end();

return;

}

//レコードデータを格納する

rlength = rows.length;

//取得データを返す

retman.status = "OK";

retman.count = rlength;

retman.recman = rows;

console.log("OK");

callback(retman);

connection.end();

return;

});

}).catch(function(error){

if (connection && connection.end) connection.end();

//logs out the error

retman.status = "ERR";

retman.error = "接続エラーですよ。パスワードが違うとかサーバアドレス間違ってるとか、ありませんか？";

callback(retman);

return;

});

}

keytar自体はモジュールが動いてくれる状況であれば、OSに合わせてOSに装備されてる資格情報管理システムへパスワードを記録してくれます。
今回、やや冗長なコードの書き方になっています。
接続設定用のsetting.htmlおよびメイン表示用のindex.htmlの２つによるマルチウィンドウ仕様ですが、setting.html側には初期ではhideになるようにし、またindex.htmlの子ウィンドウになるようbrowserwindowにオプション設定を追加してあります。
ipcMain.onにてレンダラープロセス側からの通信を待機させてあります。
promise-mysqlを利用しているので、同期処理でMySQLへの接続を実現しています。
MySQL接続とクエリの処理では、通常のSQL文を使った処理と、where条件に？を使うプレースホルダーを使ったケースの２つで記述をしています。プレースホルダーを使ったほうが引数を渡しやすいですね。SQLインジェクション対策も考えたら、プレースホルダと変数のチェック機能をつけるべきでしょう。
keepsheetとrelsheetの２つでは確保状況の確認と実際に値をセットするSQLの2回を連続実行しています。promiseで順番に実行させられるので、コールバック地獄にならず綺麗に書けます。
relsheetsqlにてケースによって確保した座席がリリースされない場合があるので修正しました。

指定時刻に座席を強制リリース

今回のアプリケーションは、誰かが座席を確保したまま、リリースを忘れると永遠に席を確保された状態になってしまいます。それでは翌日皆が困ることになりますね。そこで、この座席についてkoteiflgが0の値（つまりフリーアドレス席全部）について、すべての座席データを強制リリースさせる為の仕組みが必要になります。

この作業もNode.jsでやらせる事が可能です。MySQL Serverの入ってるマシンにNode.jsをインストールして、座席を強制リリースするSQL文を書いたアプリをサービスとして常駐させて置きます。今回は、Ubuntu Linux 18.04をベースにお話を進めます。

事前準備

electronでもNode.jsを利用しましたが、今回のアプリでもNode.jsを利用します。今回追加で利用するモジュールは以下の通り。クライアントアプリも作れ、サーバサイドも同じ言語で作れるNode.jsの美味しいポイントですね。

cronモジュール – 定期的にプログラムを実行する
promise-mysqlモジュール – electronでも利用したMySQLへPromiseなやり方で接続する為のモジュール
keytarモジュール – OSの資格情報システムにパスワードを登録したり取り出したりするモジュール
prompt-passwordモジュール – パスワード入力時に文字は*で秘匿して表示する為のモジュール
foreverモジュール – jsファイルをデーモン化して常駐させるモジュール

これらをnpm installでプロジェクトフォルダ内で実行しインストールしておきましょう。foreverはプログラム中で使うのではなく、外部で利用するものなので、-gオプションでグローバルインストールしましょう。

ソースコード

'use strict';
//標準モジュールの宣言
var fs = require('fs');
var readline = require('readline');
var cronJob = require('cron').CronJob;
// 毎日21:00分に実行
var cronTime = "00 00 21 * * 1-7";
//CronJobを定義する
var job = new cronJob({
//実行したい日時 or crontab書式
cronTime: cronTime
//指定時に実行したい関数
, onTick: function() {
cleardatabase();
}
//ジョブの完了または停止時に実行する関数
, onComplete: function() {
console.log('無事に実行されますた。')
}
// コンストラクタを終する前にジョブを開始するかどうか
, start: false
//タイムゾーン
, timeZone: 'Asia/Tokyo'
})
//readlineインターフェース初期化
var rl = readline.createInterface({
input: process.stdin,
output: process.stdout
});
var Prompt = require('prompt-password');
var prompt = new Prompt({
type: 'password',
message: 'PASSWORD:',
name: 'password'
});
//追加モジュールの宣言
const keytar = require('keytar');
const mysql = require('promise-mysql');
var Promise = require('promise');
//接続データベース情報
var user = "hiroyuki";
var dbname = "zaseki";
var dbserver = "127.0.0.1"
var port = "3306";
var pass = "";
var servicename = "service_clear";
//資格情報にパスワードがあるかどうか調べる
(function (){
//userを元にkeychainの情報を探索
var ret = keytar.findPassword(servicename);
ret.then((result) => {
if(result == null){
//見つからなかった場合
prompt.run()
.then(function(answers) {
//passにも格納する
pass = answers;
//パスワードをセットする
keytar.setPassword(servicename,user,pass);
//CronJobの実行
job.start();
});
}else{
//見つかった場合はpassが得られる
pass = result;
//CronJobの実行
job.start();
}
}).catch(function (error) {
// 呼ばれる
console.log(error);  // => 'Error'
});
})();
//MySQLで特定のテーブルの特定のデータをUPDATEする
function cleardatabase(){
var connection;
var result = ""
//パスワードを取得する
mysql.createConnection({
host: dbserver,
port: port,
user: user,
password: pass,
database: dbname
}).then(function(conn){
//クエリの実行
connection = conn;
var result = connection.query("UPDATE zaseki.seat SET username ='', emp_id='' WHERE koteiflg = 0;", function (err) {
//エラーが発生した場合
if (err) {
console.log("接続エラー");
connection.end();
return;
}
//実行結果を返す
console.log("OK");
connection.end();
return;
});
}).catch(function(error){
if (connection && connection.end) connection.end();
console.log("接続エラーですよ。パスワードが違うとかサーバアドレス間違ってるとか、ありませんか？");
return;
});
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

'use strict';

//標準モジュールの宣言

var fs = require('fs');

var readline = require('readline');

var cronJob = require('cron').CronJob;

// 毎日21:00分に実行

var cronTime = "00 00 21 * * 1-7";

//CronJobを定義する

var job = new cronJob({

//実行したい日時 or crontab書式

cronTime: cronTime

//指定時に実行したい関数

, onTick: function() {

cleardatabase();

}

//ジョブの完了または停止時に実行する関数

, onComplete: function() {

console.log('無事に実行されますた。')

}

// コンストラクタを終する前にジョブを開始するかどうか

, start: false

//タイムゾーン

, timeZone: 'Asia/Tokyo'

})

//readlineインターフェース初期化

var rl = readline.createInterface({

input: process.stdin,

output: process.stdout

});

var Prompt = require('prompt-password');

var prompt = new Prompt({

type: 'password',

message: 'PASSWORD:',

name: 'password'

});

//追加モジュールの宣言

const keytar = require('keytar');

const mysql = require('promise-mysql');

var Promise = require('promise');

//接続データベース情報

var user = "hiroyuki";

var dbname = "zaseki";

var dbserver = "127.0.0.1"

var port = "3306";

var pass = "";

var servicename = "service_clear";

//資格情報にパスワードがあるかどうか調べる

(function (){

//userを元にkeychainの情報を探索

var ret = keytar.findPassword(servicename);

ret.then((result) => {

if(result == null){

//見つからなかった場合

prompt.run()

.then(function(answers) {

//passにも格納する

pass = answers;

//パスワードをセットする

keytar.setPassword(servicename,user,pass);

//CronJobの実行

job.start();

});

}else{

//見つかった場合はpassが得られる

pass = result;

//CronJobの実行

job.start();

}

}).catch(function (error) {

// 呼ばれる

console.log(error); // => 'Error'

});

})();

//MySQLで特定のテーブルの特定のデータをUPDATEする

function cleardatabase(){

var connection;

var result = ""

//パスワードを取得する

mysql.createConnection({

host: dbserver,

port: port,

user: user,

password: pass,

database: dbname

}).then(function(conn){

//クエリの実行

connection = conn;

var result = connection.query("UPDATE zaseki.seat SET username ='', emp_id='' WHERE koteiflg = 0;", function (err) {

//エラーが発生した場合

if (err) {

console.log("接続エラー");

connection.end();

return;

}

//実行結果を返す

console.log("OK");

connection.end();

return;

});

}).catch(function(error){

if (connection && connection.end) connection.end();

console.log("接続エラーですよ。パスワードが違うとかサーバアドレス間違ってるとか、ありませんか？");

return;

});

}

keytarモジュールは今回とくにリビルドせずとも動作しました。electron上で動かす時とは違って素直でした。
zaseki_clearというサービス名を自分は使って、資格情報にパスワードを登録しています。初回だけこのパスワード格納の作業が必要です。次回以降はkeytarモジュールが自動で取得してくれます。
座席のクリアは、UPDATE文の発行で処理します。koteiflgが0のレコードを対象にします。
node-cronにてCronのように指定時刻に特定のコマンドを実行します。このアプリは一度起動するとシャットダウンされるまで自動で、常駐し続けて動作します。

図：パスワードと鍵にて登録内容を確認できる

デーモン化

今回のこのアプリですが、このままでは、起動する為には手動でコマンド入力が必要です。そこで、このアプリをOS起動時に自動的に起動し常駐させておく仕組みも用意します。foreverモジュールを利用すると、作成したJSファイルをデーモン化して管理することが出来るようになります。複数のNode.jsアプリケーションを起動し常駐させることができ、またスクリプトが落ちた時に自動的に再起動もしてくれます。Node.jsを扱うなら是非入れておきたモジュールの一つです。デーモン化自体は以下のコマンドで可能です

//foreverでデーモン化
forever start index.js

1 2	//foreverでデーモン化 forever start index.js

この時、オプションなどを指定することが出来ます。ファイルの指定は拡張子まで含めて行わなければなりません。プロセスは、forever listコマンドで一覧が出てきます。通常はここから、systemdなどに登録してこのスクリプトを自動起動したいところなのですが、今回のスクリプトは、keytarを使ってパスワードを取得する必要があるため、最初の1回はforeverでstartする際にsudoでのログインパスワードを求める画面が出るので、systemdでの自動化が出来ません。

図：デーモン起動時にパス取得の問い合わせが出る

図：forever listで現在のデーモンを確認

そこで利用するのが、gnome-session-properties。これは、Ubuntuが起動後に自動的に起動するアプリケーションを登録しておく為のもので、systemdのような仕組みというより、Windowsのスタートアップフォルダみたいなものです。ここで以下のように登録しておきます。

右下の●の粒をクリックする
アプリケーション一覧が出てくるので、検索画面でsessionと入れる。「自動起動するアプリケーションの設定」が出てくるので、クリックする
追加ボタンをクリック
適当な名前、実行するコマンドの入力（今回はシェルスクリプトを作ってそれを登録してあります）します。
保存を押して完了

これで、毎回ログイン後に、forever start index.jsの入ったシェルスクリプトが起動し、パスワード入力を求めてきます。パスワードを入れて実行すると、keytarがlibsecretからパスワードを拾ってきてforeverにてindex.jsのアプリが常駐化します。

図：アプリやシェルスクリプトをX起動後に実行します。

きちんとパーミッションやこのシェルスクリプトの内容が正しければ、再起動した直後にforever listコマンドを叩くと、Node.jsアプリのプロセスが出てくるはずです。また、Node.jsのアプリがこけて自動再起動が掛かると、PIDが変わります。

どうも、昔はNode.jsは起動しっぱなしだとメモリリークでどんどんメモリを食いつぶすとか、それは直ったといった話があったようです。node –expose_gc setseat.jsといったようなオプションを付けて起動すると良いとかなんとか。
今回のスクリプトは1回手動でパスワード登録が必要になっているので、node index.jsにて起動し、パスワードが無事に登録出来ているかを確認しましょう。次回以降はパスワードを自動でロードされると思います。

実行ファイルと結果

実行ファイルのダウンロード

今回のファイルをそれぞれの環境でelectron-packagerでビルドしてみました。無事にローカルのMySQLおよびGoogle Cloud SQL、Cloud SQL Proxy経由で接続が成功しました。

図：Windowsでも無事に動きました。

MENU

ElectronでMySQLへ接続するアプリを作る

今回使用するモジュール他

Node.jsモジュール

HTML側で利用するライブラリ

使用するDBファイルとプロジェクトファイル

事前準備

モジュールを追加する

keytarについて

keytarの概要と使い方

Linuxに於けるKeytarの問題点

macOSに於けるkeytarの問題点

Windowsでkeytarを使う場合

社内で使うと接続が途切れる場合

logind.confでサスペンドをオフ

InterfacesにDNS設定

nsswitch.confでhostsの設定

resolv.conf関係にDNSを設定

sysctl.confでkeepaliveの設定

MySQL側の準備

MySQL Serverのインストール

テーブルの定義

MySQLのTimeoutを設定等

skip-resolve-name

wait_timeout

ソースコード

ログイン画面の作成(setting.html)

メイン画面の作成（index.html）

Node.js側コード（index.js）

指定時刻に座席を強制リリース

事前準備

ソースコード

デーモン化

実行ファイルと結果

実行ファイルのダウンロード

こんな感じに動きます

関連リンク

関連記事

コメントを残す コメントをキャンセル

最近の投稿

人気の投稿とページ

おすすめ

コメントを残すコメントをキャンセル