macOS上に作ったRust+WebAssembly環境でHello Worldを実行する（Windows 10 Proでの結果を含む）

投稿者: | 2019年1月12日
0件のコメント

macOSにインストール、設定したRust＋WebAssembly環境の動作確認を実施（Windows 10 Proでも確認済み）

前項で元サイト: Rust and WebAssemblyに書いてある設定4.1 Setupが終わっているものとする。

次は動作確認のための項目4.2 Hello, Worldに進む。

説明は元サイトを参照するとして、実際の作業と具体的には何をやっているのか簡単に記載する。

  1. サイトの素を作成

まずプロジェクト（サイトの素）を作成する。

cargo generate --git https://github.com/rustwasm/wasm-pack-template

このコマンドを実行するとプロジェクト名を聞かれるので「wasm-game-of-life」と応える。

ここで作成するプロジェクトの名前を決めると現在のディレクトリの下にその名前のディレクトリが作成される。そしてその中に

wasm-game-of-life/
├── Cargo.toml
├── LICENSE_APACHE
├── LICENSE_MIT
├── README.md
└── src
├── lib.rs
└── utils.rs
のような雛形が作成される。

  1. ビルド

作成されたものをWeb用に構築する

cd wasm-game-of-life
wasm-pack build
  1. ローカルサーバーへの配置

本家の4.2 Hello, Worldには説明と実行すべき事とが混ざって記載されているので、ここでは実際に実行するコマンドを抽出して記載する。カレントディレクトリは引き続きwasm-game-of-lifeにあるものとする。

npm init wasm-app www
cd www
npm install
cd ../pkg
npm link
cd ../www
npm link wasm-game-of-life
npm run start

ローカルサーバーを開くとJavaScriptのAlertを利用したダイアログが開く。

Windows 10 Proでの環境構築、実行、体験したトラブルとその対策

環境構築に関して、基本的には同じだがsudoコマンドは要らないし、そもそも存在しない。wasm-packは実行形式のwasm-pack-init.exeで提供される。

管理者モードでやらなくても良いが、localhostを立ち上げるときアクセス許可を求められるので許可する必要がある。

npm関連でエラーになって困ったことがあった。Cドライブ以下にある隠しディレクトリAppData\AppData\Roamingの中に生成されるnpm, npm-cacheを削除、npm install npm@latest -gを実行して再インストールすることで復帰できた。

コメントを残す