LoginSignup
2

Tauriでシンプルなノートアプリを作って遊ぶ

Posted at

この記事は「mofmof Advent Calendar 2023」13日目の記事です。

なぜ作ろうと思ったか

  • 急になにかしらの新しい技術を触ってみたいと思ったのと、デスクトップアプリを作ってみたい気持ちになりました。
  • 最初はElectronを考えていたのですが、Tauriの方が新しかったのとRustも少しやってみたさがあったのでTauriでデスクトップアプリを作ろうと思いました。
  • バックエンドも興味のあったものをとりあえず全部盛りしました。

どんなアプリ?

ObsidianやNotionのようなノートアプリです。

スクリーンショット 2023-12-10 20.39.07.png

できること

  • ログイン
  • ノートの追加、編集、削除
  • ノートの自動保存
  • マークダウンで書ける

できないけどやりたいこと

  • ログイン状態の維持
  • ノートのタブ切り替え

技術

  • Tauri
  • Next.js
  • Nestjs
  • Prisma
  • Supabase
  • Auth0

詰まったところ

認証の時のコールバックどうすればよいのか

下記を使ってみました。
認証サービスからauthorization codeを受け取り、その後アクセストークンを取得したらJSに渡してます。

use tiny_http::{Server, Response};

let server = Server::http("localhost:3000").unwrap();

for request in server.incoming_requests() {
    let url = request.url().to_string();

    if url.starts_with("/callback?code=") {
        let code = url.split("=").nth(1).unwrap_or_default();

        // ここでアクセストークンを取得(省略)

        match window.emit("auth-success", access_token) {
            Ok(_) => {},
            Err(error) => eprintln!("Error: {}", error),
        }

        let response = Response::from_string("認証成功。アプリに戻ってください。");
        request.respond(response).unwrap();
        break;
    }
}

NestJSのJWTのところ

これは下記を参考にして進めました。

GET /authorizeエンドポイントにaudienceを渡していなくて、NestJSのAPIを呼ぶと401になってしまって少しはまっていました。

Auth0に設定したAPIのidentifierを指定したら解決しました。

Codemirrorのエディタのところ

ノートの内容を自動保存したかったのでdebounceを実装していたのですが、いい感じにちらつかず自然に保存させるところで悩みました。

一旦まあまあいい感じにはなっていますが、もう少し深掘りしてパフォーマンスを最適化していきたいです。

遊んでみた感想

  • Tauriの情報があんまり出てこなかったので、RustもTauriも初挑戦の中どう実装すれば良いのか途方に暮れたこともありましたが、AIのおかげもあり一旦動くところまではいけたので、ちゃんと理解して深掘りしたい気持ちです。
  • デスクトップアプリがどうやって動いているか知識0だったので、少しだけかじれて良かったです。ちゃんとできたらリリースまでしたいです。
  • ノートアプリのような誰にとってもニーズがあるようなサービスを作るのは良さそうだなと感じました。何を作るかより誰が作るか的なところがある気がしていて、サービスではなく自分を売っていく戦略は良い気がしています。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2