teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問Teratailで無限スクロールとかキーボードショートカットとかページスキップとか

編集履歴

質問編集履歴

14

ブックマークレットにした

2016/07/20 11:09

投稿

matobaa
matobaa

スコア2493

test CHANGED
File without changes
test CHANGED
@@ -142,4 +142,4 @@
142
142
 
143
143
  * 件数を増やすには `javascript:limit=20` とかやる。
144
144
 
145
- * ページ番号をスキップするには、「もっと見る」ボタンを一回押したあと、「もっと見る」ボタン要素の直前にある .feed_reload/text() の数字を増やす。
145
+ * ページ番号をスキップするには、「もっと見る」ボタンを一回押したあと、「もっと見る」ボタン要素の直前にある .feed_reload/text() の数字を増やすか、`javascript:document.getElementsByClassName("feed_reload")[0].innerText+=100` とかやる。

13

ブックマークレットにした

2016/07/20 11:09

投稿

matobaa
matobaa

スコア2493

test CHANGED
File without changes
test CHANGED
@@ -140,6 +140,6 @@
140
140
 
141
141
 
142
142
 
143
- * 件数を増やすには、F12 を押して limit を増やす。
143
+ * 件数を増やすには `javascript:limit=20` とかやる。
144
144
 
145
145
  * ページ番号をスキップするには、「もっと見る」ボタンを一回押したあと、「もっと見る」ボタン要素の直前にある .feed_reload/text() の数字を増やす。

12

もっとたくさん見る

2016/07/20 10:42

投稿

matobaa
matobaa

スコア2493

test CHANGED
@@ -1 +1 @@
1
- Teratailで無限スクロールとかキーボードショートカットとか
1
+ Teratailで無限スクロールとかキーボードショートカットとかページスキップとか
test CHANGED
@@ -10,9 +10,19 @@
10
10
 
11
11
 
12
12
 
13
- 追記:
13
+ ----
14
14
 
15
+
16
+
17
+ 以下は追記です:
18
+
19
+
20
+
21
+ # jkキーでフォーカス移動
22
+
23
+
24
+
15
- 「jkキーでフォーカス移動」、まずはここまでできた。F12押してペタると、jを押すと次のアイテムがトップにくる。最後のアイテムだとエラーがでると思う。
25
+ まずはここまでできた。F12押してペタると、jを押すと次のアイテムがトップにくる。最後のアイテムだとエラーがでると思う。
16
26
 
17
27
 
18
28
 
@@ -60,7 +70,13 @@
60
70
 
61
71
 
62
72
 
73
+
74
+
75
+ # 無限スクロール
76
+
77
+
78
+
63
- 無限スクロール、まずはここまでできた。F12押してペタると表示しているタブが無限スクロールになる。
79
+ まずはここまでできた。F12押してペタると表示しているタブが無限スクロールになる。
64
80
 
65
81
 
66
82
 
@@ -117,3 +133,13 @@
117
133
 
118
134
 
119
135
  1. teratailに取り込んでもらいたい。取り込んでもらいたい。取り込んでもらいたい。
136
+
137
+
138
+
139
+ ## 「もっと見る」の件数を増やす、ページをスキップする
140
+
141
+
142
+
143
+ * 件数を増やすには、F12 を押して limit を増やす。
144
+
145
+ * ページ番号をスキップするには、「もっと見る」ボタンを一回押したあと、「もっと見る」ボタン要素の直前にある .feed_reload/text() の数字を増やす。

11

別タブの問題を追記した

2016/07/20 10:39

投稿

matobaa
matobaa

スコア2493

test CHANGED
File without changes
test CHANGED
@@ -52,6 +52,12 @@
52
52
 
53
53
  ```
54
54
 
55
+ 残課題:
56
+
57
+
58
+
59
+ 1. 別タブに boxItem があるとそっちにフォーカスが行ってしまう。 parentElement.parentElement.style.display で区別できそう。
60
+
55
61
 
56
62
 
57
63
  無限スクロール、まずはここまでできた。F12押してペタると表示しているタブが無限スクロールになる。
@@ -86,6 +92,14 @@
86
92
 
87
93
  ```
88
94
 
95
+ 残課題:
96
+
97
+
98
+
99
+ 1. 500 適当に自分の画面の縦サイズに合わせてる。残りスクロール量とか下からの位置を取るやり方がよくわからない。
100
+
101
+ 1. scrollイベントで大量にdispatchEventを発火しちゃってるはずのでよくない。気にしないことにしよう。
102
+
89
103
 
