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

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

@@ -1,7 +1,7 @@
 import SB3Downloader from "/src/containers/sb3-downloader.jsx";
 import { getProjectFilename } from '/src/containers/sb3-downloader.jsx';
 
-// getProjectThumbnail関数を追加
+// サムネイル取得関数
 const getProjectThumbnail = () => new Promise(resolve => {
     window.vm.renderer.requestSnapshot(uri => {
         resolve(uri);
@@ -50,7 +50,7 @@ export default async ({ addon, console, msg }) => {
                         <h2 style="margin: 0;">プロジェクト: <span id="project-title" style="cursor: pointer; border-bottom: 1px dashed #000;">${window.vm.runtime.projectName || "無題"}</span></h2>
                         <button id="new-file-button" class="button">新規保存</button>
                     </div>
-                    <div id="file-list" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; margin-top: 1rem;"></div>
+                    <div id="file-list" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; margin-top: 1rem;"></div>
                 </div>
             </div>
         `;
@@ -122,12 +122,13 @@ export default async ({ addon, console, msg }) => {
         }
 
         if (newFileButton) {
-            newFileButton.addEventListener("click", () => {
-                saveToGoogleDrive(null, null, modal.remove, addon)
-                    .catch(error => {
-                        console.error("新規保存エラー:", error);
-                        showAlert(addon, "error", "新規保存に失敗しました");
-                    });
+            newFileButton.addEventListener("click", async () => {
+                try {
+                    await saveToGoogleDrive(null, null, modal.remove, addon);
+                } catch (error) {
+                    console.error("新規保存エラー:", error);
+                    showAlert(addon, "error", "新規保存に失敗しました");
+                }
             });
         }
 
@@ -136,7 +137,7 @@ export default async ({ addon, console, msg }) => {
     }
 
     async function fetchDriveFiles(accessToken) {
-        const response = await fetch("https://www.googleapis.com/drive/v3/files?q=mimeType='application/x-scratch'", {
+        const response = await fetch("https://www.googleapis.com/drive/v3/files?q=(mimeType='application/x-scratch' or mimeType='image/png')", {
             headers: {
                 Authorization: `Bearer ${accessToken}`,
             },
@@ -150,16 +151,25 @@ export default async ({ addon, console, msg }) => {
         return data.files || [];
     }
 
-    async function displayFileList(files, accessToken, modal, addon) {
+    function displayFileList(files, accessToken, modal, addon) {
         const fileList = modal.content.querySelector("#file-list");
         fileList.innerHTML = "";
 
-        if (files.length === 0) {
+        // プロジェクトファイルとサムネイルを関連付ける
+        const projectFiles = files.filter(file => file.mimeType === 'application/x-scratch');
+        const thumbnailFiles = files.filter(file => file.mimeType === 'image/png');
+
+        if (projectFiles.length === 0) {
             fileList.innerHTML = "<p>保存されたファイルが見つかりません</p>";
             return;
         }
 
-        for (const file of files) {
+        projectFiles.forEach(project => {
+            // 対応するサムネイルを探す
+            const thumbnail = thumbnailFiles.find(
+                thumb => thumb.name === `Penguin-Thumbnail-${project.id}.png`
+            );
+
             const fileItem = document.createElement("div");
             fileItem.style.border = "1px solid #ddd";
             fileItem.style.borderRadius = "8px";
@@ -168,44 +178,50 @@ export default async ({ addon, console, msg }) => {
             fileItem.style.flexDirection = "column";
             fileItem.style.gap = "0.5rem";
 
-            // サムネイル画像を取得して表示
-            try {
-                const thumbnailUrl = await getThumbnailForFile(file.id, accessToken);
-                if (thumbnailUrl) {
-                    const thumbnail = document.createElement("img");
-                    thumbnail.src = thumbnailUrl;
-                    thumbnail.style.width = "100%";
-                    thumbnail.style.height = "auto";
-                    thumbnail.style.borderRadius = "4px";
-                    thumbnail.style.objectFit = "cover";
-                    thumbnail.style.aspectRatio = "4/3";
-                    fileItem.appendChild(thumbnail);
-                }
-            } catch (error) {
-                console.error("サムネイル取得エラー:", error);
+            // サムネイル表示
+            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.borderRadius = "4px";
+                thumbnailImg.style.objectFit = "cover";
+                thumbnailImg.style.aspectRatio = "4/3";
+                fileItem.appendChild(thumbnailImg);
+            } else {
+                const thumbnailPlaceholder = document.createElement("div");
+                thumbnailPlaceholder.style.width = "100%";
+                thumbnailPlaceholder.style.height = "150px";
+                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);
             }
 
-            const fileName = document.createElement("div");
-            fileName.textContent = file.name.replace('.sb3.txt', '');
-            fileName.style.fontWeight = "bold";
+            // プロジェクト名
+            const fileName = document.createElement("h3");
+            fileName.textContent = project.name.replace('.sb3.txt', '');
+            fileName.style.margin = "0";
+            fileName.style.fontSize = "1rem";
             fileName.style.textAlign = "center";
             fileItem.appendChild(fileName);
 
-            // 短縮URL表示
-            const shortUrl = `${SHORT_URL}${file.id}`;
-            const urlContainer = document.createElement("div");
-            urlContainer.style.display = "flex";
-            urlContainer.style.gap = "0.5rem";
-            urlContainer.style.alignItems = "center";
-            urlContainer.style.fontSize = "0.8em";
-
-            const urlInput = document.createElement("input");
-            urlInput.type = "text";
-            urlInput.value = shortUrl;
-            urlInput.readOnly = true;
-            urlInput.style.flexGrow = "1";
-            urlInput.style.padding = "0.2rem";
-            urlInput.style.fontSize = "0.8em";
+            // 共有リンク
+            const linkContainer = document.createElement("div");
+            linkContainer.style.display = "flex";
+            linkContainer.style.gap = "0.5rem";
+            linkContainer.style.alignItems = "center";
+            linkContainer.style.justifyContent = "center";
+
+            const link = document.createElement("a");
+            link.href = `${SHORT_URL}${project.id}`;
+            link.textContent = "共有リンク";
+            link.target = "_blank";
+            link.rel = "noopener noreferrer";
+            link.style.fontSize = "0.9em";
 
             const copyButton = document.createElement("button");
             copyButton.textContent = "コピー";
@@ -213,32 +229,32 @@ export default async ({ addon, console, msg }) => {
             copyButton.style.fontSize = "0.8em";
             copyButton.style.padding = "0.2rem 0.5rem";
 
-            copyButton.addEventListener("click", () => {
-                urlInput.select();
-                document.execCommand("copy");
-                showAlert(addon, "success", "リンクをクリップボードにコピーしました");
+            copyButton.addEventListener("click", (e) => {
+                e.stopPropagation();
+                navigator.clipboard.writeText(`${SHORT_URL}${project.id}`)
+                    .then(() => showAlert(addon, "success", "リンクをクリップボードにコピーしました"))
+                    .catch(() => showAlert(addon, "error", "リンクのコピーに失敗しました"));
             });
 
-            urlContainer.appendChild(urlInput);
-            urlContainer.appendChild(copyButton);
-            fileItem.appendChild(urlContainer);
+            linkContainer.appendChild(link);
+            linkContainer.appendChild(copyButton);
+            fileItem.appendChild(linkContainer);
 
             // 操作ボタン
-            const buttonsContainer = document.createElement("div");
-            buttonsContainer.style.display = "grid";
-            buttonsContainer.style.gridTemplateColumns = "1fr 1fr";
-            buttonsContainer.style.gap = "0.5rem";
-            buttonsContainer.style.marginTop = "0.5rem";
+            const buttonContainer = document.createElement("div");
+            buttonContainer.style.display = "flex";
+            buttonContainer.style.gap = "0.5rem";
+            buttonContainer.style.justifyContent = "center";
 
             const loadButton = document.createElement("button");
             loadButton.textContent = "読み込む";
             loadButton.className = "button";
-            loadButton.style.fontSize = "0.8em";
-            loadButton.style.padding = "0.3rem";
+            loadButton.style.flex = "1";
 
-            loadButton.addEventListener("click", () => {
-                if (confirm(`"${file.name}"を読み込みますか？現在のプロジェクトは失われます。`)) {
-                    const url = `${PROXY_URL}${file.id}`;
+            loadButton.addEventListener("click", (e) => {
+                e.stopPropagation();
+                if (confirm(`"${project.name}"を読み込みますか？現在のプロジェクトは失われます。`)) {
+                    const url = `${PROXY_URL}${project.id}`;
                     window.location.href = `?project_url=${encodeURIComponent(url)}`;
                 }
             });
@@ -246,71 +262,66 @@ export default async ({ addon, console, msg }) => {
             const replaceButton = document.createElement("button");
             replaceButton.textContent = "上書き";
             replaceButton.className = "button";
-            replaceButton.style.fontSize = "0.8em";
-            replaceButton.style.padding = "0.3rem";
+            replaceButton.style.flex = "1";
 
-            replaceButton.addEventListener("click", () => {
-                if (confirm(`"${file.name}"を現在のプロジェクトで上書きしますか？`)) {
-                    saveToGoogleDrive(file.id, file.name, () => {
-                        // 上書き後にファイルリストを更新
+            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));
-                    }, addon);
+                    }, addon)
+                    .catch(error => {
+                        console.error("ファイル上書きエラー:", error);
+                        showAlert(addon, "error", "ファイルの上書きに失敗しました");
+                    });
                 }
             });
 
             const deleteButton = document.createElement("button");
             deleteButton.textContent = "削除";
             deleteButton.className = "button";
-            deleteButton.style.fontSize = "0.8em";
-            deleteButton.style.padding = "0.3rem";
-            deleteButton.style.gridColumn = "1 / -1";
+            deleteButton.style.flex = "1";
             deleteButton.style.backgroundColor = "#ff4444";
             deleteButton.style.color = "white";
 
-            deleteButton.addEventListener("click", () => {
-                if (confirm(`"${file.name}"を完全に削除しますか？この操作は元に戻せません。`)) {
-                    deleteFile(file.id, accessToken)
-                        .then(() => {
-                            showAlert(addon, "success", "ファイルを削除しました");
-                            return fetchDriveFiles(accessToken);
-                        })
-                        .then(files => displayFileList(files, accessToken, modal, addon))
-                        .catch(error => {
-                            console.error("削除エラー:", error);
-                            showAlert(addon, "error", "ファイルの削除に失敗しました");
-                        });
+            deleteButton.addEventListener("click", async (e) => {
+                e.stopPropagation();
+                if (confirm(`"${project.name}"とそのサムネイルを完全に削除しますか？この操作は元に戻せません。`)) {
+                    try {
+                        // プロジェクトファイルを削除
+                        await deleteFile(project.id, accessToken);
+                        
+                        // 対応するサムネイルを探して削除
+                        const thumbnailToDelete = thumbnailFiles.find(
+                            thumb => thumb.name === `Penguin-Thumbnail-${project.id}.png`
+                        );
+                        
+                        if (thumbnailToDelete) {
+                            await deleteFile(thumbnailToDelete.id, accessToken);
+                        }
+                        
+                        showAlert(addon, "success", "ファイルを削除しました");
+                        // リストを更新
+                        fetchDriveFiles(accessToken)
+                            .then(files => displayFileList(files, accessToken, modal, addon))
+                            .catch(error => console.error("更新エラー:", error));
+                    } catch (error) {
+                        console.error("削除エラー:", error);
+                        showAlert(addon, "error", "ファイルの削除に失敗しました");
+                    }
                 }
             });
 
-            buttonsContainer.appendChild(loadButton);
-            buttonsContainer.appendChild(replaceButton);
-            buttonsContainer.appendChild(deleteButton);
-            fileItem.appendChild(buttonsContainer);
+            buttonContainer.appendChild(loadButton);
+            buttonContainer.appendChild(replaceButton);
+            buttonContainer.appendChild(deleteButton);
+            fileItem.appendChild(buttonContainer);
 
             fileList.appendChild(fileItem);
-        }
-    }
-
-    async function getThumbnailForFile(fileId, accessToken) {
-        try {
-            const response = await fetch(`https://www.googleapis.com/drive/v3/files/${fileId}?fields=thumbnailLink`, {
-                headers: {
-                    Authorization: `Bearer ${accessToken}`,
-                },
-            });
-
-            if (!response.ok) {
-                throw new Error(await response.text());
-            }
-
-            const data = await response.json();
-            return data.thumbnailLink || null;
-        } catch (error) {
-            console.error("サムネイル取得エラー:", error);
-            return null;
-        }
+        });
     }
 
     async function deleteFile(fileId, accessToken) {
@@ -328,6 +339,7 @@ export default async ({ addon, console, msg }) => {
 
     async function saveToGoogleDrive(fileId, fileName, onSuccess, addon) {
         try {
+            // プロジェクトを保存
             const blob = await window.vm.saveProjectSb3();
             const projectName = window.vm.runtime.projectName || getProjectFilename || "無題";
             const nameToUse = fileName || `${projectName}.sb3.txt`;
@@ -360,9 +372,55 @@ export default async ({ addon, console, msg }) => {
             }
 
             const fileData = await uploadResponse.json();
-            console.log("ファイルがGoogleドライブに保存/更新されました:", fileData);
+            console.log("プロジェクトファイルがGoogleドライブに保存/更新されました:", fileData);
+
+            // サムネイルを保存
+            try {
+                const thumbnailDataUrl = await getProjectThumbnail();
+                const thumbnailBlob = await (await fetch(thumbnailDataUrl)).blob();
+                const thumbnailMetadata = {
+                    name: `Penguin-Thumbnail-${fileData.id}.png`,
+                    mimeType: "image/png",
+                };
+
+                // 既存のサムネイルを探す
+                const existingThumbnailResponse = await fetch(
+                    `https://www.googleapis.com/drive/v3/files?q=name='${thumbnailMetadata.name}'`,
+                    {
+                        headers: {
+                            Authorization: `Bearer ${accessToken}`,
+                        },
+                    }
+                );
+
+                const existingThumbnailData = await existingThumbnailResponse.json();
+                const thumbnailFileId = existingThumbnailData.files?.[0]?.id;
+
+                const thumbnailUrl = thumbnailFileId
+                    ? `https://www.googleapis.com/upload/drive/v3/files/${thumbnailFileId}?uploadType=multipart`
+                    : "https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart";
+
+                const thumbnailForm = new FormData();
+                thumbnailForm.append("metadata", new Blob([JSON.stringify(thumbnailMetadata)], { type: "application/json" }));
+                thumbnailForm.append("file", thumbnailBlob);
+
+                const thumbnailMethod = thumbnailFileId ? "PATCH" : "POST";
+
+                await fetch(thumbnailUrl, {
+                    method: thumbnailMethod,
+                    headers: {
+                        Authorization: `Bearer ${accessToken}`,
+                    },
+                    body: thumbnailForm,
+                });
+
+                console.log("サムネイルがGoogleドライブに保存/更新されました");
+            } catch (thumbnailError) {
+                console.warn("サムネイルの保存に失敗しましたが、プロジェクトは保存されました:", thumbnailError);
+            }
 
             if (!fileId) {
+                // 新規保存の場合、公開設定
                 const permissionResponse = await fetch(`https://www.googleapis.com/drive/v3/files/${fileData.id}/permissions`, {
                     method: "POST",
                     headers: {