[[📒Articles]] > [[📒2022 Articles]] ![[2022-03-27.jpg|cover-picture]] [[Tauri]]を使って自分だけの[[Slack]]クライアントを作ってみた記録です。 > [!warning] #2022/07/17 追記 > この記事は #2022/03/27 時点の内容です。その後、[[Tauri]]はv1.0がリリースされ、ドキュメントリンクや手順がそれなりに変更されています。 > **本記事の内容は昔の情報としての参考に留めてください**。 > [!warning] #2025/02/20 追記 > 元の参考サイトもいくつか消失しています。 ## はじめに 『[[Slack]]クライアントを実装した』というと凄そうですが、**今できる機能はフリーワードによるMessageの検索だけです。つまり、使い物になりません**。それではなぜ、このようなものを作り始めたのかというと、以下の理由からです。 - 公式[[Slack]]クライアントでは実装されていないが欲しい機能があった - なんでもいいから[[Rust]]でプロダクトを書くモチベーションが欲しかった ### エゴサーチと[[🧊Slackego]] 欲しい機能の1つとしてエゴサーチ機能があります。これについては、以前に[[Nim]]で[[🧊Slackego]]というプロダクトを作成したことがあります。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://github.githubassets.com/favicons/favicon.svg" /> <span class="link-card-v2-site-name">GitHub</span> </div> <div class="link-card-v2-title"> GitHub - tadashi-aikawa/slackego: Ego search script for Slack. </div> <div class="link-card-v2-content"> Ego search script for Slack. Contribute to tadashi-aikawa/slackego development by creating an account on GitHub. </div> <img class="link-card-v2-image" src="https://opengraph.githubassets.com/798c31b76fbd73d7bbf4095aaf1954abadf26ef3953d7421b26910517d52fbe5/tadashi-aikawa/slackego" /> <a href="https://github.com/tadashi-aikawa/slackego"></a> </div> 4年も前ですが、実は今もコレ使っています。自分で言うのもなんですが、要求に見合ういい落としどころを実現した[[CLI]]ツールだと思っています。 ### [[Rust]]を使うモチベーション 最近、[[Rust]]は世界的にも盛り上がりを見せています。私自身も2～3年前から社内ツールや[[OSS]]のCLIツールで少し試してきて、昨年はプロダクトに関するコンバータで正式に導入もしました。 一方、[[Rust]]の経験を積む機会はあまり作れていません。私が言語を習得する最大のモチベーションは**作りたいツールがあること**ですが、[[CLI]]やAPIを作るだけなら[[Rust]]よりも[[Go]]や[[Kotlin]]で済むケースが多いです。[[GUI]]に至っては間違いなく[[TypeScript]]一択でしょう。細かいことは気にせず作ってしまえばいいのですが、==技術や勉強自体は好きでない私にとって、業務外でそのモチベを保つことは困難==でした。 ### [[Tauri]]のrc版リリース そんなとき急遽[[Tauri]]の記事が目に入りました。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://www.publickey1.jp/favicon.ico" /> <span class="link-card-v2-site-name">www.publickey1.jp</span> </div> <div class="link-card-v2-title"> Electronの代替を目指す軽量なRust製フレームワーク「Tauri」、リリース候補版に到達 </div> <div class="link-card-v2-content"> WindowsやmacOS、Linuxなどのクロスプラットフォーム対応のデスクトップアプリ開発を容易にするフレームワークとして高い人気を持つフレームワークが「Electron」です。 ElectronはChromiumとNo ... </div> <img class="link-card-v2-image" src="https://www.publickey1.jp/2022/btuvp2SE.jpg" /> <a href="https://www.publickey1.jp/blog/22/electronrusttauri.html"></a> </div> [[Tauri]]を知ったのはこれが初めてではありません。ただ、1年近く前に見たときは『[[TypeScript]]と[[Rust]]で[[Electron]]の代用? 夢のある話だねえ...』と本気にしていませんでした。その[[Tauri]]がもうすぐv1.0.0をリリースしようとしていたのです。 ### なぜ[[Tauri]]を受け入れたのか? 現時点だと圧倒的な実績の違いや技術的ハードルの低さから、[[Electron]]を使うのが一般的でしょう。仕事でもデスクトップアプリケーションは[[Electron]]を使っています。しかし、そんなことを言っていたら一生[[Rust]]を使う機会は来ないかもしれない...これが最後のチャンスだと思い[[Tauri]]を使ってみることにしました。 ### なぜ[[Slack]]クライアントか? デスクトップアプリケーションの強みを生かして作りたいモノが他になかったからです。 大抵のツールはブラウザで動くWebアプリケーションの方が便利です。[[Electron]]か[[Tauri]]か...という前に、そもそもデスクトップアプリケーションとして作るべきか? で大抵が却下になります。 そんなデスクトップアプリケーションにも強みはあります。最も重要なポイントは==[[CORS]]を気にする必要がない==ことでしょう。外部とのやりとりをmainプロセスで完結させ、renderプロセスを表示とアクション着火に集中させることで、開発スピードとセキュリティの両方を担保できると考えています。[[Tauri]]を使うことで、mainプロセス部分を[[Rust]]で書けるのです！ 長くなりましたが本題に入っていきます。 > [!attention] > 本稿は[[TypeScript]]と[[Rust]]のコードを普通に書くことができる前提で書かれています。そのため、それらの技術について丁寧な解説はしません。 ## [[Tauri]]とは 改めまして、[[Tauri]]はWebフロントエンドの技術でデスクトップアプリケーションを作成するフレームワークです。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://tauri.app/favicon.svg" /> <span class="link-card-v2-site-name">Tauri</span> </div> <div class="link-card-v2-title"> Tauri 2.0 </div> <div class="link-card-v2-content"> The cross-platform app building toolkit </div> <img class="link-card-v2-image" src="https://v2.tauri.app/og.png?v=1" /> <a href="https://tauri.app/"></a> </div> [[Electron]]とは異なり[[JavaScript]]([[TypeScript]])だけでなく[[Rust]]が取り入れらているというのが特徴的です。 | | バックエンド | フロントエンド | | ------------ | ---------------------------- | -------------- | | [[Tauri]] | **[[Rust]]** | [[JavaScript]] | | [[Electron]] | [[JavaScript]] ([[Node.js]]) | [[JavaScript]] | 他に気になった特徴は以下のとおりです。詳細は公式サイトをご覧ください。 - インストーラーのサイズが小さい - [[Node.js]]とは異なり[[Rust]]は実行時のランタイムが不要だから - [[OS]]によって見た目が変わる可能性がある - [[Chromium]]ではなく[[OS]]のWebViewを使うから - [[Linux]]、[[macOS]]、[[Windows]]をサポート - クロスコンパイル未対応だが、[[Tauri GitHub Action]]を使えばリリースは可能 - 将来的にバックエンドは[[Rust]]以外の言語にも対応するつもり - [[Go]]、[[Nim]]、[[Python]]、[[C♯]]など ## プロジェクトベースを作る ここからは実践してきます。 ### 前提の環境作り [[Rust]]をはじめとしたいくつかのツールチェインが必要です。公式ドキュメントを参考にしてください。 > [!trash] #2025/02/20 この参考ページは404になりました > [[Windows]]をお使いなら、[[📜Tauriで最小構成のWindowsアプリケーションを立ち上げてみる]] が役に立つかもしれません。 ### [[Tauri]]プロジェクトの作成 [[create-tauri-app]]を使います。ツール名が[[🧊Vigilancia]]なので、そのように指定しています。また、フロントエンドフレームワークは[[Svelte]]を選びました。 ```console $ npx create-tauri-app Ok to proceed? (y) y ? What is your app name? polaris ? What should the window title be? Polaris ? What UI recipe would you like to add? create-vite (vanilla, vue, react, svelte, preact, lit) (https://vitejs.dev/guide/#scaffolding-your-first-vite-project) ? Add "@tauri-apps/api" npm package? Yes ? Which vite template would you like to use? svelte-ts ``` > [!hint]- なぜ[[Svelte]]か? > 最近[[Svelte]]を使い始めて気に入ってきたからです。仕事では[[Vue]]ばかり使っており、[[React]]や[[Angular]]は肌に合わないため見送っています。 ディレクトリに移動して開発用のコマンドを実行します。 ```console cd polaris npm run tauri dev ``` 新しいウィンドウが立ち上がればOKです。 > [!attention] > 初回は[[Rust]]の依存関係をフルビルドするため時間がかかります。2回目以降は、依存関係が変わらなければすぐに終わります。 ### [[Svelte Material UI]]の導入 UIフレームワークは[[Svelte Material UI]]を使います。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://sveltematerialui.com/icons/android-icon-192x192.png" /> <span class="link-card-v2-site-name">sveltematerialui.com</span> </div> <div class="link-card-v2-title"> Svelte Material UI </div> <div class="link-card-v2-content"> Material UI Components for Svelte, ready to use in your app. </div> <img class="link-card-v2-image" src="https://sveltematerialui.com/header.png" /> <a href="https://sveltematerialui.com/INSTALL.md"></a> </div> > [!hint]- なぜ[[Svelte Material UI]]か? > 一番スター数が多く、実装に必要な最低限のコンポーネントが一通り揃っているからです。 まずはインストールします。 ```console npm install --save svelte-material-ui ``` スタイルやアイコン対応のため`index.html`にいくつか`link`タグを追加します。 ```html:index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" href="/favicon.ico" /> <!-- Theme --> <link rel="stylesheet" href="node_modules/svelte-material-ui/bare.css" /> <!-- Material Icons --> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> <!-- Roboto --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700" /> <!-- Roboto Mono --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Svelte + TS + Vite App</title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.ts"></script> </body> </html> ``` > [!error]- Sourcemap for ".../@material/..." proints to missing source files > [[Svelte Material UIでsource fileのmissingエラーが発生する]] を参照。 ### [[Prettier]]の適応 [[SvelteにPrettierを適応]]します。 ```console npm i --save-dev prettier-plugin-svelte prettier ``` [[SvelteのPrettierでscript、style、templateの順番を変更]]したかったので[[Svelte Sort Order]]を`markup-scripts-styles`に設定しました。 ### `~`を`./src`としてimportできるようにする [[tsconfig.json]]に[[paths (tsconfig)|paths]]を追加します。 ```json { "compilerOptions": { "paths": { "~/*": ["./src/*"] }, } } ``` [[vite.config.ts]]にも`resolve.alias`が必要なので忘れずに。 ```ts export default defineConfig({ resolve: { alias: { "~": path.resolve(__dirname, "src"), }, }, }); ``` > [!info] > [[📝Viteでtsconfig.pathsの設定が有効にならない]] も参考に。 ### Taskfileの追加 普段、タスクランナーには[[Task]]を使っているため追加します。 ```yaml:Taskfile.yml version: "3" tasks: default: - task: help help: silent: true cmds: - task -l dev: desc: 開発ビルド cmds: - npm run tauri dev check: desc: cargo check dir: ./src-tauri cmds: - cargo check build: desc: 製品ビルド cmds: - npm run tauri build ``` > [!info] > [[Task]]について知りたい方は [[📘Windowsにも優しいタスクランナーTaskを試してみた]] もご覧ください。 これで下準備が終わりました。いよいよ[[Tauri]]を使った実装を開始します。 ## リストの表示 まずは[[Svelte]]の方で適当にリストを表示してみます。。`App.svelte`を編集します。 ```html:App.svelte <main> <List> {#each messages as message} <Item ><Graphic class="material-icons">send</Graphic><Text>{message}</Text ></Item> {/each} </List> </main> <script lang="ts"> import List, { Item, Text, Graphic } from "@smui/list"; let messages = ["aaa", "iii"]; </script> ``` ビルドするとそれっぽいものが表示されました。 ![[Pasted image 20220326135638.png]] ## [[Rust]]と[[TypeScript]]間でデータのやりとり ここから[[Rust]]のコードにも手を加えていきます。 ### Lockdownレシピ [[Tauri]]では代表的な設計としていくつかのレシピが紹介されています。今回はLockdownレシピを使うことにしました。 > [!trash] #2025/02/20 この参考ページは404になりました > > [!hint]- なぜLockdownレシピか? > [[Tauri]]を使うモチベーションとして、実用的な[[Rust]]の経験を積みたいというものがあります。Lockdownパターンはフロントエンドの描画・アクション以外の多くを[[Rust]]側で受け持ち、[[Promise (JavaScript)|Promise]]を使ってやりとりする思想であるため、バックエンドを[[Rust]]で開発するのと同等の経験が得られそうだと思ったからです。 レシピの案内に従い、`tauri.conf.json`の`allowlist`を空にします。これで[[TypeScript]]から[[Tauri]]を使って実行できることは皆無になりました。 ```diff "tauri": { - "allowlist": { - ... - } + "allowlist": {} } ``` ### Command [[Rust]]と[[TypeScript]]のやりとりにはCommandを使います。 > [!trash] #2025/02/20 この参考ページは404になりました > > [!attention] > [Events](https://tauri.studio/docs/guides/events) もあるので混同しないよう注意してください。 [[Rust]]のコードに`fetch_messages`という名前のコマンドを作成します。 ```rust:main.rs #![cfg_attr( all(not(debug_assertions), target_os = "windows"), windows_subsystem = "windows" )] #[tauri::command] fn fetch_messages() -> Vec<String> { vec!["RRR".into(), "UUU".into(), "SSS".into(), "TTT".into()] } fn main() { tauri::Builder::default() .invoke_handler(tauri::generate_handler![fetch_messages]) .run(tauri::generate_context!()) .expect("error while running tauri application"); } ``` `#[tauri::command]`でコマンドとして認識され、`tauri::generate_handler`でコマンドを登録します。 次に[[TypeScript]]のコードから`fetch_messages`コマンドを呼び出してみます。 ```html:App.svelte <main> <Button on:click={handleClickUpdate}>Update</Button> <List> {#each messages as message} <Item ><Graphic class="material-icons">send</Graphic><Text>{message}</Text ></Item> {/each} </List> </main> <script lang="ts"> import List, { Item, Text, Graphic } from "@smui/list"; import Button from "@smui/button"; import { invoke } from "@tauri-apps/api/tauri"; let messages = ["aaa", "iii"]; const handleClickUpdate = async () => { messages = await invoke<string[]>("fetch_messages"); }; </script> ``` `invoke`でコマンド名を指定します。[[型引数 (TypeScript)|型引数]]にはコマンドの[[戻り値型]]を指定します。結果は[[Promise (JavaScript)|Promise]]として返却されます。 > [!hint]- [[Rust]]のコマンド関数が失敗したときは? > コマンド関数の[[戻り値型]]を[[Result]]にすれば、失敗時の処理は[[Promise (JavaScript)|Promise]]のrejectedで表現できます。 期待通りに動くことを確認しましょう。 ![[2022-03-26.gif]] ## [[Rust]]で[[Slack]]のメッセージを検索 それでは実際に[[Slack]]のメッセージを検索し、表示してみましょう。 > [!attention] > ここから一気に実践的な内容となります。不明な点はリンク先や公式サイトを辿って補完いただければと思います。 [[Slack Web API]]を使います。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://a.slack-edge.com/80588/marketing/img/meta/favicon-32.png" /> <span class="link-card-v2-site-name">Slack API</span> </div> <div class="link-card-v2-title"> Using the Slack Web API </div> <div class="link-card-v2-content"> The Web API is an RPC-style collection of methods that either yield information about Slack workspaces or allows ... </div> <img class="link-card-v2-image" src="https://a.slack-edge.com/80588/img/services/api_200.png" /> <a href="https://api.slack.com/web"></a> </div> > [!info] [[Slack Web API]]の利用手順について > [[📜Slack Web APIを使ってみる]] も参考にしてください。 > [!hint]- Polarisでredirect URLを使った[[OAuth]]認証をしない理由 > 2021年12月時点では[[Tauri]]がそれに対応しておらず、回避策を使う場合はローカルサーバーが必要になるためです。 > > [OAuth login: tricky window URL manipulation · Discussion \#3020 · tauri\-apps/tauri](https://github.com/tauri-apps/tauri/discussions/3020) ### メッセージ検索API [[ユーザートークン (Slack)|ユーザートークン]]に`search:read`スコープを設定し、結果が返却されることを確認します。 ```bash curl "https://slack.com/api/search.messages?query=Slack&pretty=1" -H "Authorization: Bearer <トークン>" ``` ### 環境変数の設定 トークンを環境変数から取得するようにするため、[[std.env.var]]を使います。 ```rust std::env::var("POLARIS_SLACK_USER_TOKEN") .expect("POLARIS_SLACK_USER_TOKEN is not set."); ``` ### [[Slack Web API]]へのリクエストと結果取得 [[Slack Web API]]は外部ドメインなのでパッケージ構成を見直します。`external/slack.rs`と`external/slack`配下に実装します。 ```ls  . ├──  command │ └──  search_messages.rs ├──  command.rs ├──  external │ ├──  slack │ │ └──  search_messages.rs │ └──  slack.rs ├──  external.rs └──  main.rs ``` `search_messages.rs`は[[Slack Web API]]のレスポンス構造体を定義しています。必要だと思ったもの以外は省略しています。 ```rust:external/slack/search_messages.rs use serde::{Deserialize, Serialize}; #[derive(Debug, Serialize, Deserialize)] pub struct Response { pub ok: bool, pub messages: Messages, } #[derive(Debug, Serialize, Deserialize)] pub struct Messages { pub total: i32, pagination: Pagination, pub matches: Vec<Message>, } #[derive(Debug, Serialize, Deserialize)] struct Pagination { /// ex: 145253 total_count: i32, /// ex: 1 page: i32, /// ex: 20 per_page: i32, /// ex: 7263 page_count: i32, /// ex: 1 first: i32, /// ex: 20 last: i32, } #[derive(Debug, Serialize, Deserialize)] pub struct Message { /// ex: 123456789-1234-1234-abcd-123456abcd78 pub iid: String, /// ex: 123.45678 pub score: f64, /// ex: U1ABCDE3 pub user: String, /// ex: tadashi-aikawa pub username: String, /// ex: 1647445574.312239 pub ts: String, /// channel information pub channel: Channel, /// ex: 本文です pub text: String, /// ex: https://hoge.slack.com/archives/U1ABCDE3/p123456789012345678 pub permalink: String, } #[derive(Debug, Serialize, Deserialize)] pub struct Channel { pub id: String, pub name: String, } ``` `slack.rs`は[[Slack Web API]]のインターフェースにあたります。こちらも必要なインターフェースのみ追加しています。APIが増えたらもう少し抽象化するつもりです。 ```rust:external/slack.rs pub mod search_messages; use crate::external::slack::search_messages::Response; use anyhow::Error; pub struct SlackClient { token: String, } impl SlackClient { pub fn new(token: &str) -> SlackClient { SlackClient { token: token.into(), } } pub async fn search_message(&self, query: &str, sort: &str) -> Result<Response, Error> { let client = reqwest::Client::new(); Ok(client .get("https://slack.com/api/search.messages") .query(&[("query", query), ("sort", sort), ("pretty", "1")]) .bearer_auth(&self.token) .send() .await? .json::<Response>() .await?) } } ``` `command/search_messages.rs`は`search_messages`コマンドの実装と入出力のインターフェースも兼ねています。日付の変換が荒いのはご愛嬌💚 ```rust:command/search_messages.rs use anyhow::Result; use chrono::{DateTime, NaiveDateTime, Utc}; use serde::{Deserialize, Serialize}; use crate::external::slack; #[derive(Debug, Serialize, Deserialize)] pub struct Response { messages: Vec<Message>, } #[derive(Debug, Serialize, Deserialize)] struct Message { id: String, user_id: String, user_name: String, channel_name: String, text: String, permalink: String, created_at: DateTime<Utc>, } impl From<&slack::search_messages::Message> for Message { fn from(m: &slack::search_messages::Message) -> Self { let sec = m.ts.split('.').collect::<Vec<_>>()[0]; let sec = sec.parse::<i64>().unwrap(); Message { id: m.iid.clone(), user_id: m.user.clone(), user_name: m.username.clone(), channel_name: m.channel.name.clone(), text: m.text.clone(), permalink: m.permalink.clone(), created_at: DateTime::from_utc(NaiveDateTime::from_timestamp(sec, 0), Utc), } } } pub async fn exec(query: String) -> Result<Response> { let token = std::env::var("POLARIS_SLACK_USER_TOKEN").expect("POLARIS_SLACK_USER_TOKEN is not set."); let res = slack::SlackClient::new(token.as_str()) .search_message(query.as_str(), "timestamp") .await?; let messages = res .messages .matches .iter() .map(|m| m.into()) .collect::<Vec<_>>(); Ok(Response { messages }) } ``` `main.rs`はシンプルなままです。 ```rust:main.rs #![cfg_attr( all(not(debug_assertions), target_os = "windows"), windows_subsystem = "windows" )] mod command; mod external; #[tauri::command] async fn search_messages(query: String) -> Result<command::search_messages::Response, String> { command::search_messages::exec(query) .await .map_err(|e| e.to_string()) } fn main() { tauri::Builder::default() .invoke_handler(tauri::generate_handler![search_messages]) .run(tauri::generate_context!()) .expect("error while running tauri application"); } ``` これで[[Rust]]側の改修は完了です。 > [!attention] > 異常系のエラー考慮はちゃんとやっていません。 > [!info] 新たに追加した[[クレート]]と用途 > - [[reqwest]] > - [[HTTP]]クライアントとして > - [[anyhow]] > - エラーの伝播を楽にするため > - [[Chrono]] > - 日付や時間のデータ型を扱うため ## [[Svelte]]でSlack投稿を表示 [[Rust]]側の`search_messages`コマンドのインターフェースが変更されたため、`App.svelte`の`handleClickUpdate`に変更が必要です。せっかくなのでUIも含めて全体を整理してみました。 ```ls  . ├──  App.svelte ├──  assets │ └──  svelte.png ├──  components │ └──  molecules │ └──  MessageCard.svelte ├──  lib ├──  main.ts ├──  model │ └──  search-messages.ts └──  vite-env.d.ts ``` `App.svelte`の他、`components/molecules`配下にも[[Svelte]]ファイルを追加しています。カード部分をコンポーネント化したファイルです。 ```html:components/molecules/MessageCard.svelte <Card> <Content> <b>{message.user_name}</b> <span>{message.created_at}</span> <pre style="white-space: pre-wrap">{message.text}</pre> </Content> <Actions> <IconButton class="material-icons" on:click={() => { window.open(message.permalink); }} title="Share">open_in_new</IconButton> </Actions> </Card> <script lang="ts"> import Card, { Content, Actions } from "@smui/card"; import IconButton from "@smui/icon-button"; import type { Message } from "~/model/search-messages"; export let message: Message; </script> ``` また、`Main.svelte`にもいくつか修正を加えました。 - [[Svelteのawait]]を使って非同期処理をシンプルに表現 - `invoke`のパラメータとレスポンスの変更 - `handleClickUpdate`を`handleClickSearch`に名称変更 - UIを全体的にパワーアップ ```html:App.svelte <main> <TextField bind:value={query} label="search query" style="min-width: 250px; margin-left: 30px" /> <Button on:click={handleClickSearch}> <Icon class="material-icons">search</Icon> <Label>Search</Label> </Button> <div style="padding: 30px"> {#await messagesPromise} <LinearProgress indeterminate /> {:then messages} {#each messages as message} <div style="padding: 5px;"> <MessageCard {message} /> </div> {/each} {:catch error} <Paper variant="outlined" style="color: red; border-color: red;"> <Title>Error</Title> <Content>{error}</Content> </Paper> {/await} </div> </main> <script lang="ts"> import { invoke } from "@tauri-apps/api/tauri"; import Button, { Label } from "@smui/button"; import { Icon } from "@smui/icon-button"; import Paper, { Title, Content } from "@smui/paper"; import TextField from "@smui/textfield"; import LinearProgress from "@smui/linear-progress"; import { Message, Response } from "~/model/search-messages"; import MessageCard from "~/components/molecules/MessageCard.svelte"; let messagesPromise: Promise<Message[]> = Promise.resolve([]); let query = ""; const handleClickSearch = () => { messagesPromise = invoke<Response>("search_messages", { query }).then( (r) => r.messages ); }; </script> ``` ## 動作結果 ここまでのコードを実行した結果です。 ![[2022-03-27.gif]] なお、エラーの場合は以下のような画面が表示されます。 ![[Pasted image 20220327180714.png]] ## プロダクションビルド 以下のコマンドで実行した[[OS]]に対応するインストーラーが作成されます。 ```console npm run tauri build ``` [[📝Svelte Material UIでproductionビルドをするとCSSのimportエラーになる]]問題に少しハマったのでそこだけ注意ですね。[[Tauri GitHub Action]]を使ったリリースは試していません。 ちなみにインストーラーのサイズは4.3MBでした。100MB近くになる[[Electron]]と比べるとコンパクトなのはやはり魅力ですね。 ## 良かったこと/気になること ### 😄良かった点 #### [[Rust]]も[[TypeScript]]も変更したらすぐ[[ホットリロード]]がかかる 特に[[Svelte]]は一瞬ですね。変更がすぐ反映されるのは気持ちいいです。 #### [[Rust]]でがっつりコードが書ける 当初の目的がこれだったため満足しています。[[GUI]]部分に[[Rust]]は不要なので、[[CLI]]とほぼ同じくらい書けるといっても過言ではありません。 #### 最先端の技術が勉強できる [[Tauri]]、[[Rust]]、[[Svelte]]のいずれも最先端のスキルセットなため、そのものや公式ドキュメントに書いてあることが大変勉強になります。 #### [[CORS]]を気にしなくていい [[Electron]]でも[[Node.js]]側で同じことはできると思います。ブラウザでのWeb開発と比較してのメリットですね。 #### リポジトリのLanguagesが華やか [[GitHub]]のLanguagesにイケイケエンジニア感が出ますw (大したもの作ってない割に..) ![[Pasted image 20220327185223.png]] ### 😅気になった点 #### マシンが重い [[Rust]]だけでも重いのに[[Tauri]]や[[Vite]]も動くので...特にバックエンド開発時は一度ビルドを切った方がいいレベルでした。ただ、これは[[IntelliJ Rust]]や[[IntelliJ IDEA]]、[[Clippy]]の課題なので、[[Tauri]]に関する話ではないかもしれません。 特に、[[📝IntelliJ RustのExternal Lintersでファイル保存のたびに実行する方法がない]]のが効いています。==[[IntelliJ IDEA]]のautosave設定をoffにしても==、**コードを変更するたびに[[Clippy]]が実行され(数秒かかる)、コード変更を検知して[[Tauri]]が再起動する**のがかなりキツイです。[[VSCode]]だとどうなのかは気になるところです🤔 #### 日本語の情報が少ない いつものことですが新しい技術は日本語の情報が少ないです。ただ幸いなことに、**[[Rust]]も[[Tauri]]も[[Svelte]]も、公式ドキュメントの読みやすさはピカイチです**。英語のドキュメントによほど抵抗のある方でなければ、公式ドキュメントで事足りるのではないかという期待はしています。 #### 現時点での業務利用は厳しそう v1.0がリリースされていないこともそうですが、以下2点が気になりました。 - [[Rust]]の知識が少なからず必要 - [[OS]]のWebViewを使うため[[Electron]]より[[OS]]差分に気を付ける必要がありそう - [[Windows]]は古いと動かなそう.. 今回利用したLockdownレシピは[[Rust]]をガッツリ使いますが、[[Rust]]の実装が不要なレシピも数多くあります。ただ、プロジェクトの構築やビルド、トラブル発生時に[[Rust]]のことを全く知らないと対処が難しいと感じました。ちょっとした社内ツールで使うのであれば問題ないと思います。 ## まとめ [[Tauri]]を使って自分だけの[[Slack]]クライアントを作ってみました。[[Tauri]]はもちろんのこと、[[Svelte]]や[[Rust]]についても知見を深めることができ非常に有意義でした。 長くなってしまったのでここで切りましたが、今後は以下にチャレンジしてみたいと思っています。また気が向いたら続編を書きます。 - textを[[Slack]]のようにフォーマットする (絵文字、リンク、etc) - [[Tauri]]のStoreを実装する - 設定ファイルをローカルで管理する - 定期実行でエゴサーチした結果を表示する - ダイレクトメンションのみを表示する - 既読・未読管理 最後にリポジトリへのリンクを貼っておきます。現時点での最新コミットにリンクされていますので、よろしければ参考にしてください。READMEなどは適当です。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://github.githubassets.com/favicons/favicon.svg" /> <span class="link-card-v2-site-name">GitHub</span> </div> <div class="link-card-v2-title"> GitHub - tadashi-aikawa/vigilancia at bf272bf5c9ed3342a6d2bea5728bf85c10c5d442 </div> <div class="link-card-v2-content"> Desktop application for Slack core user who desires to find beneficial messages in every channel as well as they ... </div> <img class="link-card-v2-image" src="https://opengraph.githubassets.com/321cbbc20c497247021974a3a26a6805a2805412cb92d714281164f8e1ecad7b/tadashi-aikawa/vigilancia" /> <a href="https://github.com/tadashi-aikawa/polaris/tree/bf272bf5c9ed3342a6d2bea5728bf85c10c5d442"></a> </div>