Update src/addons/addons/save-to-google/userscript.js

src/addons/addons/save-to-google/userscript.js

@@ -1,7 +1,6 @@
 import SB3Downloader from "/src/containers/sb3-downloader.jsx";
 import { getProjectFilename } from '/src/containers/sb3-downloader.jsx';
 
-// サムネイル取得関数
 const getProjectThumbnail = () => new Promise(resolve => {
     window.vm.renderer.requestSnapshot(uri => {
         resolve(uri);
@@ -62,75 +61,67 @@ export default async ({ addon, console, msg }) => {
         const projectTitle = modal.content.querySelector("#project-title");
 
         // プロジェクトタイトルの編集機能
-        if (projectTitle) {
-            projectTitle.addEventListener("dblclick", () => {
-                const currentName = projectTitle.textContent;
-                const input = document.createElement("input");
-                input.type = "text";
-                input.value = currentName;
-                input.style.width = "200px";
-                
-                projectTitle.replaceWith(input);
-                input.focus();
-
-                const handleBlur = () => {
-                    const newName = input.value.trim() || "無題";
-                    window.vm.runtime.projectName = newName;
-                    projectTitle.textContent = newName;
-                    input.replaceWith(projectTitle);
-                };
+        projectTitle?.addEventListener("dblclick", () => {
+            const currentName = projectTitle.textContent;
+            const input = document.createElement("input");
+            input.type = "text";
+            input.value = currentName;
+            input.style.width = "200px";
+            
+            projectTitle.replaceWith(input);
+            input.focus();
+
+            const handleBlur = () => {
+                const newName = input.value.trim() || "無題";
+                window.vm.runtime.projectName = newName;
+                projectTitle.textContent = newName;
+                input.replaceWith(projectTitle);
+            };
 
-                input.addEventListener("blur", handleBlur);
-                input.addEventListener("keypress", (e) => {
-                    if (e.key === "Enter") {
-                        handleBlur();
-                    }
-                });
+            input.addEventListener("blur", handleBlur);
+            input.addEventListener("keypress", (e) => {
+                if (e.key === "Enter") handleBlur();
             });
-        }
-
-        if (loginButton) {
-            loginButton.addEventListener("click", () => {
-                const messageListener = (event) => {
-                    if (event.origin === "https://soiz1-penguin-upload.hf.space" && event.data.token) {
-                        window.removeEventListener("message", messageListener);
-                        accessToken = event.data.token;
-                        
-                        loginButton.style.display = "none";
-                        
-                        fetchDriveFiles(accessToken)
-                            .then(files => {
-                                displayFileList(files, accessToken, modal, addon);
-                                fileListContainer.style.display = "block";
-                            })
-                            .catch(error => {
-                                console.error("ファイル一覧取得エラー:", error);
-                                showAlert(addon, "error", "ファイル一覧の取得に失敗しました");
-                            });
-                    }
-                };
-                window.addEventListener("message", messageListener);
-
-                const authUrl = `https://accounts.google.com/o/oauth2/auth?` +
-                    `client_id=${CLIENT_ID}` +
-                    `&redirect_uri=${encodeURIComponent(REDIRECT_URI)}` +
-                    `&response_type=token` +
-                    `&scope=${encodeURIComponent(SCOPES)}`;
-                
-                window.open(authUrl, "_blank", "width=500,height=600");
-            });
-        }
+        });
 
-        if (newFileButton) {
-            newFileButton.addEventListener("click", async () => {
-                try {
-                    await saveToGoogleDrive(null, null, modal.remove, addon);
-                } catch (error) {
-                    console.error("新規保存エラー:", error);
-                    showAlert(addon, "error", "新規保存に失敗しました");
+        loginButton?.addEventListener("click", () => {
+            const messageListener = (event) => {
+                if (event.origin === "https://soiz1-penguin-upload.hf.space" && event.data.token) {
+                    window.removeEventListener("message", messageListener);
+                    accessToken = event.data.token;
+                    
+                    loginButton.style.display = "none";
+                    
+                    fetchDriveFiles(accessToken)
+                        .then(files => {
+                            displayFileList(files, accessToken, modal, addon);
+                            fileListContainer.style.display = "block";
+                        })
+                        .catch(error => {
+                            console.error("ファイル一覧取得エラー:", error);
+                            showAlert(addon, "error", "ファイル一覧の取得に失敗しました");
+                        });
                 }
-            });
-        }
+            };
+            window.addEventListener("message", messageListener);
+
+            const authUrl = `https://accounts.google.com/o/oauth2/auth?` +
+                `client_id=${CLIENT_ID}` +
+                `&redirect_uri=${encodeURIComponent(REDIRECT_URI)}` +
+                `&response_type=token` +
+                `&scope=${encodeURIComponent(SCOPES)}`;
+            
+            window.open(authUrl, "_blank", "width=500,height=600");
+        });
+
+        newFileButton?.addEventListener("click", async () => {
+            try {
+                await saveToGoogleDrive(null, null, modal.remove, addon);
+            } catch (error) {
+                console.error("新規保存エラー:", error);
+                showAlert(addon, "error", "新規保存に失敗しました");
+            }
+        });
 
         modal.backdrop.addEventListener("click", modal.remove);
         modal.closeButton.addEventListener("click", modal.remove);
@@ -160,7 +151,7 @@ export default async ({ addon, console, msg }) => {
         const thumbnailFiles = files.filter(file => file.mimeType === 'image/png');
 
         if (projectFiles.length === 0) {
-            fileList.innerHTML = "<p>保存されたファイルが見つかりません</p>";
+            fileList.innerHTML = "<p style='grid-column: 1 / -1; text-align: center;'>保存されたファイルが見つかりません</p>";
             return;
         }
 
@@ -176,30 +167,35 @@ export default async ({ addon, console, msg }) => {
             fileItem.style.padding = "1rem";
             fileItem.style.display = "flex";
             fileItem.style.flexDirection = "column";
-            fileItem.style.gap = "0.5rem";
+            fileItem.style.gap = "0.75rem";
+            fileItem.style.background = "#fff";
 
             // サムネイル表示
+            const thumbnailContainer = document.createElement("div");
+            thumbnailContainer.style.position = "relative";
+            thumbnailContainer.style.aspectRatio = "4/3";
+            
             if (thumbnail) {
                 const thumbnailImg = document.createElement("img");
                 thumbnailImg.src = `https://drive.google.com/thumbnail?id=${thumbnail.id}&sz=w300`;
                 thumbnailImg.style.width = "100%";
-                thumbnailImg.style.height = "auto";
+                thumbnailImg.style.height = "100%";
                 thumbnailImg.style.borderRadius = "4px";
                 thumbnailImg.style.objectFit = "cover";
-                thumbnailImg.style.aspectRatio = "4/3";
-                fileItem.appendChild(thumbnailImg);
+                thumbnailContainer.appendChild(thumbnailImg);
             } else {
                 const thumbnailPlaceholder = document.createElement("div");
                 thumbnailPlaceholder.style.width = "100%";
-                thumbnailPlaceholder.style.height = "150px";
+                thumbnailPlaceholder.style.height = "100%";
                 thumbnailPlaceholder.style.backgroundColor = "#f0f0f0";
                 thumbnailPlaceholder.style.display = "flex";
                 thumbnailPlaceholder.style.alignItems = "center";
                 thumbnailPlaceholder.style.justifyContent = "center";
                 thumbnailPlaceholder.style.borderRadius = "4px";
                 thumbnailPlaceholder.textContent = "サムネイルなし";
-                fileItem.appendChild(thumbnailPlaceholder);
+                thumbnailContainer.appendChild(thumbnailPlaceholder);
             }
+            fileItem.appendChild(thumbnailContainer);
 
             // プロジェクト名
             const fileName = document.createElement("h3");
@@ -207,6 +203,7 @@ export default async ({ addon, console, msg }) => {
             fileName.style.margin = "0";
             fileName.style.fontSize = "1rem";
             fileName.style.textAlign = "center";
+            fileName.style.fontWeight = "bold";
             fileItem.appendChild(fileName);
 
             // 共有リンク
@@ -222,6 +219,7 @@ export default async ({ addon, console, msg }) => {
             link.target = "_blank";
             link.rel = "noopener noreferrer";
             link.style.fontSize = "0.9em";
+            link.style.color = "#4d97ff";
 
             const copyButton = document.createElement("button");
             copyButton.textContent = "コピー";
@@ -242,14 +240,14 @@ export default async ({ addon, console, msg }) => {
 
             // 操作ボタン
             const buttonContainer = document.createElement("div");
-            buttonContainer.style.display = "flex";
+            buttonContainer.style.display = "grid";
+            buttonContainer.style.gridTemplateColumns = "1fr 1fr";
             buttonContainer.style.gap = "0.5rem";
-            buttonContainer.style.justifyContent = "center";
 
             const loadButton = document.createElement("button");
             loadButton.textContent = "読み込む";
             loadButton.className = "button";
-            loadButton.style.flex = "1";
+            loadButton.style.width = "100%";
 
             loadButton.addEventListener("click", (e) => {
                 e.stopPropagation();
@@ -262,13 +260,12 @@ export default async ({ addon, console, msg }) => {
             const replaceButton = document.createElement("button");
             replaceButton.textContent = "上書き";
             replaceButton.className = "button";
-            replaceButton.style.flex = "1";
+            replaceButton.style.width = "100%";
 
             replaceButton.addEventListener("click", (e) => {
                 e.stopPropagation();
                 if (confirm(`"${project.name}"を現在のプロジェクトで上書きしますか？`)) {
                     saveToGoogleDrive(project.id, project.name, () => {
-                        // モーダルを閉じずにリストを更新
                         fetchDriveFiles(accessToken)
                             .then(files => displayFileList(files, accessToken, modal, addon))
                             .catch(error => console.error("更新エラー:", error));
@@ -283,7 +280,8 @@ export default async ({ addon, console, msg }) => {
             const deleteButton = document.createElement("button");
             deleteButton.textContent = "削除";
             deleteButton.className = "button";
-            deleteButton.style.flex = "1";
+            deleteButton.style.width = "100%";
+            deleteButton.style.gridColumn = "1 / -1";
             deleteButton.style.backgroundColor = "#ff4444";
             deleteButton.style.color = "white";
 
@@ -372,7 +370,6 @@ export default async ({ addon, console, msg }) => {
             }
 
             const fileData = await uploadResponse.json();
-            console.log("プロジェクトファイルがGoogleドライブに保存/更新されました:", fileData);
 
             // サムネイルを保存
             try {
@@ -383,7 +380,6 @@ export default async ({ addon, console, msg }) => {
                     mimeType: "image/png",
                 };
 
-                // 既存のサムネイルを探す
                 const existingThumbnailResponse = await fetch(
                     `https://www.googleapis.com/drive/v3/files?q=name='${thumbnailMetadata.name}'`,
                     {
@@ -413,15 +409,12 @@ export default async ({ addon, console, msg }) => {
                     },
                     body: thumbnailForm,
                 });
-
-                console.log("サムネイルがGoogleドライブに保存/更新されました");
             } catch (thumbnailError) {
-                console.warn("サムネイルの保存に失敗しましたが、プロジェクトは保存されました:", thumbnailError);
+                console.warn("サムネイルの保存に失敗しました:", thumbnailError);
             }
 
             if (!fileId) {
-                // 新規保存の場合、公開設定
-                const permissionResponse = await fetch(`https://www.googleapis.com/drive/v3/files/${fileData.id}/permissions`, {
+                await fetch(`https://www.googleapis.com/drive/v3/files/${fileData.id}/permissions`, {
                     method: "POST",
                     headers: {
                         Authorization: `Bearer ${accessToken}`,
@@ -432,14 +425,9 @@ export default async ({ addon, console, msg }) => {
                         type: "anyone",
                     }),
                 });
-
-                if (!permissionResponse.ok) {
-                    console.warn("権限の設定に失敗しましたが、ファイルは保存されました");
-                }
             }
 
-            const action = fileId ? "上書き保存" : "新規保存";
-            showAlert(addon, "success", `Googleドライブに${action}しました`);
+            showAlert(addon, "success", fileId ? "上書き保存しました" : "新規保存しました");
             if (onSuccess) onSuccess();
         } catch (error) {
             console.error("保存エラー:", error);