きっかけ

普段使っているアプリの中で、gitifyというアプリがあります。
GitHubの通知をMac上で出してくれるアプリです。（WindowsとLinuxでも使えそうですね）

画面上のメニューバーにアイコンが常駐していて、クリックすると通知の画面が出る、よくある仕組みです。

通知が来たら緑色に変わっていて気づきやすくもなります。

デスクトップアプリを作りたい

こう書くとただGitifyが好きな人の記事ですね。

お気づきかと思いますが、私は今回Gitifyのような通知アプリを作ってみたいと思いました。
GitHubだけでなく、自分でリマインドかけたいものがカスタマイズできて、チーム開発での当番の確認などを行いたい。それが目標となります。

どうやって？

私はVueとRailsを主に使っている開発者ですが、デスクトップアプリについては少しだけelectronを使ったことがあるくらいでした。

そのため、electronを試してみたのですが、viteのバージョンとの衝突でどうすればいいかわからなくなりました。

そんな時に他の代替案を探していたらtauriを見つけました。

tauri

tauriを使うとフロントエンドのフレームワークをRustなどの言語と統合してデスクトップアプリを作ることができます。

公式の紹介

Tauriは、主要なすべてのデスクトップおよびモバイルプラットフォーム向けの、小さく高速なバイナリを構築するためのフレームワークです。開発者は、ユーザー体験を構築するためにHTML、JavaScript、CSSにコンパイルされるあらゆるフロントエンドフレームワークを統合でき、必要に応じてバックエンドロジックにはRust、Swift、Kotlinなどの言語を活用できます。

手順

前置きが長くなりましたが、環境を構築していきましょう

実は以下のコマンドで大体のことが解決できます。

$ npm create tauri-app

すると以下のような選択肢が出てきますので、Vueを選びました。
他の選択肢は皆さんのお好みに合わせて構築してください！

✔ Project name · project
✔ Identifier · com.project.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 · Vue - (https://vuejs.org/)
✔ Choose your UI flavor · TypeScript

私はVue3.5が大好きなのでVueも最新で入れました。

$ npm install vue@latest

環境の準備が終わったら、あとは以下のコマンドを実行するだけです。

$ npm run tauri dev

おわりに

元々はメニューバーやトレーの内容までまとめて書きたかったのですが、まだ安定したものが出来上がらず...

近いうちにtauri v2のメニューバーとの戦いの結果を書いていきたいと思います！！