React + Tauriでデスクトップアプリ開発に入門してみた

by ynishimura

Slide 1

Slide 1 text

2024/11/22 ⻄村祐⼆ React + Tauriでデスクトップアプリ開発に⼊⾨してみた

Slide 2

Slide 2 text

⾃⼰紹介 2 ● 名前 ○ ⻄村祐⼆ ● 部署 ○ AWS事業本部オペレーション部 ● 業務 ○ 内製開発 ○ 業務改善 ● 住まい ○ 京都 ● 趣味 ○ 2歳の息⼦の⼦育て 2019/2020 APN AWS Top Engineers 2024/2023/2022/2021 APN ALL AWS Certiﬁcations Engineers

Slide 3

Slide 3 text

今⽇話すこと 3 Tauriについて ReactとTauriで簡単なデスクトップアプリを作ってみた話ハマったところと感想の話

Slide 4

Slide 4 text

⽬次 4 ● Tauriとは ○ 概要 ○ 主なコンポーネント ○ セキュリティ ● 簡単なアプリを作ってみた ● 開発中にハマったところ ● 実際に使ってみた感想 ● まとめ

Slide 5

Slide 5 text

Tauriとは

Slide 6

Slide 6 text

Tauriとは 6 Rustで書かれた軽量なクロスプラットフォーム対応GUI開発ツール ● 軽量性とセキュリティ ○ メインプロセスがRust実装で型安全 ○ WebViewを利⽤するためElectronなどよりインストーラサイズとメモリ使⽤量が⼩さい ● クロスプラットフォーム対応 ○ Windows、macOS、Linux、iOS（v2.0）、Android（v2.0） ● Web技術の利⽤可能 ○ UI部分にReactやVue.jsなどのWeb技術を使⽤可能

Slide 7

Slide 7 text

Tauriの主なコンポーネント 7 ● WebView制御機能 ○ フロントエンドをレンダリングするためのコンポーネント ○ プラットフォームに応じて最適なWebViewを使⽤ ○ クロスプラットフォームを実現 ● コアプロセス ○ バックエンドロジックを担当、Rustで実装 ○ システムリソースへのアクセスを管理 ○ ネイティブ機能を提供

Slide 8

Slide 8 text

Tauriの主なコンポーネント 8 ● WebView制御機能 ○ フロントエンドをレンダリングするためのコンポーネント ○ プラットフォームに応じて最適なWebViewを使⽤ ○ クロスプラットフォームを実現 ● コアプロセス ○ バックエンドロジックを担当、Rustで実装 ○ システムリソースへのアクセスを管理 ○ ネイティブ機能を提供

Slide 9

Slide 9 text

TauriのWebViewの制御機能 9 ● 2つのRustクレート（ライブラリ）で構成 ○ tao ■ プラットフォームのウィンドウ管理（メニューバーやシステムトレイなど）を担当 ○ wry ■ プラットフォームに応じてフロンエンドとWebViewのレンダリングを担当

Slide 10

Slide 10 text

Tauriのセキュリティ 10 セキュリティを重視して設計されている ● 権限管理 ○ アプリケーションがアクセスできるリソースを制限 ● コマンドスコープ ○ 必要最⼩限のコマンドのみ実⾏を制御 ○ 不要な機能へのアクセスを防御 ● コンテンツセキュリティポリシー (CSP) ○ フロントエンドのコンテンツが信頼できるソースからのみ読み込むように制御

Slide 11

Slide 11 text

Tauriのプラグインシステム 11 ● 機能拡張を容易にするプラグインシステムを提供 ○ WebViewからファイル操作、OSの情報取得などバックエンドの機能を呼び出す ○ Tauriのライフサイクルにフックし、処理を追加 ● 公式プラグインやコミュニティ製プラグインで柔軟にカスタマイズ可能

Slide 12

Slide 12 text

簡単なアプリを作ってみた

Slide 13

Slide 13 text

ストップウォッチアプリを作ってみた 13 ● 要件 ○ 常に最前⾯で表⽰ ○ 可能な限りシンプルなUI ● 機能 ○ アプリ起動で時間の経過をスタート ○ ダブルクリックでストップ‧スタート ○ 右クリックでリセット ○ リセットしたらローカルに経過時間をファイル出⼒

Slide 14

Slide 14 text

ストップウォッチアプリで利用したライブラリ 14 ● 開発環境 ○ macOS ○ Tauri 2.0 ● Web ○ React ○ Vite ○ Tailwind CSS ○ Framer Motion ● Backend ○ @tauri-apps/plugin-fs

Slide 15

Slide 15 text

実装のポイント 15 ● 雛形プロジェクトを作成できるCLIが提供されている ○ create-tauri-app ○ 対話形式で雛形を作成していく ○ フレームワークにはJS以外もある ■ .NET、Rust

Slide 16

Slide 16 text

実装のポイント 16 ● React選択時に作成される雛形 ○ src：フロントエンド ■ css、js ○ src-tauri：フロントエンド以外 ■ バックエンド（Rust） ■ Tauriの設定ファイル

Slide 17

Slide 17 text

