本記事は、OSSのノーコード・ローコード開発ツール「プリザンター」 Advent Calendar 2023 の21日目の記事です。
概要
今回の記事では、プリザンターのサイト設定レベルの情報を詳細設計書として作成する必要があるか、作成するとしたらどのタイミングで、どうやって作成するのかを考えてみたいと思います。また、詳細設計書の代替になるかもしれない「Pleasanter SiteSettings Viewer」というツールを作成してGitHubに公開したので、ご参考までに使い方をご紹介します。
はじめに
ウォーターフォール型のシステム開発で作成するドキュメントとは？
ウォーターフォール型のシステム開発では、一般的に以下のようなドキュメントを作成すると思います。ここでいう「システム」とは、チームで利用するレベルではなく、組織の部門や全社で利用するような中規模以上のシステムを指しているものとします。
・要件定義書
・基本設計書
・詳細設計書
・テスト仕様書兼報告書
・リリース作業手順書
ノーコード・ローコード開発ツールを利用する上で詳細設計書は必要か？
開発するシステムにもよりますが、要件定義書や基本設計書などは業務フローを整理する必要があるため、これらはノーコード・ローコード開発ツールでシステム開発を行うにしても必要であると考えます。サイト設定レベルの詳細設計書は、ノーコード・ローコード開発ツールの画面上や出力結果から全体的に俯瞰できれば作成不要と思います。プリザンターのサイト設定は対象テーブルの管理画面から確認することができますが、プロセスや状況による制御など設定が深いものについてはマウスのクリックで繰り返し画面操作を行わなければならず、開発時のレビューや運用時の調査をする必要がある場合には詳細設計書があったほうがよいと考えます。
詳細設計書をつくるとしたら、どのタイミングで作成するべきか？
ノーコード・ローコード開発ツールでこれから構築するシステムのサイト設計を事前に詳細設計書として書き起こすことは、ノーコード・ローコード開発ツールのメリットを消してしまうことになるので、良い手段とは言えず現実的でもありません。とりあえずサイト設定を行って、動くシステムを見ながら関係者で合意するほうがスムーズに開発が進むと思います。大枠が完成した時点で、リバースエンジニアリング的に詳細設計書を確認しながら完成に仕上げていくことで、効率的にシステム構築ができると思います。
でも、プリザンターの詳細設計書をどうやって作成するの？
プリザンターは機能が豊富なので、たとえばサイト設定をExcelに書き起こそうとすると、非常に膨大な時間がかかります。自身もお客様への成果物として過去にサイトの設定値をExcelに書き起こしたことがありますが、たとえば項目ごとの「エディタの詳細設定」などをまとめるのに設定値が多く、とても苦労した経験があります
エディタの詳細設定画面イメージ
項目ごとに上記のような設定値があり、項目の種類（分類A、数値Aなど）によっても設定値が異なるため、ひとつの表などに情報をまとめようとすると、設定画面を開いてひとつずつ転記する必要があるので非常に大変です。
解決案：Pleasanter SiteSettings Viewer を使う！
このような問題を解決する手段として「Pleasanter SiteSettings Viewer」というツールを作成してGitHubに公開したので、ご参考までに使い方をご紹介します。
こちらの記事をもとにブラッシュアップしました。
ブラッシュアップしたこと
・サイトパッケージのファイル読み込みに対応できるようにしました。
・横方向に表示されていた情報を縦方向に表示されるようにしました。
・項目の設定値が（ほぼ）日本語で表示できるようになりました。
・横のスクロールバーが常に表示されるように調整しました。など
使い方
1. サイトパッケージのエクスポート
以下のマニュアルを参考に変換対象のサイトパッケージをエクスポートします。今回はサイト設定を確認することが目的なので、データを含める必要はありません。
2. Pleasanter SiteSettings Viewer のダウンロード
以下のリポジトリからファイルをダウンロードします。Githubの画面上からダウンロードする場合は、Code -> Download ZIPで。
本ツールは開発中のものであり、以下の理由で積極的にメンテナンスする予定はありません。
・プリザンターのバージョンアップでサイト設定に変更がある場合、変更点を追従してスクリプトを修正する必要がある。
中身はこんな感じです。
PlstSiteSettingsViewer
└─samples
└─稟議申請の例_YYYY_MM_DD hh_mm_ss.json
└─scripts
└─fileLoad.js
└─jsonViewer.js
└─index.html
└─LICENSE
└─README.md
└─ThirdPartyNotices.txt
3. Pleasanter SiteSettings Viewer の起動とファイル読み込み
index.html を開いて画面左上の「ファイルを選択」をクリックします。
サイトパッケージを選択します。（samplesフォルダのサイトパッケージでもOKです）
たったこれだけで、サイトパッケージの中身が表形式で見れるようになります
お手持ちのサイトパッケージでうまく表示されない場合は、開発者ツール（F12）でエラーの原因を確認してください。
抜粋：エディタの詳細設定
抜粋：プロセスの設定
抜粋：サーバスクリプトの設定
スクリプト系も改行された状態で表示されています。
抜粋：サイトのアクセス制御
なんとなくいい感じに見れるようになりました。
以下は未対応です。
・一部未対応の項目を日本語化する。（すべての項目に完全に対応できているわけではありませんが、体感的には70～80%くらいは対応できていると思います。
・「undefined」を非表示または別の表現にする。
・「ClassA」などを「表示名（分類A）」として表示する。
・プロセスや状況による制御について、「状況」を「値」ではなく「値（表示名）」となるように表示する。など
（´-`）.｡oO（いまの実装方法だとたぶん無理だけど、テーブルの管理の各タブの情報がExcelのシートごとに出力できたらもっといいんだろうな）
おわりに
この記事で発信する内容はあくまでも個人の意見であり、所属団体を代表する意見ではありませんが、自身がノーコード・ローコード開発ツールにおけるドキュメンテーションについてぼんやり考えていたことを言語化してみました。この記事をヒントとして、プリザンターの開発／運用担当者さんが「より快適に」なれば幸いです。
参考リンク
- プリザンターのサイト設定JSONファイルをHTMLテーブルに変換する - Qiita
- サイト機能：サイトパッケージのエクスポート | 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