{"id":165,"date":"2025-04-29T18:49:00","date_gmt":"2025-04-29T09:49:00","guid":{"rendered":"https:\/\/cg-method.com\/unity\/?p=165"},"modified":"2026-09-20T15:22:46","modified_gmt":"2026-09-20T06:22:46","slug":"prefab-structure-viewer","status":"publish","type":"post","link":"https:\/\/cg-method.com\/unity\/prefab-structure-viewer\/","title":{"rendered":"Unity\u2502Prefab\u53c2\u7167\u69cb\u9020\u30d3\u30e5\u30fc\u30a2"},"content":{"rendered":"\n

Unity\u306ePrefab\u53c2\u7167\u69cb\u9020\u3092\u30ce\u30fc\u30c9\u5f62\u5f0f\u3067\u53ef\u8996\u5316\u3059\u308b\u30a2\u30bb\u30c3\u30c8\u306f\u65e2\u306b\u5b58\u5728\u3057\u307e\u3059\u304c\u3001Google\u30b9\u30d7\u30ec\u30c3\u30c9\u30b7\u30fc\u30c8\u3084Google Apps Script\uff08GAS\uff09\u4e0a\u3067\u3082\u78ba\u8a8d\u3067\u304d\u308b\u3088\u3046\u306b\u30c4\u30fc\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002<\/p>\n\n\n\n

\u30b0\u30e9\u30d5\u63cf\u753b\u30e9\u30a4\u30d6\u30e9\u30ea\u306eCytoscape.js\u3092\u5229\u7528\u3057\u3066\u30ce\u30fc\u30c9\u3092\u8868\u793a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n

\u30d7\u30eb\u30c0\u30a6\u30f3\u304b\u3089Prefab\u540d\u3092\u9078\u629e\u3059\u308b\u3068\u3001\u95a2\u9023\u3059\u308bPrefab\u306e\u53c2\u7167\u95a2\u4fc2\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n

\"\u30d7\u30eb\u30c0\u30a6\u30f3\u3067\u9078\u629e\u3057\u305fPrefab\u306e\u95a2\u9023\u3059\u308b\u53c2\u7167\u95a2\u4fc2\u304c\u30ce\u30fc\u30c9\u3067\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u753b\u9762\u306e\u69d8\u5b50\u3002\"<\/figure>\n\n\n\n

\u53c2\u7167\u5148\u30d5\u30a9\u30eb\u30c0\u3054\u3068\u306b\u30ce\u30fc\u30c9\u306e\u8272\u5206\u3051\u306b\u3082\u5bfe\u5fdc\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n

\u30b5\u30f3\u30d7\u30eb\u30c7\u30fc\u30bf<\/h2>\n\n\n\n

Unity\u306eEditor\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u5b9f\u884c\u3057\u3001\u5b9f\u969b\u306ePrefab\u30c7\u30fc\u30bf\u3092CSV\u5f62\u5f0f\u3067\u66f8\u304d\u51fa\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

\"\u66f8\u304d\u51fa\u3057\u305fPrefab\u30c7\u30fc\u30bf\u3092Google\u30b9\u30d7\u30ec\u30c3\u30c9\u30b7\u30fc\u30c8\u306b\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u305f\u30c6\u30fc\u30d6\u30eb\u60c5\u5831\u306e\u4f8b\u3002\"<\/figure>\n\n\n\n

\u66f8\u304d\u51fa\u3057\u305fCSV\u3092Google\u30b9\u30d7\u30ec\u30c3\u30c9\u30b7\u30fc\u30c8\u306b\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u305f\u30c6\u30fc\u30d6\u30eb\u60c5\u5831\u306e\u4f8b\u3067\u3059\u3002<\/p>\n\n\n\n

\u89aaPrefab\u540d<\/th>\u30d5\u30a9\u30eb\u30c0\u540d<\/th>\u5b50Prefab\u540d<\/th>\u95a2\u4fc2\u7a2e\u5225<\/th><\/tr><\/thead>
a<\/td>Common<\/td><\/td>Base<\/td><\/tr>
b<\/td>Common<\/td>a<\/td>Nested<\/td><\/tr>
b<\/td>Common<\/td>a<\/td>Variant<\/td><\/tr>
c<\/td>Dialog<\/td>b<\/td>Nested<\/td><\/tr>
d<\/td>Common<\/td><\/td>Base<\/td><\/tr>
e<\/td>Dialog<\/td>d<\/td>Nested<\/td><\/tr>
f<\/td>Dialog<\/td>c<\/td>Nested<\/td><\/tr>
f<\/td>Dialog<\/td>e<\/td>Nested<\/td><\/tr>
g<\/td>Dialog<\/td><\/td>Base<\/td><\/tr>
h<\/td>Dialog<\/td>g<\/td>Nested<\/td><\/tr>
h<\/td>Dialog<\/td>g<\/td>Variant<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Prefab\u53c2\u7167\u69cb\u9020\u30d3\u30e5\u30fc\u30a2\u306e\u30b3\u30fc\u30c9<\/h2>\n\n\n\n

\u5b9f\u88c5\u306b\u4f7f\u7528\u3057\u305f\u5404\u30b9\u30af\u30ea\u30d7\u30c8\u306e\u30b3\u30fc\u30c9\u3067\u3059\u3002<\/p>\n\n\n\n

\"Prefab\u53c2\u7167\u69cb\u9020\u30d3\u30e5\u30fc\u30a2\u306e\u5b9f\u88c5\u306b\u4f7f\u7528\u3057\u305f\u30b9\u30af\u30ea\u30d7\u30c8\u306e\u30b3\u30fc\u30c9\u3002\"<\/figure>\n\n\n\n

Unity\u306e\u307b\u304b\u306e\u8a18\u4e8b\u306f\u3001\u307e\u3068\u3081\u304b\u3089\u3054\u89a7\u3044\u305f\u3060\u3051\u307e\u3059\u3002<\/p>\n\n\n

\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\u3042\u308f\u305b\u3066\u8aad\u307f\u305f\u3044<\/span>\n\t\t\t\t\t
\"\"<\/figure><\/div>\t\t\t\t\t
\n\t\t\t\t\t\tUnity\u306e\u4f7f\u3044\u65b9\u307e\u3068\u3081\uff5c\u74b0\u5883\u8a2d\u5b9a\u30fbuGUI\u30fb\u30a8\u30c7\u30a3\u30bf\u62e1\u5f35<\/a>\n\t\t\t\t\t\tUnity\u306b\u3064\u3044\u3066\u66f8\u3044\u305f\u8a18\u4e8b\u3092\u3001\u5de5\u7a0b\u5225\u306b\u5206\u985e\u3057\u307e\u3057\u305f\u3002 \u74b0\u5883\u306e\u8a2d\u5b9a\u3067\u3064\u307e\u305a\u3044\u3066\u3044\u308b\u5834\u5408\u306f\u3001\u6700\u521d\u306e\u9805\u76ee\u304b\u3089\u3054\u89a7\u304f\u3060\u3055\u3044\u3002 \u5404\u30ab\u30c6\u30b4\u30ea\u30fc\u306f\u95b2\u89a7\u6570\u306e\u591a\u3044\u9806\u306b\u8868\u793a\u3057\u3066\u3044\u307e\u3059…<\/span>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\n\n

ExportPrefabRelationships.cs<\/h3>\n\n\n\n

Project\u30a6\u30a3\u30f3\u30c9\u30a6\u3067\u5bfe\u8c61\u30d5\u30a9\u30eb\u30c0\u3092\u9078\u629e\u3057\u3001\u305d\u306e\u968e\u5c64\u4e0b\u306b\u3042\u308bPrefab\u306e\u53c2\u7167\u60c5\u5831\u3092CSV\u3068\u3057\u3066\u66f8\u304d\u51fa\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

\/**\n * ExportPrefabRelationships.cs  (Assets\/Editor \u306b\u914d\u7f6e)\n *\n * \u9078\u629e\u30d5\u30a9\u30eb\u30c0\u914d\u4e0b\u306e Prefab \u4f9d\u5b58\u95a2\u4fc2\u3092\u65e5\u6642\u5165\u308a CSV \u3067\u66f8\u304d\u51fa\u3059\u3002\n * \u5217   : \u89aaPrefab\u540d, \u30d5\u30a9\u30eb\u30c0\u540d, \u5b50Prefab\u540d, \u95a2\u4fc2\u7a2e\u5225\n * \u7a2e\u5225 : Variant \u2026 Variant \u2192 Base\uff08+ \u7591\u4f3c Nested \u884c\uff09\n *        Nested  \u2026 \u89aa Prefab \u306b\u30cd\u30b9\u30c8\u3055\u308c\u3066\u3044\u308b\u5b50 Prefab\n *        Base    \u2026 \u307b\u304b\u306e Prefab \u304b\u3089\u53c2\u7167\u3055\u308c\u308b\u304c\u3001\u81ea\u8eab\u306f\u4f55\u3082\u53c2\u7167\u3057\u306a\u3044 Prefab\n *        \u5358\u72ec    \u2026 \u53c2\u7167\u95a2\u4fc2\u3092\u4e00\u5207\u6301\u305f\u306a\u3044 Prefab\n *\/\n\nusing UnityEngine;\nusing UnityEditor;\nusing System;\nusing System.IO;\nusing System.Text;\nusing System.Linq;\nusing System.Collections.Generic;\n\npublic static class ExportPrefabRelationships\n{\n    private const string MENU = "Tools\/\u9078\u629e\u30d5\u30a9\u30eb\u30c0\u306ePrefab\u95a2\u4fc2\u3092CSV\u51fa\u529b";\n\n    [MenuItem(MENU)]\n    private static void Export()\n    {\n        \/* ---------- 1. \u9078\u629e\u30d5\u30a9\u30eb\u30c0\u78ba\u8a8d ---------- *\/\n        var roots = Selection.GetFiltered<UnityEngine.Object>(SelectionMode.Assets)\n                             .Select(AssetDatabase.GetAssetPath)\n                             .Where(AssetDatabase.IsValidFolder)\n                             .ToArray();\n\n        if (roots.Length == 0)\n        {\n            EditorUtility.DisplayDialog("\u30a8\u30e9\u30fc", "Project \u30a6\u30a4\u30f3\u30c9\u30a6\u3067\u30d5\u30a9\u30eb\u30c0\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\u3002", "OK");\n            return;\n        }\n\n        \/* ---------- 2. Prefab \u4e00\u89a7 ---------- *\/\n        string[] prefabGUIDs = AssetDatabase.FindAssets("t:Prefab", roots);\n        string[] prefabPaths = prefabGUIDs.Select(AssetDatabase.GUIDToAssetPath).ToArray();\n        var pathByName       = prefabPaths.ToDictionary(p => Path.GetFileNameWithoutExtension(p), p => p);\n\n        \/* ---------- 3. \u7d50\u679c\u683c\u7d0d ---------- *\/\n        var relations = new HashSet<(string parent, string folder, string child, string type)>();\n\n        \/* ===== 3-A) Variant \u2192 Base ===== *\/\n        foreach (string path in prefabPaths)\n        {\n            var variantGO = AssetDatabase.LoadAssetAtPath<GameObject>(path);\n            if (PrefabUtility.GetPrefabAssetType(variantGO) != PrefabAssetType.Variant) continue;\n\n            var baseGO = PrefabUtility.GetCorrespondingObjectFromSource(variantGO);\n            if (baseGO == null) continue;\n\n            string folder      = GetTopFolder(path, roots);\n            string variantName = variantGO.name;\n            string baseName    = baseGO.name;\n\n            relations.Add((variantName, folder, baseName, "Variant"));\n            relations.Add((variantName, folder, baseName, "Nested"));   \/\/ \u7591\u4f3c Nested \u884c\n        }\n\n        \/* ===== 3-B) Nested\uff08\u76f4\u4e0b\u306e\u307f\uff09===== *\/\n        foreach (string parentPath in prefabPaths)\n        {\n            string parentName = Path.GetFileNameWithoutExtension(parentPath);\n            string folderName = GetTopFolder(parentPath, roots);\n\n            var seen = new HashSet<string>(); \/\/ \u89aa\u3054\u3068\u91cd\u8907\u6392\u9664\n\n            using var scope = new PrefabScope(parentPath);\n            foreach (Transform tr in scope.Root.transform)\n            {\n                \/\/ \u5b50Prefab\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u306e\u76f4\u4e0b\u306e\u307f\u691c\u67fb\uff08Transform\u968e\u5c641\u3064\u4e0b\uff09\n                if (!PrefabUtility.IsPartOfPrefabInstance(tr.gameObject)) continue;\n\n                GameObject instRoot = PrefabUtility.GetNearestPrefabInstanceRoot(tr.gameObject);\n                if (instRoot == null || instRoot == scope.Root) continue;\n\n                var src = PrefabUtility.GetCorrespondingObjectFromSource(instRoot);\n                if (src == null) continue;\n\n                string childName = src.name;\n                if (!seen.Add(childName)) continue;\n\n                relations.Add((parentName, folderName, childName, "Nested"));\n            }\n        }\n\n        \/* ===== 3-C) \u5358\u72ec\u30fbBase ===== *\/\n        var parents = relations.Select(r => r.parent).ToHashSet();\n        var childs  = relations.Select(r => r.child).Where(c => !string.IsNullOrEmpty(c)).ToHashSet();\n\n        foreach (string prefabName in pathByName.Keys)\n        {\n            bool isParent = parents.Contains(prefabName);\n            bool isChild  = childs.Contains(prefabName);\n\n            if (isParent && isChild) continue;                \/\/ \u89aa\u306b\u3082\u5b50\u306b\u3082\u51fa\u3066\u3044\u308b \u2192 \u65e2\u306b\u884c\u304c\u5b58\u5728\n            string folder = GetTopFolder(pathByName[prefabName], roots);\n\n            if (!isParent && !isChild)\n            {   \/\/ \u53c2\u7167\u3092\u5168\u304f\u6301\u305f\u306a\u3044\n                relations.Add((prefabName, folder, "", "\u5358\u72ec"));\n            }\n            else if (!isParent && isChild)\n            {   \/\/ \u5b50\u306b\u3057\u304b\u51fa\u3066\u3053\u306a\u3044\uff08\uff1dBase\uff09\n                relations.Add((prefabName, folder, "", "Base"));\n            }\n            \/\/ \u89aa\u306e\u307f\uff08isParent && !isChild\uff09\u306f\u65e2\u306b Variant\/Nested \u884c\u304c\u3042\u308b\u306e\u3067\u8ffd\u52a0\u4e0d\u8981\n        }\n\n        \/* ---------- 4. CSV \u51fa\u529b ---------- *\/\n        var sb = new StringBuilder();\n        sb.AppendLine("\u89aaPrefab\u540d,\u30d5\u30a9\u30eb\u30c0\u540d,\u5b50Prefab\u540d,\u95a2\u4fc2\u7a2e\u5225");\n\n        foreach (var r in relations\n                         .OrderBy(r => r.parent)\n                         .ThenBy(r => r.type)\n                         .ThenBy(r => r.child))\n        {\n            sb.AppendLine($"{r.parent},{r.folder},{r.child},{r.type}");\n        }\n\n        string ts     = DateTime.Now.ToString("yyyyMMdd_HHmmss");\n        string fname  = $"PrefabRelationships_{ts}.csv";\n        string saveTo = EditorUtility.SaveFilePanel("CSV \u3092\u4fdd\u5b58", Application.dataPath, fname, "csv");\n        if (string.IsNullOrEmpty(saveTo)) return;\n\n        File.WriteAllText(saveTo, sb.ToString(), Encoding.UTF8);\n        EditorUtility.RevealInFinder(saveTo);\n        Debug.Log($"CSV \u51fa\u529b\u5b8c\u4e86: {saveTo}");\n    }\n\n    \/* ---------- \u30eb\u30fc\u30c8\u76f4\u4e0b\u30d5\u30a9\u30eb\u30c0\u540d\u3092\u53d6\u5f97 ---------- *\/\n    private static string GetTopFolder(string prefabPath, string[] roots)\n    {\n        foreach (string root in roots)\n        {\n            if (!prefabPath.StartsWith(root)) continue;\n            string rel = prefabPath.Substring(root.Length).TrimStart('\/');\n            string first = rel.Split('\/')[0];\n            return string.IsNullOrEmpty(first) ? Path.GetFileName(root) : first;\n        }\n        return Path.GetFileName(Path.GetDirectoryName(prefabPath));\n    }\n\n    \/* ---------- PrefabContents \u30b9\u30b3\u30fc\u30d7 ---------- *\/\n    private readonly struct PrefabScope : IDisposable\n    {\n        public readonly GameObject Root;\n        public PrefabScope(string path) => Root = PrefabUtility.LoadPrefabContents(path);\n        public void Dispose()           => PrefabUtility.UnloadPrefabContents(Root);\n    }\n}\n<\/code><\/pre><\/div>\n\n\n\n
\u7d9a\u3044\u3066\u3001\u30b9\u30d7\u30ec\u30c3\u30c9\u30b7\u30fc\u30c8\u5074\u306b\u7d44\u307f\u8fbc\u3080GAS\u304a\u3088\u3073Web\u8868\u793a\u7528\u30d5\u30a1\u30a4\u30eb\u3067\u3059\u3002<\/p>\n\n\n\n
Code.gs<\/h3>\n\n\n\n
\/* Code.gs  \u2500 \u30b5\u30fc\u30d0\u30fc\u5074\u30ed\u30b8\u30c3\u30af *\/\n\nfunction doGet() {\n  return HtmlService.createTemplateFromFile('index').evaluate().setTitle('Prefab Viewer');\n}\nfunction include(f) { return HtmlService.createHtmlOutputFromFile(f).getContent(); }\n\n\/* \u30b9\u30d7\u30ec\u30c3\u30c9\u30b7\u30fc\u30c8 \u2192 \u30ce\u30fc\u30c9\uff0f\u30a8\u30c3\u30b8\u69cb\u9020 *\/\nfunction getPrefabGraphData() {\n  const sh   = SpreadsheetApp.getActive().getSheetByName('\u30b7\u30fc\u30c81');\n  const rows = sh.getDataRange().getValues().slice(1);        \/\/ \u30d8\u30c3\u30c0\u30fc\u9664\u53bb\n\n  const relPrio = { Base: 3, Variant: 2, Nested: 1 };\n  const nodes   = new Map();                                   \/\/ id \u2192 { id, folder, relation }\n  const edges   = [];                                          \/\/ { source(child), target(parent) }\n\n  \/** \u30ce\u30fc\u30c9\u3092\u8ffd\u52a0\uff0f\u66f4\u65b0  \n   *  \u30fb\u30d5\u30a9\u30eb\u30c0\u306f\u201c\u6700\u521d\u306b\u4ed8\u3044\u305f\u5024\u201d\u3092\u512a\u5148\uff08Common \u304c\u3042\u3068\u3067 Dialog \u306b\u66f8\u304d\u63db\u308f\u3089\u306a\u3044\uff09  \n   *  \u30fbrelation \u306f Base > Variant > Nested \u512a\u5148 *\/\n  function upsert(id, folder, rel) {\n    if (!id) return;\n    const ex = nodes.get(id);\n    if (!ex) {\n      nodes.set(id, { id, folder, relation: rel });\n    } else {\n      if (ex.folder === '\u305d\u306e\u4ed6') ex.folder = folder;          \/\/ \u307e\u3060\u672a\u78ba\u5b9a\u306a\u3089\u66f8\u304d\u63db\u3048\n      if (relPrio[rel] > relPrio[ex.relation]) ex.relation = rel;\n    }\n  }\n\n  rows.forEach(r => {\n    const parent = String(r[0] || '').trim();                  \/\/ \u89aaPrefab\u540d\n    const folder = String(r[1] || '\u305d\u306e\u4ed6').trim();            \/\/ \u30d5\u30a9\u30eb\u30c0\u540d\n    const child  = String(r[2] || '').trim();                  \/\/ \u5b50Prefab\u540d\n    const rel    = String(r[3] || '').trim();                  \/\/ \u95a2\u4fc2\u7a2e\u5225\n\n    \/\/ \u89aa\u30ce\u30fc\u30c9\uff08\u81ea\u8eab\u304c Base \u306a\u3089 Base\u3001Variant \u884c\u306a\u3089 Variant\u3001\u901a\u5e38\u884c\u306a\u3089 Nested\uff09\n    const parentRel = rel === 'Base' ? 'Base' :\n                      rel === 'Variant' ? 'Variant' : 'Nested';\n    upsert(parent, folder, parentRel);\n\n    \/\/ \u5b50\u30ce\u30fc\u30c9 + \u30a8\u30c3\u30b8\uff08\u5b50 \u2192 \u89aa\uff09\u203b\u5b50\u30d5\u30a9\u30eb\u30c0\u306f\u672a\u77e5\u306a\u306e\u3067\u300c\u305d\u306e\u4ed6\u300d\u3067\u4eee\u767b\u9332\n    if (child) {\n      const childRel = (rel === 'Variant') ? 'Base' : 'Nested';  \/\/ \u5b50\u306f Base(\u6d3e\u751f\u5143) \u304b Nested\n      upsert(child, '\u305d\u306e\u4ed6', childRel);\n      edges.push({ source: child, target: parent });\n    }\n  });\n\n  return { nodes: [...nodes.values()], edges };\n}\n<\/code><\/pre><\/div>\n\n\n\n
index.html<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n  <base target="_top">\n  <script src="https:\/\/unpkg.com\/cytoscape@3.23.0\/dist\/cytoscape.min.js"><\/script>\n  <!-- \u5171\u901a\u30ce\u30fc\u30c9\uff0f\u30a8\u30c3\u30b8\u30b9\u30bf\u30a4\u30eb -->\n  <?!= include('css'); ?>\n<\/head>\n<body>\n  <h2 class="title-header">\n    Prefab \u53c2\u7167\u69cb\u9020\u30d3\u30e5\u30fc\u30a2\n    <span class="legend">\n      <span class="legend-item">\n        <span class="legend-color parent"><\/span> \u89aaPrefab\n      <\/span>\n      <span class="legend-item">\n        <span class="legend-color variant"><\/span> Variant\n      <\/span>\n      <span class="legend-item">\n        <span class="legend-color standalone"><\/span> \u5358\u72ecPrefab\n      <\/span>\n    <\/span>\n  <\/h2>\n\n  <!-- \u30d7\u30eb\u30c0\u30a6\u30f3\u30e1\u30cb\u30e5\u30fc -->\n  <label for="prefabSelect">\u89aaPrefab\u3092\u9078\u629e\uff1a<\/label>\n  <select id="prefabSelect">\n    <option value="">\uff08\u3059\u3079\u3066\u8868\u793a\uff09<\/option>\n  <\/select>\n\n  <label><input type="radio" name="direction" value="down" checked> \u89aa\u2192\u5b50<\/label>\n  <label><input type="radio" name="direction" value="up"> \u5b50\u2192\u89aa<\/label>\n\n  <div id="cy" class="graph-area"><\/div>\n\n  <?!= include('js'); ?>\n<\/body>\n<\/html>\n<\/code><\/pre><\/div>\n\n\n\n
js.html<\/h3>\n\n\n\n
<script>\nlet fullData = null;\nlet cy = null;\n\ngoogle.script.run.withSuccessHandler(init).getPrefabGraphData();\n\nfunction init(data) {\n  fullData = data;\n\n  \/\/ \u30d7\u30eb\u30c0\u30a6\u30f3\u751f\u6210\n  const prefabNames = [...new Set(data.nodes.map(n => n.id))].sort();\n  const select = document.getElementById('prefabSelect');\n  prefabNames.forEach(name => {\n    const opt = document.createElement('option');\n    opt.value = name;\n    opt.textContent = name;\n    select.appendChild(opt);\n  });\n\n  \/\/ \u30d7\u30eb\u30c0\u30a6\u30f3\u5909\u66f4\u6642\n  select.addEventListener('change', () => {\n    drawGraph(select.value);\n  });\n\n  \/\/ \u30e9\u30b8\u30aa\u30dc\u30bf\u30f3\u5909\u66f4\u6642\n  document.querySelectorAll('input[name="direction"]').forEach(r => {\n    r.addEventListener('change', () => {\n      drawGraph(select.value);\n    });\n  });\n\n  drawGraph(); \/\/ \u521d\u671f\u8868\u793a\n}\n\nfunction drawGraph(parentFilter = '') {\n  const direction = document.querySelector('input[name="direction"]:checked').value;\n  const els = [];\n  const nodeMap = new Map();\n  fullData.nodes.forEach(n => nodeMap.set(n.id, n));\n\n  const targetNodeIds = new Set();\n\n  \/\/ \u89aa\u2192\u5b50\u3092\u8fbf\u308b\n  function collectDescendantsOneWay(currentId) {\n    if (targetNodeIds.has(currentId)) return;\n    targetNodeIds.add(currentId);\n\n    fullData.edges.forEach(e => {\n      if (e.source === currentId && !targetNodeIds.has(e.target)) {\n        collectDescendantsOneWay(e.target);\n      }\n    });\n  }\n\n  \/\/ \u5b50\u2192\u89aa\u3092\u8fbf\u308b\n  function collectAncestorsOneWay(currentId) {\n    if (targetNodeIds.has(currentId)) return;\n    targetNodeIds.add(currentId);\n\n    fullData.edges.forEach(e => {\n      if (e.target === currentId && !targetNodeIds.has(e.source)) {\n        collectAncestorsOneWay(e.source);\n      }\n    });\n  }\n\n  if (parentFilter) {\n    if (direction === 'down') {\n      collectDescendantsOneWay(parentFilter);\n    } else {\n      collectAncestorsOneWay(parentFilter);\n    }\n  } else {\n    fullData.nodes.forEach(n => targetNodeIds.add(n.id));\n  }\n\n  \/\/ \u30ce\u30fc\u30c9\u8ffd\u52a0\n  targetNodeIds.forEach(id => {\n    const n = nodeMap.get(id);\n    if (n) els.push({ data: { id: n.id, folder: n.folder, relation: n.relation } });\n  });\n\n  \/\/ \u30a8\u30c3\u30b8\u8ffd\u52a0\n  const addedEdges = new Set();\n  fullData.edges.forEach(e => {\n    const key = `${e.source}->${e.target}`;\n    if (\n      targetNodeIds.has(e.source) &&\n      targetNodeIds.has(e.target) &&\n      !addedEdges.has(key)\n    ) {\n      els.push({ data: { source: e.source, target: e.target } });\n      addedEdges.add(key);\n    }\n  });\n\n  \/\/ \u30eb\u30fc\u30c8\uff08\u5165\u529b\u306e\u306a\u3044\u30ce\u30fc\u30c9\uff09\u7279\u5b9a\n  const hasIn = {};\n  els.filter(el => el.data.target).forEach(el => hasIn[el.data.target] = true);\n  const roots = Array.from(targetNodeIds).filter(id => !hasIn[id]);\n\n  if (cy) cy.destroy();\n  cy = cytoscape({\n    container: document.getElementById('cy'),\n    elements : els,\n    layout   : {\n      name: 'breadthfirst',\n      roots: roots,\n      spacingFactor: 1.5,\n      padding: 10\n    },\n    style: window.cyStyle\n  });\n}\n<\/script><\/code><\/pre><\/div>\n\n\n\n
css.html<\/h3>\n\n\n\n
<style>\n\/* ===============================\n   HTML\u7528\u306eCSS\u30b9\u30bf\u30a4\u30eb\n   =============================== *\/\n.title-header {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n}\n\n.legend {\n  display: flex;\n  gap: 0.5rem;\n  font-size: 0.9em;\n}\n\n.legend-item {\n  display: flex;\n  align-items: center;\n}\n\n.legend-color {\n  width: 16px;\n  height: 16px;\n  display: inline-block;\n  margin-right: 4px;\n  border-radius: 3px;\n}\n\n.legend-color.parent {\n  background-color: #3498db;\n}\n\n.legend-color.variant {\n  background-color: #add8e6;\n}\n\n.legend-color.standalone {\n  background-color: white;\n  border: 2px solid #3498db;\n}\n\n.graph-area {\n  width: 100%;\n  height: 720px;\n  margin-top: 1rem;\n}\n<\/style>\n<script>\n\/* ------------------------------------------------------------------\n   window.cyStyle : \u30ce\u30fc\u30c9 \/ \u30a8\u30c3\u30b8\u5171\u901a\u30b9\u30bf\u30a4\u30eb\n   ------------------------------------------------------------------ *\/\nwindow.cyStyle = [\n  \/* \u30c7\u30d5\u30a9\u30eb\u30c8\uff08Nested \u7528\uff1a\u67a0\u306e\u307f\uff09 *\/\n  {\n    selector: 'node',\n    style: {\n      label: 'data(id)',\n      'text-valign': 'center',\n      'text-halign': 'center',\n      'font-size': '16px',\n      shape: 'roundrectangle',\n      width: 100,\n      height: 50,\n      'border-width': 2,\n      'border-color': '#000',\n      'background-opacity': 0      \/* \u2190 \u67a0\u306e\u307f *\/\n    }\n  },\n\n  \/* Base \uff1d \u4e0d\u900f\u660e\u5857\u308a\u3064\u3076\u3057 *\/\n  { selector: 'node[relation = "Base"]',\n    style: { 'background-opacity': 1 } },\n\n  \/* Variant \uff1d \u534a\u900f\u660e\u5857\u308a\u3064\u3076\u3057 *\/\n  { selector: 'node[relation = "Variant"]',\n    style: { 'background-opacity': 0.3 } },\n\n  \/* \u30d5\u30a9\u30eb\u30c0\u5225\u30ab\u30e9\u30fc\uff08\u67a0\u30fb\u5857\u308a\u5171\u901a\uff09 *\/\n  { selector: 'node[folder = "Common"]',\n    style: { 'border-color': '#3498db', 'background-color': '#3498db' } },\n  { selector: 'node[folder = "Dialog"]',\n    style: { 'border-color': '#2ecc71', 'background-color': '#2ecc71' } },\n  { selector: 'node[folder = "\u305d\u306e\u4ed6"]',\n    style: { 'border-color': '#95a5a6', 'background-color': '#95a5a6' } },\n\n  \/* \u30a8\u30c3\u30b8 *\/\n  { selector: 'edge',\n    style: {\n      width: 2,\n      'line-color': '#666',\n      'target-arrow-shape': 'triangle',\n      'target-arrow-color': '#666',\n      'curve-style': 'bezier'\n    }\n  }\n];\n<\/script>\n<\/code><\/pre><\/div>\n\n\n\n\n
\u30a8\u30c7\u30a3\u30bf\u62e1\u5f35\u306e\u8a18\u4e8b\u306f\u3001\u307b\u304b\u306b\u3082\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n
\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\u3042\u308f\u305b\u3066\u8aad\u307f\u305f\u3044<\/span>\n\t\t\t\t\t
\"\"<\/figure><\/div>\t\t\t\t\t
\n\t\t\t\t\t\tUnity\u2502\u9078\u629e\u3057\u305f\u30d5\u30a9\u30eb\u30c0\u5185\u306ePrefab\u306e\u60c5\u5831\u3092\u66f8\u304d\u51fa\u3059\u30c4\u30fc\u30eb<\/a>\n\t\t\t\t\t\tUnity\u306e\u30d2\u30a8\u30e9\u30eb\u30ad\u30fc\u3084\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u69cb\u6210\u306f\u6570\u304c\u5897\u3048\u308b\u3068\u78ba\u8a8d\u3057\u3065\u3089\u3044\u305f\u3081\u3001Prefab\u304b\u3089\u5fc5\u8981\u306a\u60c5\u5831\u3060\u3051\u3092\u62bd\u51fa\u3057\u3066CSV\u3078\u66f8\u304d\u51fa\u3059\u30a8\u30c7\u30a3\u30bf\u62e1\u5f35\u3092\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002 \u6307\u5b9a\u3057\u305f\u30d5…<\/span>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\n
\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\u3042\u308f\u305b\u3066\u8aad\u307f\u305f\u3044<\/span>\n\t\t\t\t\t
\"\"<\/figure><\/div>\t\t\t\t\t
\n\t\t\t\t\t\tUnity\u2502\u30d0\u30c3\u30c1\u30e2\u30fc\u30c9\u3067\u30a8\u30c7\u30a3\u30bf\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u5b9f\u884c\u3059\u308b\u65b9\u6cd5\u2502\u30d8\u30c3\u30c9\u30ec\u30b9<\/a>\n\t\t\t\t\t\tUnity\u30a8\u30c7\u30a3\u30bf\u30fc\u306eGUI\u3092\u8d77\u52d5\u305b\u305a\u3001\u30d0\u30c3\u30c1\u30e2\u30fc\u30c9\uff08\u30d8\u30c3\u30c9\u30ec\u30b9\uff09\u3067\u30a8\u30c7\u30a3\u30bf\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u5b9f\u884c\u3059\u308b\u624b\u9806\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002 \u30b3\u30de\u30f3\u30c9\u30e9\u30a4\u30f3\u304b\u3089\u51e6\u7406\u3092\u547c\u3073\u51fa\u3059\u3053\u3068\u3067\u3001\u8907\u6570\u306e\u30b9\u30af…<\/span>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\n
\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\u3042\u308f\u305b\u3066\u8aad\u307f\u305f\u3044<\/span>\n\t\t\t\t\t
\"\"<\/figure><\/div>\t\t\t\t\t
\n\t\t\t\t\t\tUnity\u2502UI\u5236\u4f5c\u306b\u4fbf\u5229\uff01\u30a8\u30c7\u30a3\u30bf\u62e1\u5f35\u307e\u3068\u3081 13\u9078\u2502uGUI<\/a>\n\t\t\t\t\t\tuGUI\u3067\u306eUI\u5236\u4f5c\u306b\u5f79\u7acb\u3064\u30a8\u30c7\u30a3\u30bf\u62e1\u5f35\u3084\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u307e\u3068\u3081\u307e\u3057\u305f\u3002 Photoshop\u9023\u643a\u3001\u30a2\u30a6\u30c8\u30e9\u30a4\u30f3\u63cf\u753b\u3001\u6587\u5b57\u9593\u9694\uff08\u30ab\u30fc\u30cb\u30f3\u30b0\uff09\u8abf\u6574\u3001\u30d5\u30a9\u30f3\u30c8\u4e00\u62ec\u7f6e\u63db\u306a\u3069\u3001\u5b9f\u969b\u306e\u5236\u4f5c…<\/span>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\n
\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\u3042\u308f\u305b\u3066\u8aad\u307f\u305f\u3044<\/span>\n\t\t\t\t\t
\"\"<\/figure><\/div>\t\t\t\t\t
\n\t\t\t\t\t\tUnity\u2502\u77e5\u3063\u3066\u304a\u304f\u3068\u4fbf\u5229\uff01\u30a8\u30c7\u30a3\u30bf\u62e1\u5f35\u307e\u3068\u3081 9\u9078<\/a>\n\t\t\t\t\t\t\u30a8\u30c7\u30a3\u30bf\u62e1\u5f35\u3092\u4f7f\u3046\u3068\u3001Unity\u306b\u6a19\u6e96\u642d\u8f09\u3055\u308c\u3066\u3044\u306a\u3044\u72ec\u81ea\u306e\u6a5f\u80fd\u3092\u8ffd\u52a0\u3067\u304d\u307e\u3059\u3002 \u958b\u767a\u4f5c\u696d\u306e\u52b9\u7387\u5316\u306b\u5f79\u7acb\u3064\u304a\u3059\u3059\u3081\u306e\u30a8\u30c7\u30a3\u30bf\u62e1\u5f35\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002 \u5148\u982d\u3084\u6700\u5f8c\u5c3e\u306b\u6587\u5b57\u3092…<\/span>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\n\n\n\n\n","protected":false},"excerpt":{"rendered":"
Unity\u306ePrefab\u53c2\u7167\u69cb\u9020\u3092\u30ce\u30fc\u30c9\u5f62\u5f0f\u3067\u53ef\u8996\u5316\u3059\u308b\u30a2\u30bb\u30c3\u30c8\u306f\u65e2\u306b\u5b58\u5728\u3057\u307e\u3059\u304c\u3001Google\u30b9\u30d7\u30ec\u30c3\u30c9\u30b7\u30fc\u30c8\u3084Google Apps Script\uff08GAS\uff09\u4e0a\u3067\u3082\u78ba\u8a8d\u3067\u304d\u308b\u3088\u3046\u306b\u30c4\u30fc\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3057\u305f\u3002 \u30b0\u30e9\u30d5\u63cf\u753b\u30e9\u30a4 […]<\/p>\n","protected":false},"author":1,"featured_media":169,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pochipp_cv_data":"","swell_btn_cv_data":"","book_review_data":"","footnotes":"","ssp_meta_title":"Unity Prefab\u53c2\u7167\u69cb\u9020\u3092\u53ef\u8996\u5316\u3059\u308b\u30c4\u30fc\u30eb","ssp_meta_description":"Unity\u306ePrefab\u53c2\u7167\u69cb\u9020\u3092\u30ce\u30fc\u30c9\u5f62\u5f0f\u3067\u53ef\u8996\u5316\u3059\u308b\u30c4\u30fc\u30eb\u306e\u5b9f\u88c5\u3092\u7d39\u4ecb\u3002Editor\u30b9\u30af\u30ea\u30d7\u30c8\u3067Prefab\u306e\u4f9d\u5b58\u95a2\u4fc2\u3092CSV\u51fa\u529b\u3057\u3001Cytoscape.js\u3068GAS\u3001Google\u30b9\u30d7\u30ec\u30c3\u30c9\u30b7\u30fc\u30c8\u4e0a\u3067\u78ba\u8a8d\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u5404\u30b3\u30fc\u30c9\u3092\u63b2\u8f09\u3002"},"categories":[24],"tags":[],"class_list":["post-165","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-editor"],"_links":{"self":[{"href":"https:\/\/cg-method.com\/unity\/wp-json\/wp\/v2\/posts\/165","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cg-method.com\/unity\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cg-method.com\/unity\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cg-method.com\/unity\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cg-method.com\/unity\/wp-json\/wp\/v2\/comments?post=165"}],"version-history":[{"count":8,"href":"https:\/\/cg-method.com\/unity\/wp-json\/wp\/v2\/posts\/165\/revisions"}],"predecessor-version":[{"id":22108,"href":"https:\/\/cg-method.com\/unity\/wp-json\/wp\/v2\/posts\/165\/revisions\/22108"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cg-method.com\/unity\/wp-json\/wp\/v2\/media\/169"}],"wp:attachment":[{"href":"https:\/\/cg-method.com\/unity\/wp-json\/wp\/v2\/media?parent=165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cg-method.com\/unity\/wp-json\/wp\/v2\/categories?post=165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cg-method.com\/unity\/wp-json\/wp\/v2\/tags?post=165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}