function MainComponent() { const [files, setFiles] = React.useState([]); const [width, setWidth] = React.useState(''); const [height, setHeight] = React.useState(''); const [resizedImages, setResizedImages] = React.useState([]); const [downloadFormat, setDownloadFormat] = React.useState('jpeg'); const [historyLog, setHistoryLog] = React.useState([]); const handleFilesUpload = (event)=>{ setFiles(Array.from(event.target.files)); }; const handleResizeImages = async ()=>{ const resized = await Promise.all(files.map(async (file)=>{ const imageUrl = URL.createObjectURL(file); const img = new Image(); img.src = imageUrl; await new Promise((resolve)=>{ img.onload = resolve; }); const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const aspectRatio = img.width / img.height; let newWidth = img.width; let newHeight = img.height; if (img.width < width || img.height < height) { if (img.width < img.height) { canvas.width = width; canvas.height = width / aspectRatio; newWidth = width; newHeight = width / aspectRatio; } else { canvas.height = height; canvas.width = height * aspectRatio; newWidth = height * aspectRatio; newHeight = height; } } else { canvas.width = img.width; canvas.height = img.height; } ctx.drawImage(img, 0, 0, canvas.width, canvas.height); const resizedImageUrl = canvas.toDataURL(`image/${downloadFormat}`); setHistoryLog((prevLog)=>[ ...prevLog, { fileName: file.name, beforeWidth: img.width, beforeHeight: img.height, afterWidth: newWidth, afterHeight: newHeight } ]); return resizedImageUrl; })); setResizedImages(resized); }; const handleDownload = ()=>{ resizedImages.forEach((resizedImage, index)=>{ const link = document.createElement('a'); link.href = resizedImage; link.download = `resized_image_${index + 1}.${downloadFormat}`; link.click(); }); }; const handleHistoryDownload = ()=>{ const csvContent = 'ファイル名, リサイズ前の幅, リサイズ前の高さ, リサイズ後の幅, リサイズ後の高さ\n' + historyLog.map((entry)=>`${entry.fileName}, ${entry.beforeWidth}, ${entry.beforeHeight}, ${entry.afterWidth}, ${entry.afterHeight}`).join('\n'); const blob = new Blob([ csvContent ], { type: 'text/csv;charset=utf-8;' }); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = 'resize_history.csv'; link.click(); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full min-h-screen bg-[#f0f0f0] flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 89, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-roboto mb-4", __source: { fileName: "", lineNumber: 90, columnNumber: 7 }, __self: this }, "画像リサイズツール"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl p-4 bg-white shadow-md rounded-md mb-4", __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto mb-2", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, "ファイルアップロードエリア"), /*#__PURE__*/ React.createElement("div", { className: "border-2 border-dashed border-gray-400 h-[200px] flex items-center justify-center mb-4", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, "ここにファイルをドラッグ＆ドロップ")), /*#__PURE__*/ React.createElement("input", { type: "file", multiple: true, className: "block w-full text-lg text-gray-900 border border-gray-300 rounded-md cursor-pointer mb-4", name: "file-upload", onChange: handleFilesUpload, __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl p-4 bg-white shadow-md rounded-md mb-4", __source: { fileName: "", lineNumber: 100, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto mb-2", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }, "サイズ設定"), /*#__PURE__*/ React.createElement("label", { htmlFor: "width", className: "block font-roboto mb-1", __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, "最小幅 (px):"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "width", name: "width", className: "block w-full border border-gray-300 rounded-md p-2 mb-4", placeholder: "幅を入力", value: width, onChange: (e)=>setWidth(e.target.value), __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "height", className: "block font-roboto mb-1", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, "最小高さ (px):"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "height", name: "height", className: "block w-full border border-gray-300 rounded-md p-2 mb-4", placeholder: "高さを入力", value: height, onChange: (e)=>setHeight(e.target.value), __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "format", className: "block font-roboto mb-1", __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }, "ダウンロード形式:"), /*#__PURE__*/ React.createElement("select", { id: "format", name: "format", className: "block w-full border border-gray-300 rounded-md p-2 mb-4", value: downloadFormat, onChange: (e)=>setDownloadFormat(e.target.value), __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "jpeg", __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }, "JPEG"), /*#__PURE__*/ React.createElement("option", { value: "png", __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, "PNG"))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl p-4 bg-white shadow-md rounded-md mb-4", __source: { fileName: "", lineNumber: 115, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto mb-2", __source: { fileName: "", lineNumber: 116, columnNumber: 9 }, __self: this }, "プレビューエリア"), /*#__PURE__*/ React.createElement("div", { className: "border-2 border-gray-300 h-[300px] flex items-center justify-center overflow-auto", __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }, resizedImages.length > 0 ? resizedImages.map((img, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "m-2", __source: { fileName: "", lineNumber: 120, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: img, alt: `Resized ${index + 1}`, className: "max-w-full max-h-full", __source: { fileName: "", lineNumber: 121, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 122, columnNumber: 17 }, __self: this }, files[index].name))) : /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this }, "リサイズされた画像のプレビューがここに表示されます"))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl p-4 bg-white shadow-md rounded-md mb-4", __source: { fileName: "", lineNumber: 131, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto mb-2", __source: { fileName: "", lineNumber: 132, columnNumber: 9 }, __self: this }, "リサイズ前後のサイズ"), /*#__PURE__*/ React.createElement("div", { className: "border-2 border-gray-300 overflow-auto max-h-[200px] p-2", __source: { fileName: "", lineNumber: 133, columnNumber: 9 }, __self: this }, historyLog.length > 0 ? /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside", __source: { fileName: "", lineNumber: 135, columnNumber: 13 }, __self: this }, historyLog.map((entry, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "font-roboto text-gray-600 mb-1", __source: { fileName: "", lineNumber: 137, columnNumber: 17 }, __self: this }, entry.fileName, " - リサイズ前: ", entry.beforeWidth, "x", entry.beforeHeight, ", リサイズ後: ", entry.afterWidth, "x", entry.afterHeight))) : /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 143, columnNumber: 13 }, __self: this }, "画像のリサイズ前後のサイズがここに表示されます"))), /*#__PURE__*/ React.createElement("button", { onClick: handleResizeImages, className: "w-full max-w-2xl p-2 bg-blue-600 text-white rounded-md font-roboto mb-4", __source: { fileName: "", lineNumber: 148, columnNumber: 7 }, __self: this }, "画像リサイズ"), /*#__PURE__*/ React.createElement("button", { onClick: handleDownload, className: "w-full max-w-2xl p-2 bg-green-600 text-white rounded-md font-roboto mb-4", __source: { fileName: "", lineNumber: 152, columnNumber: 7 }, __self: this }, "画像を一括ダウンロード"), /*#__PURE__*/ React.createElement("button", { onClick: handleHistoryDownload, className: "w-full max-w-2xl p-2 bg-orange-600 text-white rounded-md font-roboto", __source: { fileName: "", lineNumber: 156, columnNumber: 7 }, __self: this }, "履歴をダウンロード")); }