- Blog - Silicon Cloud

2 年 ago

宇, 华

2 minutes

はじめに

最近は以下の本でRustを勉強しています。

RustのコードをWebAssemblyにコンパイルして、HTMLのCanvas上にゲームを描画するという内容の本です。
読み進めていくうちに「これってTauri上で動かせるのでは?」と思ったので実際にやってみました。

インストール

事前に以下の2つをインストールしておきます。

Rust
https://www.rust-lang.org/ja/learn/get-started

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に実行ファイルが生成されました。

はじめに

インストール

描画

ビルド

参考文献