GASHIRA-BLOG

tauriを使ってデスクトップアプリを作って、Github Actionsにて公開してみた

公開日: 2024年8月11日

最終更新日: 2024年8月16日

はじめに

tauriを久々に調べたらメジャーバージョンがv1となってたので、使い心地を調べるために使ってみました。
Svelte kitも興味があったので使ってみましたが、Svelteについてはもう少し気になるところを試したら記事書こうと思います。
勉強のために、変なコードも残ってますが、忘備録として残ったままのコードになったりしています。
Rust周りは自身がないので間違いがあれば教えてください。

環境•ライブラリ

実行環境（前提）

mac (intel) OS
Node.js(18系)
npm ... Node.jsのパッケージマネージャー
Cargo ... Rustのパッケージマネージャー

ライブラリ

tauri
Svelte
Github actions

参考

tauri公式
SvelteKit
tauri-action … tauriのビルドをしてくれるgithub actionsのAction
GithubActions ドキュメント … 構文の説明が記載されているページ

やったこと

tauriの準備
ルーティングの追加
設定ファイルの修正
ネイティブのアラートを出力
CI/CDによる自動デプロイ設定

tauriの準備

tauriとは

まずは、tauriを知らない方向けに簡単に説明します。
tauriとはRustで作成されたデスクトップアプリケーションを作成することができるフレームワークです。
特徴としてはフロントエンドの技術を用いてデスクトップアプリを作成することができるところが挙げられます。

tauriのインストール

では、環境の準備を始めてみます。
公式ドキュメントと同じことをするので、詳しく知りたい方はそちらを参照ください。
まずはtauriのテンプレートを作成

npm create tauri-app@latest

ここで、 Svelte を選択しました。

Svelteを選んだ画面

これだけでSvelteを使用したtauriの環境ができました。

あとは

npm run tauri dev

を実行するとアプリが起動します。

※エラーがいくつか起きたんでエラーがあったらトラブルシューティングを確認してみてください

dev起動できたtauriの画面

ルーティングの追加

ここは、SvelteKitの使い方がほとんどなので、さらっと記載します。
src/routes に sample/+page.svelte を作成し、表示したい内容を記載します。

src/routes/sample/+page.svelte

<div>
  <h1>Hello sample</h1>
</div>

そして、 src/routes/+page.svelte に

src/routes/+page.svelte

<a href="/sample">リンク</a>

を追加すると、追加したリンクをクリックすることでページ遷移できます。

要は、フロントの書き方で画面遷移ができるということですね。

設定ファイルの修正

エイリアスの追加と、ビルドのためにドメインの修正を行いました。

TypeScript エイリアスの追加

tsconfig.json にエイリアス追加

tsconfig.json

{
  // ...省略
  "compilerOptions": {
    // ...省略
    "baseUrl": "./src",
    "paths": {
      "$components/*": ["./components/*"],
      "@/*": ["./*"]
    }
  }
}

vite.config.js にエイリアス追加

vite.config.js

import path from "path";

export default defineConfig(async () => ({
  // ...省略
  resolve: {
    alias: {
      $components: path.resolve(__dirname, "src/components"),
      "@": path.resolve(__dirname, "src"),
    },
  },
  // ...省略
}));

tsconfigとvite.configにエイリアスを追加すると、動くようになりました。

ビルドのためのドメイン変更

ビルドを実行すると、ドメインを変更していない場合警告が出てビルドができないため tauri.bundle.identifier を変更して、ビルドできるようにしました。

src-tauri/tauri.conf.json

{
  // ...省略
  "tauri": {
    "bundle": {
      // ...省略
      "identifier": "gashira-e.com",
      // ...省略
    }
  }
}

これにてビルドコマンドが動くようになりました。

npm run tauri build

ネイティブのアラートを表示

最後に、tauriをせっかく使っているので、ネイティブの機能を使いたいということで、アラート表示だけ試してみました。

tauri公式 dialog ドキュメント

まずは tauri.config.json で dialog を許可してあげましょう。

tauri.config.json

{
  "tauri": {
    "allowlist": {
      "dialog": {
        "all": true
      }
    }
  }
}

設定で許可できたら、JS側でdialogを呼び出してみましょう。

src/routes/+page.svelte

<script lang="ts">
  import { message } from "@tauri-apps/api/dialog";

  const handleClickOpenDialog = async () => {
    await message("Hello, World!", {
      title: "Hello",
    });
  };
</script>

  <button on:click={handleClickOpenDialog}>ダイアログを開く</button>

このコードを追加して、ダイアログを開くボタンを押下することで、ダイアログが表示されます。

ネイティブ機能も簡単に呼び出すことができるので、簡単な機能の作成はtauriでカバーできるのが便利ですね。

CI/CDの設定

これは tauri 公式が用意しているGithubActions tauri-action があったので、それをほぼ丸コピすれば動かせました。

.github/workflows/release.yaml というファイルを作成

.github/workflows/release.yaml

on:
  push:
    branches:
-      - release
+      - main

releaseブランチは今回作ってないので、mainブランチをpushしたら動くようにしました。

これで、自動で Draft release が作られるようになったので、あとは文言の修正などを行い、公開すればアプリケーションがダウンロードできるようになりました。

releaseが作られていることがわかる画像

最後に

tauriを使ったことで、フロントの知識だけでネイティブアプリが簡単に作成することができました。
ドキュメントもわかりやすかったので、個人的にはelectronよりとっつきやすい印象を受けました。
実際にプロダクトで使うときには、データの保存なども必要だと思うので、引き続き tauri-apps 周りのドキュメントを見たり、いろいろ触ってみようと思います。
Svelteも思ったよりよかったので、別途勉強を進めてみようかなと思いました。

おまけ

トラブルシューティング

use of unstable library feature 'once_cell’

npm run tauri dev を実行時にエラーが発生しました。

error[E0658]: use of unstable library feature 'once_cell'
   --> /Users/gashira/.cargo/registry/src/github.com-1ecc6299db9ec823/ignore-0.4.22/src/gitignore.rs:596:9
    |
596 |     use std::sync::OnceLock;
    |         ^^^^^^^^^^^^^^^^^^^
    |
    = note: see issue #74465 <https://github.com/rust-lang/rust/issues/74465> for more information

これは、 github issue に記載されているように対応したら大丈夫でした

cd src-tauri
cargo update -p ignore --precise 0.4.18

package `tokio v1.39.2` cannot be...

rust関連のファイルが古く、以下のエラーが出たりしました。

（2024/08/07現在）

error: package `tokio v1.39.2` cannot be built because it requires rustc 1.70 or newer, while the currently active rustc version is 1.69.0
Either upgrade to rustc 1.70 or newer, or use
cargo update -p tokio@1.39.2 --precise ver
where `ver` is the latest version of `tokio` supporting rustc 1.69.0

tokioというパッケージのバージョンが、今使っているrustcのバージョンと合わないので、tokioのダウングレードを行いました。

cd src-tauri
cargo update -p tokio --precise 1.38.1

プロフィール

名前: GASHIRA-E
経験: フロントエンド(React,Next.js)/firebase/Node.js(Express)