function MainComponent() { const [url, setUrl] = useState(""); const [qrCode, setQrCode] = useState(""); const [images, setImages] = useState([]); const [error, setError] = useState(null); const [upload, { loading }] = useUpload(); const [combinedQR, setCombinedQR] = useState(""); const [generatingCombined, setGeneratingCombined] = useState(false); const [qrError, setQrError] = useState(""); const [shorteningUrls, setShorteningUrls] = useState(false); const clearAll = ()=>{ setUrl(""); setQrCode(""); setImages([]); setError(null); setCombinedQR(""); setGeneratingCombined(false); setQrError(""); }; const generateQR = ()=>{ if (url) { const encodedUrl = encodeURIComponent(url); setQrCode(`https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${encodedUrl}`); } }; const handleImageUpload = async (e)=>{ if (e.target.files) { const files = Array.from(e.target.files); const newImages = []; for (const file of files){ const { url: imageUrl, error } = await upload({ file }); if (error) { setError(error); continue; } const encodedImageUrl = encodeURIComponent(imageUrl); const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${encodedImageUrl}`; newImages.push({ imageUrl, qrCodeUrl, timestamp: new Date().toISOString() }); } setImages([ ...images, ...newImages ]); } }; const shortenUrls = async (urls)=>{ setShorteningUrls(true); try { const shortenedUrls = await Promise.all(urls.map(async (url)=>{ const response = await fetch("/api/shorten-url", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ url }) }); if (!response.ok) throw new Error("URL短縮に失敗しました"); const data = await response.json(); return data.shortUrl; })); return shortenedUrls; } catch (error) { setError("URL短縮中にエラーが発生しました"); return null; } finally{ setShorteningUrls(false); } }; const generateCombinedQR = async ()=>{ setGeneratingCombined(true); setQrError(""); try { const imageUrls = images.map((img)=>img.imageUrl); const shortenedUrls = await shortenUrls(imageUrls); if (!shortenedUrls) { throw new Error("URL短縮に失敗しました"); } const jsonData = JSON.stringify({ urls: images.map((img, index)=>({ url: shortenedUrls[index], timestamp: img.timestamp })) }); if (jsonData.length > 2953) { throw new Error("データが大きすぎます。画像の数を減らしてください。"); } const encodedJson = encodeURIComponent(jsonData); const combinedQRUrl = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${encodedJson}`; setCombinedQR(combinedQRUrl); } catch (err) { setQrError(err.message); } finally{ setGeneratingCombined(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 flex flex-col items-center py-12 px-4", __source: { fileName: "", lineNumber: 115, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl w-full space-y-8 bg-white p-8 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 116, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto text-center text-gray-800", __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }, "QRコード生成"), /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 121, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 122, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto text-gray-700", __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this }, "画像をQRコードに変換"), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: handleImageUpload, className: "w-full", name: "image", multiple: true, __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this }, "複数の画像を選択できます"), loading && /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 135, columnNumber: 25 }, __self: this }, "アップロード中..."), error && /*#__PURE__*/ React.createElement("p", { className: "text-red-500", __source: { fileName: "", lineNumber: 136, columnNumber: 23 }, __self: this }, error), qrError && /*#__PURE__*/ React.createElement("p", { className: "text-red-500", __source: { fileName: "", lineNumber: 137, columnNumber: 25 }, __self: this }, qrError), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this }, images.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center justify-between p-4 border-2 border-gray-200 rounded-lg", __source: { fileName: "", lineNumber: 141, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[150px]", __source: { fileName: "", lineNumber: 145, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: item.imageUrl, alt: `アップロードされた画像 ${index + 1}`, className: "w-[150px] h-[150px] object-cover rounded", __source: { fileName: "", lineNumber: 146, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-[150px]", __source: { fileName: "", lineNumber: 152, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: item.qrCodeUrl, alt: `QRコード ${index + 1}`, className: "w-[150px] h-[150px]", __source: { fileName: "", lineNumber: 153, columnNumber: 21 }, __self: this }))))), images.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 164, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 165, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: generateCombinedQR, className: "flex-1 bg-green-500 text-white py-2 px-4 rounded-md hover:bg-green-600 transition duration-200", disabled: generatingCombined, __source: { fileName: "", lineNumber: 166, columnNumber: 19 }, __self: this }, generatingCombined ? "生成中..." : "まとめてQRコードを生成"), /*#__PURE__*/ React.createElement("button", { onClick: clearAll, className: "flex-1 bg-red-500 text-white py-2 px-4 rounded-md hover:bg-red-600 transition duration-200", __source: { fileName: "", lineNumber: 175, columnNumber: 19 }, __self: this }, "クリア")), combinedQR && /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 184, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 185, columnNumber: 21 }, __self: this }, "複数の画像URLをまとめた1つのQRコード"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center border-2 border-gray-200 p-4 rounded-lg", __source: { fileName: "", lineNumber: 188, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: combinedQR, alt: "まとめたQRコード", className: "w-[150px] h-[150px]", __source: { fileName: "", lineNumber: 189, columnNumber: 23 }, __self: this }))))), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto text-gray-700", __source: { fileName: "", lineNumber: 201, columnNumber: 11 }, __self: this }, "URLをQRコードに変換"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "url", value: url, onChange: (e)=>setUrl(e.target.value), placeholder: "URLを入力してください", className: "w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 204, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: generateQR, className: "w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 transition duration-200", __source: { fileName: "", lineNumber: 212, columnNumber: 11 }, __self: this }, "QRコードを生成"), qrCode && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-4", __source: { fileName: "", lineNumber: 220, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border-2 border-gray-200 p-4 rounded-lg", __source: { fileName: "", lineNumber: 221, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: qrCode, alt: "生成されたQRコード", className: "w-[150px] h-[150px]", __source: { fileName: "", lineNumber: 222, columnNumber: 17 }, __self: this })))))); }