90
104
 
91
105
  bookmarklet版: (使い方: このページをブックマークして、ブックマークの編集画面で、名前を「Teratail無限スクロール」、URLを下の文字列に置き換える。で、Teratailのトップ画面を表示したら、そのブックマークを選ぶ。と、スクロールダウンすると自動的に次を読み込むようになります)
@@ -96,12 +110,10 @@
96
110
 
97
111
  ```
98
112
 
113
+
114
+
99
115
  残課題:
100
116
 
101
117
 
102
118
 
103
- 1. 500 適当に自分の画面の縦サイズに合わせてる。残りスクロール量とか下からの位置を取るやり方がよくわからない。
104
-
105
- 1. scrollイベントで大量にdispatchEventを発火しちゃってるはずのでよくない。気にしないことにしよう。
106
-
107
119
  1. teratailに取り込んでもらいたい。取り込んでもらいたい。取り込んでもらいたい。

10

kに対応させた

2016/04/15 09:58

投稿

matobaa
matobaa

スコア2493

test CHANGED
File without changes
test CHANGED
@@ -20,23 +20,29 @@
20
20
 
21
21
  ! function() {
22
22
 
23
- window.addEventListener("keydown", function(event) {
23
+ window.addEventListener("keydown", function(e) {
24
24
 
25
- if (event.which == 74 && (["a", "input", "select", "textarea", "button"]
25
+ if ((["a", "input", "select", "textarea", "button"]
26
26
 
27
- .indexOf((document.activeElement || window.getSelection().focusNode).nodeName.toLowerCase()) == -1)) {
27
+ .indexOf((document.activeElement || window.getSelection().focusNode).nodeName.toLowerCase()) == -1)) {
28
28
 
29
- bi = document.getElementsByClassName("boxItem")
29
+ dir = e.which == 74 ? +1 : e.which == 75 ? -1 : 0
30
30
 
31
- f = document.getElementsByClassName("focus")[0]
31
+ if(dir!=0) {
32
32
 
33
- if (f) f.classList.remove("focus")
33
+ bi = document.getElementsByClassName("boxItem")
34
34
 
35
- f = bi[Array.prototype.slice.call(bi).indexOf(f) + 1]
35
+ f = document.getElementsByClassName("focus")[0]
36
36
 
37
- f.classList.add("focus")
37
+ if (f) f.classList.remove("focus")
38
38
 
39
+ f = bi[Array.prototype.slice.call(bi).indexOf(f) + dir]
40
+
41
+ f.classList.add("focus")
42
+
39
- document.body.scrollTop += -45 + f.getBoundingClientRect().top
43
+ document.body.scrollTop += -45 + f.getBoundingClientRect().top
44
+
45
+ }
40
46
 
41
47
  }
42
48
 

9

keydownに反応するようにした

2016/04/14 03:27

投稿

matobaa
matobaa

スコア2493

test CHANGED
File without changes
test CHANGED
@@ -12,23 +12,37 @@
12
12
 
13
13
  追記:
14
14
 
15
- 「jkキーでフォーカス移動」、まずはここまでできた。F12押してペタると次のアイテムがトップにくる。最後のアイテムだとエラーがでるかも。
15
+ 「jkキーでフォーカス移動」、まずはここまでできた。F12押してペタると、jを押すと次のアイテムがトップにくる。最後のアイテムだとエラーがでると思う。
16
16
 
17
17
 
18
18
 
19
19
  ```javascript
20
20
 
21
- bi = document.getElementsByClassName("boxItem")
21
+ ! function() {
22
22
 
23
- f = document.getElementsByClassName("focus")[0]
23
+ window.addEventListener("keydown", function(event) {
24
24
 
25
- if(f) f.classList.remove("focus")
25
+ if (event.which == 74 && (["a", "input", "select", "textarea", "button"]
26
26
 
27
- f = bi[Array.prototype.slice.call(bi).indexOf(f)+1]
27
+ .indexOf((document.activeElement || window.getSelection().focusNode).nodeName.toLowerCase()) == -1)) {
28
28
 
29
- f.classList.add("focus")
29
+ bi = document.getElementsByClassName("boxItem")
30
30
 
31
+ f = document.getElementsByClassName("focus")[0]
32
+
33
+ if (f) f.classList.remove("focus")
34
+
35
+ f = bi[Array.prototype.slice.call(bi).indexOf(f) + 1]
36
+
37
+ f.classList.add("focus")
38
+
31
- document.body.scrollTop += -45 + f.getBoundingClientRect().top
39
+ document.body.scrollTop += -45 + f.getBoundingClientRect().top
40
+
41
+ }
42
+
43
+ })
44
+
45
+ }()
32
46
 
