はじめに

最近、血圧を下げるためによく散歩をするのですが外に出た瞬間に寒っ！となることがよくありました。部屋に戻ってもう一枚着込む手間が発生していて外の気温を常時表示するツールがあると便利だなと思って、このツールを作ってみました。

以下の人には参考になるかもしれません。

Rust + Tauri + TypeScript の組み合わせでWindowsのデスクトップアプリケーションを作ってみたい人
OpenWeatherMapのAPIに興味がある人
外の気温を表示するツールを探している人

事前準備

インストール

Rustをインストール
Node.jsをインストール

プロジェクトを作成

以下の手順でプロジェクトを作成してください

npm create tauri-app@latest
? Project name (tauri - app) › temp
? Choose which language to use for your frontend › TypeScript / JavaScript (pnpm, yarn, npm, bun)
? Choose your package manager › npm
? Choose your UI template › Vanilla
? Choose your UI flavor › TypeScript
cd temp
npm install
npm run tauri dev

Welcome to Tauri!　のウィンドウが表示されると思います。

完成形のプロジェクトはこちらに置いておきます。以下躓いたポイントだけ解説します。

躓いたポイント

Rust の関数越しに変数を共有する方法

main.rsの.setup内で変数を格納した構造体を登録して、各関数の引数state: tauri::State>で取り出して取得、編集するのが一般的みたいです。※非同期(async)の関数だと非対応なので、引数でうまいことやり繰りする必要があるみたいです。

reqwestクレートでOpenWeatherAPIから情報を受け取るときの型指定

以前はその都度戻り値に合うように構造体を作っていたのですが、serde_json::Valueにすることで何でも受け取れる魔法の型になるようです。その後の取り扱いもjsonっぽく扱えてとても便利に思います。以前の自分に教えてあげたかった…orz

ウィンドウを透明にする

tauri.conf.jsonのwindowsのtransparentをtrue にしただけでは透明にならなかったです。cssのbackground-colorのアルファ部分も変更しないといけないみたいです。

スクロールバーを表示させないようにする

cssでこんな感じで書くと表示させないようにできました。

htmlのlabel部分を白文字＋黒アウトラインにして見やすくする

cssでこんな感じに書くとできました。あまり太くできないみたいです。

アイコンを変更する

src-tauri/icons/icon.pngにアイコンを上書きしてnpm run tauri icon src-tauri/icons/icon.pngで変更できるみたいです。アイコンが変わらない場合は、src-tauri/targetフォルダを削除して試すと反映されました。

緯度、経度の情報を取得する方法

GoogleMap 上で右クリックするとContextMenuの一番上に緯度、経度が表示されます。クリックするとクリップボードにコピーされるみたいです。

ビルド後にHTMLに遷移できない問題

こちらの記事でも書きましたが、vite.config.tsに遷移する.htmlを登録しないといけないみたいです。

tauri.conf.jsonのidentifierの項目は初期状態(com.tauri.dev)だとbuild時にエラーになる

変更するとエラーは出ないので、適当に変更しております。

最後に

年末年始でRust + Tauri + TypeScriptの組み合わせでいくつかツールを作ってみたのですが、かなり色々なものが作れそうな気がしました。

個人的には、Rustでデスクトップアプリケーションを作る場合は、eframe(egui)と並んで選択肢に入ってくるかなと思いました。