お絵描きアプリをグレードアップさせよう！Tauri 2.0でアンドゥとリドゥを実装

フロントエンジニアのための「Tauri 2.0」ではじめるRustプログラミング　第5回

　本連載では、ベジェ曲線でお絵描きするデスクトップアプリを開発しながら、「Rust」と「Tauri 2.0」について学んでいきます。連載第5回は、お絵描きアプリをアップグレードさせます。マウスホイールでアンドゥやリドゥできるようにして、サンプルのトイプードルを表示できるように解説します。

はじめに

　前回は本連載で作るお絵描きアプリのプロジェクトを新規作成し、一筆書きでお絵描きをできるようにしました。

　今回は前回に引き続き追記して行って、お絵描きアプリをグレードアップさせます。<canvas>タグは、幅の高さをリサイズや、マウスホイールでアンドゥやリドゥしたり、サンプル画像を表示したりします。今回もまだバックエンドのRustは書き換えません。

描画矩形をリサイズする

　前回のコードに続けて、次のサンプルコードを追記します。

　次のコマンドを実行しプロジェクトをデバッグビルドしたら、お絵描きする<canvas>タグの描画領域が画面幅いっぱいになります。<canvas>タグはウィンドウがリサイズされるたびに同時にリサイズします。

　最初<canvas>タグの高さをウィンドウの内高さと同じ高さにセットして、ウィンドウの内いっぱいに<canvas>を広げようとしたところ、ウィンドウにスクロールバーが出てしまいました。そこで仕方なく<canvas>の高さを少し減算して、代わりにそこに説明文を追加しました。

<canvas>タグのリサイズ

「Tauri 2.0」プロジェクトのデバッグビルドと実行

$ cargo-tauri dev

サンプルコード「src」→「main.js」

(前略)
// 全てのDOMが読み込み完了したら
window.addEventListener("DOMContentLoaded", () => {
(中略)
  window.addEventListener("resize", resize, false);
  resize();
});
// キャンバスリサイズ
function resize() {
  _canvas.width = window.innerWidth;
  _canvas.height = window.innerHeight-40;
  line();
}
(後略)

サンプルコードの解説

　ウィンドウのリサイズイベントが起こったら、「resize」関数の呼び出しをフックします。その後、htmlファイルのDOMが読み込み完了したらresize関数を呼び出します。

　resize関数で<canvas>タグの幅をウィンドウの内幅と同じにセットして、<canvas>タグの高さをウィンドウ内高さから40減算したサイズにセットします。

コラム：ESモジュールはWebサーバ上でしか動作しない！

　従来のHTMLではJavaScriptはローカルのWebブラウザでもほとんどの機能が動作していました。しかし最新のESモジュールのJavaScriptはWebサーバ上でしか動作しません。ただしTauri 2.0上ではHTML5＋CSS＋JavaScriptをWebサーバ上で動かしているのと同じなので動作します。

　またTauri 2.0のデフォルトのテンプレートではJavaScriptはESモジュールになっていますが、従来のJavaScriptももちろん動作します。

コラム：Tauri 2.0向けのWebページだけをWebブラウザでテストするには？

　Tauri 2.0向けのWebページはhtmlファイルとcssファイルはそのままでも動作します。問題はjsファイルです。

　　ESモジュール（type="module"）を使わなければ、JavaScriptの「window.__TAURI__」がつくコードをコメントアウトして、処理に合わせて代入する値などを変えることで、Webサーバ上じゃなくてもローカルのWebブラウザで動作テストができます。

Webブラウザで動作させたTauri 2.0向けWebページ