きっかけ
普段使っているアプリの中で、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のメニューバーとの戦いの結果を書いていきたいと思います！！