プリザンターのテーマ改善で変わるところをまとめてみる

はじめに

プリザンターのテーマまわりを刷新する「テーマ改善」が、2027 年 1 月に正式リリースされる予定です。
それに先立って、2026 年 9 月末に動作確認モジュール（1.5.8.9）と事前確認ツール「PleasanterUiLint」が Implem/Implem.Pleasanter.UiThemesPreflight で配布されました。

標準の画面は自動で新しい表示に切り替わりますが、サイトのスタイル・スクリプト・HTML や拡張スタイル・拡張スクリプトは自動では追従しません。
この記事では、配布物の中身を現行版（1.5.8.1）と比べて、何が変わるのか、どこを確認すればよいのかをまとめてみます。

バージョン 1.5.8.1 と、テーマ改善の動作確認モジュール 1.5.8.9 を対象にしています

動作確認モジュールは確認用の特別版です。運用中のプリザンターをこのモジュールにアップデートせず、別の URL で新しく立ち上げて確認してください。

スケジュール

時期	内容
2026 年 9 月末	動作確認モジュールの配布
2026 年 10 月〜12 月	確認・修正の期間（ドラフトで準備）
2026 年 12 月中旬	表示崩れなどを正式版に反映してほしい場合の連絡の目安
2027 年 1 月	正式リリース（予定）

動作確認モジュールは、致命的な不具合（起動できない・データが壊れる等）以外は修正されません。表示崩れなどの指摘は、確認のうえ正式リリース版に反映されます。

何が変わるの？

UI タイプとテーマが別の設定になる

現行版では、画面の世代（レイアウト）がテーマ名で決まっていました。cerulean・green-tea・mandarin・midnight を選ぶと新しいレイアウト（v2）、それ以外の jQuery UI テーマを選ぶと古いレイアウト（v1）になる、という仕組みです。

Implem.Pleasanter/Libraries/Requests/Context.cs

public decimal ThemeVersion()
{
    switch (Theme())
    {
        case "cerulean":
        case "green-tea":
        case "mandarin":
        case "midnight":
            return 2.0M;
        default:
            return 1.0M;
    }
}

テーマ改善では、レイアウトと配色が別々の設定になります。個人設定・テナント設定に「外観」が加わり、次の項目を選べます。

項目	列名	内容
UI タイプ	UiType	第一世代 / 第二世代
テーマ	Theme	カスタム / プリセット 8 種 / ハイコントラスト 3 種
カラーモード	UiColorScheme	ライト / ダーク / 自動（端末の設定に追従）
メインカラー・サブカラー・背景色	UiMainColor・UiSubColor・UiBackgroundColor	カスタムテーマの色（#RRGGBB の 7 文字）

おもしろいのは、これらの列は 1.5.8.0 の時点ですでにデータベースに追加されていることです。1.5.8.1 では画面に出ていませんが、動作確認モジュールでは列定義に編集用の設定が足されて、画面から変えられるようになっています。

User.json には既定値が追加されます。

App_Data/Parameters/User.json

{
    "Theme": "cerulean",
    "UiType": 2,
    "UiColorScheme": "light",
    "UiMainColor": null,
    "UiSubColor": null,
    "UiBackgroundColor": null
}

テーマが 29 個から 11 個になる

テーマは wwwroot/assets/themes/{名前}.css の 1 ファイルになりました。プリセットのテーマは、カラーモードと 3 つの色を決めているだけです。

wwwroot/assets/themes/cerulean.css

/*!
 * @pleasanter-theme
 * order: 10
 * group: preset
 * name: Cerulean
 * name.ja: セルリアン
 */
:root {
    color-scheme: light;

    --primaryColor: #106ebe;
    --secondaryColor: unset;
    --backgroundFixed: unset;
}

