function MainComponent() { const MAX_FILE_SIZE = 10 * 1024 * 1024; const ACCEPTED_TYPES = [ "image/jpeg", "image/png", "image/gif", "image/webp" ]; const [error, setError] = useState(null); const [upload, { loading }] = useUpload(); const [file, setFile] = useState(null); const [imageUrl, setImageUrl] = useState(null); const [qrCode, setQrCode] = useState(null); const [isDragging, setIsDragging] = useState(false); const [selectedImages, setSelectedImages] = useState([]); const [errorDetails, setErrorDetails] = useState(null); const [validationMessage, setValidationMessage] = useState(""); const [zipProgress, setZipProgress] = useState(0); const [retryCount, setRetryCount] = useState(0); const generateQR = (url)=>{ if (window.QRious) { const qr = new window.QRious({ value: url, size: 250, level: "H" }); return qr.toDataURL(); } return null; }; const handleDrag = (e)=>{ e.preventDefault(); e.stopPropagation(); }; const handleDragIn = (e)=>{ e.preventDefault(); e.stopPropagation(); setIsDragging(true); }; const handleDragOut = (e)=>{ e.preventDefault(); e.stopPropagation(); setIsDragging(false); }; const handleDrop = (e)=>{ e.preventDefault(); e.stopPropagation(); setIsDragging(false); setValidationMessage(""); const file = e.dataTransfer.files?.[0]; if (file) { if (!ACCEPTED_TYPES.includes(file.type)) { setError("対応していないファイル形式です。JPG、PNG、GIF、WEBPのみ対応しています。"); return; } if (file.size > MAX_FILE_SIZE) { setError(`ファイルサイズが大きすぎます。${(MAX_FILE_SIZE / (1024 * 1024)).toFixed(0)}MB以下にしてください。`); return; } setFile(file); setError(null); } }; const [uploadedImages, setUploadedImages] = useState([]); const [zipUrl, setZipUrl] = useState(null); const [zipQrCode, setZipQrCode] = useState(null); const [isCreatingZip, setIsCreatingZip] = useState(false); const handleCreateZip = async (selectedUrls)=>{ setIsCreatingZip(true); setError(null); setErrorDetails(null); setZipProgress(0); if (!selectedUrls?.length) { setError("画像が選択されていません。少なくとも1枚の画像を選択してください。"); setIsCreatingZip(false); return; } try { const validUrls = selectedUrls.filter((url)=>url?.startsWith("http")); if (!validUrls.length) { throw new Error("有効な画像URLが見つかりませんでした。選択した画像を確認してください。"); } if (validUrls.length > 100) { throw new Error("一度に処理できる画像は100枚までです。画像の数を減らしてください。"); } const controller = new AbortController(); const timeoutId = setTimeout(()=>controller.abort(), 30000); try { const response = await fetch("/api/create-zip", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ urls: validUrls }), signal: controller.signal }); clearTimeout(timeoutId); if (!response.ok) { const errorMap = { 404: "サーバーが見つかりません。システム管理者に連絡してください。", 429: "アクセスが集中しています。5-10分後に再度お試しください。", 500: "サーバーで予期せぬエラーが発生しました。しばらく待ってから再度お試しください。問題が続く場合は管理者に連絡してください。", 503: "サービスが一時的に利用できません。メンテナンス中か、サーバーに負荷がかかっている可能性があります。", 502: "サーバーが正常に応答できません。一時的な問題の可能性があります。しばらく待ってから再度お試しください。", 401: "認証が必要です。ログインしてから再度お試しください。", 403: "アクセス権限がありません。ログインが必要な場合は、再度ログインしてからお試しください。" }; throw new Error(`${errorMap[response.status] || "予期せぬエラーが発生しました。時間をおいて再度お試しください。"} (${response.status})`); } const data = await response.json(); if (data.error) { throw new Error(data.error); } if (!data.url) { throw new Error("ZIPファイルの生成に失敗しました。サーバーの負荷が高いため、しばらく時間をおいてから再度お試しください。"); } if (data.summary) { const { total, success, failed, failedUrls, uploadFailures, serverMetrics } = data.summary; const progress = Math.round(success / total * 100); setZipProgress(progress); if (failed > 0 || uploadFailures?.length) { const failureReasons = {}; failedUrls?.forEach(({ reason })=>{ failureReasons[reason] = (failureReasons[reason] || 0) + 1; }); const details = [ `・処理成功: ${success}枚`, `・処理失敗: ${failed}枚`, ...Object.entries(failureReasons).map(([reason, count])=>`・${reason} (${count}枚)`), ...uploadFailures?.map((f)=>`・バッチ${f.batch}の処理中にエラーが発生: ${f.error}`) || [] ]; if (serverMetrics?.cpuUsage > 80) { details.push("・サーバーの負荷が非常に高くなっています。処理速度が低下する可能性があります。"); } setError(`${total}枚中${success}枚の処理が完了しました。残りの画像の処理に失敗しました。`); setErrorDetails(details); setRetryCount((prev)=>prev + 1); } } setZipUrl(data.url); setZipQrCode(generateQR(data.url)); const link = document.createElement("a"); link.href = data.url; link.download = `images_${new Date().toISOString().split("T")[0]}.zip`; document.body.appendChild(link); link.click(); document.body.removeChild(link); } catch (fetchError) { if (fetchError.name === "AbortError") { throw new Error("タイムアウトが発生しました：サーバーからの応答に時間がかかりすぎています。ネットワーク接続を確認し、時間をおいて再度お試しください。"); } throw fetchError; } } catch (err) { console.error("ZIP作成エラー:", err); setError(err.message); if (retryCount >= 3) { setErrorDetails([ "複数回の試行が失敗しました。", "サーバーの状態が不安定になっている可能性があります。", "5-10分程度時間をおいてから再度お試しください。", "処理は30秒でタイムアウトします。その場合は、より少ない枚数で試してください。", "問題が解決しない場合は、システム管理者にお問い合わせください。" ]); } } finally{ if (!error) { setZipProgress(0); } setIsCreatingZip(false); } }; useEffect(()=>{ const script = document.createElement("script"); script.src = "https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"; script.async = true; document.body.appendChild(script); return ()=>{ document.body.removeChild(script); }; }, []); useEffect(()=>{ fetch("/api/db/temp-47", { method: "POST", body: JSON.stringify({ query: "SELECT * FROM `image_uploads`" }) }).then((res)=>res.json()).then((data)=>setUploadedImages(data)); }, []); const onSubmit = useCallback(async ()=>{ if (!file) return; setError(null); try { const { url, error } = await upload({ file }); if (error) throw new Error(error); const response = await fetch("/api/db/temp-47", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `image_uploads` (`url`) VALUES (?)", values: [ url ] }) }); if (!response.ok) throw new Error("データベースエラー"); setImageUrl(url); setQrCode(generateQR(url)); setUploadedImages((prev)=>[ ...prev, { url } ]); } catch (err) { setError("アップロード中にエラーが発生しました"); } }, [ file, upload ]); const clearUpload = ()=>{ setFile(null); setImageUrl(null); setQrCode(null); setError(null); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 py-12 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 272, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 273, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center mb-8 font-roboto text-gray-800", __source: { fileName: "", lineNumber: 274, columnNumber: 9 }, __self: this }, "画像アップロードツール"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 278, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-md p-6", __source: { fileName: "", lineNumber: 279, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { onDragOver: handleDrag, onDragEnter: handleDragIn, onDragLeave: handleDragOut, onDrop: handleDrop, className: `border-2 border-dashed rounded-lg p-8 text-center transition-all ${isDragging ? "border-blue-500 bg-blue-50" : "border-gray-300 hover:border-blue-400"}`, __source: { fileName: "", lineNumber: 280, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cloud-upload-alt text-4xl text-gray-400 mb-4", __source: { fileName: "", lineNumber: 291, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-4", __source: { fileName: "", lineNumber: 292, columnNumber: 15 }, __self: this }, "ここに画像をドラッグ＆ドロップ"), /*#__PURE__*/ React.createElement("input", { type: "file", accept: ACCEPTED_TYPES.join(","), onChange: (e)=>e.target.files?.[0] && handleDrop({ dataTransfer: { files: e.target.files }, preventDefault: ()=>{}, stopPropagation: ()=>{} }), className: "hidden", id: "fileInput", __source: { fileName: "", lineNumber: 295, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "fileInput", className: "inline-block px-4 py-2 bg-blue-500 text-white rounded-lg cursor-pointer hover:bg-blue-600 transition-colors", __source: { fileName: "", lineNumber: 309, columnNumber: 15 }, __self: this }, "または画像を選択")), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-red-50 border border-red-200 rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 318, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 319, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle text-red-500 mr-2", __source: { fileName: "", lineNumber: 320, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-red-700 font-medium", __source: { fileName: "", lineNumber: 321, columnNumber: 19 }, __self: this }, error)), errorDetails && /*#__PURE__*/ React.createElement("div", { className: "mt-3 bg-white p-3 rounded border border-red-100", __source: { fileName: "", lineNumber: 324, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "list-none space-y-2 text-red-600 text-sm", __source: { fileName: "", lineNumber: 325, columnNumber: 21 }, __self: this }, errorDetails.map((detail, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex items-start", __source: { fileName: "", lineNumber: 327, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mr-2", __source: { fileName: "", lineNumber: 328, columnNumber: 27 }, __self: this }, "•"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 329, columnNumber: 27 }, __self: this }, detail)))), /*#__PURE__*/ React.createElement("button", { onClick: clearUpload, className: "mt-3 w-full py-2 bg-red-100 text-red-700 rounded hover:bg-red-200 transition-colors flex items-center justify-center", __source: { fileName: "", lineNumber: 333, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times mr-2", __source: { fileName: "", lineNumber: 337, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 338, columnNumber: 23 }, __self: this }, "エラーをクリア")))), loading && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 346, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2", __source: { fileName: "", lineNumber: 347, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-500 h-2 rounded-full transition-all", style: { width: "100%" }, __source: { fileName: "", lineNumber: 348, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-center mt-2 text-gray-600", __source: { fileName: "", lineNumber: 353, columnNumber: 17 }, __self: this }, "アップロード中..."))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-md p-6", __source: { fileName: "", lineNumber: 360, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4 text-gray-800", __source: { fileName: "", lineNumber: 361, columnNumber: 13 }, __self: this }, "アップロード済み画像"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 364, columnNumber: 13 }, __self: this }, uploadedImages.map((image, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "relative group", __source: { fileName: "", lineNumber: 366, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image.url, alt: `アップロード画像 ${index + 1}`, className: "w-full h-32 object-cover rounded-lg", __source: { fileName: "", lineNumber: 367, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity rounded-lg flex items-center justify-center", __source: { fileName: "", lineNumber: 372, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>window.open(image.url, "_blank"), className: "p-2 bg-white rounded-full text-gray-800 hover:bg-gray-100 mr-2", __source: { fileName: "", lineNumber: 373, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-eye", __source: { fileName: "", lineNumber: 377, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedImages((prev)=>prev.includes(image.url) ? prev.filter((url)=>url !== image.url) : [ ...prev, image.url ]), className: `p-2 rounded-full ${selectedImages.includes(image.url) ? "bg-blue-500 text-white" : "bg-white text-gray-800 hover:bg-gray-100"}`, __source: { fileName: "", lineNumber: 379, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check", __source: { fileName: "", lineNumber: 393, columnNumber: 23 }, __self: this })))))), selectedImages.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 401, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleCreateZip(selectedImages), disabled: isCreatingZip, className: "w-full py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors disabled:opacity-50 relative overflow-hidden", __source: { fileName: "", lineNumber: 402, columnNumber: 17 }, __self: this }, isCreatingZip ? /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 408, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 409, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 410, columnNumber: 23 }, __self: this }, "ZIP作成中..."), zipProgress > 0 && /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 412, columnNumber: 25 }, __self: this }, zipProgress, "%")) : /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 416, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-file-archive mr-2", __source: { fileName: "", lineNumber: 417, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 418, columnNumber: 23 }, __self: this }, "選択した画像をZIP化")), isCreatingZip && zipProgress > 0 && /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 left-0 h-1 bg-green-300", style: { width: `${zipProgress}%` }, __source: { fileName: "", lineNumber: 422, columnNumber: 21 }, __self: this })), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 429, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-red-50 border border-red-200 rounded-lg shadow-sm mb-2", __source: { fileName: "", lineNumber: 430, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-2", __source: { fileName: "", lineNumber: 431, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-triangle text-red-500 mr-2", __source: { fileName: "", lineNumber: 432, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-red-700 font-medium", __source: { fileName: "", lineNumber: 433, columnNumber: 25 }, __self: this }, error)), errorDetails && /*#__PURE__*/ React.createElement("div", { className: "mt-3 bg-white p-3 rounded border border-red-100", __source: { fileName: "", lineNumber: 436, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "space-y-2 text-red-600 text-sm", __source: { fileName: "", lineNumber: 437, columnNumber: 27 }, __self: this }, errorDetails.map((detail, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex items-start", __source: { fileName: "", lineNumber: 439, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mr-2", __source: { fileName: "", lineNumber: 440, columnNumber: 33 }, __self: this }, "•"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 441, columnNumber: 33 }, __self: this }, detail)))))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 448, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleCreateZip(selectedImages), className: "flex-1 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors flex items-center justify-center", __source: { fileName: "", lineNumber: 449, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-redo mr-2", __source: { fileName: "", lineNumber: 453, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 454, columnNumber: 25 }, __self: this }, "再試行する")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setError(null); setErrorDetails(null); }, className: "flex-1 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors flex items-center justify-center", __source: { fileName: "", lineNumber: 456, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times mr-2", __source: { fileName: "", lineNumber: 463, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 464, columnNumber: 25 }, __self: this }, "エラーを閉じる"))))))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 bg-white rounded-xl shadow-md p-6", __source: { fileName: "", lineNumber: 474, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4 text-gray-800", __source: { fileName: "", lineNumber: 475, columnNumber: 11 }, __self: this }, "制限事項"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 476, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-blue-50 rounded-lg", __source: { fileName: "", lineNumber: 477, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-file-image text-blue-500 text-xl mb-2", __source: { fileName: "", lineNumber: 478, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-blue-800 mb-2", __source: { fileName: "", lineNumber: 479, columnNumber: 15 }, __self: this }, "対応フォーマット"), /*#__PURE__*/ React.createElement("p", { className: "text-blue-700", __source: { fileName: "", lineNumber: 480, columnNumber: 15 }, __self: this }, "JPG、PNG、GIF、WEBP")), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-green-50 rounded-lg", __source: { fileName: "", lineNumber: 482, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-weight-hanging text-green-500 text-xl mb-2", __source: { fileName: "", lineNumber: 483, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-green-800 mb-2", __source: { fileName: "", lineNumber: 484, columnNumber: 15 }, __self: this }, "サイズ制限"), /*#__PURE__*/ React.createElement("p", { className: "text-green-700", __source: { fileName: "", lineNumber: 485, columnNumber: 15 }, __self: this }, "1ファイルあたり10MB以下")), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-purple-50 rounded-lg", __source: { fileName: "", lineNumber: 487, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-archive text-purple-500 text-xl mb-2", __source: { fileName: "", lineNumber: 488, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-purple-800 mb-2", __source: { fileName: "", lineNumber: 489, columnNumber: 15 }, __self: this }, "ZIP制限"), /*#__PURE__*/ React.createElement("p", { className: "text-purple-700", __source: { fileName: "", lineNumber: 490, columnNumber: 15 }, __self: this }, "最大100枚まで")))))); }