プリザンターの一覧画面で数値項目をスター記号で表示する

## 概要
プリザンターの一覧画面で数値項目をスター記号（星マーク）で表示するスクリプトです。アンケート結果やレビュー評価の数値を「★」で表現したいときにどうぞ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37295/0069d4d2-3b95-7854-b8fe-272f2cee8409.png)

## 適用手順
### 1. スクリプトの設定

テーブルの管理画面から以下の手順でスクリプトを設定します。

1. 対象テーブルの管理画面を開きます。  
2. スクリプトタブより新規作成ボタンをクリックします。  
3. タイトル欄に任意の名称を入力します。  
4. スクリプト欄に以下の内容を貼り付けます。  
5. 出力先の「全て」のチェックをオフにし、「一覧」のチェックのみをオンにします。  
6. 画面下部の更新ボタンをクリックし、変更が反映されたことを確認します。  

https://pleasanter.org/manual/table-management-script

```JavaScript:スクリプトのタイトル（任意）：数値項目をスター記号で表示する
$p.events.on_grid_load = function () {
  function displayScoreStar() {
    const scoreNames = ['機能性', 'デザイン', '価格', '総合評価'];
    scoreNames.forEach(function (scoreName) {
      $p.apiGet({
        id: $p.id(),
        done: function (data) {
          data.Response.Data.forEach((item) => {
            if (typeof $p.getGridCell(item.ResultId, scoreName)[0] !== 'undefined') {
              if ($p.getGridCell(item.ResultId, scoreName)[0].textContent !== '★★★★★★★★★★') {
                var score = $p.getGridCell(item.ResultId, scoreName)[0].textContent;
                var widthValue = 'calc( ' + score + 'em - .2 * ( ' + score + 'em - .5em ) )';
                $p.getGridCell(item.ResultId, scoreName)[0].innerText = '★★★★★';
                var td = $p.getGridCell(item.ResultId, scoreName)[0];
                // スタイルを適用
                td.style.fontSize = '20px';
                td.style.letterSpacing = '-0.2em';
                td.style.color = '#ccc';
                // 擬似要素を作成
                const beforeElement = document.createElement('span');
                beforeElement.textContent = '★★★★★';
                beforeElement.style.position = 'absolute';
                beforeElement.style.color = '#f60';
                beforeElement.style.width = widthValue;
                beforeElement.style.overflow = 'hidden';
                beforeElement.style.whiteSpace = 'nowrap';
                td.style.position = 'relative';
                td.insertBefore(beforeElement, td.firstChild);
              }
            }
          });
        }
      });
    });
  }

  // 一覧画面のスクロール時にスター記号を表示する関数
  $p.events.after_set = function () {
    displayScoreStar();
  }

  // 一覧画面のロード時にスター記号を表示する
  displayScoreStar();
};
```

:::note warn  
scoreNamesの配列（3行目）はスター記号を表示させたい項目の表示名に変更してください。また、記録テーブルではなく期限付きテーブルの場合は、スクリプト内の「Result」の文字列を「Issue」に置換してください。
:::  

:::note info  
一覧画面のスクロール時（行の追加読み込み時）にもスター記号が表示されるように対応しています。
:::  

## 画面イメージ
一覧画面を開くと「★」が表示されます！

#### Before：

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37295/e2e727f9-e497-e5ae-cef5-8bde0a658022.png)

#### After：

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37295/0069d4d2-3b95-7854-b8fe-272f2cee8409.png)

「3.5」のような半分のスター記号の表示にも対応しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37295/51ec252a-e1ac-1535-2ed6-69d8bd558834.png)

以下の記事などを参考にさせていただき、ChatGPTに聞きながらスクリプトを開発しました。

https://overs.zigexn.co.jp/technology/tech/7539/

:::note warn  
クライアント側のスクリプトで実装しているため、画面全体が表示された後にスター記号がぱらぱらと表示される動きになります。あまり気にならないと思いますが、サーバスクリプトで実装できれば表示を改善できる可能性があります。
:::  

https://pleasanter.org/ja/manual/table-management-server-script

## おまけ
プリザンターのスクリプトなどの入力画面は以下のような表示でしたが、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37295/4de6d7de-d53e-1b78-0619-07f7104e6956.png)

2024/10/8にリリースされたプリザンターver.1.4.9.0にてコードエディタで入力する機能が追加されたことで、以下のように表示されるようになりました。  

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37295/48dd2044-2475-3bc4-74b3-39fbf5c1131e.png)

:::note info  
バージョンアップ情報については、以下をご確認ください。
[プリザンターの直近のバージョンアップ情報 | Pleasanter](https://pleasanter.org/manual/release-notes-core)  

10/8 リリース情報(ver.1.4.9.0)
・スタイル／スクリプト／HTML／サーバスクリプトをコードエディタで入力する機能を追加。
:::  

置換したい文字列を選択してCtrl+Fを押すと、エディタの下部に「replace all」などの文字列置換のUIが出現します！便利ですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37295/138df3ea-24f6-e9bd-7d71-b305461e0ae1.png)

#### 置換前：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37295/2d81da2a-a8df-39f5-ab45-a103ad6a5984.png)

#### 置換後：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/37295/9e208e7e-2c5a-01ae-9946-681d028b3607.png)

ボタンひとつで「Result」から「Issue」に文字列が置換されました～

## 参考リンク
[- HTMLとCSSだけでレーティング評価の星を実装する方法 - OVERS](https://overs.zigexn.co.jp/technology/tech/7539/)  
[- テーブルの管理：スクリプト | Pleasanter](https://pleasanter.org/manual/table-management-script)  
[- 開発者向け機能：スクリプト：$p.events.on_grid_load | Pleasanter](https://pleasanter.org/ja/manual/script-events-on-grid-load)  
[- 開発者向け機能：スクリプト：$p.apiGet | Pleasanter](https://pleasanter.org/ja/manual/script-api-get)  
[- 開発者向け機能：スクリプト：$p.id | Pleasanter](https://pleasanter.org/ja/manual/script-id)  
[- 開発者向け機能：スクリプト：$p.getGridCell | Pleasanter](https://pleasanter.org/ja/manual/script-get-grid-cell)  
[- 開発者向け機能：スクリプト：$p.events.after_set | Pleasanter](https://pleasanter.org/ja/manual/script-events-after-set)  
[- プリザンターの直近のバージョンアップ情報 | Pleasanter](https://pleasanter.org/manual/release-notes-core)