33
47
  ```
34
48
 

8

jキーぽい処理できた

2016/04/13 12:50

投稿

matobaa
matobaa

スコア2493

test CHANGED
File without changes
test CHANGED
@@ -12,13 +12,23 @@
12
12
 
13
13
  追記:
14
14
 
15
- 「jkキーでフォーカス移動」、まずはここまでできた。F12押してペタると指定したアイテムがトップにくる。
15
+ 「jkキーでフォーカス移動」、まずはここまでできた。F12押してペタると次のアイテムがトップにくる。最後のアイテムだとエラーがでるかも。
16
16
 
17
17
 
18
18
 
19
19
  ```javascript
20
20
 
21
+ bi = document.getElementsByClassName("boxItem")
22
+
23
+ f = document.getElementsByClassName("focus")[0]
24
+
25
+ if(f) f.classList.remove("focus")
26
+
27
+ f = bi[Array.prototype.slice.call(bi).indexOf(f)+1]
28
+
29
+ f.classList.add("focus")
30
+
21
- document.body.scrollTop += -45 + document.getElementsByClassName("boxItem")[6].getBoundingClientRect().top
31
+ document.body.scrollTop += -45 + f.getBoundingClientRect().top
22
32
 
23
33
  ```
24
34
 

7

タイトルを修正。本文もちょっと修正。そしてアクティブタブ1画面目に躍り出る。

2016/04/13 12:03

投稿

matobaa
matobaa

スコア2493

test CHANGED
@@ -1 +1 @@
1
- Teratailでキーボードショートカット
1
+ Teratailで無限スクロールとかキーボードショートカットとか
test CHANGED
@@ -4,9 +4,13 @@
4
4
 
5
5
  できない?
6
6
 
7
+ 一画面目から落ちちゃうとと反応が悪くなるので、どうにかしたい。
7
8
 
8
9
 
9
10
 
11
+
12
+
13
+ 追記:
10
14
 
11
15
  「jkキーでフォーカス移動」、まずはここまでできた。F12押してペタると指定したアイテムがトップにくる。
12
16
 

6

jkキーでフォーカス移動、にちょっと取り組んだ。

2016/01/20 03:11

投稿

matobaa
matobaa

スコア2493

test CHANGED
File without changes
test CHANGED
@@ -8,7 +8,19 @@
8
8
 
9
9
 
10
10
 
11
+ 「jkキーでフォーカス移動」、まずはここまでできた。F12押してペタると指定したアイテムがトップにくる。
12
+
13
+
14
+
15
+ ```javascript
16
+
17
+ document.body.scrollTop += -45 + document.getElementsByClassName("boxItem")[6].getBoundingClientRect().top
18
+
19
+ ```
20
+
21
+
22
+
11
- 12/24 無限スクロール、まずはここまでできた。F12押してペタると表示しているタブが無限スクロールになる。
23
+ 無限スクロール、まずはここまでできた。F12押してペタると表示しているタブが無限スクロールになる。
12
24
 
13
25
 
14
26
 
@@ -59,5 +71,3 @@
59
71
  1. scrollイベントで大量にdispatchEventを発火しちゃってるはずのでよくない。気にしないことにしよう。
60
72
 
61
73
  1. teratailに取り込んでもらいたい。取り込んでもらいたい。取り込んでもらいたい。
62
-
63
- 1. jkキーでフォーカス移動、にぜんぜん取り組んでいない。

5

タブ決め打ちではなく表示タブを対象にするように修正

2015/12/30 14:09

投稿

matobaa
matobaa

スコア2493

test CHANGED
File without changes
test CHANGED
@@ -8,39 +8,45 @@
8
8
 
9
9
 
10
10
 
11
- 12/24 無限スクロール、まずはここまでできた。F12押してペタると「新着」が無限スクロールになる。
11
+ 12/24 無限スクロール、まずはここまでできた。F12押してペタると表示しているタブが無限スクロールになる。
12
12
 
13
13
 
14
14
 
15
15
  ```javascript
16
16
 
