teratail
回答率
85.48%
質問するログイン新規登録
トップウェブブラウザに関する質問Rustでicedクレートを使い、Wasmとしてコンパイルしブラウザで開いたところ、画面が初めから表示してくれない

編集履歴

質問編集履歴

6

文面改良

2022/11/21 02:45

投稿

akira_kano1101
akira_kano1101

スコア25

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  ### 前提
2
2
 
3
- Rustでicedクレートを使い、wasmとしてコンパイルしブラウザで実行させるプログラムを作っています。
3
+ Rustでicedクレートを使い、wasmとしてコンパイルしブラウザで実行させるプログラムを作ろうと思い、最小構成で動作を確認するプログラムを試しています。
4
4
 
5
5
  後述のコマンドを実行するとコンパイルが通ることを確認し、ブラウザでも表示することに成功しました。
6
6
 
ウェブブラウザRust

5

文面改良

2022/11/21 02:40

投稿

akira_kano1101
akira_kano1101

スコア25

test CHANGED
File without changes
test CHANGED
@@ -5,6 +5,8 @@
5
5
  後述のコマンドを実行するとコンパイルが通ることを確認し、ブラウザでも表示することに成功しました。
6
6
 
7
7
  ただ一つ思うようにならない問題が残りました。
8
+
9
+ それは初期表示です。
8
10
 
9
11
  ブラウザにアクセスしただけではプログラムがその時点ではまだ動作していないのかブラウザ画面に表示してくれません。
10
12
 
ウェブブラウザRust

4

文面をわかりやすいよう修正

2022/11/21 02:33

投稿

akira_kano1101
akira_kano1101

スコア25

test CHANGED
@@ -1 +1 @@
1
- Rustでicedクレートを使い、wasmとしてコンパイルしブラウザで開いたところ、画面が初めから表示してくれない
1
+ Rustでicedクレートを使い、Wasmとしてコンパイルしブラウザで開いたところ、画面が初めから表示してくれない
test CHANGED
@@ -1,12 +1,14 @@
1
1
  ### 前提
2
2
 
3
- Rustでicedクレートを使い、wasmとしてコンパイルしブラウザで実行／表示させるプログラムを作っています。
3
+ Rustでicedクレートを使い、wasmとしてコンパイルしブラウザで実行させるプログラムを作っています。
4
4
 
5
- コンパイルが通ることを確認し、ブラウザでも表示することに成功しました。
5
+ 後述のコマンドを実行するとコンパイルが通ることを確認し、ブラウザでも表示することに成功しました。
6
6
 
7
- ただ一つ思うようにならない点が残りました。
7
+ ただ一つ思うようにならない問題が残りました。
8
8
 
9
+ ブラウザにアクセスしただけではプログラムがその時点ではまだ動作していないのかブラウザ画面に表示してくれません。
10
+
9
- ブラウザ上では読み込めているようなのですが、ブラウザをアクティブにした状態でスクリプトモジュール上にマウスオーバーさせないと最初の表示がされないという問題です。
11
+ ブラウザの画面にマウスオーバーさせないと最初の表示がされないということが今回問題にしているところなのです。
10
12
 
11
13
  ### 実現したいこと
12
14
 
@@ -20,54 +22,30 @@
20
22
  このブラウザがアクティブな状態でマウスカーソルをブラウザの画面上で動かすと下図のようになります。
21
23
  ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-11-21/66cc67df-3b79-4092-85b4-268260ab7a06.jpeg)
22
24
 
23
- 問題としてはユーザがページにアクセスした時点で初期画面が表示されていないためおかしいと勘違いしてしまう可能性があります。
25
+ 問題としてはユーザがページにアクセスした時点でマウスオーバーするまで初期画面が表示されていないためおかしいと勘違いしてしまう可能性があります。
24
26
 
25
27
  ### 該当のソースコード
26
28
 
