MAIL
サーバスクリプトでチェック項目の表示を入れ替える
今回はサーバスクリプトの context.ReferenceType と context.AddResponse を使用します。
以下のサーバスクリプトを入力画面に適用すると、「☑ 完了」→「完了 ☑」へ、見た目の順序だけを入れ替えられます。
サーバスクリプトの条件には「画面表示の前」を指定してください。
チェック項目が1つの場合：
// テーブル種別を取得
const referenceType = context.ReferenceType;
context.AddResponse(
'Append',
'body',
`
<script>
// 画面表示後に実行
(() => {
'use strict';
// 対象ラベル（CheckA のチェック項目）を取得
const sel = '#${referenceType}_CheckAField label.check-option';
const label = document.querySelector(sel);
if (!label) return; // 見つからなければ何もしない
// ラベル内の要素を取得
const checkIcon = label.querySelector('.check-icon'); // チェックボックス部分
const checkText = label.querySelector('.check-text'); // 表示名テキスト部分
// 条件がそろっていれば、表示順を入れ替え
if (checkIcon && checkText) {
// 「表示名 → チェックボックス」の順に並べ替え
label.innerHTML = \`\${checkText.outerHTML}\${checkIcon.outerHTML}\`;
}
})();
</script>
`
);チェック項目が複数の場合：
// テーブル種別を取得
const referenceType = context.ReferenceType;
context.AddResponse(
'Append',
'body',
`
<script>
(() => {
'use strict';
// 定数：テーブル種別と対象項目名の一覧
const REF = '${referenceType}';
const fields = ['CheckA']; // 例：['CheckA','CheckB','CheckC'] に拡張
// 1つの項目の表示順を入れ替える処理
const reorder = (field) => {
// 対象ラベルを特定
const label = document.querySelector(\`#\${REF}_\${field}Field label.check-option\`);
if (!label) return; // 見つからなければ終了
// ラベル内の要素を取得
const icon = label.querySelector('.check-icon'); // チェックボックス部分
const text = label.querySelector('.check-text'); // 表示名テキスト部分
// まだ入れ替えていない場合のみ、表示名を前に移動
if (icon && text && text.nextElementSibling !== icon) {
label.insertBefore(text, icon);
}
};
// 画面の読み込みが終わったタイミングで適用
const apply = () => fields.forEach(reorder);
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', apply);
} else {
apply();
}
})();
</script>
`
);実装のポイント
影響範囲：
入力画面の「見た目」だけを変えます。保存されるデータの内容には影響しません。
対象の指定方法：
どのチェック項目を変更するかは、項目名を指定します。
例：「CheckA」という項目なら #テーブル種別_CheckAField というIDで特定します。項目が複数ある場合は、サンプルコードの fields 配列に追加してください。
実装の仕組み：
単一項目版はラベル全体を入れ替える方式（innerHTML）で、シンプルに実装できます。
複数項目版は要素を一つずつ並べ替える方式（insertBefore）で、他のスクリプト処理やイベントがあっても安全に動作します。
まとめ
いかがでしたか。
「☑ 完了」を「完了 ☑」にするだけでも、現場の操作体験は着実に改善します。
サーバスクリプトなら、見た目の順序だけを安全に調整でき、単一項目から複数項目へもスムーズに拡張可能です。
今回ご紹介した方法は、あくまで実装例のひとつです。状況に応じて他にもさまざまな記述方法があります。
まずは一つの項目で試して、動作を確認してみることをおすすめします。
利用ユーザのフィードバックを参考にしながら、必要に応じて複数項目への適用や表示順の調整を行うと、安全かつ効率的に実装を広げられます。
弊社では、プリザンター導入・活用に関して以下のサービスをご提供しています。
・年間サポート
・各種書籍
・帳票出力（Excel/PDF）支援パック
プリザンターの導入から開発・運用をあらゆる角度から全力サポートいたします。
ぜひお気軽にご相談ください！
☆☆☆
サービスの説明などをご希望の方は【 問い合わせフォーム 】よりお気軽にお問い合わせください。
☆☆☆
「☑ 完了」を「完了 ☑」と表示したい！
こんにちは、シーイーシーカスタマサービスの森山です。
「承認フォームで、最後に“完了”にチェックして送信」という場面を思い浮かべてみてください。
現場では片手でスマートフォンを操作しながら、急いで確認することもしばしば。
そんなとき、「☑ 完了」のようにチェックボックスが先にあると、指と目線が先にボックスへ行きがちで、ラベルの“完了”という文字を一瞬見落としてしまうことがあります。
逆に「完了 ☑」なら、先に意味（ラベル）が目に入るため、意図した操作にブレが出にくくなります。
通常、プリザンターの入力画面ではチェック項目は「☑ 完了」と表示されますが、状況によっては「完了 ☑」と表示したいケースもあります。例えば次のようなシーンが考えられます。
・スマートフォンやタブレット中心の業務で、“言葉 → 操作”の順に視認したい
・「完了」「承認」「検収」など重要語を先に提示し、誤操作を防ぎたい
実際に「☑ 完了」を「完了 ☑」へ切り替える方法について、サーバスクリプトのサンプルを交えて解説していきます。