Update dev-tools.js

dev-tools.js

@@ -1,141 +1,201 @@
 // dev-tools.js
 document.addEventListener('DOMContentLoaded', () => {
-  // 開発者ツール起動ボタン
-  const openButton = document.createElement('button');
-  openButton.textContent = '開発者ツールを開く';
-  openButton.style.position = 'fixed';
-  openButton.style.top = '10px';
-  openButton.style.right = '10px';
-  document.body.appendChild(openButton);
-
-  // 開発者ツールコンテナ
-  const devToolsContainer = document.createElement('div');
-  devToolsContainer.style.cssText = `
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 400px;
-    background: #242424;
-    color: #fff;
-    font-family: monospace;
-    display: none;
-    border-top: 2px solid #888;
-    flex-direction: column;
-  `;
-
-  // タブバー
-  const tabBar = document.createElement('div');
-  tabBar.style.display = 'flex';
-  tabBar.style.padding = '5px';
-  tabBar.style.gap = '10px';
-  tabBar.style.background = '#1a1a1a';
-
-  // タブボタン
-  const tabs = ['Console', 'Elements', 'Storage'];
-  const contentAreas = {};
-
-  tabs.forEach(tabName => {
-    const tabButton = document.createElement('button');
-    tabButton.textContent = tabName;
-    tabButton.addEventListener('click', () => {
-      Object.values(contentAreas).forEach(area => area.style.display = 'none');
-      contentAreas[tabName].style.display = 'block';
-      tabButton.classList.add('active');
+    // スタイル定義
+    const style = document.createElement('style');
+    style.textContent = `
+    :root {
+        --devtools-blue: #1a1c2c;
+        --neon-blue: #00f3ff;
+        --dark-layer: rgba(0, 0, 0, 0.9);
+    }
+
+    .devtools-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        background: var(--devtools-blue);
+        color: var(--neon-blue);
+        border: 2px solid var(--neon-blue);
+        padding: 10px 20px;
+        cursor: pointer;
+        border-radius: 5px;
+        font-family: 'Courier New', monospace;
+        z-index: 10000;
+        transition: all 0.3s;
+    }
+
+    .devtools-btn:hover {
+        box-shadow: 0 0 15px var(--neon-blue);
+    }
+
+    .devtools-panel {
+        position: fixed;
+        bottom: 0;
+        right: 0;
+        width: 100%;
+        height: 60vh;
+        background: var(--dark-layer);
+        border-top: 3px solid var(--neon-blue);
+        color: white;
+        font-family: 'Courier New', monospace;
+        display: none;
+        z-index: 9999;
+    }
+
+    .tabs {
+        display: flex;
+        background: var(--devtools-blue);
+        border-bottom: 1px solid var(--neon-blue);
+    }
+
+    .tab {
+        padding: 10px 20px;
+        cursor: pointer;
+        border-right: 1px solid var(--neon-blue);
+    }
+
+    .tab.active {
+        background: var(--neon-blue);
+        color: var(--devtools-blue);
+    }
+
+    .panel-content {
+        padding: 15px;
+        overflow-y: auto;
+        height: calc(100% - 50px);
+    }
+
+    .dom-node {
+        margin-left: 15px;
+        cursor: pointer;
+    }
+
+    .dom-node::before {
+        content: '▶';
+        margin-right: 5px;
+        transition: transform 0.2s;
+    }
+
+    .dom-node.expanded::before {
+        transform: rotate(90deg);
+    }
+
+    .console-input {
+        width: 100%;
+        background: transparent;
+        border: 1px solid var(--neon-blue);
+        color: white;
+        padding: 5px;
+        margin-top: 10px;
+    }
+
+    .console-log {
+        white-space: pre-wrap;
+        color: var(--neon-blue);
+    }
+    `;
+    document.head.appendChild(style);
+
+    // 開発者ツール起動ボタン
+    const openBtn = document.createElement('button');
+    openBtn.className = 'devtools-btn';
+    openBtn.textContent = '🛠 Open DevTools';
+    document.body.appendChild(openBtn);
+
+    // 開発者ツールパネル
+    const panel = document.createElement('div');
+    panel.className = 'devtools-panel';
+
+    // タブインターフェイス
+    const tabs = ['Console', 'Elements', 'Styles'].map(name => {
+        const tab = document.createElement('div');
+        tab.className = 'tab';
+        tab.textContent = name;
+        return tab;
     });
-    tabBar.appendChild(tabButton);
-
-    const content = document.createElement('div');
-    content.style.display = 'none';
-    content.style.flexGrow = '1';
-    content.style.overflow = 'auto';
-    contentAreas[tabName] = content;
-    devToolsContainer.appendChild(content);
-  });
-
-  // Consoleタブ
-  const consoleContent = contentAreas['Console'];
-  consoleContent.innerHTML = `
-    <input type="text" id="console-input" placeholder="JavaScriptを入力" 
-      style="width: 100%; padding: 5px; background: #333; color: #fff; border: none;">
-    <pre id="console-output" style="padding: 10px; margin: 0;"></pre>
-  `;
-
-  // Consoleログのキャプチャ
-  const originalConsoleLog = console.log;
-  const consoleOutput = consoleContent.querySelector('#console-output');
-  
-  console.log = (...args) => {
-    consoleOutput.textContent += args.join(' ') + '\n';
-    originalConsoleLog(...args);
-  };
-
-  // JavaScript実行
-  consoleContent.querySelector('#console-input').addEventListener('keypress', e => {
-    if (e.key === 'Enter') {
-      try {
-        eval(e.target.value);
-      } catch (err) {
-        console.log('Error:', err.message);
-      }
-      e.target.value = '';
+
+    const tabContent = document.createElement('div');
+    tabContent.className = 'panel-content';
+
+    // コンソールタブ
+    const consoleInput = document.createElement('input');
+    consoleInput.className = 'console-input';
+    consoleInput.placeholder = 'Enter JavaScript...';
+
+    const consoleLog = document.createElement('pre');
+    consoleLog.className = 'console-log';
+
+    // ログキャプチャ
+    const originalConsoleLog = console.log;
+    console.log = (...args) => {
+        originalConsoleLog(...args);
+        consoleLog.textContent += args.join(' ') + '\n';
+    };
+
+    // DOMインスペクタ
+    function createDOMTree(node, depth = 0) {
+        const element = document.createElement('div');
+        element.className = 'dom-node';
+        element.textContent = node.nodeName.toLowerCase();
+
+        if (node.childNodes.length > 0) {
+            node.childNodes.forEach(child => {
+                if (child.nodeType === Node.ELEMENT_NODE) {
+                    element.appendChild(createDOMTree(child, depth + 1));
+                }
+            });
+        }
+
+        element.addEventListener('click', (e) => {
+            e.stopPropagation();
+            element.classList.toggle('expanded');
+        });
+
+        return element;
     }
-  });
-
-  // Elementsタブ
-  const elementsContent = contentAreas['Elements'];
-  elementsContent.innerHTML = '<div class="dom-tree"></div>';
-  
-  function buildDOMTree(element, parent) {
-    const div = document.createElement('div');
-    div.textContent = '<' + element.tagName.toLowerCase() + '>';
-    div.style.paddingLeft = '20px';
-    
-    Array.from(element.children).forEach(child => {
-      buildDOMTree(child, div);
+
+    // タブ切り替え
+    tabs.forEach((tab, index) => {
+        tab.addEventListener('click', () => {
+            tabs.forEach(t => t.classList.remove('active'));
+            tab.classList.add('active');
+            
+            tabContent.innerHTML = '';
+            switch(index) {
+                case 0:
+                    tabContent.appendChild(consoleLog);
+                    tabContent.appendChild(consoleInput);
+                    break;
+                case 1:
+                    tabContent.appendChild(createDOMTree(document.documentElement));
+                    break;
+            }
+        });
+    });
+
+    // パネル構成
+    panel.appendChild(tabs.reduce((container, tab) => {
+        container.appendChild(tab);
+        return container;
+    }, document.createElement('div')));
+    panel.appendChild(tabContent);
+
+    // イベントハンドラ
+    openBtn.addEventListener('click', () => {
+        panel.style.display = 'block';
+        tabs[0].click();
     });
-    
-    parent.appendChild(div);
-  }
-  
-  buildDOMTree(document.documentElement, elementsContent.querySelector('.dom-tree'));
-
-  // Storageタブ
-  const storageContent = contentAreas['Storage'];
-  storageContent.innerHTML = `
-    <div style="padding: 10px;">
-      <h3>Local Storage</h3>
-      <pre id="local-storage"></pre>
-      <button id="clear-storage">Clear Local Storage</button>
-      
-      <h3>Cookies</h3>
-      <pre id="cookies"></pre>
-    </div>
-  `;
-
-  // ストレージ表示更新
-  function updateStorageDisplay() {
-    storageContent.querySelector('#local-storage').textContent = 
-      JSON.stringify(localStorage, null, 2);
-    storageContent.querySelector('#cookies').textContent = 
-      document.cookie;
-  }
-
-  storageContent.querySelector('#clear-storage').addEventListener('click', () => {
-    localStorage.clear();
-    updateStorageDisplay();
-  });
-
-  updateStorageDisplay();
-
-  // 全体の組み立て
-  devToolsContainer.insertBefore(tabBar, devToolsContainer.firstChild);
-  document.body.appendChild(devToolsContainer);
-
-  // 開閉制御
-  openButton.addEventListener('click', () => {
-    devToolsContainer.style.display = 'flex';
-    contentAreas['Console'].style.display = 'block';
-    tabs[0].classList.add('active');
-  });
+
+    consoleInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') {
+            try {
+                eval(e.target.value);
+            } catch (err) {
+                console.log('Error:', err);
+            }
+            e.target.value = '';
+        }
+    });
+
+    document.body.appendChild(panel);
 });