27
- [iced_web](https://docs.rs/iced_web/latest/iced_web/)を参考にコマンドを実行しました。
29
+ [iced_web](https://docs.rs/iced_web/latest/iced_web/)を参考にコマンドスクリプトと`index.html`を作成／実行しました。
28
30
 
29
31
  ### 試したこと
30
32
 
33
+ icedクレートのソースコードをGitHubリポジトリからローカルにcloneしました。
34
+
31
35
  ```console
32
- git clone git@github.com:iced-rs/iced.git
36
+ % git clone git@github.com:iced-rs/iced.git
33
- cd iced/examples/
34
-
35
- echo '<!DOCTYPE html>
36
- <html>
37
- <head>
38
- <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
39
- <meta name="viewport" content="width=device-width, initial-scale=1">
40
- <title>Tour - Iced</title>
41
- </head>
42
- <body>
43
- <script type="module">
44
- import init from "./tour/tour.js";
45
-
46
- init("./tour/tour_bg.wasm");
47
- </script>
48
- </body>
49
- </html>
50
- ' > index.html
51
-
52
- echo 'cd `dirname $0` &&
53
- cargo build --package tour --target wasm32-unknown-unknown &&
54
- wasm-bindgen ../target/wasm32-unknown-unknown/debug/tour.wasm --out-dir tour --web &&
55
- python -m http.server 8080
56
- ' > build.sh
57
-
58
- chmod +x build.sh
59
- ./build.sh
60
37
  ```
61
38
 
62
- 上記実行後にブラウザで`localhost:8080`にアクセスし、ブラウザの画面の白い部分にマウスカーソルを持っていくと始まることが確認できます。
39
+ ディレクトリを変更します。
63
40
 
64
- このマウスカーソルを動かすイベントをjavascriptで発生させれば良いのではと思い、次も試しました。
41
+ ```console
65
- [参考のサイト](https://kiraku-space.com/?p=468)を確認しながらindex.htmlに記述しました。
42
+ % cd iced/examples/
43
+ ```
66
44
 
67
- ~ただ私が独自に追記した`console.log`で、出力されるはずの"動いています"というログが出ないのでこれは動いていない可能性もあってよく理由がわかっていません。~
45
+ `iced/examples/index.html`を下記のように作成しました。
68
- ※クォーテーションが全角だったため動作しておらず出力されていなかったことに気づいたため修正しました。"動いています"は出力されるようになりました。しかし初期画面が真っ白なことに変わりはありません。
69
46
 
70
47
  ```html
48
+ % cat index.html
71
49
  <!DOCTYPE html>
72
50
  <html>
73
51
  <head>
@@ -104,10 +82,39 @@
104
82
  </html>
105
83
  ```
106
84
 
85
+ `iced/examples/build.sh`を下記のように作成しました。
86
+
87
+ ```shell
88
+ % cat build.sh
89
+ cd `dirname $0` &&
90
+ cargo build --package tour --target wasm32-unknown-unknown &&
91
+ wasm-bindgen ../target/wasm32-unknown-unknown/debug/tour.wasm --out-dir tour --web &&
92
+ python -m http.server 8080
93
+ ```
94
+
95
+ その後作成したスクリプトを実行します。
96
+
97
+ ```console
98
+ % chmod +x build.sh
99
+ % ./build.sh
100
+ ```
101
+
102
+ 上記実行後にブラウザで`localhost:8080`にアクセスし、ブラウザの画面の白い部分にマウスカーソルを持っていくとサンプルが始まることが確認できます。
103
+
104
+ ここでマウスカーソルを持っていかないと始まらないことが問題です。
105
+
106
+ これを踏まえた上で、マウスカーソルを動かすイベントをjavascriptで発生させれば良いのではと思い、次のサイトを参考にうまくいくかなと思いつつ試しました（追加のコードは前述のindex.htmlに含めさせていただいています）。
107
+
108
+ [Javascript 無理にmouseoverを発火させる](https://kiraku-space.com/?p=468)
109
+
110
+ ~ただ私が独自に追記した`console.log`で、出力されるはずの"動いています"というログが出ないのでこれは動いていない可能性もあってよく理由がわかっていません。~
111
+ ※クォーテーションが全角だったため動作しておらず出力されていなかったことに気づいたため修正しました。"動いています"は出力されるようになりました。しかし初期画面が真っ白なことに変わりはありません。
107
112
 
108
113
  ### 補足情報（FW/ツールのバージョンなど）
109
114
 
110
115
  ```version
116
+ % $SHELL --version
117
+ zsh 5.8.1 (x86_64-apple-darwin22.0)
111
118
  % python --version
112
119
  Python 3.10.4
113
120
  % cargo --version
@@ -116,4 +123,4 @@
116
123
 
117
124
  ブラウザはFirefoxを使っています。
118
125
 
119
- ご存知の方おられましたら、ご教示のほどよろしくお願いいたします。
126
+ 解決方法、ご存知の方いらっしゃいましたら、ご教示のほどよろしくお願いいたします。
ウェブブラウザRust

3

index.htmlのコードの改行がおかしかったので修正

2022/11/21 02:06

投稿

akira_kano1101
akira_kano1101

スコア25

test CHANGED
File without changes
test CHANGED
@@ -68,34 +68,40 @@
68
68
  ※クォーテーションが全角だったため動作しておらず出力されていなかったことに気づいたため修正しました。"動いています"は出力されるようになりました。しかし初期画面が真っ白なことに変わりはありません。
69
69
 
70
70
  ```html
71
- <!DOCTYPE html> <html>
72
- <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
73
- <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Tour - Iced</title>
74
- </head> <body>
75
- <div id="wasm"> <script type="module">
76
- import init from "./tour/tour.js";
77
- init("./tour/tour_bg.wasm");
78
- </script>
79
- </div>
80
- <script type="text/javascript">
81
- window.onload = function() {
82
- triggerEvent(document.getElementById("wasm"), "mouseover");
83
- }
71
+ <!DOCTYPE html>
72
+ <html>
73
+ <head>
74
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
75
+ <meta name="viewport" content="width=device-width, initial-scale=1">
76
+ <title>Tour - Iced</title>
77
+ </head>
78
+ <body>
79
+ <div id="wasm">
80
+ <script type="module">
81
+ import init from "./tour/tour.js";
84
82
 
83
+ init("./tour/tour_bg.wasm");
84
+ </script>
85
+ </div>
86
+ <script type="text/javascript">
87
+ window.onload = function() {
88
+ triggerEvent(document.getElementById("wasm"), "mouseover");
89
+ }
90
+
85
- function triggerEvent(element, event) {
91
+ function triggerEvent(element, event) {
86
- if (document.createEvent) {
92
+ if (document.createEvent) {
87
- var evt = document.createEvent("HTMLEvents");
93
+ var evt = document.createEvent("HTMLEvents");
88
- evt.initEvent(event, true, true);
94
+ evt.initEvent(event, true, true);
89
- return element.dispatchEvent(evt);
95
+ return element.dispatchEvent(evt);
90
- } else {
96
+ } else {
91
- var evt = document.createEventObject();
97
+ var evt = document.createEventObject();
92
- return element.fireEvent("on"+event, evt)
98
+ return element.fireEvent("on"+event, evt)
93
- }
99
+ }
94
- }
100
+ }
95
- console.log("動いています");
101
+ console.log("動いています");
96
- </script>
102
+ </script>
97
- </body>
103
+ </body>
98
- </html>
104
+ </html>
99
105
  ```
100
106
 
101
107
 
ウェブブラウザRust

2

発生している問題・エラーメッセージにスクショを追加

2022/11/21 01:58

投稿

akira_kano1101
akira_kano1101

スコア25

test CHANGED
@@ -1 +1 @@
1
- Rustでicedクレートを使い、wasmとしてコンパイルしブラウザで開いたがicedが画面初期状態で表示されない
1
+ Rustでicedクレートを使い、wasmとしてコンパイルしブラウザで開いたところ、画面が初めから表示してくれない
test CHANGED
@@ -14,7 +14,13 @@
14
14
 
15
15
  ### 発生している問題・エラーメッセージ
16
16
 
17
+ 実行時のブラウザとコンソールログのアクセスして初期の状態は下図です。
18
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-11-21/9bd676ee-1042-4115-b038-1f1697c5c399.jpeg)
19
+
20
+ このブラウザがアクティブな状態でマウスカーソルをブラウザの画面上で動かすと下図のようになります。
21
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-11-21/66cc67df-3b79-4092-85b4-268260ab7a06.jpeg)
22
+
17
- エラーメッセージはありませんが、問題としてはユーザがページにアクセスした時点で初期画面が表示されていないとおかしいと勘違いしてしまう可能性があります。
23
+ 問題としてはユーザがページにアクセスした時点で初期画面が表示されていないためおかしいと勘違いしてしまう可能性があります。
18
24
 
19
25
  ### 該当のソースコード
20
26
 
@@ -62,23 +68,34 @@
62
68
  ※クォーテーションが全角だったため動作しておらず出力されていなかったことに気づいたため修正しました。"動いています"は出力されるようになりました。しかし初期画面が真っ白なことに変わりはありません。
63
69
 
64
70
  ```html
65
- <script type="text/javascript">
66
- window.onload = function() {
67
- triggerEvent(document.getElementById("wasm"), "mouseover");
68
- }
71
+ <!DOCTYPE html> <html>
72
+ <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
73
+ <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Tour - Iced</title>
74
+ </head> <body>
75
+ <div id="wasm"> <script type="module">
76
+ import init from "./tour/tour.js";
77
+ init("./tour/tour_bg.wasm");
78
+ </script>
79
+ </div>
80
+ <script type="text/javascript">
81
+ window.onload = function() {
82
+ triggerEvent(document.getElementById("wasm"), "mouseover");
83
+ }
69
84
 
70
- function triggerEvent(element, event) {
85
+ function triggerEvent(element, event) {
71
- if (document.createEvent) {
86
+ if (document.createEvent) {
72
- var evt = document.createEvent("HTMLEvents");
87
+ var evt = document.createEvent("HTMLEvents");
73
- evt.initEvent(event, true, true);
88
+ evt.initEvent(event, true, true);
74
- return element.dispatchEvent(evt);
89
+ return element.dispatchEvent(evt);
75
- } else {
90
+ } else {
76
- var evt = document.createEventObject();
91
+ var evt = document.createEventObject();
77
- return element.fireEvent("on"+event, evt)
92
+ return element.fireEvent("on"+event, evt)
78
- }
93
+ }
79
- }
94
+ }
80
- console.log("動いています");
95
+ console.log("動いています");
81
- </script>
96
+ </script>
97
+ </body>
98
+ </html>
82
99
  ```
83
100
 
84
101
 
ウェブブラウザRust

1

全角のクォーテーションで動作していなかったjavascriptのコードを修正

2022/11/21 01:32

投稿

akira_kano1101
akira_kano1101

スコア25

test CHANGED
File without changes
test CHANGED
@@ -58,27 +58,23 @@
58
58
  このマウスカーソルを動かすイベントをjavascriptで発生させれば良いのではと思い、次も試しました。
59
59
  [参考のサイト](https://kiraku-space.com/?p=468)を確認しながらindex.htmlに記述しました。
60
60
 
61
- ただ私が独自に追記した`console.log`で、出力されるはずの"動いています"というログが出ないのでこれは動いていない可能性もあってよく理由がわかっていません。
61
+ ~ただ私が独自に追記した`console.log`で、出力されるはずの"動いています"というログが出ないのでこれは動いていない可能性もあってよく理由がわかっていません。~
62
+ ※クォーテーションが全角だったため動作しておらず出力されていなかったことに気づいたため修正しました。"動いています"は出力されるようになりました。しかし初期画面が真っ白なことに変わりはありません。
62
63
 
63
64
  ```html
64
- <script type=”text/javascript”>
65
+ <script type="text/javascript">
65
-
66
- //「show_pic_first」というIDのマウスオーバーを実行する
67
66
  window.onload = function() {
68
- triggerEvent(document.getElementById('wasm'), 'mouseover');
67
+ triggerEvent(document.getElementById("wasm"), "mouseover");
69
68
  }
70
69
 
71
70
  function triggerEvent(element, event) {
72
- // IE以外のブラウザ用
73
71
  if (document.createEvent) {
74
- var evt = document.createEvent(“HTMLEvents”);
72
+ var evt = document.createEvent("HTMLEvents");
75
- evt.initEvent(event, true, true );
73
+ evt.initEvent(event, true, true);
76
74
  return element.dispatchEvent(evt);
77
-
78
- // IEブラウザの場合
79
75
  } else {
80
76
  var evt = document.createEventObject();
81
- return element.fireEvent(“on”+event, evt)
77
+ return element.fireEvent("on"+event, evt)
82
78
  }
83
79
  }
84
80
  console.log("動いています");
ウェブブラウザRust