こんにちは。だだっこぱんだです。
今回はTauriを使ってiOSアプリを作っていきます。
読むのがおすすめな人
- フロントエンドをやってる人
- Tauriについてあまり知らない人
- iOSやAndroidのアプリを作りたいけどFlutterやSwift, Javaなどを覚えるのは大変だなと思っている人
Tauriとは
超ざっくり説明すると、Rustで書かれたデスクトップアプリを作るためのフレームワークです。
ElectronのようにHTML, CSS, JavaScriptで書くことができます。
Rustだからと言って身構える必要はなく、実際のところある程度のアプリであればほとんどJavaScriptで完結します。
v2のalpha版ではiOS, Androidにも対応しています。
ググれば色々出てくるので調べてみてください。
環境
これらの環境を前提として、進めていきます。
- MacOS Ventura
- Rust 1.72.0
- Node v18
- xcode 15
準備
まずは、tauri-cliをインストールします。
cargo install tauri-cli --version 2.0.0-alpha.16
次に、プロジェクトを作成します。
今回はmantineのテンプレートを使います。
git clone https://github.com/mantinedev/vite-min-template.git
とりあえずフロントエンドが動くかだけ確認しちゃいましょう
pnpm i
pnpm dev
以下のような出力が表示され、ブラウザで http://localhost:5173 にアクセスできれば成功です。
VITE v4.3.2 ready in 527 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
Tauriの設定
プロジェクトが準備できたらTauriの設定をしていきます。
$ cargo tauri init
✔ What is your app name? · vite-min-template
✔ What should the window title be? · vite-min-template
✔ Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? · ../dist
✔ What is the url of your dev server? · http://localhost:5173
✔ What is your frontend dev command? · pnpm run dev --host
✔ What is your frontend build command? · pnpm run build
Where are your web assets には ../dist と
What is the url of your dev server? には http://localhost:5173 と
What is your frontend dev command? には pnpm run dev --host と入力してください。iOSの場合は --host をつけないとデバイスからアクセスできず動きません。
次にsrc-tauri/tauri.config.jsonを編集します。
tauri.bundle.identifierをcom.tauri.dev以外のものにしてください。
今回はworld.ddpn.tauri-iosにします。
{
"build": {
"beforeBuildCommand": "pnpm run build",
"beforeDevCommand": "pnpm run dev --host",
"devPath": "http://localhost:5173",
"distDir": "../dist"
},
"package": {
"productName": "vite-min-template",
"version": "0.1.0"
},
"tauri": {
"bundle": {
"active": true,
"category": "DeveloperTool",
"copyright": "",
"deb": {
"depends": []
},
"externalBin": [],
"icon": [
"icons/32x32.png",
"icons/128x128.png",
"icons/128x128@2x.png",
"icons/icon.icns",
"icons/icon.ico"
],
- "identifier": "com.tauri.dev",
+ "identifier": "world.ddpn.tauri-ios",
"longDescription": "",
"macOS": {
"entitlements": null,
"exceptionDomain": "",
"frameworks": [],
"providerShortName": null,
"signingIdentity": null
},
"resources": [],
"shortDescription": "",
"targets": "all",
"windows": {
"certificateThumbprint": null,
"digestAlgorithm": "sha256",
"timestampUrl": ""
}
},
"security": {
"csp": null
},
"windows": [
{
"fullscreen": false,
"height": 600,
"resizable": true,
"title": "vite-min-template",
"width": 800
}
]
}
}
証明書を作成
XCodeを開き、Preferences -> Accounts -> Manage Certificates と進み
+ -> Apple Development をクリックして証明書を作成します。
また配布するために、+ -> Apple Distribution も作成しておきます。
動かしてみる
早速動かしてみましょう。
cargo tauri ios init
上のコマンドを実行すると、src-tauri/gen というフォルダが作成されます。
次に
cargo tauri ios dev
を実行します。
するとシミュレータの選択ができるので、選択してください。
今回は iPhone SE (3rd generation) を選択します。
$ cargo tauri ios dev
Info Using development team `***`. To make this permanent, set the `APPLE_DEVELOPMENT_TEAM` environment variable to `***`
Info Using 192.168.1.17 to access the development server.
/opt/homebrew/bin/ios-deploy
Info package `ios-deploy` present: true
Detected iOS simulators:
[0] iPad (10th generation)
[1] iPad Air (5th generation)
[2] iPad Pro (11-inch) (4th generation)
[3] iPad Pro (12.9-inch) (6th generation)
[4] iPad mini (6th generation)
[5] iPhone 15
[6] iPhone 15 Plus
[7] iPhone 15 Pro
[8] iPhone 15 Pro Max
[9] iPhone SE (3rd generation)
Enter an index for a simulator above.
Simulator: 9
Info Starting simulator iPhone SE (3rd generation)
Running BeforeDevCommand (`pnpm run dev --host`)
...
すんごい量のログが流れますが、エラーログが出ない限りは大丈夫です。
しばらくするとシミュレータ常にアプリが起動している状態になります。
ビルドする
次にビルドしてみましょう。
cargo tauri ios build
すると、またすんごい量のログが流れます。エラーが出ない限りは気にせずに待ちましょう
最終的にこのようなログが出たら成功です。
Exported app_iOS to: /Users/ddpn08/data/code/github/ddPn08/vite-min-template/src-tauri/gen/apple/build
Finished 1 IPA at:
/Users/ddpn08/data/code/github/ddPn08/vite-min-template/src-tauri/gen/apple/build/arm64/vite-min-template.ipa
AppStoreに配信する
まずは、Apple Developer Programにログインします。
次に上記URLからIdentifierをの作成をします。
App IDs を選択
App を選択
tauri.config.jsonに記述したidentifierを入力して作成
次にProvisioning Profileを作成します。
上記URLから+ -> App Store を選択します。
次に先ほど作成したApp IDを選択します。
次に先ほど作成した証明書を選択します。
最後にプロファイルの名前を指定したらGenerateをクリックします。
次に、AppStore Connectにログインします。
マイアプリ -> ＋ -> 新規アプリ と進みます。
プラットフォームはiOS、バンドルIDは先ほど作成したものを入力します。
その他項目を埋めたら、作成をクリックします。
ビルド & アップロード
Provisioning Profileを選択
まずはXCodeで現在のプロジェクトを開きます。
cargo tauri ios open
次に左上のプロジェクトをクリックし、Signing & Capabilities を選択します。
Releaseの Bundle identifier に先ほど作成したものを入力します。
また、Automatically manage signing のチェックを外し、先ほど作成したProvisioning Profileを選択します。
ExportOptions.plistを編集
src-tauri/gen/apple/ExportOptions.plist を開き、以下のように編集します。
- <key>method</key>
- <string>development</string>
+ <key>method</key>
+ <string>app-store</string>
+ <key>provisioningProfiles</key>
+ <dict>
+ <key>world.ddpn.tauri-ios</key>
+ <string>Tauri_iOS_Distribution</string>
+ </dict>
そうしたら以下のコマンドを実行してビルドします。
cargo tauri ios build
...
Exported app_iOS to: /Users/ddpn08/data/code/github/ddPn08/vite-min-template/src-tauri/gen/apple/build
Finished 1 IPA at:
/Users/ddpn08/data/code/github/ddPn08/vite-min-template/src-tauri/gen/apple/build/arm64/vite-min-template.ipa
このようなログが出たら成功です。
AppStore Connectにアップロード
最後に、AppStore Connectにアップロードします。
色々な方法がありますが、今回はcliを使ってアップロードします。
# Validation
xcrun altool --validate-app -f src-tauri/gen/apple/build/arm64/vite-min-template.ipa -t ios -u <Apple Developer Programのアカウント> -p <App用パスワード>
# Upload
xcrun altool --upload-app -f src-tauri/gen/apple/build/arm64/vite-min-template.ipa -t ios -u <Apple Developer Programのアカウント> -p <App用パスワード>
エラーが出なければ成功です。
まとめ
今回はTauriを使ってiOSアプリを作ってみました。
iOS, Android対応はv2で行われる予定で、現在はalpha版です。
2024年にはv2がリリースされる予定なので、めちゃ楽しみです。
個人的には今後、tauri製のアプリはかなり増えていくのではないかなと思っています。
宣伝
Parakeet株式会社は、Parakeet.VCというAIボイスチェンジャーをリリース予定です。
CPUのみで動作するボイスチェンジャーで、iOSアプリとしてもリリース予定です。
ご興味ある方は、ぜひwaitlistに登録してみてください。
まもなくベータ版をリリース予定です。
Discussion