Zenn
Open6

Electron => tauri への移行

t-yngt-yng

既存プロジェクトにtauriをインストール

$ yarn add -D @tauri-apps/cli
$ yarn add @tauri-apps/api

Tauriアプリの初期化

$ yarn tauri init
$ tree src-tauri
src-tauri
├── Cargo.toml
├── build.rs
├── icons
├── src
|   └── main.rs
└── tauri.conf.json
t-yngt-yng

良かった点

  • ビルドやdevサーバーの実行などの環境構築が楽

    • ElectronだとTypeScriptのコンパイルとかビルドを別々に制御する必要があって面倒だった
    • 言語レベルで分かれているので逆に楽な説はあるかも？
    • シンプルに tauri/cli が優秀

  • システムトレイが標準でサポートされている

t-yngt-yng

システムトレイ

システムトレイを表示

use tauri::{SystemTray, SystemTrayEvent};

fn main() {
  let system_tray = SystemTray::new();

  tauri::Builder::default()
    .on_system_tray_event(|app, event| match event {
      SystemTrayEvent::LeftClick {
       position,
        ..
      } => {
        println!("left click! position:{:?}", position);
      }
      _ => {}
    })
    .system_tray(system_tray)
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}

トレイをクリックしてウィンドウを表示/非表示

use tauri::{SystemTray, SystemTrayEvent};

fn toggle_window_visible(window: &tauri::Window) {
  match window.is_visible() {
    Ok(visible) => {
      if visible {
        window.hide().unwrap();
      } else {
        window.show().unwrap();
      }
    }
    Err(err) => {
      panic!("failed toggle visible for main window {}", err);
    }
  }
}

fn main() {
  let system_tray = SystemTray::new();

  tauri::Builder::default()
    .on_system_tray_event(|app, event| match event {
      SystemTrayEvent::LeftClick {
       position,
        ..
      } => {
        let window = app.get_window("main-window").unwrap();
        let i32_position = tauri::PhysicalPosition::<i32> {
          x: position.x as i32,
          y: position.y as i32,
        };
        window.set_position(tauri::Position::Physical(i32_position)).unwrap();
        toggle_window_visible(&window);
      }
      _ => {}
    })
    .system_tray(system_tray)
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}
t-yngt-yng

MacOSでDockでアイコンを表示しない

参考コミット
参考issue

fn main() {
  tauri::Build()::default()
    .setup(|app| {
      #[cfg(target_os = "macos")]
      app.set_activation_policy(tauri::ActivationPolicy::Accessory);
      Ok(())
    })
}
t-yngt-yng

アイコンの準備

Tauriではアプリアイコンを生成する公式ツールが存在するので、それを利用してアイコンを生成する
用意するのは 1024x1024の透過なpng画像

$ yarn add -D github:tauri-apps/tauricon
$ yarn tauricon ./app-icon.png -t src-tauri/icons