17
- (function(i){
17
+ (function(a) {
18
18
 
19
- window.addEventListener("scroll", function(event) {
19
+ window.addEventListener("scroll", function() {
20
20
 
21
- b = document.getElementsByClassName('boxShowMore')[i];
21
+ for (var i = 0; i < a.length; i++){
22
22
 
23
- if(b.getBoundingClientRect().top < 300) {
23
+ if(a[i].parentElement.style.display != "none"
24
24
 
25
- e = document.createEvent("MouseEvents");
25
+ && a[i].getBoundingClientRect().top < 500) {
26
26
 
27
- e.initMouseEvent("click", true, true);
27
+ e = document.createEvent("MouseEvents");
28
28
 
29
+ e.initMouseEvent("click", true, true);
30
+
29
- b.dispatchEvent(e);
31
+ a[i].dispatchEvent(e);
32
+
33
+ }
30
34
 
31
35
  }
32
36
 
33
- })}(0))
37
+ })
38
+
39
+ }(document.getElementsByClassName('boxShowMore')))
34
40
 
35
41
  ```
36
42
 
37
43
 
38
44
 
39
- bookmarklet版: (使い方: このページをブックマークして、ブックマークの編集画面で、名前を「Teratail新着無限スクロール」、URLを下の文字列に置き換える。で、Teratailのトップ画面を表示したら、そのブックマークを選ぶ。と、スクロールダウンすると自動的に次を読み込むようになります)
45
+ bookmarklet版: (使い方: このページをブックマークして、ブックマークの編集画面で、名前を「Teratail無限スクロール」、URLを下の文字列に置き換える。で、Teratailのトップ画面を表示したら、そのブックマークを選ぶ。と、スクロールダウンすると自動的に次を読み込むようになります)
40
46
 
41
47
  ```
42
48
 
43
- 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))
49
+ 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')))
44
50
 
45
51
  ```
46
52
 
@@ -48,11 +54,7 @@
48
54
 
49
55
 
50
56
 
51
- 1. 300 適当に自分の画面の縦サイズに合わせてる。残りスクロール量とか下からの位置を取るやり方がよくわからない。
57
+ 1. 500 適当に自分の画面の縦サイズに合わせてる。残りスクロール量とか下からの位置を取るやり方がよくわからない。
52
-
53
- 1. (0) で「新着」決め打ち。(1)にしたら「アクティブ」になる。(2)だと「未回答」……かと思いきや「注目」。document.getElementsByClassName('boxShowMore')[2].parentElement.style.display != "none" でどれが選ばれているかを判定できそう。これはどうにかなるかな。
54
-
55
- 1. アクティブタブのboxShowMoreがぐるぐるになる。なんでだろう。ぐるぐるでもいいので優先度低。
56
58
 
57
59
  1. scrollイベントで大量にdispatchEventを発火しちゃってるはずのでよくない。気にしないことにしよう。
58
60
 

4

残課題を優先度順に並べ替えました

2015/12/30 12:05

投稿

matobaa
matobaa

スコア2493

test CHANGED
File without changes
test CHANGED
@@ -48,12 +48,14 @@
48
48
 
49
49
 
50
50
 
51
- 1. (0) で「新着」決め打ち。(1)にしたら「アクティブ」になると思う。document.getElementsByClassName('boxShowMore')[2].parentElement.style.display != "none" でどれが選ばれているかを判定できそう
51
+ 1. 300 適当に自分の画面の縦サイズに合わせてる。残りスクロール量とか下からの位置を取るやり方がよくわからない。
52
52
 
53
- 1. アクティブタブのboxShowMoreがぐるぐるになる。なんでだろう
53
+ 1. (0) で「新着」決め打ち。(1)にしたら「アクティブ」になる。(2)だと「未回答」……かと思いきや「注目」。document.getElementsByClassName('boxShowMore')[2].parentElement.style.display != "none" でどれが選ばれているかを判定できそう。これはどうにかなるかな。
54
54
 
55
- 1. 300 適当に自分の画面の縦サイズに合わせてる
55
+ 1. アクティブタブのboxShowMoreがぐるぐるになる。なんでだろう。ぐるぐるでもいいので優先度低。
56
56
 
57
- 1. scrollイベントで大量にdispatchEventを発火しちゃってるはずのでよくない。
57
+ 1. scrollイベントで大量にdispatchEventを発火しちゃってるはずのでよくない。気にしないことにしよう。
58
58
 
59
- 1. teratailに取り込んでもらいたい。
59
+ 1. teratailに取り込んでもらいたい。取り込んでもらいたい。取り込んでもらいたい。
60
+
61
+ 1. jkキーでフォーカス移動、にぜんぜん取り組んでいない。

3

bookmarkletにして説明をつけた

2015/12/30 09:18

投稿

matobaa
matobaa

スコア2493

test CHANGED
File without changes
test CHANGED
@@ -36,9 +36,7 @@
36
36
 
37
37
 
38
38
 
39
- bookmarklet版: （javascript: つけただけ)
39
+ bookmarklet版: (使い方: このページをブックマークして、ブックマークの編集画面で、名前を「Teratail新着無限スクロール」、URLを下の文字列に置き換える。で、Teratailのトップ画面を表示したら、そのブックマークを選ぶ。と、スクロールダウンすると自動的に次を読み込むようになります)
40
-
41
-
42
40
 
43
41
  ```
