TauriによるiOSアプリ開発

TauriによるiOSアプリ開発 Akira Ishino (@akrisn)

自己紹介 石野 明 (@akrisn) 学生時代に大阪から北大へ その後、九大 → 東北大 → Google (SWE) → スタートアップ (Fellow) → Works Application (Sr. Fellow) → Mercari (Pr. Eng) → ス タートアップ (CTO) → Indeed (St. Eng.) リモートワークで札幌へ移住 現在、フリーランス & 個人開発 & 起業準備中

今日のお題 Claude Codeでウェブゲームを作成し、 Tauriでモバイルアプリ化する

Claude Code プロンプト Please create a mobile space racer game with Three.js. UI should work only with click and drag.

Claude Code

Tauri v2によるアプリ化 UIにウェブ技術を用いたアプリ を開発するためのフレームワー ク Vue, Svelte, React, Solid, Angular, Preact, Yew, Leptos, Sycamore ベースはRust (ネイティブコードもサポート) マルチプラットフォーム Windows, macOS, Linux v2からモバイルサポート iOS, Android

create-tauri-app % npm create tauri-app@latest > npx > create-tauri-app Project name · space-racer-app Identifier · jp.lumilab.space-racer-app Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, deno, bun) Choose your package manager · npm Choose your UI template · Vanilla Choose your UI flavor · TypeScript Tips: Vanilla & JavaScriptを選ぶとViteが使われなくなるため、TypeScriptを選ぶ

Tauri プロジェクトが作成される Template created! To get started run: cd space-racer-app npm install npm run tauri android init npm run tauri ios init For Desktop development, run: npm run tauri dev For Android development, run: npm run tauri android dev For iOS development, run: npm run tauri ios dev

## まずは動かしてみる % cd space-racer-app % npm install % npm run tauri dev

index.htmlを入れ替える

srcの中を削除して、main.jsをコピーする index.htmlの

index.htmlの修正 <script type="module" src="/main.ts"></script> ↓ <script type="module" src="/src/main.js"></script>

Three.jsの追加 % npm install three

Tauriの実行 % npm run tauri dev すればアプリ ケーションが作成される。 npm run tauri build

iOSアプリ化 % npm run tauri ios init > [email protected] tauri > tauri ios init /opt/homebrew/bin/xcodegen /opt/homebrew/bin/idevicesyslog /opt/homebrew/bin/pod Apple dependencies are up to date ... Generating Xcode project... Generating plists... Generating project... Writing project... Created project at .../src-tauri/gen/apple/space-racer-app.xcodeproj victory: Project generated successfully! Make cool apps!

最初のビルドは失敗する % npm run tauri ios dev .../space-racer-app.xcodeproj: error: Signing for "space-racer-app_iOS" requires a development team. Select a development team in the Signing & Capabilities editor. (in target 'space-racer-app_iOS' from project 'space-racer-app')

XCodeでSigningの設定 % npm run tauri ios dev -- --open

再度、実行 % npm run tauri ios dev 最初はローカルネットワークの許可とエラーがでる 許可して、再起動

リリースビルド % npm run tauri ios build ... Finished 1 iOS Bundle at: .../src-tauri/gen/apple/build/arm64/space-racer-app.ipa

インストール XCodeの"Devices and Simulators"か らのインストールが簡単

さらに知りたい人は Tauri: https://v2.tauri.app/ja/ モバイル・プラグインの開発 https://v2.tauri.app/ja/develop/plugins/develop-mobile/ App Storeで配布 https://v2.tauri.app/ja/distribute/app-store/

• https://v2.tauri.app/ja/
• https://v2.tauri.app/ja/develop/plugins/develop-mobile/
• https://v2.tauri.app/ja/distribute/app-store/

Contributer 募集 Agent Stream Kit Rust + Tauri 2 + Svelte 5 https://github.com/stn/agent-stream-kit https://github.com/stn/agent-stream-app

• https://github.com/stn/agent-stream-kit
• https://github.com/stn/agent-stream-app