Pleasanter Site VisualizerとPleasanter Code Assistを使ったら、Pleasanter開発が驚くほど快適になった

Last updated at 2025-09-12Posted at 2025-09-12

はじめに

Pleasanterの拡張コンテンツとして、最近リリースされた、Site VisualizerとCode Assistはご存じでしょうか？これらのツールを活用したら、Pleasanterの開発が驚くほど快適になったので、記事にまとめてみました。

Chrome拡張・Edge拡張を用いてプリザンター設定情報を確認することができます。

Visual Studio Codeでスクリプトなどのソースコードの保存と同時にプリザンターへの登録・更新ができます。

いずれも公式マニュアルより引用

標準機能だけでも多くの機能を持っているPleasanterですが、その上で、スクリプト／サーバスクリプトにより、さらに機能を拡張開発できるのが面白いところ。

ただ、そのスクリプト／サーバスクリプトの開発って、ちょっとやりにくいと思ったりしませんか？

Aテーブルの項目「作業開始日付」を、特定条件において、Bテーブルの「作業開始日付」へ転記する・・みたいなことを、サーバスクリプトで実装するとします。

const data = {
    ApiKey: 'xxxxx...',
    DateHash: {
        DateC: model.DateA
    }
};
items.Update(123, JSON.stringify(data));

ここで悩むのが、Aテーブルの「作業開始日付」、Bテーブルの「作業開始日付」が、”Date”のAだっけ？Bだっけ？というのを確認しなくてはいけないわけです。

どこで確認するかというと、テーブルの管理→エディタから、当該項目を探し→詳細設定で確認、もしくはマウスオーバーで確認、したり、編集画面から開発者ツールで当該項目のIDを調べてみたり、というのを、AテーブルとBテーブルで確認・・・それから、コードへ実装・・・

エディタから、該当の項目探してマウスオーバーしてみたり・・・

開発者ツールで探してみたり・・・

特に大規模な開発になると、項目数・関連するテーブルも多くなり、実装に必要な情報を捜すのがほんとに大変になります。

ちょっと前に実装された、プリザンターのコードエディタ、かなりコードが書きやすくなったものの、やはりじっくりコーディングするには専用のエディタを使いたいものです。

エディタでコードを書いて→テーブルの管理を開いて→スクリプト／サーバスクリプトタブから該当のスクリプトへコピペ→テーブル設定を更新・・

テーブルの管理開く→スクリプトを反映する→保存する、のルーティン、なんどもデバッグを繰り返すようなスクリプト開発となると、かなりの手間になってきます。

Site Visalizerを使うと以下のようにサイト情報が出力されます。

こんな感じでサイト情報が展開されます。

情報はテーブルの管理の各タブと連動しており、エディタを開くと↓のように項目が一覧表示されます。

特にブラウザの拡張機能というのがよくて、今見ているPleasanterのサイトってどうなってるんだっけ？と思ったら、そのままブラウザの拡張機能から開くことができます。

これで、かなりコーディングがスムーズにできるようになります。

で、コーディングができたら、テーブルへ反映するわけですが、Code Assistを利用すると、コードを保存した瞬間、Pleasanterへコードを反映することができます。（※ただし事前に設定が必要）

VSCode拡張機能としてインストール

↓のように、Ctrl+Sで保存した瞬間にログが出力され、テーブルへ更新したメッセージが表示されます。

これで、テーブルの管理を開かずとも、コード反映→デバッグが出来るようになります。

コーディングからデバッグまでシームレス・ノンストレスで行けちゃいます。

Site Visualizerでサイト情報をか確認しながらVSCode上コーディング
↓
コードが出来たら保存・即反映
↓
実装内容をデバッグ

これまでの煩わしかった手順が大幅に解消されます。

↓のように、SiteVisualizer、VSCode、Pleasnaterを並べて開発すると、ほんと快適です。（4Kディスプレイ推奨）

これらツールを使うには、Enterprise Editionへのアップグレードが必要ですが、demo環境や、トライアルでお試し利用することができます。ぜひ、使ってみてください。