質問編集履歴
14
ブックマークレットにした
title
CHANGED
File without changes
|
body
CHANGED
@@ -70,4 +70,4 @@
|
|
70
70
|
## 「もっと見る」の件数を増やす、ページをスキップする
|
71
71
|
|
72
72
|
* 件数を増やすには `javascript:limit=20` とかやる。
|
73
|
-
* ページ番号をスキップするには、「もっと見る」ボタンを一回押したあと、「もっと見る」ボタン要素の直前にある .feed_reload/text() の数字を増やす。
|
73
|
+
* ページ番号をスキップするには、「もっと見る」ボタンを一回押したあと、「もっと見る」ボタン要素の直前にある .feed_reload/text() の数字を増やすか、`javascript:document.getElementsByClassName("feed_reload")[0].innerText+=100` とかやる。
|
13
ブックマークレットにした
title
CHANGED
File without changes
|
body
CHANGED
@@ -69,5 +69,5 @@
|
|
69
69
|
|
70
70
|
## 「もっと見る」の件数を増やす、ページをスキップする
|
71
71
|
|
72
|
-
* 件数を増やすには
|
72
|
+
* 件数を増やすには `javascript:limit=20` とかやる。
|
73
73
|
* ページ番号をスキップするには、「もっと見る」ボタンを一回押したあと、「もっと見る」ボタン要素の直前にある .feed_reload/text() の数字を増やす。
|
12
もっとたくさん見る
title
CHANGED
@@ -1,1 +1,1 @@
|
|
1
|
-
Teratailで無限スクロールとかキーボードショートカットとか
|
1
|
+
Teratailで無限スクロールとかキーボードショートカットとかページスキップとか
|
body
CHANGED
@@ -4,9 +4,14 @@
|
|
4
4
|
一画面目から落ちちゃうとと反応が悪くなるので、どうにかしたい。
|
5
5
|
|
6
6
|
|
7
|
-
|
7
|
+
----
|
8
|
-
「jkキーでフォーカス移動」、まずはここまでできた。F12押してペタると、jを押すと次のアイテムがトップにくる。最後のアイテムだとエラーがでると思う。
|
9
8
|
|
9
|
+
以下は追記です:
|
10
|
+
|
11
|
+
# jkキーでフォーカス移動
|
12
|
+
|
13
|
+
まずはここまでできた。F12押してペタると、jを押すと次のアイテムがトップにくる。最後のアイテムだとエラーがでると思う。
|
14
|
+
|
10
15
|
```javascript
|
11
16
|
! function() {
|
12
17
|
window.addEventListener("keydown", function(e) {
|
@@ -29,8 +34,11 @@
|
|
29
34
|
|
30
35
|
1. 別タブに boxItem があるとそっちにフォーカスが行ってしまう。 parentElement.parentElement.style.display で区別できそう。
|
31
36
|
|
32
|
-
無限スクロール、まずはここまでできた。F12押してペタると表示しているタブが無限スクロールになる。
|
33
37
|
|
38
|
+
# 無限スクロール
|
39
|
+
|
40
|
+
まずはここまでできた。F12押してペタると表示しているタブが無限スクロールになる。
|
41
|
+
|
34
42
|
```javascript
|
35
43
|
(function(a) {
|
36
44
|
window.addEventListener("scroll", function() {
|
@@ -57,4 +65,9 @@
|
|
57
65
|
|
58
66
|
残課題:
|
59
67
|
|
60
|
-
1. teratailに取り込んでもらいたい。取り込んでもらいたい。取り込んでもらいたい。
|
68
|
+
1. teratailに取り込んでもらいたい。取り込んでもらいたい。取り込んでもらいたい。
|
69
|
+
|
70
|
+
## 「もっと見る」の件数を増やす、ページをスキップする
|
71
|
+
|
72
|
+
* 件数を増やすには、F12 を押して limit を増やす。
|
73
|
+
* ページ番号をスキップするには、「もっと見る」ボタンを一回押したあと、「もっと見る」ボタン要素の直前にある .feed_reload/text() の数字を増やす。
|
11
別タブの問題を追記した
title
CHANGED
File without changes
|
body
CHANGED
@@ -25,7 +25,10 @@
|
|
25
25
|
})
|
26
26
|
}()
|
27
27
|
```
|
28
|
+
残課題:
|
28
29
|
|
30
|
+
1. 別タブに boxItem があるとそっちにフォーカスが行ってしまう。 parentElement.parentElement.style.display で区別できそう。
|
31
|
+
|
29
32
|
無限スクロール、まずはここまでできた。F12押してペタると表示しているタブが無限スクロールになる。
|
30
33
|
|
31
34
|
```javascript
|
@@ -42,13 +45,16 @@
|
|
42
45
|
})
|
43
46
|
}(document.getElementsByClassName('boxShowMore')))
|
44
47
|
```
|
48
|
+
残課題:
|
45
49
|
|
50
|
+
1. 500 適当に自分の画面の縦サイズに合わせてる。残りスクロール量とか下からの位置を取るやり方がよくわからない。
|
51
|
+
1. scrollイベントで大量にdispatchEventを発火しちゃってるはずのでよくない。気にしないことにしよう。
|
52
|
+
|
46
53
|
bookmarklet版: (使い方: このページをブックマークして、ブックマークの編集画面で、名前を「Teratail無限スクロール」、URLを下の文字列に置き換える。で、Teratailのトップ画面を表示したら、そのブックマークを選ぶ。と、スクロールダウンすると自動的に次を読み込むようになります)
|
47
54
|
```
|
48
55
|
javascript:(function(a) {window.addEventListener("scroll", function() {for (var i = 0; i < a.length; i++){ if(a[i].parentElement.style.display != "none" && a[i].getBoundingClientRect().top < 500) { e = document.createEvent("MouseEvents"); e.initMouseEvent("click", true, true); a[i].dispatchEvent(e); }}})}(document.getElementsByClassName('boxShowMore')))
|
49
56
|
```
|
57
|
+
|
50
58
|
残課題:
|
51
59
|
|
52
|
-
1. 500 適当に自分の画面の縦サイズに合わせてる。残りスクロール量とか下からの位置を取るやり方がよくわからない。
|
53
|
-
1. scrollイベントで大量にdispatchEventを発火しちゃってるはずのでよくない。気にしないことにしよう。
|
54
60
|
1. teratailに取り込んでもらいたい。取り込んでもらいたい。取り込んでもらいたい。
|
10
kに対応させた
title
CHANGED
File without changes
|
body
CHANGED
@@ -9,15 +9,18 @@
|
|
9
9
|
|
10
10
|
```javascript
|
11
11
|
! function() {
|
12
|
-
window.addEventListener("keydown", function(
|
12
|
+
window.addEventListener("keydown", function(e) {
|
13
|
-
if (
|
13
|
+
if ((["a", "input", "select", "textarea", "button"]
|
14
|
-
|
14
|
+
.indexOf((document.activeElement || window.getSelection().focusNode).nodeName.toLowerCase()) == -1)) {
|
15
|
+
dir = e.which == 74 ? +1 : e.which == 75 ? -1 : 0
|
16
|
+
if(dir!=0) {
|
15
|
-
|
17
|
+
bi = document.getElementsByClassName("boxItem")
|
16
|
-
|
18
|
+
f = document.getElementsByClassName("focus")[0]
|
17
|
-
|
19
|
+
if (f) f.classList.remove("focus")
|
18
|
-
|
20
|
+
f = bi[Array.prototype.slice.call(bi).indexOf(f) + dir]
|
19
|
-
|
21
|
+
f.classList.add("focus")
|
20
|
-
|
22
|
+
document.body.scrollTop += -45 + f.getBoundingClientRect().top
|
23
|
+
}
|
21
24
|
}
|
22
25
|
})
|
23
26
|
}()
|
9
keydownに反応するようにした
title
CHANGED
File without changes
|
body
CHANGED
@@ -5,15 +5,22 @@
|
|
5
5
|
|
6
6
|
|
7
7
|
追記:
|
8
|
-
「jkキーでフォーカス移動」、まずはここまでできた。F12押してペタると次のアイテムがトップにくる。最後のアイテムだとエラーがでる
|
8
|
+
「jkキーでフォーカス移動」、まずはここまでできた。F12押してペタると、jを押すと次のアイテムがトップにくる。最後のアイテムだとエラーがでると思う。
|
9
9
|
|
10
10
|
```javascript
|
11
|
+
! function() {
|
12
|
+
window.addEventListener("keydown", function(event) {
|
13
|
+
if (event.which == 74 && (["a", "input", "select", "textarea", "button"]
|
14
|
+
.indexOf((document.activeElement || window.getSelection().focusNode).nodeName.toLowerCase()) == -1)) {
|
11
|
-
bi = document.getElementsByClassName("boxItem")
|
15
|
+
bi = document.getElementsByClassName("boxItem")
|
12
|
-
f = document.getElementsByClassName("focus")[0]
|
16
|
+
f = document.getElementsByClassName("focus")[0]
|
13
|
-
if(f) f.classList.remove("focus")
|
17
|
+
if (f) f.classList.remove("focus")
|
14
|
-
f = bi[Array.prototype.slice.call(bi).indexOf(f)+1]
|
18
|
+
f = bi[Array.prototype.slice.call(bi).indexOf(f) + 1]
|
15
|
-
f.classList.add("focus")
|
19
|
+
f.classList.add("focus")
|
16
|
-
document.body.scrollTop += -45 + f.getBoundingClientRect().top
|
20
|
+
document.body.scrollTop += -45 + f.getBoundingClientRect().top
|
21
|
+
}
|
22
|
+
})
|
23
|
+
}()
|
17
24
|
```
|
18
25
|
|
19
26
|
無限スクロール、まずはここまでできた。F12押してペタると表示しているタブが無限スクロールになる。
|
8
jキーぽい処理できた
title
CHANGED
File without changes
|
body
CHANGED
@@ -5,10 +5,15 @@
|
|
5
5
|
|
6
6
|
|
7
7
|
追記:
|
8
|
-
「jkキーでフォーカス移動」、まずはここまでできた。F12押してペタると
|
8
|
+
「jkキーでフォーカス移動」、まずはここまでできた。F12押してペタると次のアイテムがトップにくる。最後のアイテムだとエラーがでるかも。
|
9
9
|
|
10
10
|
```javascript
|
11
|
+
bi = document.getElementsByClassName("boxItem")
|
12
|
+
f = document.getElementsByClassName("focus")[0]
|
13
|
+
if(f) f.classList.remove("focus")
|
14
|
+
f = bi[Array.prototype.slice.call(bi).indexOf(f)+1]
|
15
|
+
f.classList.add("focus")
|
11
|
-
document.body.scrollTop += -45 +
|
16
|
+
document.body.scrollTop += -45 + f.getBoundingClientRect().top
|
12
17
|
```
|
13
18
|
|
14
19
|
無限スクロール、まずはここまでできた。F12押してペタると表示しているタブが無限スクロールになる。
|
7
タイトルを修正。本文もちょっと修正。そしてアクティブタブ1画面目に躍り出る。
title
CHANGED
@@ -1,1 +1,1 @@
|
|
1
|
-
Teratailでキーボードショートカット
|
1
|
+
Teratailで無限スクロールとかキーボードショートカットとか
|
body
CHANGED
@@ -1,8 +1,10 @@
|
|
1
1
|
無限スクロールとか
|
2
2
|
jkキーでフォーカス移動とか
|
3
3
|
できない?
|
4
|
+
一画面目から落ちちゃうとと反応が悪くなるので、どうにかしたい。
|
4
5
|
|
5
6
|
|
7
|
+
追記:
|
6
8
|
「jkキーでフォーカス移動」、まずはここまでできた。F12押してペタると指定したアイテムがトップにくる。
|
7
9
|
|
8
10
|
```javascript
|
6
jkキーでフォーカス移動、にちょっと取り組んだ。
title
CHANGED
File without changes
|
body
CHANGED
@@ -3,9 +3,15 @@
|
|
3
3
|
できない?
|
4
4
|
|
5
5
|
|
6
|
-
|
6
|
+
「jkキーでフォーカス移動」、まずはここまでできた。F12押してペタると指定したアイテムがトップにくる。
|
7
7
|
|
8
8
|
```javascript
|
9
|
+
document.body.scrollTop += -45 + document.getElementsByClassName("boxItem")[6].getBoundingClientRect().top
|
10
|
+
```
|
11
|
+
|
12
|
+
無限スクロール、まずはここまでできた。F12押してペタると表示しているタブが無限スクロールになる。
|
13
|
+
|
14
|
+
```javascript
|
9
15
|
(function(a) {
|
10
16
|
window.addEventListener("scroll", function() {
|
11
17
|
for (var i = 0; i < a.length; i++){
|
@@ -28,5 +34,4 @@
|
|
28
34
|
|
29
35
|
1. 500 適当に自分の画面の縦サイズに合わせてる。残りスクロール量とか下からの位置を取るやり方がよくわからない。
|
30
36
|
1. scrollイベントで大量にdispatchEventを発火しちゃってるはずのでよくない。気にしないことにしよう。
|
31
|
-
1. teratailに取り込んでもらいたい。取り込んでもらいたい。取り込んでもらいたい。
|
37
|
+
1. teratailに取り込んでもらいたい。取り込んでもらいたい。取り込んでもらいたい。
|
32
|
-
1. jkキーでフォーカス移動、にぜんぜん取り組んでいない。
|
5
タブ決め打ちではなく表示タブを対象にするように修正
title
CHANGED
File without changes
|
body
CHANGED
@@ -3,29 +3,30 @@
|
|
3
3
|
できない?
|
4
4
|
|
5
5
|
|
6
|
-
12/24 無限スクロール、まずはここまでできた。F12押してペタると
|
6
|
+
12/24 無限スクロール、まずはここまでできた。F12押してペタると表示しているタブが無限スクロールになる。
|
7
7
|
|
8
8
|
```javascript
|
9
|
-
(function(
|
9
|
+
(function(a) {
|
10
|
-
window.addEventListener("scroll", function(
|
10
|
+
window.addEventListener("scroll", function() {
|
11
|
+
for (var i = 0; i < a.length; i++){
|
11
|
-
|
12
|
+
if(a[i].parentElement.style.display != "none"
|
12
|
-
|
13
|
+
&& a[i].getBoundingClientRect().top < 500) {
|
13
|
-
|
14
|
+
e = document.createEvent("MouseEvents");
|
14
|
-
|
15
|
+
e.initMouseEvent("click", true, true);
|
15
|
-
|
16
|
+
a[i].dispatchEvent(e);
|
17
|
+
}
|
16
18
|
}
|
17
|
-
})
|
19
|
+
})
|
20
|
+
}(document.getElementsByClassName('boxShowMore')))
|
18
21
|
```
|
19
22
|
|
20
|
-
bookmarklet版: (使い方: このページをブックマークして、ブックマークの編集画面で、名前を「Teratail
|
23
|
+
bookmarklet版: (使い方: このページをブックマークして、ブックマークの編集画面で、名前を「Teratail無限スクロール」、URLを下の文字列に置き換える。で、Teratailのトップ画面を表示したら、そのブックマークを選ぶ。と、スクロールダウンすると自動的に次を読み込むようになります)
|
21
24
|
```
|
22
|
-
javascript:(function(
|
25
|
+
javascript:(function(a) {window.addEventListener("scroll", function() {for (var i = 0; i < a.length; i++){ if(a[i].parentElement.style.display != "none" && a[i].getBoundingClientRect().top < 500) { e = document.createEvent("MouseEvents"); e.initMouseEvent("click", true, true); a[i].dispatchEvent(e); }}})}(document.getElementsByClassName('boxShowMore')))
|
23
26
|
```
|
24
27
|
残課題:
|
25
28
|
|
26
|
-
1.
|
29
|
+
1. 500 適当に自分の画面の縦サイズに合わせてる。残りスクロール量とか下からの位置を取るやり方がよくわからない。
|
27
|
-
1. (0) で「新着」決め打ち。(1)にしたら「アクティブ」になる。(2)だと「未回答」……かと思いきや「注目」。document.getElementsByClassName('boxShowMore')[2].parentElement.style.display != "none" でどれが選ばれているかを判定できそう。これはどうにかなるかな。
|
28
|
-
1. アクティブタブのboxShowMoreがぐるぐるになる。なんでだろう。ぐるぐるでもいいので優先度低。
|
29
30
|
1. scrollイベントで大量にdispatchEventを発火しちゃってるはずのでよくない。気にしないことにしよう。
|
30
31
|
1. teratailに取り込んでもらいたい。取り込んでもらいたい。取り込んでもらいたい。
|
31
32
|
1. jkキーでフォーカス移動、にぜんぜん取り組んでいない。
|
4
残課題を優先度順に並べ替えました
title
CHANGED
File without changes
|
body
CHANGED
@@ -23,8 +23,9 @@
|
|
23
23
|
```
|
24
24
|
残課題:
|
25
25
|
|
26
|
+
1. 300 適当に自分の画面の縦サイズに合わせてる。残りスクロール量とか下からの位置を取るやり方がよくわからない。
|
26
|
-
1. (0) で「新着」決め打ち。(1)にしたら「アクティブ」になると思
|
27
|
+
1. (0) で「新着」決め打ち。(1)にしたら「アクティブ」になる。(2)だと「未回答」……かと思いきや「注目」。document.getElementsByClassName('boxShowMore')[2].parentElement.style.display != "none" でどれが選ばれているかを判定できそう。これはどうにかなるかな。
|
27
|
-
1. アクティブタブのboxShowMoreがぐるぐるになる。なんでだろう
|
28
|
+
1. アクティブタブのboxShowMoreがぐるぐるになる。なんでだろう。ぐるぐるでもいいので優先度低。
|
28
|
-
1. 300 適当に自分の画面の縦サイズに合わせてる
|
29
|
-
1. scrollイベントで大量にdispatchEventを発火しちゃってるはずのでよくない。
|
29
|
+
1. scrollイベントで大量にdispatchEventを発火しちゃってるはずのでよくない。気にしないことにしよう。
|
30
|
-
1. teratailに取り込んでもらいたい。
|
30
|
+
1. teratailに取り込んでもらいたい。取り込んでもらいたい。取り込んでもらいたい。
|
31
|
+
1. jkキーでフォーカス移動、にぜんぜん取り組んでいない。
|
3
bookmarkletにして説明をつけた
title
CHANGED
File without changes
|
body
CHANGED
@@ -17,8 +17,7 @@
|
|
17
17
|
})}(0))
|
18
18
|
```
|
19
19
|
|
20
|
-
bookmarklet版:
|
20
|
+
bookmarklet版: (使い方: このページをブックマークして、ブックマークの編集画面で、名前を「Teratail新着無限スクロール」、URLを下の文字列に置き換える。で、Teratailのトップ画面を表示したら、そのブックマークを選ぶ。と、スクロールダウンすると自動的に次を読み込むようになります)
|
21
|
-
|
22
21
|
```
|
23
22
|
javascript:(function(i){window.addEventListener("scroll",function(event){b=document.getElementsByClassName('boxShowMore')[i];if(b.getBoundingClientRect().top<300){e=document.createEvent("MouseEvents");e.initMouseEvent("click",true,true);b.dispatchEvent(e);}})}(0))
|
24
23
|
```
|
2
bookmarkletn作った
title
CHANGED
File without changes
|
body
CHANGED
@@ -6,19 +6,26 @@
|
|
6
6
|
12/24 無限スクロール、まずはここまでできた。F12押してペタると「新着」が無限スクロールになる。
|
7
7
|
|
8
8
|
```javascript
|
9
|
+
(function(i){
|
9
|
-
window.addEventListener("scroll", function(event) {
|
10
|
+
window.addEventListener("scroll", function(event) {
|
10
|
-
|
11
|
+
b = document.getElementsByClassName('boxShowMore')[i];
|
11
|
-
|
12
|
+
if(b.getBoundingClientRect().top < 300) {
|
12
|
-
|
13
|
+
e = document.createEvent("MouseEvents");
|
13
|
-
|
14
|
+
e.initMouseEvent("click", true, true);
|
14
|
-
|
15
|
+
b.dispatchEvent(e);
|
15
|
-
|
16
|
+
}
|
16
|
-
})
|
17
|
+
})}(0))
|
17
18
|
```
|
18
19
|
|
20
|
+
bookmarklet版: (javascript: つけただけ)
|
21
|
+
|
22
|
+
```
|
23
|
+
javascript:(function(i){window.addEventListener("scroll",function(event){b=document.getElementsByClassName('boxShowMore')[i];if(b.getBoundingClientRect().top<300){e=document.createEvent("MouseEvents");e.initMouseEvent("click",true,true);b.dispatchEvent(e);}})}(0))
|
24
|
+
```
|
19
25
|
残課題:
|
20
26
|
|
21
|
-
1.
|
27
|
+
1. (0) で「新着」決め打ち。(1)にしたら「アクティブ」になると思う。document.getElementsByClassName('boxShowMore')[2].parentElement.style.display != "none" でどれが選ばれているかを判定できそう
|
28
|
+
1. アクティブタブのboxShowMoreがぐるぐるになる。なんでだろう
|
22
29
|
1. 300 適当に自分の画面の縦サイズに合わせてる
|
23
30
|
1. scrollイベントで大量にdispatchEventを発火しちゃってるはずのでよくない。
|
24
|
-
1
|
31
|
+
1. teratailに取り込んでもらいたい。
|
1
途中まで作ったので追記した。
title
CHANGED
File without changes
|
body
CHANGED
@@ -1,3 +1,24 @@
|
|
1
1
|
無限スクロールとか
|
2
2
|
jkキーでフォーカス移動とか
|
3
|
-
できない?
|
3
|
+
できない?
|
4
|
+
|
5
|
+
|
6
|
+
12/24 無限スクロール、まずはここまでできた。F12押してペタると「新着」が無限スクロールになる。
|
7
|
+
|
8
|
+
```javascript
|
9
|
+
window.addEventListener("scroll", function(event) {
|
10
|
+
box = document.getElementsByClassName('boxShowMore')[0];
|
11
|
+
if(box.getBoundingClientRect().top < 300) {
|
12
|
+
e = document.createEvent("MouseEvents");
|
13
|
+
e.initMouseEvent("click", true, true);
|
14
|
+
box.dispatchEvent(e);
|
15
|
+
}
|
16
|
+
});
|
17
|
+
```
|
18
|
+
|
19
|
+
残課題:
|
20
|
+
|
21
|
+
1. [0] で「新着」決め打ち。[1]にしたら「アクティブ」になると思う。document.getElementsByClassName('boxShowMore')[2].parentElement.style.display != "none" でどれが選ばれているかを判定できそう
|
22
|
+
1. 300 適当に自分の画面の縦サイズに合わせてる
|
23
|
+
1. scrollイベントで大量にdispatchEventを発火しちゃってるはずのでよくない。
|
24
|
+
1.ブックマークレットにするか、teratailに取り込んでもらいたい。
|