{"id":45302,"date":"2023-12-28T21:14:50","date_gmt":"2023-07-12T03:10:35","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/45302-2\/"},"modified":"2024-05-04T15:46:40","modified_gmt":"2024-05-04T07:46:40","slug":"45302-2","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/45302-2\/","title":{"rendered":""},"content":{"rendered":"<p>\u30b8\u30e7\u30d6\u30ab\u30f3\u4e8b\u696d\u90e8\u306e\u30a2\u30c9\u30d9\u30f3\u30c8\u30ab\u30ec\u30f3\u30c0\u30fc5\u65e5\u76ee\u3067\u3059\u3002<\/p>\n<p>\u4eca\u56de\u306f\u3001Rust\u306e\u57fa\u672c\u69cb\u6587\u3060\u3051\u3092\u8efd\u304f\u52c9\u5f37\u3057\u305f\u72b6\u614b\u3067Rust\u3067\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u30a2\u30d7\u30ea\u3092\u4f5c\u3063\u3066\u30cf\u30de\u3063\u305f\u70b9\u306b\u3064\u3044\u3066\u66f8\u3044\u3066\u307f\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<h1>\u4f5c\u6210\u3057\u305f\u30a2\u30d7\u30ea<\/h1>\n<p>\u4eca\u56de\u4f5c\u6210\u3057\u305f\u30a2\u30d7\u30ea\u306f\u3001\u82f1\u8a9e\u306e\u6587\u7ae0\u3092\u6253\u3061\u8fbc\u3080\u3068\u5358\u8a9e\u3084\u6587\u7ae0\u5358\u4f4d\u3067DeepL API\u3067\u7ffb\u8a33\u3057\u3066\u65e5\u672c\u8a9e\u3092\u8868\u793a\u3057\u3066\u304f\u308c\u308b\u3068\u3044\u3046\u81ea\u5206\u7528\u306e\u82f1\u8a9e\u52c9\u5f37\u30a2\u30d7\u30ea\u3067\u3059\u3002<br \/>\n\u82f1\u8a9e\u52c9\u5f37\u306e\u969b\u306b\u5c0f\u8aac\u306a\u3069\u306e\u6587\u7ae0\u3092\u5199\u7d4c\u3057\u306a\u304c\u3089\u3001\u308f\u304b\u3089\u306a\u3044\u30d5\u30ec\u30fc\u30ba\u3092\u7ffb\u8a33\u3057\u306a\u304c\u3089\u5199\u3057\u3066\u3044\u304f\u3088\u3046\u306a\u4f7f\u3044\u65b9\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d5dd337434c4406cf2b86\/4-0.png\" alt=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2023-11-27 0.14.49.png\" \/><\/div>\n<h1>\u6280\u8853\u9078\u5b9a<\/h1>\n<p>\u4eca\u56de\u306f\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u30a2\u30d7\u30ea\u3092\u4f5c\u6210\u3057\u3088\u3046\u3068\u601d\u3063\u3066\u3044\u305f\u306e\u3067\u3001\u6700\u521d\u306b\u5019\u88dc\u306b\u4e0a\u304c\u3063\u305f\u306e\u306f\u4ee5\u524d\u4f7f\u3063\u305f\u3053\u3068\u304c\u3042\u308bElectron\u3067\u3057\u305f\u3002<br \/>\nElectron\u3067\u4f5c\u6210\u3057\u3066\u3082\u826f\u304b\u3063\u305f\u306e\u3067\u3059\u304c\u3001\u304b\u306d\u3066\u3088\u308aRust\u3092\u4f7f\u3063\u3066\u307f\u305f\u3044\u601d\u3063\u3066\u3044\u305f\u305f\u3081\u3001Rust\u3092\u63a1\u7528\u3057\u3066\u3044\u308b\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u3042\u308bTauri\u3092\u4f7f\u3063\u3066\u307f\u308b\u3053\u3068\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n<h3>Electron\u306b\u3064\u3044\u3066<\/h3>\n<p>Electron\u306fJavaScript, HTML, CSS\u3067\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u30a2\u30d7\u30ea\u3092\u4f5c\u6210\u3067\u304d\u308b\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u3001VSCode\u306a\u3069\u306b\u3082\u63a1\u7528\u3055\u308c\u3066\u3044\u307e\u3059\u3002<br \/>\nUI\u90e8\u5206\u304cChromium\u306e\u4e0a\u3067\u52d5\u304f\u306e\u3067\u4e00\u822c\u7684\u306a\u30a6\u30a7\u30d6\u30a2\u30d7\u30ea\u306e\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3068\u540c\u3058\u3088\u3046\u306b\u5b9f\u88c5\u3067\u304d\u307e\u3059\u3002<br \/>\n\u30d0\u30c3\u30af\u30a8\u30f3\u30c9(\u53b3\u5bc6\u306b\u306f\u30a2\u30d7\u30ea\u5185\u306e\u30e1\u30a4\u30f3\u30d7\u30ed\u30bb\u30b9)\u306fNode.js\u4e0a\u3067\u52d5\u4f5c\u3057\u3066\u304a\u308a\u305d\u3053\u304b\u3089PC\u5185\u306e\u30ea\u30bd\u30fc\u30b9\u306a\u3069\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<h3>Tauri\u306b\u3064\u3044\u3066<\/h3>\n<p>Tauri\u306fElectron\u3068\u4f3c\u305f\u3088\u3046\u306a\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067UI\u90e8\u5206\u306f\u540c\u3058\u304f\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u6280\u8853\u3092\u4f7f\u3048\u307e\u3059\u304c\u3001Chromium\u3067\u306f\u306a\u304fOS\u304c\u63d0\u4f9b\u3059\u308bWebView\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002\u3053\u308c\u306b\u3088\u308a\u30a2\u30d7\u30ea\u306e\u30b5\u30a4\u30ba\u3092\u5c0f\u3055\u304f\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<br \/>\n\u30e1\u30a4\u30f3\u30d7\u30ed\u30bb\u30b9\u306b\u306fNode.js\u3067\u306f\u306a\u304fRust\u3092\u4f7f\u7528\u3057\u3066\u304a\u308a\u3001\u4eca\u56deTauri\u3092\u63a1\u7528\u3057\u305f\u7406\u7531\u3067\u3059\u3002<\/p>\n<h3>Rust\u306b\u3064\u3044\u3066<\/h3>\n<p>Rust\u306f\u3001C\u8a00\u8a9e\u7b49\u3068\u540c\u3058\u3088\u3046\u306b\u30cd\u30a4\u30c6\u30a3\u30d6\u306e\u5b9f\u884c\u30d0\u30a4\u30ca\u30ea\u3092\u751f\u6210\u3067\u304d\u308b\u30b3\u30f3\u30d1\u30a4\u30eb\u8a00\u8a9e\u3067\u3059\u3002C\/C++\u306b\u4ee3\u308f\u308b\u8a00\u8a9e\u3092\u76ee\u6307\u3057\u3066\u304a\u308a\u3001\u5b9f\u969b\u306bLinux\u3084Windows\u3067\u63a1\u7528\u3055\u308c\u59cb\u3081\u3066\u3044\u308b\u3088\u3046\u306a\u8a71\u3092\u8033\u306b\u3057\u307e\u3059\u3002<br \/>\nRust\u306e\u7279\u5fb4\u3068\u3057\u3066\u306f\u30b3\u30f3\u30d1\u30a4\u30e9\u304c\u53b3\u683c\u3067\u3001\u300c\u30dc\u30ed\u30fc\u30c1\u30a7\u30c3\u30ab\u30fc\u300d(borrow checker)\u3068\u3044\u3046\u4ed5\u7d44\u307f\u306b\u3088\u3063\u3066\u30e1\u30e2\u30ea\u306e\u5b89\u5168\u6027\u304c\u4fdd\u8a3c\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n<h1>\u958b\u767a<\/h1>\n<p>\u3053\u3053\u304b\u3089\u306f\u5b9f\u969b\u306e\u958b\u767a\u306e\u6d41\u308c\u306b\u6cbf\u3063\u3066\u3001\u8e93\u3044\u305f\u3068\u3053\u308d\u3092\u30e1\u30a4\u30f3\u306b\u3054\u7d39\u4ecb\u3067\u304d\u308c\u3070\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<h2>Tauri\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u4f5c\u6210<\/h2>\n<p>tauri\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u4e0b\u8a18\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3059\u308b\u3068\u5bfe\u8a71\u5f62\u5f0f\u3067\u4f7f\u7528\u3059\u308b\u30d1\u30c3\u30b1\u30fc\u30b8\u30de\u30cd\u30fc\u30b8\u30e3\u30fc\u3084\u8a00\u8a9e\u306a\u3069\u3092\u8a0a\u304b\u308c\u308b\u305f\u3081\u3001\u305d\u308c\u306b\u7b54\u3048\u3066\u3044\u304f\u3053\u3068\u3067\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u751f\u6210\u3057\u3066\u304f\u308c\u307e\u3059\u3002<br \/>\n\u79c1\u306fUI\u90e8\u5206\u306bReact+TypeScript\u3092\u9078\u3093\u3060\u306e\u3067\u3059\u304c\u3001\u672c\u5f53\u306b\u9078\u3093\u3060\u3060\u3051\u3067\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3057\u3066\u304f\u308c\u307e\u3059\u3002<br \/>\nElectron\u306e\u3068\u304d\u306fTypeScript\u5316\u6642\u306b\u578b\u5b9a\u7fa9\u5468\u308a\u3067\u82e6\u52b4\u3057\u305f\u8a18\u61b6\u304c\u3042\u308b\u306e\u3067\u5b09\u3057\u3044\u30dd\u30a4\u30f3\u30c8\u3067\u3057\u305f\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span>yarn create tauri-app\r\n<\/code><\/pre>\n<h2>\u30a2\u30d7\u30ea\u8d77\u52d5<\/h2>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span>yarn <span class=\"nb\">install<\/span>\r\n<span class=\"nv\">$ <\/span>yarn tauri dev\r\n<\/code><\/pre>\n<p>\u4e0a\u8a18\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3059\u308b\u3053\u3068\u3067\u30a2\u30d7\u30ea\u3092\u8d77\u52d5\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u3053\u306e\u30bf\u30a4\u30df\u30f3\u30b0\u3060\u3063\u305f\u304b\u5c11\u3057\u5f8c\u3060\u3063\u305f\u304b\u5fd8\u308c\u3066\u3057\u307e\u3063\u305f\u306e\u3067\u3059\u304c\u3001\u5e8f\u76e4\u306b\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u5074\u3067global\u304c\u7121\u3044\u3068\u3044\u3063\u305f\u30a8\u30e9\u30fc\u304c\u51fa\u3066\u5c0f\u4e00\u6642\u9593\u60a9\u307e\u3055\u308c\u307e\u3057\u305f\u3002<br \/>\n\u6700\u7d42\u7684\u306b\u306findex.html\u306b\u4e0b\u8a18\u3092\u8ffd\u8a18\u3059\u308b\u3053\u3068\u3067\u89e3\u6c7a\u3057\u307e\u3057\u305f\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nt\">&lt;script&gt;<\/span>\r\n  <span class=\"kd\">const<\/span> <span class=\"nb\">global<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">globalThis<\/span><span class=\"p\">;<\/span>\r\n<span class=\"nt\">&lt;\/script&gt;<\/span>\r\n<\/code><\/pre>\n<h2>UI(React)\u3068\u30e1\u30a4\u30f3\u30d7\u30ed\u30bb\u30b9(Rust)\u306e\u901a\u4fe1<\/h2>\n<pre class=\"post-pre\"><code><span class=\"nd\">#[tauri::command]<\/span>\r\n<span class=\"k\">fn<\/span> <span class=\"nf\">main_proc_method<\/span><span class=\"p\">(<\/span><span class=\"n\">params<\/span><span class=\"p\">:<\/span> <span class=\"o\">&amp;<\/span><span class=\"nb\">str<\/span><span class=\"p\">)<\/span> <span class=\"k\">-&gt;<\/span> <span class=\"nb\">Result<\/span><span class=\"o\">&lt;<\/span><span class=\"nb\">String<\/span><span class=\"p\">,<\/span> <span class=\"nb\">String<\/span><span class=\"o\">&gt;<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"c1\">\/\/ UI\u304b\u3089\u306e\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u51e6\u7406\u3057\u3066\u5fdc\u7b54\u3092\u8fd4\u3059<\/span>\r\n    <span class=\"nf\">Ok<\/span><span class=\"p\">(<\/span><span class=\"s\">\"hoge\"<\/span><span class=\"nf\">.to_string<\/span><span class=\"p\">())<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"c1\">\/\/ main\u3067invoke_handler\u306bmain_proc_method\u3092\u767b\u9332<\/span>\r\n<span class=\"k\">fn<\/span> <span class=\"nf\">main<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nn\">tauri<\/span><span class=\"p\">::<\/span><span class=\"nn\">Builder<\/span><span class=\"p\">::<\/span><span class=\"nf\">default<\/span><span class=\"p\">()<\/span>\r\n    <span class=\"nf\">.invoke_handler<\/span><span class=\"p\">(<\/span><span class=\"nn\">tauri<\/span><span class=\"p\">::<\/span><span class=\"nd\">generate_handler!<\/span><span class=\"p\">[<\/span><span class=\"n\">main_proc_method<\/span><span class=\"p\">])<\/span>\r\n    <span class=\"nf\">.run<\/span><span class=\"p\">(<\/span><span class=\"nn\">tauri<\/span><span class=\"p\">::<\/span><span class=\"nd\">generate_context!<\/span><span class=\"p\">())<\/span>\r\n    <span class=\"nf\">.expect<\/span><span class=\"p\">(<\/span><span class=\"s\">\"error while running tauri application\"<\/span><span class=\"p\">);<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u4e0a\u306e\u3088\u3046\u306bRust\u5074\u3067\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u51e6\u7406\u3059\u308b\u30e1\u30bd\u30c3\u30c9(tauri::command)\u3092\u7528\u610f\u3057\u3066\u304a\u304d\u3001UI\u5074\u304b\u3089\u306e\u30ea\u30af\u30a8\u30b9\u30c8\u9001\u4fe1\u306finvoke\u3092\u547c\u3073\u51fa\u3059\u5f62\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nf\">invoke<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">main_proc_method<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">params<\/span><span class=\"p\">:<\/span> <span class=\"nx\">hoge<\/span> <span class=\"p\">}).<\/span><span class=\"nf\">then<\/span><span class=\"p\">((<\/span><span class=\"nx\">response<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"c1\">\/\/ \u5fdc\u7b54\u3092\u51e6\u7406<\/span>\r\n<span class=\"p\">});<\/span>\r\n<\/code><\/pre>\n<h2>#[tauri::command]\u7d61\u307f\u3067\u6012\u3089\u308c\u308b<\/h2>\n<p>\u3053\u3053\u307e\u3067\u306f\u9806\u8abf\u306b\u9032\u3093\u3067\u304d\u305f\u306e\u3067\u3059\u304c\u3001\u82f1\u6587\u3092DeepL API\u306b\u6295\u3052\u308b\u51e6\u7406\u3092\u66f8\u3044\u305f\u3068\u3053\u308d#[tauri::command]\u3067future returned by `translate_into_jananese` is not `Send`\u3068\u6012\u3089\u308c\u3066\u3057\u307e\u3044\u307e\u3057\u305f\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nd\">#[tauri::command]<\/span>\r\n<span class=\"k\">async<\/span> <span class=\"k\">fn<\/span> <span class=\"nf\">translate_into_jananese<\/span><span class=\"p\">(<\/span><span class=\"n\">phrase<\/span><span class=\"p\">:<\/span> <span class=\"o\">&amp;<\/span><span class=\"nb\">str<\/span><span class=\"p\">)<\/span> <span class=\"k\">-&gt;<\/span> <span class=\"nb\">Result<\/span><span class=\"o\">&lt;<\/span><span class=\"nb\">String<\/span><span class=\"p\">,<\/span> <span class=\"nb\">String<\/span><span class=\"o\">&gt;<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"c1\">\/\/\u3000DeepL\u306b\u7ffb\u8a33\u3092\u6295\u3052\u305f\u308a\u3059\u308b\u51e6\u7406<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u3061\u3083\u3093\u3068Rust\u3092\u5b66\u3093\u3067\u3044\u308c\u3070\u9069\u5207\u306b\u51e6\u7f6e\u3067\u304d\u305f\u3068\u601d\u3046\u306e\u3067\u3059\u304c\u3001\u3053\u306e\u3068\u304d\u306f\u306a\u305c\u6012\u3089\u308c\u3066\u3044\u308b\u304b\u5168\u304f\u5206\u304b\u3089\u305a\u3001Google\u3084ChatGPT\u3092\u3055\u307e\u3088\u3063\u305f\u7d50\u679c\u3001async\u30e1\u30bd\u30c3\u30c9\u306b\u3057\u3066\u3044\u308b\u306e\u304c\u60aa\u3044\u3068\u8003\u3048translate_into_jananese\u304b\u3089async\u3092\u5916\u3057\u5b9f\u88c5\u5168\u4f53\u3092\u5225\u306easync\u30e1\u30bd\u30c3\u30c9\u306b\u79fb\u52d5\u3059\u308b\u3053\u3068\u306b\u3057\u307e\u3057\u305f\u3002<br \/>\nRust\u3067\u306f\u975e\u540c\u671f\u51e6\u7406\u3092\u884c\u3046\u3068\u304d\u306b\u81ea\u5206\u3067\u30e9\u30f3\u30bf\u30a4\u30e0\u3092\u7528\u610f\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u3088\u3046\u3067\u3001tokio\u3092\u4f7f\u3063\u3066\u5b9f\u88c5\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nd\">#[tauri::command]<\/span>\r\n<span class=\"k\">fn<\/span> <span class=\"nf\">translate_into_jananese<\/span><span class=\"p\">(<\/span><span class=\"n\">phrase<\/span><span class=\"p\">:<\/span> <span class=\"o\">&amp;<\/span><span class=\"nb\">str<\/span><span class=\"p\">)<\/span> <span class=\"k\">-&gt;<\/span> <span class=\"nb\">Result<\/span><span class=\"o\">&lt;<\/span><span class=\"nb\">String<\/span><span class=\"p\">,<\/span> <span class=\"nb\">String<\/span><span class=\"o\">&gt;<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">let<\/span> <span class=\"n\">runtime<\/span> <span class=\"o\">=<\/span> <span class=\"nn\">tokio<\/span><span class=\"p\">::<\/span><span class=\"nn\">runtime<\/span><span class=\"p\">::<\/span><span class=\"nn\">Runtime<\/span><span class=\"p\">::<\/span><span class=\"nf\">new<\/span><span class=\"p\">()<\/span><span class=\"nf\">.unwrap<\/span><span class=\"p\">();<\/span>\r\n    <span class=\"n\">runtime<\/span><span class=\"nf\">.block_on<\/span><span class=\"p\">(<\/span><span class=\"nf\">async_translate_into_jananese<\/span><span class=\"p\">(<\/span><span class=\"n\">phrase<\/span><span class=\"p\">))<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<span class=\"k\">async<\/span> <span class=\"k\">fn<\/span> <span class=\"nf\">async_translate_into_jananese<\/span><span class=\"p\">(<\/span><span class=\"n\">phrase<\/span><span class=\"p\">:<\/span> <span class=\"o\">&amp;<\/span><span class=\"nb\">str<\/span><span class=\"p\">)<\/span> <span class=\"k\">-&gt;<\/span> <span class=\"nb\">Result<\/span><span class=\"o\">&lt;<\/span><span class=\"nb\">String<\/span><span class=\"p\">,<\/span> <span class=\"nb\">String<\/span><span class=\"o\">&gt;<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"c1\">\/\/ DeepL\u306b\u7ffb\u8a33\u3092\u6295\u3052\u305f\u308a\u3059\u308b\u51e6\u7406<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<div>\n<p>\u5b9f\u88c5\u5f53\u6642\u306fasync\u30e1\u30bd\u30c3\u30c9\u306b\u3057\u3066\u3044\u308b\u3053\u3068\u304c\u826f\u304f\u306a\u3044\u3068\u5224\u65ad\u3057\u3066\u3057\u307e\u3063\u305f\u306e\u3067\u3059\u304c\u3001\u3053\u306e\u8a18\u4e8b\u3092\u66f8\u304d\u306a\u304c\u3089\u8a66\u3057\u305f\u3068\u3053\u308d\u539f\u56e0\u306fasync\u3067\u306f\u306a\u3044\u3053\u3068\u304c\u308f\u304b\u308a\u307e\u3057\u305f\u3002<br \/>\n\u304a\u305d\u3089\u304f\u3067\u3059\u304c\u3001\u5f8c\u8ff0\u306e\u30ad\u30e3\u30c3\u30b7\u30e5\u5468\u308a\u306e\u51e6\u7406\u3067Mutex\u3092\u4f7f\u3063\u3066\u3044\u305f\u306e\u304c\u3044\u3051\u306a\u304b\u3063\u305f\u3088\u3046\u3067\u3001\u4e0a\u8a18\u5bfe\u51e6\u3067\u7d50\u679c\u7684\u306b\u6cbb\u3063\u3066\u3057\u307e\u3063\u305f\u5f62\u306e\u3088\u3046\u3067\u3059\u3002<\/p>\n<\/div>\n<h2>\u30b0\u30ed\u30fc\u30d0\u30eb\u5909\u6570\u306e\u30b3\u30f3\u30d1\u30a4\u30eb\u304c\u901a\u3089\u306a\u3044<\/h2>\n<p>\u7ffb\u8a33\u306e\u8868\u793a\u306f\u30de\u30a6\u30b9\u30aa\u30fc\u30d0\u30fc\u3092\u30c8\u30ea\u30ac\u30fc\u306b\u3057\u3066\u884c\u308f\u308c\u308b\u305f\u3081\u3001\u4f55\u5ea6\u304b\u540c\u3058\u5358\u8a9e\u306e\u30ea\u30af\u30a8\u30b9\u30c8\u304cRust\u306b\u98db\u3093\u3067\u304f\u308b\u3053\u3068\u304c\u3042\u308a\u307e\u3059\u3002DeepL API\u306b\u306f\u30ea\u30af\u30a8\u30b9\u30c8\u306e\u4e0a\u9650\u304c\u3042\u308a\u307e\u3059\u3057\u3001\u6bce\u56deDeepL\u3067\u7ffb\u8a33\u3057\u3066\u3044\u3066\u306f\u52d5\u4f5c\u304c\u9045\u304f\u306a\u3063\u3066\u3057\u307e\u3046\u305f\u3081Rust\u5074\u3067\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u3059\u308b\u3053\u3068\u306b\u3057\u305f\u306e\u3067\u3059\u304c\u3001\u3053\u306e\u5b9f\u88c5\u306b\u4e00\u756a\u82e6\u52b4\u3057\u307e\u3057\u305f\u3002<\/p>\n<p>\u4eca\u56de\u306fasync\u30e1\u30bd\u30c3\u30c9\u3067\u4f7f\u7528\u3059\u308b\u4e0a\u306b\u30ad\u30e3\u30c3\u30b7\u30e5\u3068\u3057\u3066\u4f7f\u3046\u305f\u3081\u4e0b\u8a18\u306e\u7279\u6027\u3092\u6301\u3064\u5909\u6570\u3092\u4f5c\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">\u30b0\u30ed\u30fc\u30d0\u30eb\u5909\u6570<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\n<li style=\"list-style-type: none;\">\n<ul class=\"post-ul\">async\u30e1\u30bd\u30c3\u30c9\u304b\u3089\u547c\u3073\u51fa\u305b\u308b<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ul class=\"post-ul\">\u5909\u66f4\u3067\u304d\u308b(Mutable)<\/ul>\n<p>static\u3084RefCell\u306a\u3069\u69d8\u3005\u306a\u7d44\u307f\u5408\u308f\u305b\u3092\u8a66\u3057\u305f\u306e\u3067\u3059\u304c\u3001\u4e0a\u8a18\u3092\u3059\u3079\u3066\u6e80\u305f\u3059\u3082\u306e\u306f\u306a\u304b\u306a\u304b\u4f5c\u308c\u305a\u3001\u7279\u306bMutable\u306e\u307e\u307e\u30b0\u30ed\u30fc\u30d0\u30eb\u5909\u6570\u306b\u3059\u308b\u306e\u304c\u96e3\u3057\u304b\u3063\u305f\u3067\u3059\u3002<br \/>\n\u8a66\u884c\u932f\u8aa4\u3057\u305f\u7d50\u679c\u3001\u6700\u7d42\u7684\u306b\u4e0b\u8a18\u306e\u3088\u3046\u306a\u5b9f\u88c5\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n<p>Lazy\u306fstatic\u5909\u6570\u3092\u9045\u5ef6\u521d\u671f\u5316\u3059\u308b\u305f\u3081\u306b\u5fc5\u8981\u3067\u3001Mutex\u306fasync\u30e1\u30bd\u30c3\u30c9\u304b\u3089\u5b89\u5168\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b\u305f\u3081\u306b\u5fc5\u8981\u306a\u30a4\u30e1\u30fc\u30b8\u3067\u3059\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">use<\/span> <span class=\"nn\">std<\/span><span class=\"p\">::<\/span><span class=\"nn\">collections<\/span><span class=\"p\">::<\/span><span class=\"n\">HashMap<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">use<\/span> <span class=\"nn\">std<\/span><span class=\"p\">::<\/span><span class=\"nn\">sync<\/span><span class=\"p\">::<\/span><span class=\"n\">Mutex<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">use<\/span> <span class=\"nn\">once_cell<\/span><span class=\"p\">::<\/span><span class=\"nn\">sync<\/span><span class=\"p\">::<\/span><span class=\"n\">Lazy<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"c1\">\/\/ \u5b9a\u7fa9<\/span>\r\n<span class=\"k\">static<\/span> <span class=\"n\">TRANSLATE_CACHE<\/span><span class=\"p\">:<\/span> <span class=\"n\">Lazy<\/span><span class=\"o\">&lt;<\/span><span class=\"n\">Mutex<\/span><span class=\"o\">&lt;<\/span><span class=\"n\">HashMap<\/span><span class=\"o\">&lt;<\/span><span class=\"nb\">String<\/span><span class=\"p\">,<\/span> <span class=\"nb\">String<\/span><span class=\"o\">&gt;&gt;&gt;<\/span> <span class=\"o\">=<\/span> <span class=\"nn\">Lazy<\/span><span class=\"p\">::<\/span><span class=\"nf\">new<\/span><span class=\"p\">(||<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nn\">Mutex<\/span><span class=\"p\">::<\/span><span class=\"nf\">new<\/span><span class=\"p\">(<\/span><span class=\"nn\">HashMap<\/span><span class=\"p\">::<\/span><span class=\"nf\">new<\/span><span class=\"p\">())<\/span>\r\n<span class=\"p\">});<\/span>\r\n\r\n<span class=\"c1\">\/\/ \u5909\u6570\u306e\u4f7f\u7528<\/span>\r\n<span class=\"k\">async<\/span> <span class=\"k\">fn<\/span> <span class=\"nf\">async_translate_into_jananese<\/span><span class=\"p\">(<\/span><span class=\"n\">phrase<\/span><span class=\"p\">:<\/span> <span class=\"o\">&amp;<\/span><span class=\"nb\">str<\/span><span class=\"p\">)<\/span> <span class=\"k\">-&gt;<\/span> <span class=\"nb\">Result<\/span><span class=\"o\">&lt;<\/span><span class=\"nb\">String<\/span><span class=\"p\">,<\/span> <span class=\"nb\">String<\/span><span class=\"o\">&gt;<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">let<\/span> <span class=\"k\">mut<\/span> <span class=\"n\">cache<\/span> <span class=\"o\">=<\/span> <span class=\"n\">TRANSLATE_CACHE<\/span><span class=\"nf\">.lock<\/span><span class=\"p\">()<\/span><span class=\"nf\">.unwrap<\/span><span class=\"p\">();<\/span>\r\n    \r\n    <span class=\"c1\">\/\/ \u30ad\u30e3\u30c3\u30b7\u30e5\u306b\u5f15\u3063\u304b\u304b\u3063\u305f\u3089\u305d\u308c\u3092\u8fd4\u3059<\/span>\r\n    <span class=\"k\">if<\/span> <span class=\"k\">let<\/span> <span class=\"nf\">Some<\/span><span class=\"p\">(<\/span><span class=\"n\">ja_phrase<\/span><span class=\"p\">)<\/span> <span class=\"o\">=<\/span> <span class=\"n\">cache<\/span><span class=\"nf\">.get<\/span><span class=\"p\">(<\/span><span class=\"n\">phrase<\/span><span class=\"p\">)<\/span><span class=\"nf\">.cloned<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"nd\">println!<\/span><span class=\"p\">(<\/span><span class=\"s\">\"cache hit! {} -&gt; {}\"<\/span><span class=\"p\">,<\/span> <span class=\"n\">phrase<\/span><span class=\"p\">,<\/span> <span class=\"n\">ja_phrase<\/span><span class=\"p\">);<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"nf\">Ok<\/span><span class=\"p\">(<\/span><span class=\"n\">ja_phrase<\/span><span class=\"p\">);<\/span>\r\n    <span class=\"p\">}<\/span>\r\n\r\n    <span class=\"c1\">\/\/ \ufe19<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<h1>\u307e\u3068\u3081<\/h1>\n<p>\u4eca\u56deElectron\u3068\u4f3c\u305fTauri\u3092\u4f7f\u3063\u3066\u307f\u307e\u3057\u305f\u304c\u3001\u500b\u4eba\u7684\u306b\u306fElectron\u3088\u308a\u30b7\u30f3\u30d7\u30eb\u306b\u66f8\u3051\u308b\u90e8\u5206\u304c\u591a\u304f\u3066\u66f8\u304d\u3084\u3059\u304b\u3063\u305f\u3067\u3059\u3002<br \/>\nRust\u306b\u3064\u3044\u3066\u3082C++\u3092\u66f8\u3044\u3066\u3044\u305f\u9803\u306e\u6c17\u6301\u3061\u3092\u4e45\u3005\u306b\u601d\u3044\u51fa\u3057\u61d0\u304b\u3057\u304f\u306a\u308a\u307e\u3057\u305f\u3002\u4e8b\u524d\u306b\u805e\u3044\u3066\u3044\u305f\u901a\u308a\u578b\u5468\u308a\u3084\u30b3\u30f3\u30d1\u30a4\u30e9\u304c\u5f37\u529b\u3067\u5b89\u5fc3\u611f\u304c\u3042\u308a\u307e\u3057\u305f\u3002<\/p>\n<p>Rust\u306f\u307e\u3060\u307e\u3060\u52c9\u5f37\u3092\u59cb\u3081\u305f\u3068\u3053\u308d\u306a\u306e\u3067\u5206\u304b\u3089\u306a\u3044\u90e8\u5206\u304c\u591a\u304b\u3063\u305f\u306e\u3067\u3059\u304c\u3001\u975e\u5e38\u306b\u66f8\u304d\u3084\u3059\u304b\u3063\u305f\u306e\u3067\u52c9\u5f37\u3092\u7d9a\u3051\u3066\u500b\u4eba\u7684\u306b\u4f55\u304b\u3092\u4f5c\u308b\u969b\u306b\u7a4d\u6975\u7684\u306b\u63a1\u7528\u3057\u3066\u3044\u304d\u305f\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<h3>\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/h3>\n<p>\u3060\u3044\u3076\u96d1\u306b\u66f8\u3044\u3066\u3044\u308b\u306e\u3067\u53c2\u8003\u306b\u306a\u308b\u304b\u308f\u304b\u308a\u307e\u305b\u3093\u304c\u3001Rust\u5074\u3068React\u5074\u306e\u30e1\u30a4\u30f3\u306e\u30b3\u30fc\u30c9\u3067\u3059\u3002<\/p>\n<details>\u5b8c\u6210\u3057\u305f\u30b3\u30fc\u30c9(Rust+React)<br \/>\n\/\/ Prevents additional console window on Windows in release, DO NOT REMOVE!!<br \/>\n#![cfg_attr(not(debug_assertions), windows_subsystem = &#8220;windows&#8221;)]use reqwest::Client;<br \/>\nuse serde::Serialize;<br \/>\nuse serde::Deserialize;<br \/>\nuse std::env;<br \/>\nuse dotenv::dotenv;<br \/>\nuse std::collections::HashMap;<br \/>\nuse std::sync::Mutex;<br \/>\nuse once_cell::sync::Lazy;<br \/>\nuse std::fs;<br \/>\nuse std::fs::File;<br \/>\nuse std::io::{self, Read, Write, BufReader};<\/p>\n<p>static TRANSLATE_CACHE: Lazy&lt;Mutex&lt;HashMap&lt;String, String&gt;&gt;&gt; = Lazy::new(|| {<br \/>\nMutex::new(HashMap::new())<br \/>\n});<\/p>\n<p>#[derive(Debug, Serialize, Deserialize)]<br \/>\npub struct Translation {<br \/>\ndetected_source_language: String,<br \/>\ntext: String,<br \/>\n}<\/p>\n<p>#[derive(Debug, Serialize, Deserialize)]<br \/>\npub struct TranslationResponse {<br \/>\ntranslations: Vec,<br \/>\n}<\/p>\n<p>#[tauri::command]<br \/>\nfn translate_into_jananese(phrase: &amp;str) -&gt; Result&lt;String, String&gt; {<br \/>\nlet runtime = tokio::runtime::Runtime::new().unwrap();<br \/>\nruntime.block_on(async_translate_into_jananese(phrase))<br \/>\n}<\/p>\n<p>async fn async_translate_into_jananese(phrase: &amp;str) -&gt; Result&lt;String, String&gt; {<br \/>\nlet mut cache = TRANSLATE_CACHE.lock().unwrap();<\/p>\n<p>\/\/ \u30ad\u30e3\u30c3\u30b7\u30e5\u306b\u5f15\u3063\u304b\u304b\u3063\u305f\u3089\u305d\u308c\u3092\u8fd4\u3059<br \/>\nif let Some(ja_phrase) = cache.get(phrase).cloned() {<br \/>\nprintln!(&#8220;cache hit! {} -&gt; {}&#8221;, phrase, ja_phrase);<br \/>\nreturn Ok(ja_phrase);<br \/>\n}<\/p>\n<p>\/\/ \u30ad\u30e3\u30c3\u30b7\u30e5\u306b\u306a\u304b\u3063\u305f\u3089DeepL\u3092\u4f7f\u3063\u3066\u7ffb\u8a33\u3059\u308b<br \/>\nlet deepl_auth_key = env::var(&#8220;DEEPL_AUTH_KEY&#8221;).expect(&#8220;DEEPL_AUTH_KEY is not defined&#8221;);<br \/>\nlet client = Client::new();<br \/>\nlet url = &#8220;https:\/\/api-free.deepl.com\/v2\/translate&#8221;;<br \/>\nlet params = [<br \/>\n(&#8220;text&#8221;, phrase),<br \/>\n(&#8220;source_lang&#8221;, &#8220;EN&#8221;),<br \/>\n(&#8220;target_lang&#8221;, &#8220;JA&#8221;),<br \/>\n];<br \/>\nlet result = client<br \/>\n.post(url)<br \/>\n.header(&#8220;Authorization&#8221;, format!(&#8220;DeepL-Auth-Key {}&#8221;, deepl_auth_key))<br \/>\n.form(&amp;params)<br \/>\n.send()<br \/>\n.await;<br \/>\nmatch result {<br \/>\nOk(response) =&gt; {<br \/>\nlet res = parse_response(response).await?;<br \/>\nprintln!(&#8220;{:?}&#8221;, res);<br \/>\nprintln!(&#8220;{}&#8221;, res.translations[0].text);<br \/>\nif res.translations.len() &gt; 0 {<br \/>\nlet ja_phrase = res.translations[0].text.clone();<br \/>\ncache.insert(phrase.to_string(), ja_phrase.clone());<br \/>\nreturn Ok(ja_phrase);<br \/>\n}<br \/>\nreturn Err(&#8220;no translation&#8221;.to_string());<br \/>\n},<br \/>\nErr(_) =&gt; return Err(&#8220;post error&#8221;.to_string())<br \/>\n}<br \/>\n}<\/p>\n<p>#[tauri::command]<br \/>\nfn save(file_name: &amp;str, json_str: &amp;str) {<br \/>\nlet runtime = tokio::runtime::Runtime::new().unwrap();<br \/>\nruntime.block_on(async_save(file_name, json_str))<br \/>\n}<\/p>\n<p>async fn async_save(file_name: &amp;str, json_str: &amp;str) {<br \/>\nlet mut file = File::create(file_name);<br \/>\nmatch file {<br \/>\nOk(mut f) =&gt; {<br \/>\nmatch f.write_all(json_str.as_bytes()) {<br \/>\nOk(_) =&gt; println!(&#8220;save success&#8221;),<br \/>\nErr(_) =&gt; println!(&#8220;save error&#8221;)<br \/>\n}<br \/>\n},<br \/>\nErr(_) =&gt; println!(&#8220;file create error&#8221;)<br \/>\n}<br \/>\n}<\/p>\n<p>#[tauri::command]<br \/>\nfn load(file_name: &amp;str) -&gt; Result&lt;String, String&gt; {<br \/>\nlet runtime = tokio::runtime::Runtime::new().unwrap();<br \/>\nruntime.block_on(async_load(file_name))<br \/>\n}<\/p>\n<p>async fn async_load(file_name: &amp;str) -&gt; Result&lt;String, String&gt; {<br \/>\nlet content = fs::read_to_string(file_name);<br \/>\nmatch content {<br \/>\nOk(f) =&gt; {<br \/>\nreturn Ok(f);<br \/>\n},<br \/>\nErr(_) =&gt; println!(&#8220;file read error&#8221;)<br \/>\n}<\/p>\n<p>Err(&#8220;unknown error&#8221;.to_string())<br \/>\n}<\/p>\n<p>async fn parse_response(response: reqwest::Response) -&gt; Result&lt;TranslationResponse, String&gt; {<br \/>\nlet res = response.json::().await;<br \/>\nmatch res {<br \/>\nOk(body) =&gt; Ok(body),<br \/>\nErr(_) =&gt; Err(&#8220;json error&#8221;.to_string())<br \/>\n}<br \/>\n}<\/p>\n<p>fn main() {<br \/>\ndotenv().ok();<br \/>\ntauri::Builder::default()<br \/>\n.invoke_handler(tauri::generate_handler![translate_into_jananese, save, load])<br \/>\n.run(tauri::generate_context!())<br \/>\n.expect(&#8220;error while running tauri application&#8221;);<br \/>\n}<\/p>\n<p>import { useState, useEffect, useRef } from &#8220;react&#8221;;<br \/>\nimport { invoke } from &#8220;@tauri-apps\/api\/tauri&#8221;;<br \/>\nimport { Editor, EditorState, Modifier, CompositeDecorator, convertToRaw, convertFromRaw } from &#8220;draft-js&#8221;;<br \/>\nimport &#8220;draft-js\/dist\/Draft.css&#8221;;<br \/>\nimport &#8220;.\/App.css&#8221;;<\/p>\n<p>const TRANSLATE_BLOCK_ENTITY_TYPE = &#8216;TRANSLATE_BLOCK_ENTITY&#8217;;<\/p>\n<p>const SpanEntity = (props: any) =&gt; {<br \/>\nconst phrase = `${props.children[0].props.text}`;<br \/>\nconst handleMouseEnter = () =&gt; {<br \/>\ninvoke(&#8216;translate_into_jananese&#8217;, { phrase: phrase }).then((translatedPhrase: any) =&gt; {<br \/>\nprops.setPhraseDetail({phrase: phrase, translatedPhrase: translatedPhrase});<br \/>\n});<br \/>\n};<br \/>\nreturn {phrase};<br \/>\n};<\/p>\n<p>const spanEntityStrategy = (contentBlock: any, callback: any, contentState: any) =&gt; {<br \/>\ncontentBlock.findEntityRanges((character: any) =&gt; {<br \/>\nconst entityKey = character.getEntity();<br \/>\nreturn entityKey !== null &amp;&amp; contentState.getEntity(entityKey).getType() === TRANSLATE_BLOCK_ENTITY_TYPE;<br \/>\n}, callback);<br \/>\n};<\/p>\n<p>type EditorBlock = {<br \/>\nkey: string<br \/>\ntext: string<br \/>\nheight: number<br \/>\nlastTranslatedText: string | null<br \/>\n}<\/p>\n<p>function App() {<br \/>\nconst [fileName, setFileName] = useState(&#8221;);<br \/>\nconst [editorEnable, setEditorEnable] = useState(false);<br \/>\nconst [phraseDetail, setPhraseDetail] = useState({phrase: &#8221;, translatedPhrase: &#8221;});<br \/>\nconst [editorState, setEditorState] = useState(() =&gt; {<br \/>\nconst decorators = new CompositeDecorator([<br \/>\n{<br \/>\nstrategy: spanEntityStrategy,<br \/>\ncomponent: (decoratorProps: any) =&gt;<br \/>\n}<br \/>\n]);<br \/>\nreturn EditorState.createEmpty(decorators)<br \/>\n});<br \/>\nconst editorRef = useRef(null);<br \/>\nconst [blocks, setBlocks] = useState([] as EditorBlock[]);<br \/>\nconst [translatedMap, setTranslatedMap] = useState({} as { [key: string]: string });<br \/>\nconst [lastTranslatedMap, setLastTranslatedMap] = useState({} as { [key: string]: string });<\/p>\n<p>useEffect(() =&gt; {<br \/>\nsetEditorEnable(true);<br \/>\n}, []);<\/p>\n<p>useEffect(() =&gt; {<br \/>\nlet heightMap: { [key: string]: number } = {};<\/p>\n<p>let elms = editorRef.current?.querySelectorAll(&#8216;.public-DraftEditor-content &gt; div &gt; div&#8217;) || [];<br \/>\nfor (var i = 0; i &lt; elms.length; i++) { let offset_key = elms[i].getAttribute(&#8216;data-offset-key&#8217;); if ( offset_key != null) { let key = offset_key.split(&#8216;-&#8216;).shift(); heightMap[key || &#8221;] = elms[i].getBoundingClientRect().height; } } const contentState = editorState.getCurrentContent(); const blockArray = contentState.getBlocksAsArray(); setBlocks(blockArray.map((block) =&gt; {<br \/>\nlet key = block.getKey();<br \/>\nlet text = block.getText();<br \/>\nconsole.log(key);<br \/>\nconsole.log(heightMap[key]);<\/p>\n<p>return {<br \/>\nkey: key,<br \/>\ntext: text,<br \/>\nheight: heightMap[key],<br \/>\nlastTranslatedText: lastTranslatedMap[key],<br \/>\n}<br \/>\n}));<br \/>\n}, [editorState])<\/p>\n<p>const toggleTranslatePhrase = () =&gt; {<br \/>\nconsole.log(&#8216;toggleTranslatePhrase&#8217;);<br \/>\nconst content = editorState.getCurrentContent();<br \/>\nconst selection = editorState.getSelection();<\/p>\n<p>if (!selection.isCollapsed()) {<br \/>\nconst startKey = selection.getStartKey();<br \/>\nconst startOffset = selection.getStartOffset();<br \/>\nconst blockWithEntityAtStart = content.getBlockForKey(startKey);<br \/>\nconst entityKeyAtStart = blockWithEntityAtStart.getEntityAt(startOffset);<\/p>\n<p>\/\/ \u65e2\u306b\u30a8\u30f3\u30c6\u30a3\u30c6\u30a3\u304c\u9069\u7528\u3055\u308c\u3066\u3044\u308b\u304b\u78ba\u8a8d<br \/>\nconst alreadyHasEntity = entityKeyAtStart &amp;&amp; content.getEntity(entityKeyAtStart).getType() === TRANSLATE_BLOCK_ENTITY_TYPE;<\/p>\n<p>let newContent;<\/p>\n<p>if (alreadyHasEntity) {<br \/>\n\/\/ \u30a8\u30f3\u30c6\u30a3\u30c6\u30a3\u3092\u53d6\u308a\u9664\u304f<br \/>\nnewContent = Modifier.applyEntity(content, selection, null);<br \/>\n} else {<br \/>\n\/\/ \u30a8\u30f3\u30c6\u30a3\u30c6\u30a3\u3092\u9069\u7528\u3059\u308b<br \/>\nconst contentWithEntity = content.createEntity(TRANSLATE_BLOCK_ENTITY_TYPE, &#8216;MUTABLE&#8217;);<br \/>\nconst entityKey = contentWithEntity.getLastCreatedEntityKey();<br \/>\nnewContent = Modifier.applyEntity(contentWithEntity, selection, entityKey);<br \/>\n}<\/p>\n<p>const newEditorState = EditorState.push(editorState, newContent, &#8216;apply-entity&#8217;);<br \/>\nsetEditorState(newEditorState);<br \/>\n}<br \/>\n};<\/p>\n<p>const save = () =&gt; {<br \/>\nconst contentState = editorState.getCurrentContent();<br \/>\nconst content = convertToRaw(contentState);<br \/>\ninvoke(&#8216;save&#8217;, { fileName: fileName, jsonStr: JSON.stringify(content) }).then(() =&gt; {<br \/>\nconsole.log(&#8216;saved&#8217;);<br \/>\n});<br \/>\n}<\/p>\n<p>const load = () =&gt; {<br \/>\nconst contentState = editorState.getCurrentContent();<br \/>\nconst content = convertToRaw(contentState);<br \/>\nconst isEmpty = content.blocks.length == 0 || content.blocks.length == 1 &amp;&amp; content.blocks[0].text == &#8221;;<br \/>\nif (!isEmpty) {<br \/>\nsetPhraseDetail({phrase: &#8216;Load&#8217;, translatedPhrase: &#8216;\u30b3\u30f3\u30c6\u30f3\u30c4\u304c\u3042\u308b\u305f\u3081\u3001\u30ed\u30fc\u30c9\u3067\u304d\u307e\u305b\u3093&#8217;});<br \/>\nreturn;<br \/>\n}<br \/>\nsetPhraseDetail({phrase: &#8216;Load&#8217;, translatedPhrase: &#8216;\u30ed\u30fc\u30c9\u4e2d&#8230;&#8217;});<\/p>\n<p>invoke(&#8216;load&#8217;, { fileName: fileName }).then((jsonStr) =&gt; {<br \/>\nconst contentState = convertFromRaw(JSON.parse(`${jsonStr}`));<br \/>\nconst newEditorState = EditorState.push(editorState, contentState, &#8216;apply-entity&#8217;);<br \/>\nsetEditorState(newEditorState);<br \/>\nsetPhraseDetail({phrase: &#8216;Load&#8217;, translatedPhrase: &#8216;\u30ed\u30fc\u30c9\u5b8c\u4e86&#8217;});<br \/>\n});<br \/>\n}<\/p>\n<p>return (<\/p>\n<div>\n<div>\n<div>{phraseDetail.phrase}<\/div>\n<div>{phraseDetail.translatedPhrase}<\/div>\n<\/div>\n<div><input type=\"text\" value=\"{fileName}\" \/> setFileName(e.target.value)} type=&#8221;text&#8221; autoComplete=&#8221;off&#8221; \/&gt;<\/p>\n<div><button>Translate<\/button><br \/>\n<button>Save<\/button><br \/>\n<button>Load<\/button><\/div>\n<\/div>\n<div><\/div>\n<p>{editorEnable &amp;&amp; (<\/p>\n<div>\n<div>\n<div>\n<div>{blocks.map((block) =&gt; {<br \/>\nreturn (<\/p>\n<div>{<br \/>\ninvoke(&#8216;translate_into_jananese&#8217;, { phrase: block.text }).then((translatedPhrase: any) =&gt; {<br \/>\nsetTranslatedMap((prev) =&gt; {<br \/>\nprev[block.key] = translatedPhrase;<br \/>\nreturn prev;<br \/>\n});<br \/>\nsetLastTranslatedMap((prev) =&gt; {<br \/>\nprev[block.key] = block.text;<br \/>\nreturn prev;<br \/>\n});<br \/>\n\/\/ \u914d\u5217\u3092\u4f5c\u308a\u76f4\u3057\u3066\u518d\u63cf\u753b<br \/>\nsetBlocks((prev) =&gt; {<br \/>\nvar next = [&#8230;prev];<br \/>\nfor (let i = 0; i &lt; next.length; i++) { if (next[i].key == block.key) { next[i].lastTranslatedText = block.text; break; } } return next; }); }); }} &gt;<br \/>\n{block.lastTranslatedText == block.text ? &#8221; : &#8216;*&#8217;}\u7ffb\u8a33<\/p>\n<p>{translatedMap[block.key]}<\/p><\/div>\n<p>);<br \/>\n})}<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>)}<\/p>\n<\/div>\n<p>);<br \/>\n}<\/p>\n<p>export default App;<\/p>\n<\/details>\n<h1>\u304a\u308f\u308a\u306b<\/h1>\n<p>DONUTS\u3067\u306f\u65b0\u5352\u4e2d\u9014\u554f\u308f\u305a\u7a4d\u6975\u7684\u306b\u63a1\u7528\u6d3b\u52d5\u3092\u884c\u3063\u3066\u3044\u307e\u3059\u3002<br \/>\n\u8a73\u7d30\u306f\u3053\u3061\u3089\u3092\u3054\u78ba\u8a8d\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u30b8\u30e7\u30d6\u30ab\u30f3\u4e8b\u696d\u90e8\u306e\u30a2\u30c9\u30d9\u30f3\u30c8\u30ab\u30ec\u30f3\u30c0\u30fc5\u65e5\u76ee\u3067\u3059\u3002 \u4eca\u56de\u306f\u3001Rust\u306e\u57fa\u672c\u69cb\u6587\u3060\u3051\u3092\u8efd\u304f\u52c9\u5f37\u3057\u305f\u72b6\u614b\u3067Rust [&hellip;]<\/p>\n","protected":false},"author":12,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-45302","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>- Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/45302-2\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:description\" content=\"\u30b8\u30e7\u30d6\u30ab\u30f3\u4e8b\u696d\u90e8\u306e\u30a2\u30c9\u30d9\u30f3\u30c8\u30ab\u30ec\u30f3\u30c0\u30fc5\u65e5\u76ee\u3067\u3059\u3002 \u4eca\u56de\u306f\u3001Rust\u306e\u57fa\u672c\u69cb\u6587\u3060\u3051\u3092\u8efd\u304f\u52c9\u5f37\u3057\u305f\u72b6\u614b\u3067Rust [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/45302-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-12T03:10:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-04T07:46:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d5dd337434c4406cf2b86\/4-0.png\" \/>\n<meta name=\"author\" content=\"\u9038, \u79d1\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u9038, \u79d1\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/45302-2\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/45302-2\/\",\"name\":\"- Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-07-12T03:10:35+00:00\",\"dateModified\":\"2024-05-04T07:46:40+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/45302-2\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487\",\"name\":\"\u9038, \u79d1\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g\",\"caption\":\"\u9038, \u79d1\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/keyi\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/45302-2\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"- Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/45302-2\/","og_locale":"zh_CN","og_type":"article","og_description":"\u30b8\u30e7\u30d6\u30ab\u30f3\u4e8b\u696d\u90e8\u306e\u30a2\u30c9\u30d9\u30f3\u30c8\u30ab\u30ec\u30f3\u30c0\u30fc5\u65e5\u76ee\u3067\u3059\u3002 \u4eca\u56de\u306f\u3001Rust\u306e\u57fa\u672c\u69cb\u6587\u3060\u3051\u3092\u8efd\u304f\u52c9\u5f37\u3057\u305f\u72b6\u614b\u3067Rust [&hellip;]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/45302-2\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-07-12T03:10:35+00:00","article_modified_time":"2024-05-04T07:46:40+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d5dd337434c4406cf2b86\/4-0.png"}],"author":"\u9038, \u79d1","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u9038, \u79d1","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"7 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/45302-2\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/45302-2\/","name":"- Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-07-12T03:10:35+00:00","dateModified":"2024-05-04T07:46:40+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/45302-2\/"]}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487","name":"\u9038, \u79d1","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g","caption":"\u9038, \u79d1"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/keyi\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/45302-2\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/45302","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=45302"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/45302\/revisions"}],"predecessor-version":[{"id":99227,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/45302\/revisions\/99227"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=45302"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=45302"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=45302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}