仕事のタスク管理をslackで行っていたが、いい加減ちゃんと管理しくなってきたのでデスクトップアプリを自作したので、その内容を記事にした。
リポジトリ
アプリの説明
- Markdownベースで記載できるTODOアプリ
- できるだけシンプルに作成
- まだ開発中
使用技術
Tauriとは？
- TauriはRustで作成されたクロスプラットフォームでデスクトップアプリが作成できるフレームワーク
- デスクトップアプリのネイティブ部分のコードはRust、フロントエンドはWebの技術を使用できる
- なのでフロントエンドに関しては以下を使用できる
- HTML
- React
- Next.js
- Svelte
- なのでフロントエンドに関しては以下を使用できる
- 開発の領域的には、Electronと同じだが、バンドルサイズ、消費CPU、セキュリティが改善されている
開発のモチベーション
- 仕事のTODOリストは今までslackのDMに書いて運用していた
- 雑な運用でリストで書き出して、タスクが終わったら「✔」をつけるのみ運用
- 他のTODOアプリも試したが無駄にリッチなアプリが多くて続かなかった
- ブラウザだと他の作業で間違って消したりするのでデスクトップアプリで作りたかった
- 仕事のTODOだとセンシティブな内容が多かったので、サーバー通信は避けたい
- なので、自分用にカスタマイズしたTODOアプリを作ってみた
実装
構築
以下の手順でコマンドを実行していけば、初期構築は簡単に行える。
Tauriでの開発方法
以下のコマンドでブラウザでローカル起動。ホットリロードも対応しているので、開発は快適。
$ yarn dev
以下のコマンドでデスクトップアプリでローカル環境を起動。
ネイティブの機能をデバッグする場合は、こちらを使用
$ yarn tauri dev
以下のコマンドでデスクトップアプリをビルドできる。
$ yarn tauri build
frontendの開発
- frontendはReactで作成
- Markdownの表示はmarkdown-to-jsxを使用
- Markdownのparseはremark-parseを使用
- checkbox部分のパースする自前で作成
- コード
ネイティブ機能の開発
- ネイティブ機能はRustで開発を行う
- アプリのmenuは以下で作成
- menuからfrontend側の通信は、以下のように作成
- ネイティブから送信
- frontendで受け取り
- コード
- frontend側から、Tauri APIを使用してネイティブの機能も活用可能
こんな感じで作成した。
まとめ
React経験者なら、ほぼ学習コスト無しでデスクトップアプリが作れるので、作業効率アップ用のアプリ作成とかはサクッと作る。
TODOアプリみたいに世の中には溢れているけど、自分に合ったものは見つからない時は、Tauriを使って自作するのも良いかと思った。