44
42
 

2

bookmarkletｎ作った

2015/12/28 23:01

投稿

matobaa
matobaa

スコア2493

test CHANGED
File without changes
test CHANGED
@@ -14,34 +14,48 @@
14
14
 
15
15
  ```javascript
16
16
 
17
- window.addEventListener("scroll", function(event) {
17
+ (function(i){
18
18
 
19
- box = document.getElementsByClassName('boxShowMore')[0];
19
+ window.addEventListener("scroll", function(event) {
20
20
 
21
- if(box.getBoundingClientRect().top < 300) {
21
+ b = document.getElementsByClassName('boxShowMore')[i];
22
22
 
23
- e = document.createEvent("MouseEvents");
23
+ if(b.getBoundingClientRect().top < 300) {
24
24
 
25
- e.initMouseEvent("click", true, true);
25
+ e = document.createEvent("MouseEvents");
26
26
 
27
- box.dispatchEvent(e);
27
+ e.initMouseEvent("click", true, true);
28
28
 
29
- }
29
+ b.dispatchEvent(e);
30
30
 
31
- });
31
+ }
32
+
33
+ })}(0))
32
34
 
33
35
  ```
34
36
 
35
37
 
36
38
 
39
+ bookmarklet版: （javascript: つけただけ)
40
+
41
+
42
+
43
+ ```
44
+
45
+ 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))
46
+
47
+ ```
48
+
37
49
  残課題:
38
50
 
39
51
 
40
52
 
41
- 1. [0] で「新着」決め打ち。[1]にしたら「アクティブ」になると思う。document.getElementsByClassName('boxShowMore')[2].parentElement.style.display != "none" でどれが選ばれているかを判定できそう
53
+ 1. (0) で「新着」決め打ち。(1)にしたら「アクティブ」になると思う。document.getElementsByClassName('boxShowMore')[2].parentElement.style.display != "none" でどれが選ばれているかを判定できそう
54
+
55
+ 1. アクティブタブのboxShowMoreがぐるぐるになる。なんでだろう
42
56
 
43
57
  1. 300 適当に自分の画面の縦サイズに合わせてる
44
58
 
45
59
  1. scrollイベントで大量にdispatchEventを発火しちゃってるはずのでよくない。
46
60
 
47
- 1．ブックマークレットにするか、teratailに取り込んでもらいたい。
61
+ 1. teratailに取り込んでもらいたい。

1

途中まで作ったので追記した。

2015/12/28 22:54

投稿

matobaa
matobaa

スコア2493

test CHANGED
File without changes
test CHANGED
@@ -3,3 +3,45 @@
3
3
  jkキーでフォーカス移動とか
4
4
 
5
5
  できない?
6
+
7
+
8
+
9
+
10
+
11
+ 12/24 無限スクロール、まずはここまでできた。F12押してペタると「新着」が無限スクロールになる。
12
+
13
+
14
+
15
+ ```javascript
16
+
17
+ window.addEventListener("scroll", function(event) {
18
+
19
+ box = document.getElementsByClassName('boxShowMore')[0];
20
+
21
+ if(box.getBoundingClientRect().top < 300) {
22
+
23
+ e = document.createEvent("MouseEvents");
24
+
25
+ e.initMouseEvent("click", true, true);
26
+
27
+ box.dispatchEvent(e);
28
+
29
+ }
30
+
31
+ });
32
+
33
+ ```
34
+
35
+
36
+
37
+ 残課題:
38
+
39
+
40
+
41
+ 1. [0] で「新着」決め打ち。[1]にしたら「アクティブ」になると思う。document.getElementsByClassName('boxShowMore')[2].parentElement.style.display != "none" でどれが選ばれているかを判定できそう
42
+
43
+ 1. 300 適当に自分の画面の縦サイズに合わせてる
44
+
45
+ 1. scrollイベントで大量にdispatchEventを発火しちゃってるはずのでよくない。
46
+
47
+ 1．ブックマークレットにするか、teratailに取り込んでもらいたい。