エラー処理を整理

gemini.js

@@ -292,9 +292,37 @@ function debugPrompt() {
     });
 }
 
+// 新しい関数を追加
+function updateRequestButtonState(state, flashClass = null) {
+    const requestButton = document.getElementById('requestButton');
+    const stopButton = document.getElementById('stopButton');
+
+    switch (state) {
+        case 'generating':
+            requestButton.disabled = true;
+            stopButton.classList.remove('d-none');
+            break;
+        case 'idle':
+            requestButton.disabled = false;
+            stopButton.classList.add('d-none');
+            break;
+        case 'error':
+            requestButton.disabled = false;
+            stopButton.classList.add('d-none');
+            break;
+    }
+
+    if (flashClass) {
+        requestButton.classList.add(flashClass);
+        setTimeout(() => {
+            requestButton.classList.remove(flashClass);
+        }, 2000);
+    }
+}
+
 function fetchStream(ENDPOINT, payload) {
     const novelContent2 = document.getElementById('novelContent2');
-    const requestButton = document.getElementById('requestButton');
+    updateRequestButtonState('generating');
     controller = new AbortController();
     const signal = controller.signal;
 
@@ -382,11 +410,11 @@ function fetchStream(ENDPOINT, payload) {
                 }).catch(error => {
                     if (error.name === 'AbortError') {
                         console.log('フェッチがユーザーによって中止されました');
+                        updateRequestButtonState('idle');
                     } else {
                         console.error('ストリーム読み取りエラー:', error);
+                        updateRequestButtonState('error', 'red-flash-bg');
                     }
-                    document.getElementById('stopButton').classList.add('d-none');
-                    requestButton.disabled = false;
                 });
             }
 
@@ -395,29 +423,31 @@ function fetchStream(ENDPOINT, payload) {
         .catch(error => {
             if (error.name === 'AbortError') {
                 console.log('フェッチがユーザーよって中止されました');
+                updateRequestButtonState('idle');
             } else {
                 console.error('フェッチエラー:', error);
+                updateRequestButtonState('error', 'red-flash-bg');
             }
-            requestButton.disabled = false;
         });
 }
 
-function fetchNonStream(ENDPOINT, payload) {
+async function fetchNonStream(ENDPOINT, payload) {
     const novelContent2 = document.getElementById('novelContent2');
-    fetch(ENDPOINT, payload)
-        .then(response => response.json())
-        .then(data => {
-            if (data && data.candidates && data.candidates[0].content && data.candidates[0].content.parts && data.candidates[0].content.parts[0].text) {
-                novelContent2.value += data.candidates[0].content.parts[0].text;
-                novelContent2.scrollTop = novelContent2.scrollHeight;
-            }
-        })
-        .catch(error => {
-            console.error('エラー:', error);
-        })
-        .finally(() => {
-            document.getElementById('requestButton').disabled = false;
-        });
+    updateRequestButtonState('generating');
+    try {
+        const response = await fetch(ENDPOINT, payload);
+        const data = await response.json();
+        if (data && data.candidates && data.candidates[0].content && data.candidates[0].content.parts && data.candidates[0].content.parts[0].text) {
+            novelContent2.value += data.candidates[0].content.parts[0].text;
+            novelContent2.scrollTop = novelContent2.scrollHeight;
+            updateRequestButtonState('idle', 'green-flash-bg');
+        } else {
+            throw new Error('予期しないレスポンス形式');
+        }
+    } catch (error) {
+        console.error('エラー:', error);
+        updateRequestButtonState('error', 'red-flash-bg');
+    }
 }
 
 function createOpenAIPayload() {
@@ -464,7 +494,7 @@ function createOpenAIPayload() {
 
 function fetchOpenAIStream(ENDPOINT, payload) {
     const novelContent2 = document.getElementById('novelContent2');
-    const requestButton = document.getElementById('requestButton');
+    updateRequestButtonState('generating');
     controller = new AbortController();
     const signal = controller.signal;
 
@@ -520,11 +550,11 @@ function fetchOpenAIStream(ENDPOINT, payload) {
                 }).catch(error => {
                     if (error.name === 'AbortError') {
                         console.log('フェッチがユーザーによって中止されました');
+                        updateRequestButtonState('idle');
                     } else {
                         console.error('ストリーム読み取りエラー:', error);
+                        updateRequestButtonState('error', 'red-flash-bg');
                     }
-                    document.getElementById('stopButton').classList.add('d-none');
-                    requestButton.disabled = false;
                 });
             }
 
@@ -533,33 +563,35 @@ function fetchOpenAIStream(ENDPOINT, payload) {
         .catch(error => {
             if (error.name === 'AbortError') {
                 console.log('フェッチがユーザーよって中止されました');
+                updateRequestButtonState('idle');
             } else {
                 console.error('フェッチエラー:', error);
+                updateRequestButtonState('error', 'red-flash-bg');
             }
-            requestButton.disabled = false;
         });
 }
 
-function fetchOpenAINonStream(ENDPOINT, payload) {
+async function fetchOpenAINonStream(ENDPOINT, payload) {
     const novelContent2 = document.getElementById('novelContent2');
-    fetch(ENDPOINT, {
-        ...payload,
-        mode: 'cors',  // CORSモードを追加
-        credentials: 'same-origin'  // 必要に応じて認証情報を含める
-    })
-        .then(response => response.json())
-        .then(data => {
-            if (data && data.choices && data.choices[0].message && data.choices[0].message.content) {
-                novelContent2.value += data.choices[0].message.content;
-                novelContent2.scrollTop = novelContent2.scrollHeight;
-            }
-        })
-        .catch(error => {
-            console.error('エラー:', error);
-        })
-        .finally(() => {
-            document.getElementById('requestButton').disabled = false;
+    updateRequestButtonState('generating');
+    try {
+        const response = await fetch(ENDPOINT, {
+            ...payload,
+            mode: 'cors',
+            credentials: 'same-origin'
         });
+        const data = await response.json();
+        if (data && data.choices && data.choices[0].message && data.choices[0].message.content) {
+            novelContent2.value += data.choices[0].message.content;
+            novelContent2.scrollTop = novelContent2.scrollHeight;
+            updateRequestButtonState('idle', 'green-flash-bg');
+        } else {
+            throw new Error('予期しないレスポンス形式');
+        }
+    } catch (error) {
+        console.error('エラー:', error);
+        updateRequestButtonState('error', 'red-flash-bg');
+    }
 }
 
 async function tokenCount() {
@@ -693,8 +725,7 @@ function stopGeneration() {
         controller.abort();
         controller = null;
     }
-    document.getElementById('stopButton').classList.add('d-none');
-    document.getElementById('requestButton').disabled = false;
+    updateRequestButtonState('idle');
 }
 
 // 新しい関数を追加