Update dev-tools.js

dev-tools.js

@@ -1505,26 +1505,54 @@
     const button = document.createElement('button');
     button.id = 'open-devtools-btn';
     button.textContent = '開発者ツールを開く';
+    
+    // スタイルを直接設定（動的CSSに依存しない）
     button.style.position = 'fixed';
-    button.style.bottom = '10px';
-    button.style.right = '10px';
+    button.style.bottom = '20px';
+    button.style.right = '20px';
     button.style.padding = '8px 16px';
-    button.style.background = 'var(--primary-color)';
+    button.style.backgroundColor = '#007acc';
     button.style.color = '#000';
     button.style.border = 'none';
     button.style.borderRadius = '4px';
     button.style.cursor = 'pointer';
-    button.style.zIndex = '9998';
+    button.style.zIndex = '2147483647'; // 最大値
+    button.style.fontFamily = 'sans-serif';
+    button.style.fontSize = '14px';
+    button.style.boxShadow = '0 2px 5px rgba(0,0,0,0.2)';
+    
     button.onclick = toggleDevTools;
-
     document.body.appendChild(button);
+    
+    console.log('開発者ツールボタンが作成されました'); // デバッグ用
   }
 
-  // 初期化
-  document.addEventListener('DOMContentLoaded', function() {
-    createDevTools();
-    createOpenButton();
-    console.log('開発者ツールが初期化されました');
-    console.log('このコンソールでJavaScriptを実行できます');
-  });
+  // 初期化関数
+  function initializeDevTools() {
+    try {
+      // 1. スタイルを最初に追加
+      const style = document.createElement('style');
+      style.textContent = `...`; // 前述のスタイル定義
+      document.head.appendChild(style);
+      
+      // 2. メインコンテナ作成
+      createDevTools();
+      
+      // 3. ボタン作成（setTimeoutで少し遅らせる）
+      setTimeout(() => {
+        createOpenButton();
+        console.log('初期化完了');
+      }, 100);
+      
+    } catch (error) {
+      console.error('初期化エラー:', error);
+    }
+  }
+
+  // DOM読み込み完了後に初期化
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeDevTools);
+  } else {
+    initializeDevTools();
+  }
 })();