function MainComponent() { const [imageFile, setImageFile] = useState(null); const [previewUrl, setPreviewUrl] = useState(null); const [qrCode, setQrCode] = useState(null); const [error, setError] = useState(null); const [expiryDate, setExpiryDate] = useState(null); const [upload, { loading }] = useUpload(); // ファイル選択時の処理 const handleFileChange = async (event)=>{ const file = event.target.files?.[0]; if (!file) { setError("画像ファイルが選択されていません。"); return; } // ファイルサイズチェック（10MB） if (file.size > 10 * 1024 * 1024) { setError("画像サイズは10MB以下にしてください。"); return; } setImageFile(file); setError(null); // プレビュー表示 const reader = new FileReader(); reader.onloadend = ()=>setPreviewUrl(reader.result); reader.readAsDataURL(file); try { console.log("ファイルアップロード開始:", file.name); const { url: fileUrl, filename } = await upload({ file, expiresIn: 86400 }); console.log("アップロード完了:", fileUrl || filename); // 画像URLの生成 const imageUrl = fileUrl || `https://cdn.create.xyz/your-project-name/uploads/${filename}`; // QRコード生成 console.log("QRコード生成開始:", imageUrl); const response = await fetch(`/integrations/qr-code/generatebasicbase64?data=${encodeURIComponent(imageUrl)}`); if (!response.ok) throw new Error("QRコードの生成に失敗しました"); const qrBase64 = await response.text(); setQrCode(qrBase64); console.log("QRコード生成完了"); // 有効期限の設定 const expiry = new Date(); expiry.setHours(expiry.getHours() + 24); setExpiryDate(expiry); } catch (err) { console.error("エラー発生:", err); setError("処理中にエラーが発生しました。もう一度お試しください。"); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 py-8 px-4", __source: { fileName: "", lineNumber: 67, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto bg-white rounded-lg shadow p-6", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold text-center mb-6 font-noto-sans", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, "画像をアップロードしてQRコードを作成"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: handleFileChange, className: "w-full", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this })), error && /*#__PURE__*/ React.createElement("div", { className: "mb-4 text-red-600 text-sm font-noto-sans", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, error), loading && /*#__PURE__*/ React.createElement("div", { className: "mb-4 text-gray-600 text-sm font-noto-sans", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, "処理中..."), previewUrl && /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-2 font-noto-sans", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, "アップロードされた画像："), /*#__PURE__*/ React.createElement("img", { src: previewUrl, alt: "プレビュー", className: "w-full h-auto rounded", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this })), qrCode && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-2 font-noto-sans", __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }, "QRコードをスキャンして画像を開く"), /*#__PURE__*/ React.createElement("img", { src: `data:image/png;base64,${qrCode}`, alt: "QRコード", className: "mx-auto mb-4", __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }), expiryDate && /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 font-noto-sans", __source: { fileName: "", lineNumber: 121, columnNumber: 15 }, __self: this }, "※このリンクは24時間で無効になります（期限:", " ", expiryDate.toLocaleString("ja-JP", { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" }), "）")))); }