Go to Qiita Advent Calendar 2024 Top
LoginSignup
5
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@oligami(oligami)

Tauri2.0 prereleaseを試してみた

Last updated at Posted at 2023-11-04

最初に

Tauri2.0 prereleaseを試してみたので、備忘録兼解説です
Tauri2.0 prereleaseとさっきから読んでいますが、公式がTauri1.5と呼んでいるので、今後はこれで行きます

また、わからない表現があったら、ChatGPTに聞いてください。業界標準で書いているつもりなので、説明してくれるはずです。

容量は1プロジェクトだけで12GB程持っていかれます。環境が無かった人はもっと持っていかれるので注意してください

こんな中途半端な時期に始めた理由は、新しいアプリを作ろうと思ったからです。
出来上がったもの見たいなのは、ここです

最後に、この記事は2023/11/04日時点での記事です。注意してください

導入

公式を参考に進めていきます

私の環境はWindows+Androidなので、それ前提で行きます。なお、AndroidStudioなどが必要になるので、WSL2でやるのは諦めた方がいいです。

公式に従って、Microsoft C++ ビルド ツールをVisual Studioから入れます。Siv3Dなどを使ったことがある方などは既に入ってると思います。

次に、WebView2から、Evergreen Bootstrapperをインストールします。Tauri 1.0を触ったことがあるなら既に入っていると思います。

そして、醍醐味のRustを入れます。Rust公式からinstallします。まぁこの記事読むような人はもう入ってると思います（てか触ったことなかったらコードを理解できないと思います）。
既に入っている人はrustup updateでバージョンを最新にします。

Android向けにビルドするために、JAVAがいるので、JAVA_HOME環境変数を設定します。コツは、バージョンは17にすることです。21はGradleがまだ対応しておらず（1敗）、20はTauriが使っているバージョンが古いのか、対応してませんでした。17なら絶対いけると思います。

次に、Android Studio の SDK Managerから、

  • Android SDK Platform
  • Android SDK Platform-Tools
  • NDK (Side by side)
  • Android SDK Build-Tools
  • Android SDK Command-line Tools
    を全て入れます。

そして、環境変数をまた設定します。
ANDROID_HOMEと、NDK_HOMEですね。
ANDROID_HOMEは大抵~\AppData\Local\Android\Sdkです
NDKはさらにその中の、~\AppData\Local\Android\Sdk\ndk\26.1.10909125などにあります。バージョンはそんなに気にしないでいいと思いますが、とりま最新がお勧めです。

そして、Android向けにビルドする際に、あらゆるデバイスで動作させるため、幾つかのコンパイル先を追加します。
rustup target add aarch64-linux-android armv7-linux-androideabi i686-linux-android x86_64-linux-android

プロジェクトを作成してみる

cargoバージョン
cargo install create-tauri-app
cargo create-tauri-app --alpha
npmバージョン
npm create tauri-app@latest -- --alpha
powershellバージョン
$env:CTA_ARGS="--alpha"; irm https://create.tauri.app/ps | iex

好きなのを使いましょう。

選択では、今回はSolidJSを使います。自分の推しなので。
また、WebのUIをwasmを用いることでRustで書くことができるのですが、現在は生成されたアプリが動かないため、割愛します。

なので、

  • TypeScript / JavaScript (pnpm, yarn, npm, bun)
  • npm（本当はBunを使いたい）
  • Solid（SolidStartは干渉しそうだった）
  • TypeScriptでやっていきます
  • y モバイルも当然yesです

TauriCLI

cargo install tauri-cli --version "^2.0.0-alpha"

で入れることができますが、今回はRust Onlyではないため、使う理由がありません。よって、使いません。

プロジェクトのスタート

cd tauri-app
npm install
npm run tauri android init

# For Desktop development, run:
npm run tauri dev

# For Android development, run:
npm run tauri android dev

修正

ということで早速とばかりにnpm run tauri devするとエラーが発生します。なので、プログラムを修正します。

import { createSignal } from "solid-js";
import logo from "./assets/logo.svg";
- import { invoke } from "@tauri-apps/api/tauri";
+ import { invoke } from "@tauri-apps/api/primitives";
import "./App.css";

また、npm run tauri android devも実はうまく動きません。
これは、モバイルの検出がうまくいっていないためであり、このコマンドを実行するときだけこうします。

+ const mobile = !!/android|ios/.exec(process.env.TAURI_PLATFORM);
const mobile = true;

※アプリを既にインストールしていると失敗するため先にアンインストールしてください

また、VSCodeの解析がうまく働くように、tsconfig.jsonもこれに書き換えます

tsconfig.json
{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ESNext", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "esModuleInterop": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    /* develop */
    "baseUrl": "./",
    "paths": {
      "~/*": [
        "./src/*"
      ]
    },

    // types
    "types": [
        "vite/client",
    ],
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

更に、src-tauri\gen\android\app\build.gradle.ktsを書き換えます
なぜなら、今のcompileSdkは34だからです。しかし、Gradleは8.0.0を使っているため、警告が来ますが、コンパイルできたので問題ないと思います。また、このままビルドすると、署名されていないapkができてしまい、インストールできません。
※aabファイルは問題なくできあがります

ということで、署名

build.gradle.kts(app)
android {
-   compileSdk = 33
+   compileSdk = 34
    namespace = "com.tauri.tauri_app"
    defaultConfig {
        manifestPlaceholders["usesCleartextTraffic"] = "false"
        applicationId = "com.tauri.tauri_app"
        minSdk = 24
-       targetSdk = 33
+       targetSdk = 34
        versionCode = 1
        versionName = "1.0"
    }
+   signingConfigs {
+       create("mySigningConfig") {
+           // keytool -genkey...で作れる。デバッグ用のは、`~\.android\debug.keystore`にある
+           storeFile = file("C:/bin/key/my-key.keystore")
+           // KeyStore作成時に設定した値を覚えておく必要有り
+           storePassword = "password"
+           keyAlias = "alias"
+           keyPassword = "password"
        }
    }
    buildTypes {
        ・
        ・
        ・
        getByName("release") {
+           signingConfig = signingConfigs.getByName("mySigningConfig")
            isMinifyEnabled = true
            proguardFiles(
                *fileTree(".") { include("**/*.pro") }
                    .plus(getDefaultProguardFile("proguard-android-optimize.txt"))
                    .toList().toTypedArray()
            )
        }
    }
    kotlinOptions {
        jvmTarget = "1.8"
    }
}

因みに、apkファイルでインストールした場合は約56.44MB、aab->apksでインストールした場合は、約17.84MBで、超軽量化しますが、aabだとpcからいれなきゃいけなくてダルイですよね

疲れたのでここで止めます

5
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?