teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問二度目に訪れたときにはメモが出てこない

編集履歴

質問編集履歴

1

誤字

2020/04/07 02:42

投稿

SendaSosuke
SendaSosuke

スコア5

test CHANGED
@@ -1 +1 @@
1
- 保存ボタンを押したらくっついてきます
1
+ 二度目に訪れたときにはメモが出てこない
test CHANGED
@@ -2,197 +2,195 @@
2
2
 
3
3
  Chrome拡張機能でメモ機能を作ろうと思っています！
4
4
 
5
+
6
+
5
- 下のコードでできるメモ機能ですが、メモの黒い部分をクリックするとスムーズにドラッグ＆ドロップができますが、保存ボタンを押したらカーソルに合わせて引っ付いてきます(二回クリックすると離れます)。
7
+ しかし一度メモを使ったページでは、リロードしたり再訪したときにメモが出てこなくなります。
6
-
7
- それを直したいです！
8
-
9
- コードの悪いところを教えてください！
10
-
11
-
12
8
 
13
9
 
14
10
 
15
11
  ```Javascript
16
12
 
13
+
14
+
17
15
  const save = (content) => {//save(textbox.value)
18
16
 
19
- chrome.runtime.sendMessage(content, res => {
17
+ chrome.runtime.sendMessage(content, res => {
20
-
18
+
21
- console.log(res);
19
+ console.log(res);
22
-
20
+
23
- });
21
+ });
24
22
 
25
23
  };
26
24
 
27
25
  chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
28
26
 
29
- const modalfrm = document.getElementById('ex-memo');
30
-
31
- if (modalfrm != null) return;
32
-
33
- const modal = document.createElement('div');
34
-
35
- modal.id = 'ex-memo';
36
-
37
- // modal.style.width = '500px';
38
-
39
- // modal.style.height = '100px';
40
-
41
- modal.style.zIndex = '2147483647';
42
-
43
- modal.style.position = 'fixed';
44
-
45
- modal.style.left = `${message.posX}px`;
46
-
47
- modal.style.top = `${message.posY}px`;
48
-
49
- console.log("modal.style.left:" + modal.style.left);
50
-
51
- console.log("modal.style.top:" + modal.style.top);
52
-
53
- console.log("modal.style.width:" + modal.style.width);
54
-
55
- console.log("modal.style.height:" + modal.style.height);
56
-
57
- const textbox = document.createElement('textarea');
58
-
59
- textbox.style.width = '600px';
60
-
61
- textbox.style.height = '200px';
62
-
63
- textbox.style.backgroundColor = 'rgb(67, 67, 67)';
64
-
65
- textbox.style.color = 'rgb(51, 166, 184)';
66
-
67
- textbox.value= message.content;
68
-
69
- modal.appendChild(textbox);
70
-
71
- const saveButton = document.createElement('button');
72
-
73
- saveButton.onclick = () => save(textbox.value);
74
-
75
- saveButton.innerText = '保存';
76
-
77
- modal.appendChild(saveButton);
78
-
79
- document.body.appendChild(modal);
80
-
81
- console.log("function");
82
-
83
- modal.addEventListener('mousedown', mdown);
84
-
85
- modal.addEventListener('touchstart', mdown);
86
-
87
- // "マウスが押された際の関数"
88
-
89
- function mdown(e){
90
-
91
- console.log("mdown");
92
-
93
- this.classList.add("drag");
94
-
95
- //タッチデイベントとマウスのイベントの差異を吸収
96
-
97
- if(e.type === "mousedown") {
98
-
99
- var event = e;
100
-
101
- } else {
102
-
103
- var event = e.changedTouches[0];
104
-
105
- }
106
-
107
- //要素内の相対座標を取得
108
-
109
- posX = event.pageX - this.offsetLeft;
110
-
111
- posY = event.pageY - this.offsetTop;
112
-
113
- //ムーブイベントにコールバック
114
-
115
- document.body.addEventListener("mousemove", mmove);
116
-
117
- document.body.addEventListener("touchmove", mmove);
118
-
119
- }
120
-
121
- // "マウスカーソルが動いたときに発火"
122
-
123
- function mmove(e){
124
-
125
- console.log("mmove");
126
-
127
- //ドラッグしている要素を取得
128
-
129
- var drag = document.getElementsByClassName("drag")[0];
130
-
131
- //同様にマウスとタッチの差異を吸収
132
-
133
- if(e.type === "mousemove") {
134
-
135
- var event = e;
136
-
137
- } else {
138
-
139
- var event = e.changedTouches[0];
140
-
141
- }
142
-
143
- //フリックしたときに画面を動かさないようにデフォルト動作を抑制
144
-
145
- e.preventDefault();
146
-
147
- //マウスが動いた場所に要素を動かす
148
-
149
- drag.style.top = event.pageY - posY + "px";
150
-
151
- drag.style.left = event.pageX - posX + "px";
152
-
153
- //マウスボタンが離されたとき、またはカーソルが外れたとき発火
154
-
155
- drag.addEventListener("mouseup", mup);
156
-
157
- document.body.addEventListener("mouseleave", mup);
158
-
159
- drag.addEventListener("touchend", mup);
160
-
161
- document.body.addEventListener("touchleave", mup);
162
-
163
- }
164
-
165
- // "マウスボタンが上がったら発火"
166
-
167
- function mup(e){
168
-
169
- console.log("mup");
170
-
171
- var drag = document.getElementsByClassName("drag")[0];
172
-
173
- //ムーブベントハンドラの消去
174
-
175
- document.body.removeEventListener("mousemove", mmove);
176
-
177
- drag.removeEventListener("mouseup", mup);
178
-
179
- document.body.removeEventListener("touchmove", mmove);
180
-
181
- drag.removeEventListener("touchend", mup);
182
-
183
- //クラス名 .drag も消す
184
-
185
- drag.classList.remove("drag");
186
-
187
- }
27
+ const modalfrm = document.getElementById('ex-memo');
28
+
29
+ if (modalfrm != null) return;
30
+
31
+ const modal = document.createElement('div');
32
+
33
+ modal.id = 'ex-memo';
34
+
35
+ modal.style.zIndex = '2147483647';
36
+
37
+ modal.style.position = 'fixed';
38
+
39
+ modal.style.left = `${message.posX}px`;
40
+
41
+ modal.style.top = `${message.posY}px`;
42
+
43
+ console.log("modal.style.left:" + modal.style.left);
44
+
45
+ console.log("modal.style.top:" + modal.style.top);
46
+
47
+ console.log("modal.style.width:" + modal.style.width);
48
+
49
+ console.log("modal.style.height:" + modal.style.height);
50
+
51
+ const textbox = document.createElement('textarea');
52
+
53
+ textbox.style.width = '600px';
54
+
55
+ textbox.style.height = '200px';
56
+
57
+ textbox.style.backgroundColor = 'rgb(67, 67, 67)';
58
+
59
+ textbox.style.color = 'rgb(51, 166, 184)';
60
+
61
+ textbox.value= message.content;
62
+
63
+ modal.appendChild(textbox);
64
+
65
+ const saveButton = document.createElement('button');
66
+
67
+ saveButton.onclick = () => save(textbox.value);
68
+
69
+ saveButton.innerText = '保存';
70
+
71
+ modal.appendChild(saveButton);
72
+
73
+ document.body.appendChild(modal);
74
+
75
+ console.log("function");
76
+
77
+ modal.addEventListener('mousedown', mdown);
78
+
79
+ modal.addEventListener('touchstart', mdown);
80
+
81
+ // "マウスが押された際の関数"
82
+
83
+ function mdown(e){
84
+
85
+ console.log("mdown");
86
+
87
+ this.classList.add("drag");
88
+
89
+ //タッチドイベントとマウスのイベントの差異を吸収
90
+
91
+ if(e.type === "mousedown") {
92
+
93
+ var event = e;
94
+
95
+ } else {
96
+
97
+ var event = e.changedTouches[0];
98
+
99
+ }
100
+
101
+ //要素内の相対座標を取得
102
+
103
+ posX = event.pageX - this.offsetLeft;
104
+
105
+ posY = event.pageY - this.offsetTop;
106
+
107
+ //ムーブイベントにコールバック
108
+
109
+ document.body.addEventListener("mousemove", mmove);
110
+
111
+ document.body.addEventListener("touchmove", mmove);
112
+
113
+ }
114
+
115
+ // "マウスカーソルが動いたときに発火"
116
+
117
+ function mmove(e){
118
+
119
+ console.log("mmove");
120
+
121
+ //ドラッグしている要素を取得
122
+
123
+ 　var drag = document.getElementsByClassName("drag")[0];
124
+
125
+ //同様にマウスとタッチの差異を吸収
126
+
127
+ if(e.type === "mousemove") {
128
+
129
+ var event = e;
130
+
131
+ } else {
132
+
133
+ var event = e.changedTouches[0];
134
+
135
+ }
136
+
137
+ //フリックしたときに画面を動かさないようにデフォルト動作を抑制
138
+
139
+ e.preventDefault();
140
+
141
+ //マウスが動いた場所に要素を動かす
142
+
143
+ drag.style.top = event.pageY - posY + "px";
144
+
145
+ drag.style.left = event.pageX - posX + "px";
146
+
147
+ //マウスボタンが離されたとき、またはカーソルが外れたとき発火
148
+
149
+ drag.addEventListener("mouseup", mup);
150
+
151
+ document.body.addEventListener("mouseleave", mup);
152
+
153
+ drag.addEventListener("touchend", mup);
154
+
155
+ document.body.addEventListener("touchleave", mup);
156
+
157
+
158
+
159
+ // "マウスボタンが上がったら発火"
160
+
161
+ function mup(e){
162
+
163
+ console.log("mup");
164
+
165
+ var drag = document.getElementsByClassName("drag")[0];
166
+
167
+ //ムーブベントハンドラの消去
168
+
169
+ document.body.removeEventListener("mousemove", mmove);
170
+
171
+ drag.removeEventListener("mouseup", mup);
172
+
173
+ document.body.removeEventListener("touchmove", mmove);
174
+
175
+ drag.removeEventListener("touchend", mup);
176
+
177
+ //クラス名 .drag も消す
178
+
179
+ drag.classList.remove("drag");
180
+
181
+ }
182
+
183
+ }
188
184
 
189
185
  });
190
186
 
187
+
188
+
191
189
  ```
192
190
 
193
191
  ### エラー
194
192
 
195
- カッコを入れて数えて下から7番目の「drag.removeEventListener("mouseup", mup);」でエラーになっています
193
+ カッコを入れて数えて下から8番目の「drag.removeEventListener("mouseup", mup);」でエラーになっています
196
194
 
197
195
 
198
196