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

Posted at 2024-10-30

概要

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

適用手順

1. スクリプトの設定

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

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

スクリプトのタイトル（任意）：数値項目をスター記号で表示する

$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();
};