Googleスプレッドシート│組織図やUI構造の情報をビジュアル化！階層表示する方法

<!doctype html>
<html lang="ja"><head><base target="_top"><meta charset="UTF-8">
<script src="https://d3js.org/d3.v7.min.js"></script>
<?!= include('css'); ?>
</head><body><p id="status" role="status">読み込み中</p>
<div id="container"><svg aria-label="階層図"></svg></div>
<p>補足情報：<span id="detail">ノードを選択してください</span></p>
<?!= include('js'); ?>
</body></html>

<style>
body {font-family:sans-serif;margin:16px;}
#container {overflow:auto;max-width:100%;}
svg {display:block;}
.node {cursor:pointer;}
.node:focus rect {stroke:#1264a3;stroke-width:3;}
#detail {white-space:pre-wrap;overflow-wrap:anywhere;}
</style>

<script>
const status = document.getElementById('status');
function showFailure(error) {
  status.textContent = '表示できません：' + (error.message || String(error));
}
function drawTree(nodes) {
  try {
    const root = d3.stratify().id(d => d.id).parentId(d => d.parent || null)(nodes);
    d3.tree().nodeSize([64, 240])(root);
    const all = root.descendants();
    const min = Math.min(...all.map(d => d.x));
    const max = Math.max(...all.map(d => d.x));
    const svg = d3.select('svg').attr('width', (root.height + 1) * 240 + 40).attr('height', max - min + 90);
    svg.selectAll('*').remove();
    const g = svg.append('g').attr('transform', `translate(20,${35-min})`);
    g.selectAll('path').data(root.links()).join('path')
      .attr('fill','none').attr('stroke','#777')
      .attr('d',d => `M${d.source.y+190},${d.source.x}H${d.source.y+215}V${d.target.x}H${d.target.y}`);
    const n = g.selectAll('.node').data(all).join('g').attr('class','node')
      .attr('transform',d => `translate(${d.y},${d.x})`).attr('tabindex',0).attr('role','button')
      .attr('aria-label',d => d.data.name + '：' + d.data.comps);
    const show = (event,d) => { document.getElementById('detail').textContent = d.data.name + '：' + (d.data.comps || '補足情報なし'); };
    n.on('mouseenter',show).on('focus',show).on('click',show)
      .on('keydown',(event,d) => {if (event.key==='Enter' || event.key===' ') {event.preventDefault();show(event,d);}});
    n.append('rect').attr('y',-18).attr('width',190).attr('height',36).attr('fill','#fff').attr('stroke','#333');
    n.append('text').attr('x',8).attr('y',5).attr('font-size',13)
      .text(d => {const a=Array.from(d.data.name);return a.length>12?a.slice(0,12).join('')+'…':d.data.name;});
    n.append('title').text(d => d.data.name + '：' + d.data.comps);
    status.textContent = nodes.length + '件を表示。シート変更後はページを再読み込みしてください。';
  } catch (error) {showFailure(error);}
}
if (typeof d3 === 'undefined') showFailure(new Error('D3.jsを読み込めませんでした'));
else google.script.run.withSuccessHandler(drawTree).withFailureHandler(showFailure).getPrefabTreeData();
</script>

const TREE_SHEET_ID = 'COPY_SPREADSHEET_ID';
const TREE_SHEET_NAME = 'シート1';
function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate()
    .addMetaTag('viewport', 'width=device-width, initial-scale=1')
    .setTitle('階層ビュー');
}
function include(file) {
  if (!['css', 'js'].includes(file)) throw new Error('不明なファイル');
  return HtmlService.createHtmlOutputFromFile(file).getContent();
}
function getPrefabTreeData() {
  const sheet = SpreadsheetApp.openById(TREE_SHEET_ID).getSheetByName(TREE_SHEET_NAME);
  if (!sheet) throw new Error('指定したシートがありません');
  const last = sheet.getLastRow();
  if (last < 2 || last > 101) throw new Error('見出しを除き1〜100行にしてください');
  return validateTree_(sheet.getRange(1, 1, last, 5).getDisplayValues());
}
function validateTree_(data) {
  const headers = ['グループ名', 'nodeId', 'parentId', 'ノード名', '補足情報'];
  if (headers.some((h,i) => data[0][i].trim() !== h)) throw new Error('A1:E1の見出しを確認してください');
  const rows = data.slice(1).filter(r => r.some(v => v.trim()));
  if (!rows.length) throw new Error('データがありません');
  const nodes = rows.map(r => ({id:r[1].trim(), parent:r[2].trim(), name:r[3].trim(), comps:r[4]}));
  const map = new Map();
  for (const n of nodes) {
    if (!n.id || !n.name || n.id.length > 200 || n.parent.length > 200 || n.name.length > 80 || n.comps.length > 1000) throw new Error('ID・名前の空欄または文字数上限を確認してください');
    if (map.has(n.id)) throw new Error('nodeIdが重複しています');
    map.set(n.id, n);
  }
  for (const n of nodes) {
    const seen = new Set();
    let cur = n;
    while (cur) {
      if (seen.has(cur.id)) throw new Error('親子関係が循環しています');
      seen.add(cur.id);
      if (cur.parent && !map.has(cur.parent)) throw new Error('存在しないparentIdがあります');
      cur = cur.parent ? map.get(cur.parent) : null;
    }
  }
  if (nodes.filter(n => !n.parent).length !== 1) throw new Error('parentIdが空のルートは1件にしてください');
  return nodes;
}