グループ	テーマ	カラーモード
プリセット	セルリアン（cerulean）、サニー（sunny）、グリーンティ（green-tea）、マンダリン（mandarin）、さくら餡（sakura-an）	ライト
プリセット	ミッドナイト（midnight）、トワイライト（twilight）、茄子紺（eggplant）	ダーク
ハイコントラスト	紺 / 白（navy-white）	ライト
ハイコントラスト	黄 / 黒（yellow-black）、シアン / 黒（cyan-black）	ダーク

ハイコントラストのテーマは、境界線やメッセージの色に加えて、日本語のフォント（BIZ UDPゴシック など）まで指定しています。

一方で、redmond・cupertino・smoothness などの jQuery UI テーマ 23 個は無くなります。これらのテーマを設定しているユーザーやテナントがどう扱われるかは、配布物からは確認できませんでした。動作確認モジュールで確かめておきたいところです。

CSS ファイルの構成が変わる

配色は 3 色から CSS の相対色構文（oklch(from ...)）や color-mix() で作り出し、ライト・ダークは light-dark() で切り替える作りになっています。style-type2.min.css だけで light-dark() が 172 箇所ありました。

消える CSS 変数がある

これが一番気を付けたいところです。現行版の cerulean/custom.css で定義されていた CSS 変数 213 個のうち、96 個は動作確認モジュールのどの CSS にも定義がありません。

--base-text --base-bg --base-border --link-text
--commonColor01 〜 --commonColor07
--nonColor01 〜 --nonColor16
--control-bg --control-border --control-text
--success-color --warning-color --primaryDark
--grid-cell-border --grid-cell-hover --scrollbar-thumb
--u-modal-bg --ui-tabs-bg ほか

カスタム CSS で var(--base-text) のように書いていると、エラーにはならずに色だけが当たらなくなります。--primaryColor・--page-bg・--btn-*（ボタン）などは残っています。

PleasanterUiLint が調べるのはクラス名・ID・標準スタイルのセレクタ・$p API の 4 種類で、CSS 変数は対象外です。CSS 変数を使ったカスタム CSS は、検出 0 件でも画面で確かめてください。

消えるクラス名・ID・$p API がある

PleasanterUiLint で 1.5.8.1 から 1.5.8.9 への変更点の一覧（カタログ）を作ると、201 件が出てきました。

判定	種別	件数
breaking	DOM のクラス	42
breaking	DOM の ID	12
breaking	$p API	2
risky	標準スタイルの定義	17
info	標準スタイルの定義	128

$p API では $p.generatePassword と $p.generatePasswordButton が無くなります。パスワード生成のアイコン自体は残っていますが、スクリプトから呼べる関数ではなくなります。

一覧の中から、動作確認モジュールの DLL の文字列・CSS・JavaScript のどこにも見つからなかったもの（消えた可能性が高いもの）を挙げておきます。

クラス: button-edit-markdown calendar-row control-basket control-text crosstab-row
        dashboard-custom-body dashboard-custom-html-body dashboard-part-nav
        fieldset-inner-bottom hamburger-menuwrap-left input-hidden kamban-row kambanbody
        license-expired-alert lower-search-ui radio-option select-field
        site-image-thumbnail spinner-field
ID:     BottomMargin BulkUpdateColumnDetailMessage DoNotHaveEnoughColumnsField LoginLogo
        SimpleModeToggleContainer Tenants_BGServerScript_ScheduleInputPanel

逆に、breaking とされた both・field-auto-thin・separator・date-field・current-user などは、動作確認モジュールの中に文字列が残っていました。breaking は「消える候補」として扱い、最後は画面で確かめるのがよさそうです。

セレクタはこう変わる（実際の画面で比べてみた）

一覧だけでは、どのクラスが何に変わったのかまでは分かりません。そこで、1.5.8.1（Docker Hub の公開イメージ、既定テーマ cerulean）と動作確認モジュールを両方立ち上げて、同じ設定の記録テーブルを作り、描画された HTML を比べてみました。項目はラジオボタン・読取専用・日付・チェック・状況・添付ファイル、ビューは一覧・カンバン・カレンダー・クロス集計です。

