質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
teratail

teratail(テラテイル)は、プログラミングに特化した日本語Q&Aサイトです。

Q&A

解決済

3回答

3237閲覧

Teratailで無限スクロールとかキーボードショートカットとかページスキップとか

matobaa

総合スコア2493

teratail

teratail(テラテイル)は、プログラミングに特化した日本語Q&Aサイトです。

5グッド

1クリップ

投稿2015/09/09 10:58

編集2016/07/20 11:09

無限スクロールとか
jkキーでフォーカス移動とか
できない?
一画面目から落ちちゃうとと反応が悪くなるので、どうにかしたい。


以下は追記です:

jkキーでフォーカス移動

まずはここまでできた。F12押してペタると、jを押すと次のアイテムがトップにくる。最後のアイテムだとエラーがでると思う。

javascript

1! function() { 2 window.addEventListener("keydown", function(e) { 3 if ((["a", "input", "select", "textarea", "button"] 4 .indexOf((document.activeElement || window.getSelection().focusNode).nodeName.toLowerCase()) == -1)) { 5 dir = e.which == 74 ? +1 : e.which == 75 ? -1 : 0 6 if(dir!=0) { 7 bi = document.getElementsByClassName("boxItem") 8 f = document.getElementsByClassName("focus")[0] 9 if (f) f.classList.remove("focus") 10 f = bi[Array.prototype.slice.call(bi).indexOf(f) + dir] 11 f.classList.add("focus") 12 document.body.scrollTop += -45 + f.getBoundingClientRect().top 13 } 14 } 15 }) 16}()

残課題:

  1. 別タブに boxItem があるとそっちにフォーカスが行ってしまう。 parentElement.parentElement.style.display で区別できそう。

無限スクロール

まずはここまでできた。F12押してペタると表示しているタブが無限スクロールになる。

javascript

1(function(a) { 2 window.addEventListener("scroll", function() { 3 for (var i = 0; i < a.length; i++){ 4 if(a[i].parentElement.style.display != "none" 5 && a[i].getBoundingClientRect().top < 500) { 6 e = document.createEvent("MouseEvents"); 7 e.initMouseEvent("click", true, true); 8 a[i].dispatchEvent(e); 9 } 10 } 11 }) 12}(document.getElementsByClassName('boxShowMore')))

残課題:

  1. 500 適当に自分の画面の縦サイズに合わせてる。残りスクロール量とか下からの位置を取るやり方がよくわからない。
  2. scrollイベントで大量にdispatchEventを発火しちゃってるはずのでよくない。気にしないことにしよう。

bookmarklet版: (使い方: このページをブックマークして、ブックマークの編集画面で、名前を「Teratail無限スクロール」、URLを下の文字列に置き換える。で、Teratailのトップ画面を表示したら、そのブックマークを選ぶ。と、スクロールダウンすると自動的に次を読み込むようになります)

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')))

残課題:

  1. teratailに取り込んでもらいたい。取り込んでもらいたい。取り込んでもらいたい。

「もっと見る」の件数を増やす、ページをスキップする

  • 件数を増やすには javascript:limit=20 とかやる。
  • ページ番号をスキップするには、「もっと見る」ボタンを一回押したあと、「もっと見る」ボタン要素の直前にある .feed_reload/text() の数字を増やすか、javascript:document.getElementsByClassName("feed_reload")[0].innerText+=100 とかやる。
5o5o_wagon, kei344, sho_cs, argius, katoy👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

いわゆる、Autopagerize, LDRize でしょうか。

ただし、teratail では [次のページへ] のリンクがなく、 Autopagerize による拡張は無理と思われる為、自分で拡張を作るしかないと思います。
また、Autopagerize は On/Off を容易に切り替えられる実装を推奨します。
なぜなら、スクロールし続けるとフッタコンテンツに永遠に辿り着けないからです(実際にはコンテンツを読みきれば辿り着けますが、量が多ければほぼ無理です)。


そもそも、teratail を JavaScript 無効にして閲覧したらどうなるのだろうと思って試してみたら、下記HTMLが出現しました。

HTML

1<marquee><i class="icon-exclamation-sign"></i>JavaScriptを有効にしてください</marquee>

サイトの性質としては JavaScript 無効でも実現可能なはずなのでもう少し頑張って欲しい気はしました。

Re: matobaa さん

投稿2015/12/28 02:02

編集2015/12/28 02:06
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

matobaa

2015/12/28 23:02

> もう少し頑張って欲しい気はしました。 同意です! もう少し頑張ってほしいです。
guest

0

既存のブラウザ拡張機能を活用するか、自分でブックマークレットを作る、とか

投稿2015/09/09 12:56

tohshima

総合スコア374

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

matobaa

2015/09/09 14:09

「既存のブラウザ拡張機能を活用」とは? ご紹介いただけると助かります。 ブックマークレットでも無限スクロールとかLDrizeとかのイベントフックするような機能を拡張できるものでしょうか。サンプルがあると助かります。
matobaa

2015/09/10 02:57

とりあえずまあ、右下の「teratailについてご意見お聞かせください」に書いてみました。さてさて。
matobaa

2015/09/10 03:53

無限スクロールしたいけど、teratailでは「次のページ」なリンクがないのか……あるのかな。 http://d.hatena.ne.jp/swdyh/20070701/1183239979 にあるように、microformatを追加するだけでいけるかなーと思ったんですが、ちょっと難しそうです。 jkでフォーカス移動 BoxItemクラスのエレメントに xforkentry か ldrize-paragraph ていうクラスを追加すればいけそうなきがするー
tohshima

2015/09/10 12:37

FirefoxやGoogle Chromeなどでは、autopagerizeやAutopagerなどと呼ばれている拡張機能があって、一般的には複数ページに分かれているWeb記事を1ページにまとめて読むときに使われます。teratail用の定義ファイルを作成すれば、無限スクロールできるんじゃないかと。ブックマークレットの方は、時間をかけて、webブラウザの開発者モードでソースを眺めたら何とかなりそうな気がしています。でも、実装が変わってしまったら、使えなくなるでしょうね。
think49

2015/12/28 02:09

一般に Autopagerize は [次のページへ] の静的リンク先を XMLHttpRequest で読み込む事によって実現します。 siteinfo にも次のページのリンク先となるa要素を指定するわけですが、teratail では静的リンクが存在しない(JavaScriptでclickを検知する仕組み)の為、Autopagerize による拡張は不可能と思われます。
guest

0

自己解決

投稿2017/05/25 00:40

matobaa

総合スコア2493

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問