プリザンターで編集画面の項目物理名を表示する方法

## はじめに
プリザンターでサーバスクリプトやスクリプトを使用する際に使用する項目名。特に必要となる物理名は画面で一発で確認する方法がなく、ブラウザの開発者ツールなどで見るのが一般的です。
ただこの方法だとマウスホバーや要素の直線の必要があり一発で確認する方法がありません。今回は、画面にわかりやすく表示させる方法を紹介します。

## 要素をみてみよう
まずは編集画面の要素が実装どうなっているかを見てみます。
```html
<!-- 添付ファイル項目以外 -->
<div id="Results_TitleField" class="field-wide">
    <p class="field-label">
        <label for="Results_Title" class="required">子タイトル</label>
    </p>
    <div class="field-control">
        <div class="container-normal">
            <input 
                id="Results_Title"
                name="Results_Title"
                class="control-textbox focus valid"
                type="text"
                value="12 - コピー - copy - copy"
                placeholder="子タイトル"
                data-validate-required="1"
                data-validate-maxlength="1024"
                aria-invalid="false">
        </div>
    </div>
</div>

<!-- 添付ファイル項目 -->
<div id="Results_AttachmentsAField" class="field-wide">
    <p class="field-label">
        <label>添付ファイルA</label>
    </p>
    <div class="field-control">
        <div class="container-normal">
            <input
                id="Results_AttachmentsA"
                name="Results_AttachmentsA"
                data-name="AttachmentsA"
                class="control-attachments"
                value="[]"
                type="hidden">
            <div 
                data-name="AttachmentsA"
                data-action="binaries/multiupload"
                id="AttachmentsA.upload"
                class="control-attachments-upload">ファイルをドラッグ＆ドロップしてください
                <input
                    id="AttachmentsA.input"
                    class="hidden"
                    type="file"
                    multiple="multiple">
            </div>
            <div id="AttachmentsA.items" class="control-attachments-items"></div>
            <div style="display: none; " id="AttachmentsA.status">
                <div id="AttachmentsA.progress" class="progress-bar">
                    <div></div>
                </div>
                <div id="AttachmentsA.abort" class="abort">キャンセル</div>
            </div>
        </div>
    </div>
</div>
```
関係のあるところだけ抜き出しています。今回は簡単に実装したいので、CSSで表示させることを念頭に要素を見てみます。

## スタイルを作ってみる
項目名を表示しているのは`#(サイト種別)_(物理名)Field .field-label lable`になります。この`label`、属性に`for`を持っていますがその中に物理名が格納されています。これを疑似要素を使って、本来のラベルの後ろに表示させてみましょう。疑似要素と既にある存在を組み合わせて使うとなると鉄板は`attr`ですよね。ということは、作ってみたCSSはこちらになります。

```css
[id$="Field"] p.field-label label::after {
   content: ' (' attr(for) ')';
   color: gray
}
```

これを適用してみると次の様な表示になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555395/5d469c64-2fd5-45f8-9943-7f056d3e6d44.png)

いい感じに表示されていますね。ただし、これだと`for`を持たない場合でも疑似要素が表示されてしまっている＆読み取り専用項目だと表示されていないので、ちょっと変更を加えます。

```css
[id$="Field"] {
    --field-name: attr(id);
    p.field-label label::after {
        content: ' (' var(--field-name) ')';
        color: gray
    }
}
```

そもそもの項目フィールドの外側に付与されているIDを使っています。これを適用してみると次の様な表示になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3555395/e70e301f-8e82-4dfb-adef-5264210295a8.png)

どの項目にも全て表示させることができました。ただこれをそのまま拡張スタイルなどに入れてしまうと全てのユーザに表示されてしまうという問題が発生します。表示できるユーザに制限を加えてみます。

```css
:root:has(#UserId[value="3"]) {
    [id$="Field"] {
        --field-name: attr(id);
        p.field-label label::after {
            content: ' (' var(--field-name) ')';
            color: gray
        }
    }
}
```
やっていることはとても簡単で`$p.userId`が設定されている部分に表示したいユーザIDが格納されている(=表示したいユーザがログインしている)ときに表示する様に条件を加えただけです。所属部門、たとえばIT部門などを組織で括って管理をしているようという場合は、`#DeptId`に書き換えてvalueに組織IDを指定してあげれば組織単位で表示制御をさせることも出来ます。

## まとめ
編集画面で項目の物理名を表示させる方法を紹介しました。この表示がある/ないでは開発効率が大きく変わってきます。皆さんも是非試してみてください。