本記事は、OSSのノーコード・ローコード開発ツール「プリザンター」 Advent Calendar 2023 の4日目の記事です。
概要
プリザンターで複数サイトを作成した際、他のユーザにサイト構成や現在地をアナウンスしたい場面があったので、ガイド機能をサイドメニューとして利用する方法を考えました。ガイドにマークダウン形式でツリー構成のサイトを書き出し、スタイルを設定して表示位置を調整することで疑似的なサイドメニューを実現することができます。
試した環境
プリザンター 1.3.49.0
OS: Windows11
DB: SQL Server
1. ガイドの設定
テーブルの管理画面から以下の手順でガイドを設定します。
- 対象テーブルの管理画面を開きます。
- ガイドタブより表示対象のガイド欄（一覧画面のガイド／編集画面のガイド）に以下の内容を貼り付けます。
- 画面下部の更新ボタンをクリックし、変更が反映されたことを確認します。
[md]
📁 [○○○○](https://localhost/items/xxxxxxxx/index)
└🔍 [○○○○](https://localhost/items/xxxxxxxx/index)
└📁 [○○○○部](https://localhost/items/xxxxxxxx/index)
└🔍 [○○○○部](https://localhost/items/xxxxxxxx/index)
└📁 [○○○○](https://localhost/items/xxxxxxxx/index)
└📖 [**サンプル**](https://localhost/items/xxxxxxxx/index)
└📖 [○○○○](https://localhost/items/xxxxxxxx/index)
└📖 [○○○○](https://localhost/items/xxxxxxxx/index)
└📖 [○○○○](https://localhost/items/xxxxxxxx/index)
└📁 [○○○○](https://localhost/items/xxxxxxxx/index)
└📖 [○○○○](https://localhost/items/xxxxxxxx/index)
└📁 [○○○○部](https://localhost/items/xxxxxxxx/index)
└🔍 [○○○○部](https://localhost/items/xxxxxxxx/index)
└📁 [○○○○](https://localhost/items/xxxxxxxx/index)
└📖 [○○○○](https://localhost/items/xxxxxxxx/index)
└📁 [○○○○部](https://localhost/items/xxxxxxxx/index)
└🔍 [○○○○部](https://localhost/items/xxxxxxxx/index)
└📁 [○○○○](https://localhost/items/xxxxxxxx/index)
└📖 [○○○○](https://localhost/items/xxxxxxxx/index)
└📁 [○○○○](https://localhost/items/xxxxxxxx/index)
└📖 [○○○○](https://localhost/items/xxxxxxxx/index)
└📖 [○○○○](https://localhost/items/xxxxxxxx/index)
└📁 [○○○○部](https://localhost/items/xxxxxxxx/index)
└🔍 [○○○○部](https://localhost/items/xxxxxxxx/index)
└📁 [○○○○](https://localhost/items/xxxxxxxx/index)
└📖 [○○○○](https://localhost/items/xxxxxxxx/index)
└📁 [○○○○室](https://localhost/items/xxxxxxxx/index)
└🔍 [○○○○室](https://localhost/items/xxxxxxxx/index)
└📁 [○○○○](https://localhost/items/xxxxxxxx/index)
└📖 [○○○○](https://localhost/items/xxxxxxxx/index)
└📁 [共通](https://localhost/items/xxxxxxxx/index)
└🔍 [共通](https://localhost/items/xxxxxxxx/index)
└📁 [○○○○](https://localhost/items/xxxxxxxx/index)
└📖 [○○○○](https://localhost/items/xxxxxxxx/index)
└📁 [○○○○](https://localhost/items/xxxxxxxx/index)
└📖 [○○○○](https://localhost/items/xxxxxxxx/index)
└📁 [○○○○](https://localhost/items/xxxxxxxx/index)
└📗 [○○○○](https://localhost/items/xxxxxxxx/index)
└📗 [○○○○](https://localhost/items/xxxxxxxx/index)
└📁 [マスタ](https://localhost/items/xxxxxxxx/index)
└⚙️ [○○○○マスタ](https://localhost/items/xxxxxxxx/index)
└⚙️ [○○○○マスタ](https://localhost/items/xxxxxxxx/index)
└⚙️ [○○○○マスタ](https://localhost/items/xxxxxxxx/index)
└⚙️ [○○○○マスタ](https://localhost/items/xxxxxxxx/index)
└⚙️ [○○○○マスタ](https://localhost/items/xxxxxxxx/index)
絵文字の利用によってサイトの役割を認識しやすくしたり、現在の画面を太字で表現することで現在地をわかりやすくしています。
絵文字の例：
📁：フォルダ
📖：テーブル（一般）
🔍：テーブル（サイト統合）
📗：テーブル（ドキュメント）
⚙️：テーブル（マスタ）
この時点では以下のように表示されます。
2. スタイルの設定
テーブルの管理画面から以下の手順でスタイルを設定します。
- 対象テーブルの管理画面を開きます。
- スタイルタブより新規作成ボタンをクリックします。
- タイトル欄に任意の名称を入力します。
- スタイル欄に以下の内容を貼り付けます。
- 出力先の「全て」のチェックをオフにし、「新規作成」「編集」「一覧」のチェックのみをオンにします。
- 画面下部の更新ボタンをクリックし、変更が反映されたことを確認します。
div#Guide {
float: left;
width: 10%;
}
#Application > form#MainForm {
float: left;
width: 90%;
padding-left: 10px;
}
.main-form {
clear: initial;
}
div#SiteImageIconContainer {
padding-left: 10px;
}
div#Editor {
clear: initial;
width: 90%;
padding-left: 10px;
}
上記のスタイルは一覧画面、新規作成画面、編集画面のみに対応しています。その他の画面にも対応したい場合や細かいところを調整したい場合は開発者ツール（F12）でスタイルをいじりながら表示結果を確認してカスタマイズしてください。
スタイルも設定すると以下のように表示されます。また、リンクをクリックするとそのサイトに飛べるようになっています。
おわりに
複数サイトで同じサイドメニューを表示したい場合、各サイトに設定する必要があるのでメンテナンス性は低いですが、ユーザにサイト構成や現在地をアナウンスしたい場合に便利かと思います。また、ガイド機能を利用するため利用者向けに文章で案内するような通常のガイドとしては当然のことながら使えなくなります。プリザンターの標準機能として、アクセス権を考慮した上でこんな感じのサイドメニューが出せるとよいかもしれませんね。