Fileコンポーネントの画像読み込みをconvertFileSrcを使用するようにリファクタリング

- ProcessedFilesおよびSelectFilesコンポーネントでの画像読み込みにおいて、readFileおよびBlob URLの作成を削除しました。 - パフォーマンスとシンプルさを向上させるために、画像ソースの処理をconvertFileSrcを直接使用するように更新しました。これらの変更により、画像処理が簡素化され、アプリケーションの設定が改善されました。
harumiWeb · Jan 22, 2025 · 51e9d89 · 51e9d89
1 parent 491bc11
commit 51e9d89
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 56 deletions.
diff --git a/app/components/ProcessedFiles/File.tsx b/app/components/ProcessedFiles/File.tsx
@@ -4,10 +4,9 @@ import RightArrow from "../icons/RightArrow";
 import { useAtom, useAtomValue } from "jotai";
 import { checkboxSelectedAtom, filePathsAtom } from "@/app/lib/atom";
 import { ProcessedFileInfo } from "@/app/index.d";
-import { useEffect, useState } from "react";
-import { readFile } from "@tauri-apps/plugin-fs";
 import "@ant-design/v5-patch-for-react-19";
 import CheckOutlined from "../icons/Check";
+import { convertFileSrc } from "@tauri-apps/api/core";
 
 function getCompressionRate(processedFileInfo: ProcessedFileInfo) {
   const compressionRate: number = parseFloat(
@@ -28,29 +27,6 @@ export default function File({
   const [checkboxSelected, setCheckboxSelected] = useAtom(checkboxSelectedAtom);
   const filePaths = useAtomValue(filePathsAtom);
 
-  const [imageSrc, setImageSrc] = useState<string | null>(null);
-
-  useEffect(() => {
-    const handleImageLoad = async (filePath: string) => {
-      try {
-        const data = await readFile(filePath);
-        const blob = new Blob([data], { type: "image/jpeg" });
-        const url = URL.createObjectURL(blob);
-        setImageSrc(url);
-      } catch (error) {
-        console.error("ファイルの読み込みに失敗しました:", error);
-      }
-    };
-
-    handleImageLoad(filePaths[index]);
-
-    return () => {
-      if (imageSrc) {
-        URL.revokeObjectURL(imageSrc);
-      }
-    };
-  }, [processedFileInfo.file_name_with_extension]);
-
   const compressionRate = getCompressionRate(processedFileInfo);
 
   return (
@@ -63,9 +39,9 @@ export default function File({
           {index + 1}
         </span>
         <div className="flex items-center aspect-square w-20 h-auto min-w-[90px]">
-          {imageSrc && (
+          {filePaths[index] && (
             <img
-              src={imageSrc}
+              src={convertFileSrc(filePaths[index])}
               alt={processedFileInfo.file_name_with_extension}
               loading="lazy"
             />

diff --git a/app/components/SelectFiles/File.tsx b/app/components/SelectFiles/File.tsx
@@ -4,35 +4,12 @@ import { Button } from "antd";
 import { DeleteOutlined } from "@ant-design/icons";
 import { useAtom, useSetAtom } from "jotai";
 import { filePathsAtom, fileInfosAtom } from "../../lib/atom";
-import { useState, useEffect } from "react";
-import { readFile } from "@tauri-apps/plugin-fs";
+import { convertFileSrc } from "@tauri-apps/api/core";
 import "@ant-design/v5-patch-for-react-19";
 
 export default function File({ fileInfo, index }: FileProps) {
   const [filePaths, setFilePaths] = useAtom(filePathsAtom);
   const setFileInfos = useSetAtom(fileInfosAtom);
-  const [imageSrc, setImageSrc] = useState<string | null>(null);
-
-  useEffect(() => {
-    const handleImageLoad = async (filePath: string) => {
-      try {
-        const data = await readFile(filePath);
-        const blob = new Blob([data], { type: "image/jpeg" });
-        const url = URL.createObjectURL(blob);
-        setImageSrc(url);
-      } catch (error) {
-        console.error("ファイルの読み込みに失敗しました:", error);
-      }
-    };
-
-    handleImageLoad(filePaths[index]);
-
-    return () => {
-      if (imageSrc) {
-        URL.revokeObjectURL(imageSrc);
-      }
-    };
-  }, [fileInfo.file_name_with_extension]);
 
   const extension =
     fileInfo.file_name_with_extension.split(".").pop()?.toLowerCase() || "";
@@ -52,9 +29,9 @@ export default function File({ fileInfo, index }: FileProps) {
           {index + 1}
         </span>
         <div className="flex items-center aspect-square w-20 h-auto min-w-[90px]">
-          {imageSrc && (
+          {filePaths[index] && (
             <img
-              src={imageSrc}
+              src={convertFileSrc(filePaths[index])}
               alt={fileInfo.file_name_with_extension}
               loading="lazy"
             />

diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
@@ -21,7 +21,7 @@ tauri-build = { version = "2.0.2", features = [] }
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
 log = "0.4"
-tauri = { version = "2.1.0", features = [] }
+tauri = { version = "2.1.0", features = ["protocol-asset"] }
 tauri-plugin-log = "2.0.0-rc"
 tauri-plugin-dialog = "2"
 tauri-plugin-fs = "2"

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "Tavif",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "identifier": "com.harumi.tavif",
   "build": {
     "frontendDist": "../out",
@@ -27,7 +27,11 @@
     "security": {
       "csp": "default-src 'self'; img-src 'self' blob: data: asset: http://asset.localhost ; script-src 'self' blob: data: assets: ; connect-src ipc: http://ipc.localhost",
       "dangerousDisableAssetCspModification": ["blob:"],
-      "capabilities": ["main-capability"]
+      "capabilities": ["main-capability"],
+      "assetProtocol": {
+        "enable": true,
+        "scope": ["$TEMP", "$HOME"]
+      }
     }
   },
   "bundle": {