概要
プリザンターのサイト設定は対象テーブルの管理画面から確認することができますが、プロセスや状況による制御など設定が深いものについてはマウスのクリック操作で繰り返し画面遷移を行わなければならず、全体的に俯瞰したいと思うことがあったので、サイトパッケージのJSONファイルをHTMLテーブルへ変換してみました。
結果として、jsonViewer.jsというjQueryのプラグインを使ってJSONオブジェクトをHTMLテーブルへ変換することができました。
細かいのでもうすこし拡大してみます。
プロセス（Processes）や状況による制御（StatusControls）の設定内容が一目でわかるようになりました。
作成手順
1. サイトパッケージのエクスポート
以下のマニュアルを参考に変換対象のサイトパッケージをエクスポートします。今回はサイト設定を確認することが目的なので、データを含める必要はありません。
2. jsonViewer.jsの取得
以下のリポジトリよりjsonViewer.jsを取得します。Githubの画面上からダウンロードする場合は、Code -> Download ZIPで。
中身はこんな感じです。
jquery-json-table-master
└─jsonViewer.js
└─LICENSE
└─README.md
3. HTMLファイルの作成
jsonViewer.jsと同じ場所に以下のHTMLを作成します。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>jsonViewer.js: JSON To Table Converter</title>
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/flatly/bootstrap.min.css">
<style>
.container {
width: auto;
}
.table {
width: auto;
}
tr td:nth-child(odd) {
background-color: #60859D !important;
color: white !important;
}
tr td:nth-child(even) {
background-color: white !important;
color: black !important;
}
table-bordered>thead>tr>th,
.table-bordered>thead>tr>th,
table-bordered>tbody>tr>th,
.table-bordered>tbody>tr>th,
table-bordered>tfoot>tr>th,
.table-bordered>tfoot>tr>th,
table-bordered>thead>tr>td,
.table-bordered>thead>tr>td,
table-bordered>tbody>tr>td,
.table-bordered>tbody>tr>td,
table-bordered>tfoot>tr>td,
.table-bordered>tfoot>tr>td {
border-color: black;
}
</style>
</head>
<body>
<div class="container">
<h1>jsonViewer.js: JSON To Table Converter</h1>
<pre id='jsonView'></pre>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
<script src="jsonViewer.js"></script>
<script>
var options = { bootstrap: true, tableBordered: true }; //The options for conversion, check below for list of all options.
var jsonObject = {
"glossary": {
"title": "example glossary",
"GlossDiv": {
"title": "S",
"GlossList": {
"GlossEntry": {
"ID": "SGML",
"SortAs": "SGML",
"GlossTerm": "Standard Generalized Markup Language",
"Acronym": "SGML",
"Abbrev": "ISO 8879:1986",
"GlossDef": {
"para": "A meta-markup language, used to create markup languages such as DocBook.",
"GlossSeeAlso": ["GML", "XML"]
},
"GlossSee": "markup"
}
}
}
}
}; //The object to be converted into table.
$('#jsonView').jsonTable(jsonObject, options); //Displaying the JS Object/Array
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function () {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
結果
上記のHTMLファイルをブラウザで開くと、以下のように表示されます。
あとは変数jsonObjectの中身を取得したサイトパッケージのJSONファイルの内容に置き換えてあげればOKです。
ちなみに上記のHTMLでstyleを指定しているのですが、そのままだとアメリカのお菓子
みたいな色でちょっと見づらく感じたので色や罫線や表示幅を調整してみました。
おわりに
画面が想定どおりに動かない場合に原因のあたりをつけたり、設定漏れがないことのチェックやドキュメント作成時のワークとして使えるかもしれません。サイト設定ファイルだけでなくJSONであれば他のものでも変換できるので、試してみてください。
参考リンク
- サイト機能：サイトパッケージのエクスポート | Pleasanter
- sarkar4540/jquery-json-table: A jQuery based plugin to display Javascript Objects/Arrays into a table based structure in html.
- JSON Objects/Arrays To HTML Table - jQuery jsonViewer.js | Free jQuery Plugins