開発者向け機能：サーバスクリプト：columns
## 概要
[サーバスクリプト](/ja/manual/table-management-server-script)で[項目](/ja/manual/table-management-what-is-items)の設定を取得、編集します。 [一覧画面](/ja/manual/table-grid)の[セルCSS](/ja/manual/table-management-extended-cell-css)の設定や[エディタ](/ja/manual/table-editor)の[フィールドCSS](/ja/manual/table-management-extended-field-css)、[拡張HTML](/ja/manual/table-management-extended-html)の設定などが可能です。
## プロパティ
|No|Name|Get|Set|Type|Description|
|:----|:----|:----|:----|:----|:----|
|1|ExtendedCellCss|○|○|string|[セルCSS](/ja/manual/table-management-extended-cell-css)|
|2|ExtendedFieldCss|○|○|string|[フィールドCSS](/ja/manual/table-management-extended-field-css)|
|3|ExtendedControlCss|○|○|string|[コントロールCSS](/ja/manual/table-management-extended-control-css)|
|4|ExtendedHtmlBeforeField|○|○|string|[拡張HTML](/ja/manual/table-management-extended-html)のフィールドの前|
|5|ExtendedHtmlBeforeLabel|○|○|string|[拡張HTML](/ja/manual/table-management-extended-html)のラベルの前|
|6|ExtendedHtmlBetweenLabelAndControl|○|○|string|[拡張HTML](/ja/manual/table-management-extended-html)のラベルとコントロールの間|
|7|ExtendedHtmlAfterControl|○|○|string|[拡張HTML](/ja/manual/table-management-extended-html)のコントロールの後|
|8|ExtendedHtmlAfterField|○|○|string|[拡張HTML](/ja/manual/table-management-extended-html)のフィールド後|
|9|Hide|○|○|bool|[非表示](/ja/manual/table-management-hide)、一覧画面では値が表示されない他、ExtendedCellCssおよびRawTextが無視されます。|
|10|ValidateRequired|○|○|bool|[入力必須](/ja/manual/table-management-required)|
|11|RawText|○|○|string|一覧画面の項目の値を置換|
|12|ReadOnly|○|○|bool|[読取専用](/ja/manual/table-management-readonly)|
## メソッド
|No|Name|Description|
|:----|:----|:----|
|1|[AddChoiceHash](/manual/server-script-columns-add-choice-hash)|[項目](/ja/manual/table-management-what-is-items)の[選択肢一覧](/ja/manual/table-management-choices-text)を動的に設定します。|
|2|[ClearChoiceHash](/manual/server-script-columns-clear-choice-hash)|[項目](/ja/manual/table-management-what-is-items)の[選択肢一覧](/ja/manual/table-management-choices-text)をクリアします。|
## 使用例①
以下の例では、ClassA（分類A）を非表示にします。
##### JavaScript（サーバスクリプト）
```
columns.ClassA.Hide = true;
```
## 使用例②
以下の例では、DescriptionA（説明A）を読取専用にします。
##### JavaScript（サーバスクリプト）
```
columns.DescriptionA.ReadOnly = true;
```
## 使用例③
以下の例では[一覧画面](/ja/manual/table-grid)の分類Aのセルに赤字でABCと出力します。条件に行表示の前を指定する必要があります。HTMLのタグを挿入可能です。
##### JavaScript（サーバスクリプト）
```
columns.ClassA.RawText = '<font color="red">ABC</font>';
```
## サンプルコード
<details>
<summary>1. ログインユーザの属性と状況による画面項目制御</summary>
ログインユーザの属性(context.HasPrivilege、context.Groupsで判定)と、状況により画面項目の制御(columns.ReadOnly,Hideで制御)を行います。サンプルコードでは以下のような仕様で実装しています。
<table class="matrix">
<caption>制御パターン判定</caption>
<thead>
<tr>
<th>ユーザ種類</th>
<th>状況</th>
<th>制御パターン</th>
</tr>
</thead>
<tbody>
<tr>
<td>特権ユーザ</td>
<td>－</td>
<td>パターンA</td>
</tr>
<tr>
<td>管理者グループ所属ユーザ(ID1,2)</td>
<td>－</td>
<td>パターンB</td>
</tr>
<tr>
<td rowspan="2">上記以外のユーザ</td>
<td>完了(900) or 保留(910)</td>
<td>パターンC</td>
</tr>
<tr>
<td>以外</td>
<td>パターンD</td>
</tr>
</tbody>
</table>
<table class="matrix">
<caption>画面項目制御</caption>
<thead>
<tr>
<th colspan="2">画面項目</th>
<th>パターンA</th>
<th>パターンB</th>
<th>パターンC</th>
<th>パターンD</th>
</tr>
</thead>
<tbody>
<tr>
<tr>
<td>タイトル</td><td>Title</td>
<td>編集可</td><td>編集可</td><td>読取専用</td><td>編集可</td>
</tr>
<tr>
<td>内容</td><td>Body</td>
<td>編集可</td><td>編集可</td><td>読取専用</td><td>編集可</td>
</tr>
<tr>
<td>状況</td><td>Status</td>
<td>編集可</td><td>編集可</td><td>読取専用</td><td>編集可</td>
</tr>
<tr>
<td>分類A</td><td>ClassA</td>
<td>編集可</td><td>編集可</td><td>読取専用</td><td>編集可</td>
</tr>
<tr>
<td>分類B</td><td>ClassB</td>
<td>編集可</td><td>読取専用</td><td>非表示</td><td>非表示</td>
</tr>
<tr>
<td>日付A</td><td>DateA</td>
<td>編集可</td><td>読取専用</td><td>読取専用</td><td>編集可</td>
</tr>
<tr>
<td>説明A</td><td>DescriptionA</td>
<td>編集可</td><td>編集可</td><td>非表示</td><td>非表示</td>
</tr>
</tbody>
</table>
##### JavaScript
条件：画面表示の前
```javascript
// 設定
const ADMIN_GROUP_IDS = new Set([1, 2]);
const STATUS_PATTERN_C = new Set([900, 910]); // 完了/保留
const PATTERN_RULES = {
// パターンA: 何もしない（全編集可）
A: [],
// パターンB: ClassB, DateA を読取専用
B: [
['ClassB', 'ReadOnly'],
['DateA', 'ReadOnly'],
],
// パターンC: タイトル/内容/状況/分類A/日付Aは読取専用、ClassB/説明Aは非表示
C: [
['Title', 'ReadOnly'],
['Body', 'ReadOnly'],
['Status', 'ReadOnly'],
['ClassA', 'ReadOnly'],
['DateA', 'ReadOnly'],
['ClassB', 'Hide'],
['DescriptionA', 'Hide'],
],
// パターンD: ClassB, DescriptionA を非表示
D: [
['ClassB', 'Hide'],
['DescriptionA', 'Hide'],
],
};
const DEBUG = true;
// 判定（業務ルール）
function decidePattern() {
if (context.HasPrivilege) return 'A';
// context.Groups は Iterable のため Set化して判定をシンプルに
const userGroupIds = new Set(context.Groups);
const isAdminGroupUser = [...ADMIN_GROUP_IDS].some((id) =>
userGroupIds.has(id)
);
if (isAdminGroupUser) return 'B';
// 上記以外のユーザ
return STATUS_PATTERN_C.has(model.Status) ? 'D' : 'C';
}
// 適用（UI制御）
function applyPattern(pattern) {
const rules = PATTERN_RULES[pattern] ?? [];
for (const [columnName, control] of rules) {
// サンプルとして：列が存在しない場合も落とさずスキップ
if (!columns[columnName]) continue;
columns[columnName][control] = true;
}
}
// 実行
const pattern = decidePattern();
if (DEBUG) context.Log(`pattern=${pattern}`);
applyPattern(pattern);
```
##### 実行結果
```
(Info):pattern=C
```
</details>
<details>
<summary>2. 数値項目をスター記号で表示</summary>
数値項目に入力された数値に応じスター記号で表示します。
以下のようなイメージで"4.5"といった値にも対応しています。
本サンプルコードでは、最大5個までのスター表示に対応しています。
##### JavaScript
条件：行表示の前
```javascript
const maxStars = 5;
function toStarHtml(score) {
const s = Math.max(0, Math.min(maxStars, Number(score) || 0));
const pct = (s / maxStars) * 100; // 0〜100%
return `
<span
style="
display: inline-block;
position: relative;
line-height: 1;
font-size: 20px;
letter-spacing: -0.2em;
"
>
<span style="color: #ccc">★★★★★</span>
<span
style="position:absolute;
left:0;
top:0;
width:${pct}%;
overflow:hidden;
white-space:nowrap;
color:#f60;"
>
★★★★★
</span>
</span>
`.trim();
}
columns.NumA.RawText = toStarHtml(model.NumA);
```
</details>
## 対応バージョン
|対応バージョン|内容|
|:--|:--|
|1.1.38.0 以降|ExtendedHtmlBeforeLabelの追加<br>ExtendedHtmlBetweenLabelAndControlの追加<br>ExtendedHtmlAfterFieldの追加|
|1.2.15.0 以降|ValidateRequiredの追加|
## 関連情報
<div id="ManualList"><ul><li><a href="/ja/manual/table-grid">テーブル機能：レコードの一覧画面</a><span>2025/10/21 up</span></li>
<li><a href="/ja/manual/table-editor">テーブル機能：レコードのエディタ画面</a><span>2023/04/12 up</span></li></ul></article>
<ul><li><a href="/ja/manual/table-management-what-is-items">テーブルの管理：項目</a><span>2025/10/24 up</span></li></ul></article>
<ul><li><a href="/ja/manual/table-management-editor">テーブルの管理：エディタ</a><span>2026/02/10 up</span></li>
<li><a href="/ja/manual/table-management-editor-columns">テーブルの管理：エディタ：エディタの設定</a><span>2025/12/09 up</span></li>
<li><a href="/ja/manual/table-management-required">テーブルの管理：エディタ：項目の詳細設定：入力必須</a><span>2024/12/19 up</span></li>
<li><a href="/ja/manual/table-management-readonly">テーブルの管理：エディタ：項目の詳細設定：読取専用</a><span>2023/04/25 up</span></li>
<li><a href="/ja/manual/table-management-choices-text">テーブルの管理：エディタ：項目の詳細設定：選択肢一覧</a><span>2025/11/27 up</span></li>
<li><a href="/ja/manual/table-management-choices-text-depts">テーブルの管理：エディタ：項目の詳細設定：選択肢一覧：組織</a><span>2023/04/25 up</span></li>
<li><a href="/ja/manual/table-management-choices-text-groups">テーブルの管理：エディタ：項目の詳細設定：選択肢一覧：グループ</a><span>2023/04/25 up</span></li>
<li><a href="/ja/manual/table-management-choices-text-users">テーブルの管理：エディタ：項目の詳細設定：選択肢一覧：ユーザ</a><span>2023/04/25 up</span></li>
<li><a href="/ja/manual/table-management-hide">テーブルの管理：エディタ：項目の詳細設定：非表示</a><span>2023/04/25 up</span></li>
<li><a href="/ja/manual/table-management-extended-field-css">テーブルの管理：エディタ：項目の詳細設定：フィールドCSS</a><span>2024/04/09 up</span></li>
<li><a href="/ja/manual/table-management-extended-control-css">テーブルの管理：エディタ：項目の詳細設定：コントロールCSS</a><span>2024/04/09 up</span></li>
<li><a href="/ja/manual/table-management-extended-html">テーブルの管理：エディタ：項目の詳細設定：拡張HTML</a><span>2024/05/30 up</span></li></ul></article>
<ul><li><a href="/ja/manual/table-management-extended-cell-css">テーブルの管理：一覧画面：項目の詳細設定：セルCSS</a><span>2025/10/24 up</span></li></ul></article>
<ul><li><a href="/ja/manual/table-management-server-script">テーブルの管理：サーバスクリプト</a><span>2026/02/10 up</span></li></ul></article>
<ul><li><a href="/ja/manual/server-script">開発者向け機能：サーバスクリプト</a><span>2025/11/27 up</span></li>
<li><a href="/ja/manual/server-script-columns-add-choice-hash">開発者向け機能：サーバスクリプト：columns.AddChoiceHash</a><span>2026/02/02 up</span></li>
<li><a href="/ja/manual/server-script-columns-clear-choice-hash">開発者向け機能：サーバスクリプト：columns.ClearChoiceHash</a><span>2023/06/21 up</span></li></ul></article>
<ul><li><a href="/ja/manual/faq-grid-cell-color-by-num-range">FAQ：一覧画面で数値の範囲によってセルの色を変えたい</a><span>2026/02/24 up</span></li></ul></article></div><input id="SearchTextHidden" type="hidden" value="" />