場所	1.5.8.1	テーマ改善
ラジオボタン	div.container-normal.container-radio > label.radio-option	div.container-normal > div.c-radio-group > label.c-radio
チェックボックス	label.check-option	label.c-checkbox
読取専用の項目	span.control-text	span.control-readonly
日付	date-field.date-field	date-field.c-date-field
ドロップダウン	div.select-field > select	div.c-select > select
添付ファイル	div.container-normal の直下	div.c-attachments で囲まれる
カンバン	#KambanBody.kambanbody > grid-container#GridWrap > table.grid.fixed > tbody > tr.kamban-row > td.kamban-container	#KambanBody.kamban-body > table.grid > tbody > tr > td.kamban-cell > div.kamban-items
クロス集計	#CrosstabBody > grid-container#GridWrap > table.grid.fixed > tbody > tr.crosstab-row	#CrosstabBody.crosstab-body > table.grid > tbody > tr
カレンダー	div#FullCalendar.calendar-container.fc	div#Calendar.fullcalendar-container > div#FullCalendar.fullcalendar-body.fc
ユーザー名	#AccountUserName > span.ui-icon.ui-icon-person + span.account-name	#AccountUserName > span.c-icon > span.icon-symbol + span.icon-label
検索欄	#SearchField > div.input-field	#SearchField > div.c-text-field
一覧の集計	#ReduceAggregations.display-control	#ReduceAggregations.view-display-control
body	クラスなし	theme-version-2_0 ui-type-2

画面の部品に c- から始まるクラスが付くようになり、カンバンとクロス集計は表を囲んでいた grid-container#GridWrap と、行のクラス（kamban-row・crosstab-row）が無くなっています。date-field はカスタム要素の名前としては残っていて、クラスだけが c-date-field に変わっていました。

一方で、次のものはそのままです。

• 項目の ID（#Results_ClassA・#Results_ClassAField など）と、.field-control・.container-normal
• 入力要素のクラス（.control-radio・.control-checkbox・.control-textbox・.control-dropdown）
• 読取専用の data-readonly="1"・data-value
• #KambanBody・#CrosstabBody・#FullCalendar（.fc も付く）

動作確認モジュールでユーザーの UI タイプを 1（第一世代）にしてみても、body のクラスが theme-version-1_0 ui-type-1 になるだけで、HTML は第二世代と同じでした。第一世代を選んでも 1.5.8.1 の HTML には戻らないので、セレクタの書き換えは避けられません。

書き換えの例です。移行期間に両方の版で効かせたいときは :is() で並べておくと便利です。

ラジオボタンの選択中の選択肢

/* 1.5.8.1 */
.container-radio .radio-option:has(input:checked) { background: var(--primaryColor); }

/* テーマ改善 */
.c-radio-group .c-radio:has(input:checked) { background: var(--primaryColor); }

/* どちらでも */
:is(.container-radio .radio-option, .c-radio-group .c-radio):has(input:checked) {
  background: var(--primaryColor);
}

カンバンのセル

/* 1.5.8.1 */
#KambanBody.kambanbody .kamban-row td.kamban-container { min-width: 200px; }

/* テーマ改善 */
#KambanBody.kamban-body tbody td.kamban-cell { min-width: 200px; }

/* どちらでも */
#KambanBody tbody td:is(.kamban-container, .kamban-cell) { min-width: 200px; }

カレンダー（FullCalendar）の土曜日

