はじめに
最近は以下の本でRustを勉強しています。
RustのコードをWebAssemblyにコンパイルして、HTMLのCanvas上にゲームを描画するという内容の本です。
読み進めていくうちに「これってTauri上で動かせるのでは?」と思ったので実際にやってみました。
インストール
事前に以下の2つをインストールしておきます。
rust-webpackのテンプレートを追加します。
$ mkdir sample
$ cd sample
$ npm init rust-webpack
必要なパッケージをインストールして動かします。
$ npm install
$ npm run start
動くことを確認したら、次にTauriをインストールします。
package.jsonのscriptsにtauriを追加します。
"scripts": {
...
+ "tauri": "tauri"
}
CLIコマンドをインストールしてtauriのテンプレートを追加します。
$ npm install --save-dev @tauri-apps/cli
$ npm run tauri init
この時に色々聞かれるので答えていきます。
アプリ名ですが今回はフォルダ名と同じsampleにします。
? What is your app name? > sample
ウィンドウタイトルも同じくsampleにします。
? What should the window title be? > sample
アセットの場所を指定します。
npm run buildで各種アセットはsample/distに保存されます。
ここではsample/src-tauri/tauri.conf.jsonから相対パスを聞かれているので../distと入力します。
? Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? › ../dist
開発時のURLを入力します。
? What is the url of your dev server? › http://localhost:8080
開発時に実行するコマンドを入力します。
? What is your frontend dev command? › npm run start
ビルド時に実行するコマンドを入力します。
? What is your frontend build command? › npm run build
現状のコマンドだとtauri起動時にブラウザも立ち上がるのでscriptsのコマンドを以下の様に修正します。
"scripts": {
- "start": "rimraf dist pkg && webpack-dev-server --open -d",
+ "start": "rimraf dist pkg && webpack-dev-server",
tauriを起動させます。
$ npm run tauri dev
ウィンドウが表示されます。
Node.jsのバージョンによってはError: error:0308010C:digital envelope routines::unsupportedとなることがあります。
その場合は以下のコマンドを修正してから起動させます。
"scripts": {
- "start": "rimraf dist pkg && webpack-dev-server",
- "build": "rimraf dist pkg && webpack",
+ "build": "set NODE_OPTIONS=--openssl-legacy-provider && rimraf dist pkg && webpack",
+ "start": "set NODE_OPTIONS=--openssl-legacy-provider && rimraf dist pkg && webpack-dev-server",
描画
ウィンドウ上に図形を描画します。
Cargo.tomlにモジュールを追加します。
[dependencies.web-sys]
version = "0.3.22"
- features = ["console"]
+ features = ["console", "Window", "Document", "HtmlCanvasElement", "CanvasRenderingContext2d"]
Canvasを追加します。
<body>
<script src="index.js"></script>
+ <canvas id="canvas" tabindex="0" width="500" height="500"></canvas>
</body>
三角形を描画するコードを追加します。
// This is like the `main` function, except for JavaScript.
#[wasm_bindgen(start)]
pub fn main_js() -> Result<(), JsValue> {
...
// Your code goes here!
console::log_1(&JsValue::from_str("Hello world!"));
let window = web_sys::window().unwrap();
let document = window.document().unwrap();
let canvas = document
.get_element_by_id("canvas")
.unwrap()
.dyn_into::<web_sys::HtmlCanvasElement>()
.unwrap();
let context = canvas
.get_context("2d")
.unwrap()
.unwrap()
.dyn_into::<web_sys::CanvasRenderingContext2d>()
.unwrap();
context.begin_path();
context.move_to(250.0, 0.0);
context.line_to(0.0, 500.0);
context.line_to(500.0, 500.0);
context.close_path();
context.set_fill_style(&wasm_bindgen::JsValue::from_str("rgb(0,128,255)"));
context.fill();
Ok(())
}
ウィンドウ上に三角形が描画されました。
ビルド
最後にビルドできることを確認します。
sample/src-tauri/tauri.conf.jsonのidentifierを任意の値に変えて以下のコマンドを実行します。
$ npm run tauri build
sample/src-tauri/target/releaseに実行ファイルが生成されました。
参考文献