タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
無限スクロールは考慮することが多い
毎年無限スクロールの実装をしているのだが正直なところ実装したくないので依頼されたときの反論材料として実装したくない理由を言語化しておこうと思う。 無限スクロールとは 無限スクロールが何を指すかを知らない人のために解説すると、ページにコンテンツを足す方式でページネーションする UI を指している。例えば Twitter のように下にどんどんコンテンツが伸びていく UI が良い例だろう。そのような UI を無限スクロールと呼ぶことが正式なのかは知らないが、このような体験の実現を支援するライブラリに infinite-scroll というものがあり、少しは普及している呼び方なのだと思い無限スクロールという言葉を使う。一方で WEB フロントエンド文脈で無限スクロールと言うと複雑 GUI やドローイングツール実装における "無限平面" のようなニュアンスもあるが、今は無限平面のことを指しているわけ
アメリカでSNSの動画自動再生、無限スクロールを禁止する動き2019.08.05 14:0011,654 Melanie Ehrenkranz - Gizmodo US ［原文］ （ そうこ ） 禁止したくなる気持ちもわかってしまうというね。 テクノロジーは暮らしを便利にするだけでなく害にもなる。現代人はスマホに依存している。ということで、近年の流行り（？）のデジタルヘルス。スマートフォンには使用状況のレポート機能や、目を休めるように通知をいれるなどの機能が増えています。そんな中、そんなもんじゃデジタルヘルスは生ぬるい、法で支配すべきだという声がアメリカであがっています。 心理学つかっちゃダメ7月末にJosh Hawley上院議員が打ち出したのは、｢Social Media Addiction Reduction Technology Act（ソーシャルメディア中毒軽減テクノロジ法案）｣、
はじめに こんにちは、最近SWRを使いこなすのが楽しくなってきた今日この頃の、からまげです。 SWRでページング(無限スクロール)する際、useSWRInfiniteを使うと驚くほどシンプルにコードが書けることがわかり、共有したくてこの記事を書いています。 この記事が、誰かのお役に立てれば幸いです。 わたしは、「Focus Cafe」を個人開発しています。 「みんなでポモドーロテクニックを使ってもくもく集中する」 Webサービスです。 Focus Cafeでは、SWRを使って、データフェッチや状態管理を行っています。 SWRは、React Hooks用のデータフェッチライブラリです。 ページング(無限スクロール)とは ページングとは、データの一覧をページ単位でオフセットとリミットを扱うAPIからデータ取得するような処理のことです。 ページング処理は、状態管理もあいまって複雑になりがちで、エ
みなさんこんにちは。筆者は最近Recoilを使ってロジックを記述するのにハマっています。先日はそのようなテーマでトークをしましたので、よければご覧ください。 要点は、 Recoilのselectorとかも活用しまくってロジックをどんどんRecoilに載せようぜ！！ ということです。ただ、前記のイベントを観ていただいた方には分かるように、Recoilを活用していてもほとんどatomしか使っていないという場合もあり、Recoilの普及度とselectorの普及度には差があるようです。 そこで、この記事ではRecoil selectorの活用パターンを紹介します。今回は無限スクロールの実装です。 ここで想定している無限スクロールとは、次のようなものです。 サーバーから取得したデータがリストで表示されている。 ユーザーがスクロールしてリストの下に到達したら、サーバーから追加のデータを読み込んでリス
BFCacheを利用してNext.jsで実装した無限スクロールのUX改善をした話 | PR TIMES 開発者ブログ
Next.jsに移行した初期の実装 Next.jsに移行した初期の実装ではgetServerSidePropsで検索結果の1ページ目を取得し、そのデータをTanstack Queryにhydrateするといった形で実装しました（この実装方法自体はUX改善後も変わりません）。 import { dehydrate, type DehydratedState, QueryClient, Hydrate } from '@tanstack/react-query'; export const getServerSideProps = async ({req, res, query}) => { const {search_word: searchWord} = query; const queryClient = new QueryClient(); const searchResultResp
検索エンジンとの相性を考慮した無限スクロールのベストプラクティス | Google 検索セントラル ブログ | Google for Developers
フィードバックを送信 検索エンジンとの相性を考慮した無限スクロールのベストプラクティス コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 ご自身のサイトのニュース フィードやピンボードで、ユーザーの利便性を考えて 無限スクロール （英語）を使用している方もいらっしゃるでしょう。しかし、Googlebot に対してとなると話が変わってきます。無限スクロールでは、クローラーがユーザーの行動（スクロールやボタンを押してさらにアイテムを読み込むなど）を常にエミュレートできるとは限らないため、フィードやギャラリー内のすべてのアイテムにアクセスできないことがあります。クローラーがアクセスできないコンテンツは、検索結果に表示されることもないでしょう。 無限スクロール ページからリンクされている個別のアイテムを検索エンジンがクロールできるようにするには、無限スクロールを分割
はじめに LINEやSlackのような 上方向への無限スクロール が必要なWebアプリを作っていて、なぜか iOSのSafariだけうまく動作しない 問題に悩まされたので、原因とどう解決したかメモしておきます。 Vue.jsを使っていますがVue.js以外でも使えるテクニックです。 同じ事象で悩んでいる方の参考になれば幸いです。 上方向の無限スクロールでやっていること そもそも無限スクロールとは コンテンツの端の方までスクロールしたら次のページを読み込みコンテンツに追加する という処理を繰り返すことで実現します。 下方向への無限スクロールの場合はこれだけです。 これが、上方向の無限スクロールの場合、次のページを追加する位置がコンテンツの先頭になるため、追加する前のスクロール位置に戻す必要があります。 イメージで説明すると・・・ １ページ目を上端までスクロールする。 上端近くなったら次のペー
無限スクロールは、インタラクションコストを最小限に抑え、ユーザーエンゲージメントを高めるが、すべてのWebサイトに適しているわけではない。ページネーションや「さらに読み込む」ボタンのほうが良い解決策になることもある。 Infinite Scrolling: When to Use It, When to Avoid It by Tim Neusesser on September 4, 2022 日本語版2023年1月24日公開 無限スクロールは、商品一覧ページに使われるデザイン手法の1つで、ユーザーがスクロールダウンしていくと、コンテンツが次々に読み込まれるというものだ。これを利用すれば、ページネーション（訳注：コンテンツを複数のページに分割すること）の必要がなくなる。 Adidas.com：Adidasの商品一覧ページでは、ページネーションを使って商品を表示している。 Nike.com
グーグル、モバイル検索結果の無限スクロールを可能に
Googleは米国時間10月14日、モバイルの検索結果を無限にスクロールできるようにすると発表した。検索結果ページの一番下に到達すると、タップして次のページに進まなくても、さらなる検索結果が自動的に読み込まれる。 Googleは、具体的な回答ではなくインスピレーションを求めている場合など、答えが1つではない質問に対して便利な機能だとしている。 「最初の数件の検索結果で、求めていた回答が得られる場合が多いが、さらに検索を続けたい場合もある」と、Googleの製品マネージャーを務めるNiru Anand氏は発表の中で述べた。「今回のアップデートにより、それがシームレスにできるようになる。『もっと見る』ボタンをクリックする必要なく、多くのさまざまな結果を閲覧できる」（同氏） この機能は、米国で英語を使って検索するほとんどのユーザーに、14日から段階的に提供されるという。
ニューズラインエマージング・テクノロジーの最新情報をお届け。 Jaelynn Castillo | Unsplash A new bill would ban making social media too addictive 巨大テック企業に対して特に批判的な米国のジョシュ・ホーリー上院議員（共和党）が、ソーシャルメディア企業による無限スクロールや映像の自動再生、達成バッジなどのデザイン機能の使用を制限する新法案を提出した。提出された「ソーシャルメディア依存軽減テクノロジー法（SMART）」では、ユーザーがスクリーンに貼り付いている時間を制限する機能の構築をソーシャルメディア企業に義務付け、これまでとは真逆の取り組みを強いることになる。 法案はフェイスブック、インスタグラム、ユーチューブに直接言及しているが、ユーザーが第三者のコンテンツ（音楽のプレイリストなどは除く）とやり取りをするあら
ここしばらく、Selenium・puppeteer・Playwrightの使い方をまとめていました。 まとめが長くなってきたので、ある程度の説明や手順が必要な操作は別記事にまとめようと思います。 ここでは、Selenium・puppeteer・Playwrightそれぞれで、無限スクロールする方法をまとめました。 スクロール 無限スクロールの手順に入る前に、まずは基本となるスクロールをする方法です。 JavaScriptのElement.scrollTopを使って、ウィンドウのdomのスクロール位置を移動させる方法もあるのですが、ここではElement.scrollIntoView()を使って、ウィンドウ内の一番下のdomが見えるようにスクロールさせる方法を使います。 参考として最後にElement.scrollTopを使った方法も記載しました。 sample html ウィンドウの中に、
ReactでWebページを作成していると無限スクロールを実装する機会があると思います。スクロールしたら非同期でデータを取得して、無限にスクロールできる機能のことです。YouTubeにも実装されているので見たことがあると思います。 今回はこの無限スクロールをReactで実装するライブラリのreact-infinite-scrollerを紹介します。 react-infinite-scrollerのインストール まずはreact-infinite-scrollerのインストールを行います。以下のどちらかのコマンドを実行してインストールします。 npm install react-infinite-scroller --save yarn add react-infinite-scroller react-infinite-scrollerを使ってみる インストールが完了したら、実際に使ってみま
こんにちは！ 今回は無限スクロールの王道JSプラグイン、「Infinite Scroll」を WordPressの記事一覧で設置します。 先日実際に設置した際、読み込む要素のサイズやらをjQueryで制御していたため、 「もっと見る」ボタンで表示された要素は崩れてしまっていました。 解決策としては、要素の処理を読み込み後に行うと綺麗に表示されます。 当たり前ですが、本家サイトが一番丁寧に解説しているので一読すると良いですよ。 ちなみにInfinite ScrollはAjax（非同期通信）で要素を読み込みます。 Ajaxのことを知りたい方は、下記の記事がめちゃめちゃ分かりやすく解説してくれています。 Ajaxとは｜「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 それではやっていきましょう。 HTML <div class="postWrap"> <?php if(hav
スクロール可能にする そもそも、HTML/CSS で一定領域をスクロール可能にするどうやるのってところから分かってなかった。 領域(height, width) を指定して、overflow: 'auto' の指定でスクロール可能になるっぽい。 const InfiniteScrollPage = () => { return ( <Box bg={'blue.500'} py={32}> <Center> <Box bg={'white'} w={80} overflow={'auto'} h={'300px'}> {indexes.map(i => ( <Center key={i}> <Text>index of {i}</Text> </Center> ))} </Box> </Center> </Box> ) }
![[Scrap] React で無限スクロールする方法を調べる](https://cdn-ak-scissors.b.st-hatena.com/image/square/873221aaaf8195a33c65bf529b1690d9845907b0/height=288;version=1;width=512/https%3A%2F%2Flh3.googleusercontent.com%2Fa-%2FAOh14Ghh1fHgBkk5kCsvsgPa-tk5d0m2NM6dpC3pAYwJ%3Ds250-c)
ページネーション、無限スクロールや「もっと見る」ボタン | Google 検索セントラル | ドキュメント | Google for Developers
フィードバックを送信 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 ページ分け、段階的ページ読み込み、それらの Google 検索に対する影響 検索結果の一部のみを表示してページ パフォーマンスを向上させることで、サイトのユーザー エクスペリエンスを改善できます（ページ エクスペリエンスは Google 検索のランキング シグナルです）。しかし、その場合は Google のクローラがサイト コンテンツをすべて見つけられるように対策を講じる必要があります。 たとえば、e コマースサイトの検索ボックスを使うユーザーに商品の一部を表示するとします。このとき、一致する商品が多すぎて、1 つのウェブページでは表示できない場合や、ウェブページの取得に時間がかかりすぎる場合があります。 e コマースサイトでは、検索結果のほか、以下のコンテンツに関しても結果の一部を読み
Server Actions を使用した無限スクロール
はじめに 🚩 このアイデアは以下の YouTube のライブ配信を視聴中、 その中で Server Actions を使用して JSX を返すことが可能 という情報を知り（55分辺り)、この情報に触発され、Server Actions を活用して無限スクロールの実装ができないか、試してみることにしました。（もう三ヶ月も前なんですね...） 本記事で説明する実装に関する動作は以下の X の埋め込みからご覧いただけます。 実装例 📝 JsonPlaceholder でのデータ呼び出し まずデータの取得が必要となるので、この例では、公開されている fake API の JsonPlaceholder を使用してデータを取得します。 以下は、JsonPlaceholderから投稿データを取得するための関数の例です。 const PAGE_SIZE = 10; type PostType = {
この記事はFlutter #1 Advent Calendar 2020の4日目の記事です。 遅刻しました、すみません！ サンプルコードの用意が間に合わなかったのです… まずはGifを見てください。 リストのスクロールが下端に着くとAPI的には次のページが読み込まれる、利用者にページネーションを気にさせないページネーションの方法です。 これをFlutterのListViewで実現しようとすると、実はいくつか方法があります。 私が今まで見てきた実装は主に3パターンに分類できるので、この記事ではその3パターンをご紹介します。 方法によってメリット/デメリットがあるため、用途に合わせて適切な方法を選ぶと良いと思います。 全体的な設計と想定環境 StateNotifier + Providerによる状態管理と状態通知を使用します。 状態を保持する値クラスの生成にはfreezedを使用しました。 ア
Android Jetpack 初級 ( Paging library + LiveData + Retrofitで、簡単無限スクロール) - Qiita
Android Jetpack 初級 ( Paging library + LiveData + Retrofitで、簡単無限スクロール)AndroidKotlinAndroidStudioMVVM Intro ※Paging3についてはこちら (2020/07/16) 今回は、Android Jetpackの一部、Architecture Components Paging library を使っていきたいと思います。(長い) LiveDataを取り扱ったことのある人にとってはお茶の子さいさいだと思います。むしろ意外とさいさいで可能性を感じたので、記事にしました。 初歩的なAACの理念や、DataBinding、LiveDataに関しては、以前の記事をご覧いただけますと幸いです。 ↓ Android Architecture Components 初級 （ MVVM + LiveData
WordPressで無限スクロールを実装する方法です！無限スクロールの実装を理解できているとカスタマイズもしやく、かつWordPressの動きもちょっとだけ深く理解できるようになります。 前提として、WP_QueryなどWordPress特有のループ処理方法が当たり前のように出てきますが、その辺りの説明はしないのでWordPressの基本は理解している前提で記事が書かれていることをご理解いただけますと幸いです…。 一応、サブループについては以下で解説しています。 https://haniwaman.com/loop/ 動きのサンプル例 実際の動きはこんな感じです。スクロールが最後まで行くと、ローディングが開始して記事を取得して表示するという動きになっています。 自作できるようになっていると、ローディング時の動きなど柔軟に対応できるようになるはずです。 WordPressで無限スクロールを実
今回は Flutter で非同期通信に対応した ListView の無限スクロール処理を実装します。 良くあるページング可能な外部 API を利用した ListView を実装するユースケースですね。 今回は実際には API は実行せず、Future.delayed で 数秒処理を遅らせて非同期通信を再現しています。 状態管理は Riverpod で行っています。 今回は非同期部分と無限スクロール部分のみ掲載しますので、全てのソースコードは Github を参照ください。 環境macOS Big Sur 11.2.1Android Studio 4.1.2Flutter 2.0.0Dart 2.12.0package を install するpubspec.yaml に Riverpod package を追記します。 今回は Riverpod に hooks_riverpod 、その他
無限スクロールと検索機能を持つセレクトボックスを作成していきます。 他の UI コンポーネントにも応用できると思います。 完成イメージ はじめに GitHub と完成コード 完成コード(UI 側) 'use client'; import { Category } from '@prisma/client'; import { AlertTriangle, Check, ChevronsUpDown, Loader2 } from 'lucide-react'; import React, { Suspense, memo } from 'react'; import { useSearchCategories } from '@/components/category-selecter/use-search-categories'; import { Button } from '@/c
シームレスな背景画像を使って無限スクロールする背景を作成するCSSアニメーションのサンプルコードです。 背景の無限スクロールCSSだけで横スクロールアクションゲームのように背景を無限スクロールさせるアニメーションのサンプルコードです。 See the Pen CSS | Soccer ball by yochans (@yochans) on CodePen. HTMLは背景画像を配置するコンテ用のdivタグを作成しています。 <div class="container"></div>サンプルに使う背景画像には以下のものを作成しました。 sample-bg.png (1333×889) 背景画像はCSSのbackground-imageのurl()で指定、今回は横スクロールですのでrepeat-xも指定しています。 background-sizeでサイズを調整する際、シームレスな画像ですが
そんな悩みにお答えするのが本記事です。 本記事ではリストビューが下端に行った時に自動でデータを読み取り、表示する、 無限スクロールの実装方法について解説します。 本記事を読めば、以下のgifのような無限スクロールが実装可能となります。 無限スクロールの実装方法は色々とありますが、 今回はScrollControllerを使った方法を解説します。 ぜひ読んでみてください！ 準備 まずは無限スクロールできないリストビューのサンプルコードを紹介します。 このコードを改造して無限スクロールができるようにします。 サンプルコードの後に、このコードの解説を行います。 サンプルコード import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWid
結論 作ったもの "No Infinite Scroll" インストールをすると無限スクロールを検知するたびに、 「本当に初めやろうとしてたことやってるのか？考え直せ！」 という趣旨の叱咤激励で戒めてくれます。 無限スクロール界隈の大御所、Twitterとかを開くと警告が出まくり使う気がなくなるというメリットがあります。 エンジニア,ネットサーフィン多い問題 Googleや公式ドキュメントとStackoverflowを往復する日々。 個人的には、最近バックエンド系のDocker,Ansible,Linuxの勉強をしていると、エラーの対処のために一日中こうしたサイトを往復することが多いです。 なんでついでにTwitterとか見ちゃう？ 上のような問題の中、関係ないTwitterとかニュースサイトとかついついチェックしたくなる。 なんで？と思ってよくよく考えたら、 この手のサイトは無限にコンテ
を見ました。これめっちゃ面白い。再帰selectorかっこいい、ほれました。Loadableの使い方も素敵。 Jotai版を作ってみたくなりますよね、はい。作りました。 ほとんどコードの中身を理解せずに移植して、あとからコード読みました。ちなみに、移植で大変だったのは、型の付け方が微妙に違うことです。それ以外はほぼ単純な変換。ここまで互換性があったとは。 出来上がったもの コード Recoil版からそのまま使えるものはimportしてます。 import { Suspense, useEffect, useRef } from "react"; import { Atom, atom, useAtomValue, useSetAtom } from "jotai"; import { atomFamily, loadable } from "jotai/utils"; import { Q
「Vue.js」で無限スクロールする方法とは？ 「無限スクロール（Infinite Scroll）」は、ページを切り替えることなくページネーションするテクニックです。 ページの一番下までスクロールすると、表示するコンテンツがなくなるまで、続きを自動的に読み込んでくれます。 スクロール操作が基本のモバイル端末で、「最もスマートなページネーション」とも言われています。 今回は、人気の「Vue.js」で無限スクロールを実装する方法と、無限スクロールに必要な SEO対策について解説していきます。 無限スクロールの実装パターンと SEO 対策無限スクロールには、2つの実装パターンがあります。 同一URLで、ページ内にコンテンツを読み込ませる方法読み込むコンテンツ単位にURLを割り当ててページを分割する方法それぞれの実装パターンを、SEOの観点で見ると次のような特徴があります。 1.同一URLで、ペー
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
アメリカでSNSの動画自動再生、無限スクロールを禁止する動き
「満足度が高まるわけではなかった」Google、検索結果を自動的に読み込む“無限スクロール”廃止へ【やじうまWatch】
useSWRInfiniteを使うとページング(無限スクロール)の処理がシンプルに書けて気持ちいい！
Recoil selector活用パターン 無限スクロール編
iOSのSafariで上方向の無限スクロールの問題を解決する - Qiita
無限スクロール：利用すべきとき、避けるべきとき
SNS動画の自動再生、無限スクロールは禁止を＝米議会で新法案
Selenium・puppeteer・Playwrightで無限スクロールする - 新しいことにはウェルカム
Reactで無限スクロールを実装する方法【react-infinite-scroller】
【WordPress】「もっと見る」ボタンで読み込む無限スクロールを設置するよ！ - まめなり
[Scrap] React で無限スクロールする方法を調べる
Flutterで無限スクロールする手法3選 - Qiita
WordPressで無限スクロールで記事を読み込む方法！【プラグインなし編】 | HPcode（えいちぴーこーど）
Flutterで非同期通信に対応したListViewの無限スクロールを実装する | ZUMA Lab
【React】無限スクロール + 検索機能付きSelect Boxを作ろう
無限スクロールする背景のCSSアニメーションサンプル | 1 NOTES
【Flutter】 無限スクロール の実装方法 - 週刊Flutter大学
無限スクロール中毒防止のChrome拡張機能を作った話 - Qiita
「Recoil selector活用パターン 無限スクロール編」のJotai版
Vue.jsでSEO対策した無限スクロール（Infinite Scroll）を実現する – 株式会社ライトコード
3newskininaru.com
dic.nicovideo.jp
www.makeyourhappiness.com
note.com/chiaki286
nuco.co.jp
note.com/3_ize