/* 1.5.8.1 */
[id^="FullCalendar"].calendar-container .fc-day-sat { background: #eef6ff; }

/* どちらでも（#FullCalendar にはどちらの版でも .fc が付く） */
#FullCalendar.fc .fc-day-sat { background: #eef6ff; }

読取専用の項目の値を取る

// 1.5.8.1 だけで動く
$('#Results_ClassB.control-text').data('value');

// どちらでも動く（ID と data-readonly は変わらない）
$('#Results_ClassB[data-readonly="1"]').data('value');

部品のクラス名に頼らず、項目の ID や入力要素のクラス、data- 属性を起点にしておくと、今回のような刷新にも強くなります。

確認の進め方

PleasanterUiLint で候補を洗い出す

PleasanterUiLint は、運用中のプリザンターに登録されたスタイル・スクリプト・HTML を読み込んで、影響を受けそうな箇所を一覧にしてくれるツールです。データベースへの書き込みはしません。

必要なのは Python 3.12 以上、git、Implem/Implem.Pleasanter の clone です。データベースから直接読むときは sqlcmd・psql・mysql のいずれかも使います。

git clone https://github.com/Implem/Implem.Pleasanter.git
python tools/check.py --repo ./Implem.Pleasanter --pleasanter C:/web/pleasanter/Implem.Pleasanter

現在のバージョンは Implem.Pleasanter.dll から自動で調べてくれます。結果は output/findings/report.html（レポート）と findings.csv（プリザンターに取り込んで移行タスクの管理にも使える一覧）に出ます。

調べる対象は次の 4 か所です。

場所	中身
Sites.SiteSettings	サイトのスクリプト・スタイル・HTML
Tenants.TopScript / TopStyle	テナント共通のスクリプト・スタイル
Extensions テーブル	拡張機能として登録したもの
App_Data/Parameters/Extended*	サーバーに置いた拡張ファイル

現在のバージョンが 1.4.18.1 以前だと、標準スタイルの変更は検出できません（クラス・ID・$p API は検出できます）。

動作確認モジュールで画面を見る

確認環境の作り方は 3 通りです。

方法	やり方	向いているケース
A（推奨）	新しい環境に、確認したいサイトをサイトパッケージでインポート	確認したいサイトが少ない
B（推奨）	運用 DB のバックアップを別の DB に復元して参照	テナント共通の設定や拡張機能も含めて全体を確認したい
C	運用中の DB に直接つなぐ	特別な事情があるときだけ

直したスタイル・スクリプト・HTML は、運用中のサイトにドラフトで登録しておき、正式リリース後に切り替えます。

気を付けるところ

テスト用の拡張スクリプトが入っている

Pleasanter_1.5.8.9.zip の App_Data/Parameters/ExtendedScripts/ には、test1.js と test2.js が入っています。コンソールにログを出すほか、test2.js は $p.events.on_crosstab_load を書き換えて、クロス集計を開くと「クロス集計を読み込みました。」と表示します。

自分のカスタマイズの確認と混ざってしまうので、確認の前に削除するか、拡張子を .txt などに変えておきましょう。

方法 C は運用 DB のスキーマに注意

UiType などの列は 1.5.8.0 で追加されたものなので、それより前のバージョンの DB にはありません。新しい版の CodeDefiner を運用 DB に向けて実行すると、運用 DB のスキーマが変わってしまいます。運用中のバージョンが古いときは、方法 A か B を選びましょう。

パスキーの Origins

動作確認モジュールの Authentication.json では、パスキーの Origins の既定値が https://localhost になっています。パスキーまで確認するなら、確認環境の URL に合わせておきます。

まとめ

• UI タイプ（レイアウト）とテーマ（配色）が別の設定になり、カラーモード（ライト / ダーク / 自動）とカスタム色、ハイコントラストのテーマが加わります
• テーマは 11 個になり、redmond などの jQuery UI テーマ 23 個は無くなります
• 現行の CSS 変数のうち 96 個は定義が無くなります。PleasanterUiLint では検出されないので、var(--base-text) などを使ったカスタム CSS は自分で確かめます
• クラス名・ID・$p API は PleasanterUiLint で候補を洗い出せますが、breaking にも残っている名前があるので、最後は画面で確認します
• 画面の部品は c-radio・c-checkbox・c-select・c-date-field などの新しいクラスに変わり、UI タイプを第一世代にしても HTML は戻りません。項目の ID や data- 属性を起点にしたセレクタに書き換えるのがおすすめです
• 確認環境では、同梱の test1.js・test2.js を外しておきましょう

不具合を見つけたら、GitHub Issue か Pleasanter 専用フォームから報告できます。