Tauri App

12月 8, 2024 admin44 No Comments

前々回、Nextron/Electron を扱いましたが、iOSで動かすにはTauri、ということで試してみました。
目指しているものは似ていますが、node.jsの部分を、Rustで記述しなくてはいけないところが大きく違います。しかしながら充実したAPIによってJavaScript(TypeScript)で大半を記述できるようになっているため、Rustでゴリゴリ書くことはなさそうです。

ここでは、デモの起動とデモプログラムの中でHTTPクライアントを動かしてみました。
https://github.com/tauri-apps/create-tauri-app

muiもインストール
npm i @mui/material @emotion/react @emotion/styled

HTTPクライアントはプラグインを追加
npm run tauri add http

import { useState } from "react";
import reactLogo from "./assets/react.svg";
import { invoke } from "@tauri-apps/api/core";
import "./App.css";
import { Button } from "@mui/material";

import { fetch } from '@tauri-apps/plugin-http'

function App() {
  const [greetMsg, setGreetMsg] = useState("");
  const [name, setName] = useState("");
  const [msg, setMsg] = useState("")

  async function greet() {
    // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
    setGreetMsg(await invoke("greet", { name }));
  }

  async function handleClick(){
    const res = await fetch('https://jsonplaceholder.typicode.com/todos/1', {
      method: 'GET',
    })
    const data = await res.json()
    console.log(data)
    setMsg('status: ' + res.status + '/' + res.statusText + ' data: ' + JSON.stringify(data))
  }

  return (
    <main className="container">
      <h1>Welcome to Tauri + React</h1>
      <div className="row">
        <a href="https://vitejs.dev" target="_blank">
          <img src="/vite.svg" className="logo vite" alt="Vite logo" />
        </a>
        <a href="https://tauri.app" target="_blank">
          <img src="/tauri.svg" className="logo tauri" alt="Tauri logo" />
        </a>
        <a href="https://reactjs.org" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <p>Click on the Tauri, Vite, and React logos to learn more.</p>

      <form
        className="row"
        onSubmit={(e) => {
          e.preventDefault();
          greet();
        }}
      >
        <input
          id="greet-input"
          onChange={(e) => setName(e.currentTarget.value)}
          placeholder="Enter a name..."
        />
        <button type="submit">Greet</button>
      </form>
      <p>{greetMsg}</p>
      <Button onClick={handleClick} variant="outlined">fetch</Button>
      <p>{msg}</p>
    </main>
  );
}

export default App;

import { useState } from "react";

import reactLogo from "./assets/react.svg";

import { invoke } from "@tauri-apps/api/core";

import "./App.css";

import { Button } from "@mui/material";

import { fetch } from '@tauri-apps/plugin-http'

function App() {

const [greetMsg, setGreetMsg] = useState("");

const [name, setName] = useState("");

const [msg, setMsg] = useState("")

async function greet() {

// Learn more about Tauri commands at https://tauri.app/develop/calling-rust/

setGreetMsg(await invoke("greet", { name }));

}

async function handleClick(){

const res = await fetch('https://jsonplaceholder.typicode.com/todos/1', {

method: 'GET',

})

const data = await res.json()

console.log(data)

setMsg('status: ' + res.status + '/' + res.statusText + ' data: ' + JSON.stringify(data))

}

return (

<h1>Welcome to Tauri + React</h1>

</a>

</a>

</a>

</div>

<p>Click on the Tauri, Vite, and React logos to learn more.</p>

<form

className="row"

onSubmit={(e) => {

e.preventDefault();

greet();

}}

<input

id="greet-input"

onChange={(e) => setName(e.currentTarget.value)}

placeholder="Enter a name..."

<button type="submit">Greet</button>

</form>

<p>{greetMsg}</p>

<Button onClick={handleClick} variant="outlined">fetch</Button>

</main>

);

}

export default App;

src-tauri/capabilities/default.json の　permissons　に　アクセスURLの追加

  "permissions": [
    "core:default",
    "shell:allow-open",
    {
      "identifier": "http:default",
      "allow": [
        {
          "url": "https://jsonplaceholder.typicode.com"
        }
      ],
      "deny": [
        {
          "url": "https://private.tauri.app"
        }
      ]
    },
    "http:default"
  ]

"permissions": [

"core:default",

"shell:allow-open",

{

"identifier": "http:default",

"allow": [

{

"url": "https://jsonplaceholder.typicode.com"

}

"deny": [

{

"url": "https://private.tauri.app"

}

]

"http:default"

]

実行画面

npm run tauri dev

npm run tauri ios dev

ここでもTypeScriptは使える言語として存在感を感じます。

参考）
https://v2.tauri.app/blog/tauri-20/
https://v2.tauri.app/plugin/http-client/
https://gihyo.jp/article/2022/10/rust-monthly-topics-02
https://blog.keiya01.dev/entry/ipc-strategy-of-tauri/
https://zenn.dev/kumassy/books/6e518fe09a86b2/viewer/010d21
https://zenn.dev/de_teiu_tkg/articles/29ab64fe67a1af
https://dev.to/valorsoftware/developing-a-desktop-application-via-rust-and-nextjs-the-tauri-way-2iin
https://medium.com/@sirarpimanukyan/azure-active-directory-login-with-tauri-react-desktop-applications-3c804b08f8f4
https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/6241
https://learn.microsoft.com/ja-jp/entra/identity-platform/msal-error-handling-js

追記）iPhoneへのインストール
src-tauri/gen/apple/ExportOptions.plist
method:development に変更

npm run tauri ios build

src-tauri/gen/apple/build/arm64/tauri-app.ipa
をXcodeの window -> Devices & Simulators の　 Installed Apps に　Drag & Drop

xcodeは通常のアプリ開発と同様、src-tauri/gen/apple/tauri-app.xcodeproj に対して、Signeing & Capabilities を設定しておく。（npm run tauri ios init で生成される）

Category: 未分類

Tags: TypeScript