htmlを介さずにjsonから自動でコンテンツを作って更新するスクリプト

こんにちは、wattak777 です。

最近、必要に迫られてNode.jsを嗜むようになったのですが、とある時に「jsonで記載された元データをロードしてコンテンツとして表示し、ユーザがそのコンテンツを更新するとそのjsonを更新する」みたいなことをしようとしてNode.jsでソース一本で出来ないか？と考えたサンプルです。

ファイル構成は以下。
+
├ server.js
└ db.json

server.js

var express = require('express') ;
var url = require('url') ;

var app = express() ;
var json_write = {
	param1_label: '',
	param1_value: '',
	param2_label: '',
	param2_value: ''
}

app.get('/update_param', function(req, res) {
console.log(" GET" ) ;
	var url_parse = url.parse(req.url, true) ;
console.log("  search:%s", url_parse.search) ;
	json_write.param1_label = url_parse.query.param1_label ;
	json_write.param1_value = url_parse.query.param1_value ;
	json_write.param2_label = url_parse.query.param2_label ;
	json_write.param2_value = url_parse.query.param2_value ;

	var json = JSON.stringify(json_write, null, '    ' ) ;
	var fs = require('fs') ;
	fs.writeFile('./db.json', json, err => {
		if (err) {
			res.sendStatus(500) ;
		} else {
			res.sendStatus(200) ;
		}
	}) ;
}) ;

const setJson_JS = '<script type="text/javascript">\n' +
    '  function setJson() {\n' +
    '    var sethttp = new XMLHttpRequest() ;\n' +
    '    var url_str = "http://自らのIPアドレス:50000/update_param?" ;\n' +
    '    var elem = document.getElementById("param1_label") ;\n' +
    '    var url_str = url_str + "param1_label=" + encodeURI(elem.innerText) + "&" ;\n' +
    '    var elem = document.getElementById("param1_value") ;\n' +
    '    var url_str = url_str + "param1_value=" + encodeURI(elem.value) + "&" ;\n' +
    '    var elem = document.getElementById("param2_label") ;\n' +
    '    var url_str = url_str + "param2_label=" + encodeURI(elem.innerText) + "&" ;\n' +
    '    var elem = document.getElementById("param2_value") ;\n' +
    '    var url_str = url_str + "param2_value=" + encodeURI(elem.value) ;\n' +
    '\n' +
    '    sethttp.open("GET", url_str) ;\n' +
    '    sethttp.send() ;\n' +
    '  }\n' +
    '</script>\n' ;

const templ_input = '<p><input type="button" value="close" onClick="Javasctipt:history.back()"></p>\n' +
'<p><input type="button" value="send" onClick="setJson()"></p>\n' ;

app.get('/view_param', function(req, res) {
console.log(" GET" ) ;
	var fs = require('fs') ;
	var readJson = fs.readFileSync('jsondb/db.json') ;
	const jsonObj = JSON.parse( readJson ) ;
	var html_text = '<p><span id="param1_label">' ;
	html_text += jsonObj.param1_label ;
	html_text += '</span>:<input type="text" size="100" name="param1" id="param1_value" value="' ;
	html_text += jsonObj.param1_value + '"></p>\n' ;
	html_text += '<p><span id="param2_label">' ;
	html_text += jsonObj.param2_label ;
	html_text += '</span>:<input type="text" size="100" name="param2" id="param2_value" value="' ;
	html_text += jsonObj.param2_value + '"></p>\n' ;
	html_text += templ_input ;
	
	res.writeHead(200, {'Content-Type' : 'text/html'}) ;
	res.write(setJson_JS + html_text) ;
	res.end() ;
}) ;

var server = app.listen(50000, function() {
	console.log("listening at port %s", server.address().port) ;
});

db.json

{
    "param1_label": "param1_label",
    "param1_value": "param1 def value.",
    "param2_label": "param2_label",
    "param2_value": "param2 def value."
}

これを使ってnodeで起動させ、ブラウザより、
http://立てたIPアドレス:50000/view_param
とすると画面が表示され、更新後にjsonが更新されることが出来ました。