実装のポイント 17 ● 開発時のデバッグ ○ npm run tauri dev ○ ローカルでデスクトップアプリ起動 ○ HMR(ホットリロード)も動作するので快適

Slide 18

Slide 18 text

実装のポイント 18 ● 開発時のデバッグ ○ WebViewデバッグコンソールを表⽰ ■ 重要 ■ cmd + opt + i エラーがバックエンド側（Rust）で発⽣したのかフロントエンド側で発⽣したのか確認するためにもコンソール画⾯は必須

Slide 19

Slide 19 text

実装時にRustの知識は必要？ 19 ● あった⽅が良いが不要な場合もある ● フロントエンドからバックエンドに命令を送るプラグインが提供されている ○ ⽬的にあうプラグインがある場合はRustによる実装が不要になる場合がある ○ 例）マシン内のファイル操作を⾏うプラグイン：plugin-fs ■ Tauriの設定ファイルで明⽰的に許可することで利⽤可能

Slide 20

Slide 20 text

作ったアプリのインストール方法 20 ● コマンド⼀発でdmgファイルを出⼒してくれる ○ npm run tauri build -- --bundles dmg ○ あとはいつもどおりの⽅法でアプリを追加し起動すると開発時と同じように起動 ○ ちょっと感動

Slide 21

Slide 21 text

他プラットフォームでインストール 21 ● Windows PCにインストールしてみた ○ 開発⽤のWindows PCがないためMac上でWindows向けにビルド ○ NSIS（Nullsoft Scriptable Install System）を利⽤ ■ Windows⽤のインストーラーを作成するためのツール ■ Mac上でWindows向けにビルドする機能はまだ実験段階 ○ 問題なくインストールでき、正常に動作してましたがWindows環境でのビルドが推奨 https://v2.tauri.app/distribute/windows-installer/

Slide 22

Slide 22 text

他プラットフォームでインストール 22 ● 必要なツールのインストールとビルドコマンド⼀発でexeファイルを出⼒ ○ npm run tauri build -- --runner cargo-xwin --target x86_64-pc-windows-msvc ○ Windows PCで実⾏してみるとインストーラーが起動 https://v2.tauri.app/distribute/windows-installer/

Slide 23

Slide 23 text

他プラットフォームでインストール 23 ● Windows環境でも正常に動作 ○ OS: Windows 11

Slide 24

Slide 24 text

他プラットフォームでインストール 24 ● アンインストール⽤のファイルもデフォルトで⽤意されている ○ アプリの撤去も簡単

Slide 25

Slide 25 text

開発中にハマったところ

Slide 26

Slide 26 text

開発中にハマったところ 26 ● 公式からまだチュートリアル的なものが提供されていない？ ○ リファレンスを⾏き来することになる ● 想定した挙動にならないとき、どこが原因か特定するのが難しい（慣れの問題） ○ フロントエンド（JS）実装ミス、WebViewの互換性の問題、 ○ Tauriの設定ミス、権限不⾜、バックエンド（Rust）の実装ミス ● 特にWebView関連の設定でハマった ○ それ以外はすんなり動いた ○ 簡単なアプリであったためバックエンド側は特に触れてない ○ 今回、３つ紹介

Slide 27

Slide 27 text

開発中にハマったところ（1/3） 27 ● CSSのopacityが動作しない ○ 不透明度の設定がWebViewに反映されない解決策 ● macOSPrivateApiを有効にする必要がある https://v2.tauri.app/reference/javascript/api/namespacewebview/#properties-1

Slide 28

Slide 28 text

開発中にハマったところ（2/3） 28 ● デスクトップアプリのタイトルバーの消し⽅がわからない解決策 ● decorationsをfalseにするだけ

Slide 29

Slide 29 text

開発中にハマったところ（3/3） 29 ● タイトルバーを消したときアプリの移動ができない解決策 ● data-tauri-drag-regionをHTMLのタグに追加 ● permissionsに"core:window:allow-start-dragging"を追加

Slide 30

Slide 30 text

実際に使ってみた感想

Slide 31

Slide 31 text

所感 31 ● ⾃分好みのデスクトップアプリを作るのが楽しい ○ ツールの使い⽅などを覚えることに追われるのではなく、ゼロから形していく ● 思ったよりも簡単にデスクトップアプリが作れる ○ もっとハマると思ったけど意外とすんなり作れた ● 意外とそのままのWebアプリのコードでうごく ○ 追加設定やコードの修正を必要とされると思った、コピペでなんとかなる ● Rustとの距離感がいいかんじ ○ 必ずRustでの実装が必要ではない ○ 勉強のためにあえてRust（バックエンド）で実装することもできる

Slide 32

Slide 32 text

まとめ

Slide 33

Slide 33 text

まとめ 33 ● React + Tauriで軽量でセキュアなデスクトップアプリの作成可能 ● Reactのコードはそのまま活⽤できそう ● プラグイン活⽤でRustがわからなくてもデスクトップアプリの開発は可能 ● ⾃分好みのデスクトップアプリを作るのは楽しい！

Slide 34

Slide 34 text

No content