初回訪問時にAPIキーの入力を促す

control.js

@@ -21,7 +21,12 @@ setInterval(() => {
 }, 60000);
 // 入力フォームの内容を保存する
 document.querySelectorAll('input, textarea').forEach(input => {
-    input.addEventListener('input', saveToUserStorage);
+    input.addEventListener('input', () => {
+        saveToUserStorage();
+        if (input.id === "apiKey") {
+            updateModelList();
+        }
+    });
 });
 // Ctrl+Enterでプロンプト生成を実行する
 document.addEventListener('keydown', function (event) {
@@ -106,7 +111,10 @@ document.addEventListener('DOMContentLoaded', function () {
     resizeMain();
     initSidebarResize();
     initClearStorageButton();
-    updateModelList(); // 新しい関数を呼び出し
+    updateModelList();
+    
+    // APIキーの設定状態をチェック
+    checkApiKeySettings();
 });
 
 window.addEventListener("resize", resizeMain);
@@ -131,3 +139,31 @@ async function updateModelList() {
     }
     loadFromUserStorage();
 }
+
+/**
+ * APIキーの設定状態をチェックし、未設定の場合はユーザーに入力を促す
+ */
+function checkApiKeySettings() {
+    const apiKeyInput = document.getElementById('apiKey');
+    const sidebarContainer = document.getElementById('sidebar-container');
+    const content = document.getElementById('content');
+    
+    if (!apiKeyInput.value) {
+        // サイドバーを開く
+        sidebarContainer.style.width = '250px';
+        content.style.marginLeft = '250px';
+        sidebarContainer.classList.add('active');
+        
+        // APIキー入力欄を強調表示
+        apiKeyInput.classList.add('border', 'border-danger', 'border-3');
+        apiKeyInput.focus();
+        
+        // APIキーが入力されたら強調表示を解除
+        apiKeyInput.addEventListener('input', function removeHighlight() {
+            if (apiKeyInput.value) {
+                apiKeyInput.classList.remove('border', 'border-danger', 'border-3');
+                apiKeyInput.removeEventListener('input', removeHighlight);
+            }
+        });
+    }
+}

index.html

@@ -159,7 +159,7 @@
                 </div>
                 <div class="form-group">
                     <label for="characterCount" class="form-label" id="characterCountLabel">文字数</label>
-                    <input type="number" value="320" class="form-control" id="characterCount"
+                    <input type="number" value="576" class="form-control" id="characterCount"
                         placeholder="生成するプロンプトの文字数を入力してください">
                 </div>
                 <div class="form-group">