タグ 無限スクロール
新着順 10 users 50 users 100 users 500 users 1000 users「満足度が高まるわけではなかった」Google、検索結果を自動的に読み込む“無限スクロール”廃止へ【やじうまWatch】
米公衆衛生局長官、SNSに「青少年の健康を損なう可能性」警告ラベルの表示を提唱
マーシー氏はまた、SNSを提供する企業に対し、健康への影響に関する社内データの共有、独立した安全性監査、プッシュ通知や自動再生、無限スクロールなどの機能の制限を求めた。 同氏はコラムで、SNSに1日3時間以上費やす10代の若者は精神衛生上の問題に直面するリスクが非常に高いことや、10代の若者の46%がSNSのせい... 続きを読む
無限スクロールは考慮することが多い
毎年無限スクロールの実装をしているのだが正直なところ実装したくないので依頼されたときの反論材料として実装したくない理由を言語化しておこうと思う。 無限スクロールとは 無限スクロールが何を指すかを知らない人のために解説すると、ページにコンテンツを足す方式でページネーションする UI を指している。例えば ... 続きを読む
useSWRInfiniteを使うとページング(無限スクロール)の処理がシンプルに書けて気持ちいい!
はじめに こんにちは、最近SWRを使いこなすのが楽しくなってきた今日この頃の、からまげです。 SWRでページング(無限スクロール)する際、useSWRInfiniteを使うと驚くほどシンプルにコードが書けることがわかり、共有したくてこの記事を書いています。 この記事が、誰かのお役に立てれば幸いです。 わたしは、「Focus Caf... 続きを読む
アメリカでSNSの動画自動再生、無限スクロールを禁止する動き | ギズモード・ジャパン
アメリカでSNSの動画自動再生、無限スクロールを禁止する動き2019.08.05 14:00 Melanie Ehrenkranz - Gizmodo US [原文] ( そうこ ) Image: Getty Images 禁止したくなる気持ちもわかってしまうというね。 テクノロジーは暮らしを便利にするだけでなく害にもなる。現代人はスマホに依存している。ということで、近年... 続きを読む
遅延読み込み、無限スクロールなど、要素と境界の交差を非同期で検出する1Kbの超軽量スクリプト -Bounds.js | コリス
画像の遅延読み込みや無限スクロールを実装する際、ページ上に境界を定義し、その境界に要素が入ったかどうか判定して実行します。要素と境界の交差を非同期に検出し、パフォーマンスを改善する1Kbの軽量スクリプトを紹介します。 要素が境界に1px交差した、全部が入ったなどを正確に検出。他のJavaScriptへの依存はなく... 続きを読む
Googleの検索が無限スクロールに対応したので、色々実験してみた - 情報管理LOG
情報管理LOGの @yoshinon です。 先日、GoogleからGoogle検索のモバイル版が、無限スクロールに対応というニュースが流れました。今まで「次へ」を押して、続きを見るということに慣れすぎていましたが、これでモバイルでの検索が、かなり便利になりそうです。 【 Googleの検索が無限スクロールに対応したので、色々実験してみた 】 1.Googleの検索が無限スクロールに... 続きを読む
Google、モバイル検索のページネーションを廃止。「もっと見る」による無限スクロールへ変更 | 海外SEO情報ブログ
[レベル: 中級] 無限スクロールのモバイル検索結果を Google は導入しました。 「次へ」でページネーションして2ページ目、3ページ目に移動するのではなく、「もっと見る」で続きの結果が出現します。 正式導入 「もっと見る」による無限スクロールのモバイル検索結果は 昨年12月にテスト していたことが確認されています。 しかし今回はテストではなく、正式導入になります。 Google 検索の Tw... 続きを読む
Googleが推奨する、SEOに最適な無限スクロールをjScrollで実装する
Googleが2014年末に発表した、SEOに最適な無限スクロールをjScrollで実装する方法を解説する。今や少し下火になってきている無限スクロール、昔はホットだった。Facebookが使ってるんだし俺らも使おうぜ!ってな感じで、その実装方法が乱れ飛んだのも今は昔。 で、この技術、SEOに最適な実装方法というのがある。Googleが2014年末に投稿したブログに従えば、ちょっと気をつけて実装しな... 続きを読む
[JS]これなら簡単で便利!要素がビューポートに表示されているかを判定できる -Intersection Observer | コリス
スクロールした際にヘルプや広告を表示したり、無限スクロールでコンテンツを読み込ませたり、画像の遅延ロードなど、要素がビューポートに表示されているかをトリガーにするのには、なかなか面倒なJavaScriptが必要でした。 例えば、スクロールやサイズ変更のイベントを取得し、getBoundingClientRect()などのDOM APIでビューポートからの相対位置を手動で計算します。 この今までの方... 続きを読む
無限スクロールの課題とは!縦長サイトのデザイン手法 | TechAcademyマガジン
TechAcademyマガジンはオンラインのプログラミングスクール TechAcademy [テックアカデミー] が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。 本稿は、Smashing magazineの ブログ記事 を許可を得て日本語翻訳し掲載した記事になります。 本記事は、UXデザイナーのNick Babich氏によって投稿されました... 続きを読む
長いスクロールページでユーザーを引きつけるための5つの方法 | UX MILK
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事は こちら をご参照ください。 ファーストビューだけで情報を伝える時代は終わりました。最近では長いスクロールや無限スクロールを用いるサイトが増えてきています。ユーザーが簡単にコンテンツをスクロールができ、スクロールすると自然に情報が表示されるサイトは以下のような利益をもたらします。 ナビゲーション... 続きを読む
Googleが推奨する、SEOに最適な無限スクロールをjScrollで実装する – TOACH
今や少し下火になってきている無限スクロール、昔はホットだった。Facebookが使ってるんだし俺らも使おうぜ!ってな感じで、その実装方法が乱れ飛んだのも今は昔。 で、この技術、SEOに最適な実装方法というのがある。Googleが2014年末に投稿したブログに従えば、ちょっと気をつけて実装しないといけないってことが分かる。 今回はその方法を解説する。まずはjScrollというjQueryプラグインで... 続きを読む
無限スクロール向け雑なローディング画像 - Weblog - Hail2u.net
無限スクロールはちょくちょく実装することはあるが、追加するコンテンツの読み込みや挿入はともかく、ローディング画像の処理で悩むことがある。その表示の切り替えには実装と処理のどちらにおいてもそこそこコストがかかるからだ。かなり前に色々考えるのが面倒になり、常に表示しておくという雑な手をよく使うようになった。 View Demo: Easy Loading Marker for Infinite Scr... 続きを読む
Flipboardのウェブ版は進歩なのか、それとも退化なのか?
Ads: タブレット上で人気のニュース閲覧用アプリ、Flipboardにウェブ版が登場しました。 もともとタブレット上で「指でめくってニュースを閲覧」という直感的な動作でユーザーが爆発したFlipboardが、次にiPhone 版、その次にウェブ版を発表するのは順序が普通と逆でいえます。 しかもウェブ版にいたっては「めくる」動作ではなくて無限スクロールで記事が表示されていきます。フリップはもういい... 続きを読む
【要チェック】無限スクロールで確認したい10個のメリット、デメリットまとめ - Photoshop VIP
シングルページを利用したウェブサイトが大きなデザイントレンドになっています。特に豊富なコンテンツが用意されている場合が多く、ありがたいことに無限スクロールテクニックを利用することで、デザイナーはコンテンツを無限に並べつづけることができます。 このテクニックは一部のサイトやコンテンツ種類にも最適ですが、他のウェブサイトでは扱いにくく、悩みのタネになるのも事実です。新しいデザインテクニックだからとすぐ... 続きを読む
Tumblrの省メモリーな無限スクロール - 記録
無限スクロールまたはauto pagingと呼ばれるUIには、読み終えたコンテンツがどんどん画面の上のほうに溜まっていってメモリーを食い潰すという問題がある。 なかでもTumblrは画像などのコンテンツが多いため、ダッシュボードダイバーたちは無限Tumblrユーザースクリプトなどのユーザースクリプトをインストールして、読み終えたコンテンツを定期的にページ上から自動削除するといった対策を講じていた。... 続きを読む
無限スクロールの問題点と解決方法 - 記録
無限スクロールとは、ページの下部までスクロールすると自動的に新しい要素が追加される機能のこと。TwitterなどのSNSのタイムラインを初めとして様々なウェブサイトで使われているが、いくつかの問題点も指摘されている。 無限スクロールのよく知られた問題点と、それに対する解決方法をまとめた。 permalinkが取れない 同じページに次々と新しい内容が継ぎ足されていくので、いま自分が見ているページのU... 続きを読む
【ギャラリーサイトで重複しない画像をランダム表示させる時に使った】WordPressで投稿を取得する際に「ORDER BY」節を付ける | 今村だけがよくわかるブログ
WordPressのフィルターフック「posts_orderby」を使うと、投稿を取得するSQLクエリに「ORDER BY」節を加えることができます。私の場合は、ギャラリーサイト制作の時に使いました。 無限スクロールができて、スクロールするたびにどんどん写真が表示される、みたいなギャラリーサイト。その際「重複しないランダムな写真を次々に表示」させるために必要でした。イメージですと、今制作中の「大英... 続きを読む
[JS]これスゴイよ!スクロール時にさまざまな楽しいエフェクトを与えるスクリプト -ScrollMagic | コリス
スクロールに合わせて、さまざまなアニメーションをシンクロさせるjQueryのプラグインを紹介します。 Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、div要素の内側のスクロール... 続きを読む
世界で最も美しくSEOに適した無限スクロールを実装するサイト、QUARTZ (qz.com) | 海外SEO情報ブログ
[対象: 上級]この記事では、非常に華麗な無限スクロールを実装しているサイトを紹介します。美しく、見やすい、SEOも考慮できた QUARTZ の無限スクロールそのサイトは、ニュースメディアサイトの QUARTZ です。「百聞は一見にしかず」で、実際に QUARTZ に訪問して見てください。注目してほしいのはブラウザに表示されるURLです。無限スクロールで下がっていくと、今あなたが見ている記事に対応... 続きを読む
Google ウェブマスター向け公式ブログ: 検索エンジンとの相性を考慮した無限スクロールのベストプラクティス
検索エンジンとの相性を考慮した無限スクロールのベストプラクティス 2014年2月21日金曜日 | 17:46 ご自身のサイトのニュース フィードやピンボードで、ユーザーの利便性を考えて無限スクロール(英語)を使用している方もいらっしゃるでしょう。しかし、Googlebot に対してとなると話が変わってきます。無限スクロールでは、クローラーがユーザーの行動(スクロールやボタンを押してさらにアイテムを... 続きを読む
「SEO的に優れた無限スクロールの実装方法」Googleからのアドバイス::SEM R (#SEMR)
「SEO的に優れた無限スクロールの実装方法」Googleからのアドバイス Googleが検索エンジンに配慮した無限スクロールの導入方法を公式ブログでアドバイス。クローリングできるようページ分割したものを用意するのが原則。プログレッシブ・エンハンスメントを前提に設計しよう。 2014年02月14日 02:16 | Google 2010-2014, SEO(検索エンジン最適化) | TrackBac... 続きを読む
ASCII.jp:こうめの“これから使える”jQueryプラグイン
2013年08月23日 11時00分 第1回 Facebook風の無限スクロールが作れるinfinite scroll ページ下部まで移動すると、次のページを自動的に読み込んで表示するjQueryプラグイン「infinite scroll」。ブログ記事や、ECサイトの商品ページ、ギャラリーサイトなどで効果的です。 続きを読む
ASCII.jp:Facebook風の無限スクロールが作れるinfinite scroll|こうめの“これから使える”jQueryプラグイン
圧倒的な人気を誇るJavaScriptのライブラリー「jQuery」。サイトに効果をあたえるプラグインが多数あることが魅力ですが、そのプラグインを探すことがWeb制作者の手間になっています。本連載では、「こうめ」さんこと大竹孔明さんがおすすめのプラグインと実装方法、実装例を紹介します。(編集部) 今回紹介するプラグイン infinite scroll 「infinite scroll」は、スクロー... 続きを読む