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

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

新規登録して質問してみよう
ただいま回答率
85.50%
データベース

データベースとは、データの集合体を指します。また、そのデータの集合体の共用を可能にするシステムの意味を含めます

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

785閲覧

JavaScriptでデータの処理を行いたい

silyauta

総合スコア12

データベース

データベースとは、データの集合体を指します。また、そのデータの集合体の共用を可能にするシステムの意味を含めます

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/01/08 08:00

内容

JavaScriptで実装したい内容があるのですが、良い方法が思い浮かばないので皆様のお力添えいただければと思います。

データベースと連携して、以下のデータをやりとりしています。
・comment (文字列型)
・scroll(整数型)
このscrollというデータはページのスクロール量です。
ページの読み込み時点で、上記のデータを全て配列に取得しています。
今回、JavaScriptで現在開いているページのスクロール量を取得し、データベースから取得したscrollの値と一致した時に対応したcommentを出力するという処理を行いたいと思っています。

#解決案
私が思いついた案は以下です。

1.Web Workersを使ってcomment1つだけをスクロール量の一致した場合に表示する処理を並列に行う。
2.データベースから取得したデータが格納された配列をスクロール量でソートし、昇順に値を取り出して処理する。

しかし、どちらも処理が冗長だと感じています。
何か効率の良い方法はありませんでしょうか?

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

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

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

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

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

m.ts10806

2019/01/08 08:02

実際にどちらかの案で実装はされたのでしょうか?
silyauta

2021/03/28 19:23

レスポンスが遅くなってしまい申し訳ございません。 miyabi-sunさんから頂いた回答を参考に、Firebaseにコメントとスクロール量を記録し、Chrome拡張機能から取得して表示する形で実装しました。
m.ts10806

2021/03/28 21:53

そうですね。さすがに2年は。
guest

回答2

0

ベストアンサー

根本的な問題ですが、スマホやパソコンは画面の縦横幅が全然違いますし、
利用出来るフォントも違うので改行するしないでスクロールしたピクセル数は同じ事になるはずが無いのですが……

あーわかった!
ニコニコ静画と同じ事をJS上で再現したいのね。

下記はその想定で考えて行きます。

1.Web Workersを使ってcomment1つだけをスクロール量の一致した場合に表示する処理を並列に行う。

これは却下
そもそもWeb WorkerはDOMを触る普通のJavaScriptの用途からかけ離れたものです。

一応調べたらWeb WorkerでDOMを強引に触るライブラリが見つかりましたが、
documentオブジェクトがないので相当つらそうです。
何かあれば自己責任で出来るのなら試して見れば良いですが、出来なければやり直しです。

Worker DOM - Web WorkerでDOM操作を実現

2.データベースから取得したデータが格納された配列をスクロール量でソートし、昇順に値を取り出して処理する。

やるとすればこれですかね。
冗長にならないよう、初期処理を済ませてしまえばどうとでもなるでしょう。

この辺を参考にしてっと
【jQuery】スクロール量に応じて発火するサンプルコード

JavaScript

1$(() => { 2 // ソートする必要があるならば、ここでソートすればいいし、HTML吐き出す時にソート済みのものを渡しても良い 3 let comments = [ 4 {comment: "test", scroll: 123}, 5 ]; 6 7 // スクロール時のイベント登録 8 $(window).scroll(() => { 9 if (comments.length === 0) return; 10 const scroll = $(window).scrollTop(); 11 12 const targets = []; 13 for (let comment of comments) { 14 if (comment.scroll > scroll) break; // ソート済み想定なのでこうすれば速度が出る 15 targets.push(comment) 16 } 17 if (targets.length === 0) return; 18 19 for (let comment of targets) { 20 // TODO:ここにコメントを画面上に表示するコードを書く 21 } 22 23 // 色々案はあるが、複数回shift実行するのは遅かったと思うので今回はsliceを活用 24 comments = comments.slice(targets.length); 25 }) 26})

未確認ですがざっとこんな感じになるでしょう。
細部多少変なところはあるかと思いますが、そんなに速度面でダメージになることはないと思います。

DOM操作に関してですが、
予めコメントをdisplay: hiddenleft: 100%等で隠しておき、クラス付与によるCSSアニメーションを活用すればパフォーマンスをあまり損ねないかと思います。

投稿2019/01/08 09:04

miyabi-sun

総合スコア21158

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

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

silyauta

2019/01/08 10:33

はい、まさしくニコニコ系のコメントをJSで行う方法を考えておりました。(アイデアがまんまパクリなのでどうかと思いましたが、最初から名前を出せばイメージが伝わりやすかったですね。申し訳ありません。) 添付していただいたサイトやソースを参考に、開発を進めたいと思います。 実行環境の違いなど、課題点が多いことも学べましたのでもう一度基礎部分から学習いたします。。。 ご回答頂きありがとうございました。
guest

0

全体構成が質問からはわかりませんが、私のイメージとして

「一定量スクロールしたら、次のコメントを表示する」みたいな簡単な処理では、ダメですか?(もちろん文字数や各コメントのheightは考慮して)

投稿2019/01/08 08:45

yamato_user

総合スコア2321

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問