タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
今回はバックエンドAPIでページネーションをどうやるかについての話なので、よくある無限スクロールUIのようなフロントエンド側の実装に関する話はしない。あくまでもAPI、もっと言えばRESTfulなAPIのリクエスト・レスポンスにおけるページネーションの話。 本気で深く考えるというよりざっくり検討したときの話です。 はじめに REST APIを実装するにあたってリスト系のAPIを提供する場合に必須といっても過言ではないのがページネーション。大量のリソースをレスポンスする場合にそれらを一気に返してしまうことは応答速度、転送量、クライアントサイドでの扱いづらさなどなどに繋がるので必須と言える。 最近、新たなAPIを開発するにあたってページネーションをする必要があったこともあり、今回はこのページネーションをどうやって提供するか整理して改めて検討してみた。 前提 TypeScript Nest.js
無限ローディングや「さらに表示」ボタンを採用することで、商品の読み込み時にスムーズなインタラクションを提供することができる。 Alternatives to Pagination on Product-Listing Pages by Kate Moran on March 6, 2022 日本語版2022年8月4日公開 最近、従来のページネーションコントロールをやめて、インタラクションコストを少し下げることのできるデザインパターンを選択するECサイトが多くなってきた。これらのパターンを採用したほうがいいのだろうか。それは、提供している商品の数による。 従来からのページネーションでは、商品の一覧を複数のページに分割し、ページごとに一定の数の商品を配置していく。そのため、さらに商品を見るには、画面の上部または下部にある「次へ」ボタンをクリックかタップして、次のページに移動する必要がある。ペー
Jetpack ComposeとGraphQLによるServer Driven UI/jetpackcompose-grahpql-serverdrivernui
本記事ではNext.js(SSG)でページネーションを実装していきます。以前に書いたmicroCMS + Next.jsでJamstackブログを作ってみようの拡張版になります。本記事はこのチュートリアルを終えてる前提で話を進めていきます。 今回の作成イメージはmicroCMSブログのコンテンツ一覧の下部にあるページネーションです。 前提下記のバージョンで開発を行っています。バージョンの差異によって若干機能が異なる可能性があります。 Next 13.1.1react 18.2.0react-dom 18.2.0 コンポーネントの作成はじめに、ページネーションを作成するためのベースとなるコンポーネントを作成します。components/Pagination.jsを作成してください。 こちらはコードの全体像です。 //components/Pagination.js import Link f
[レベル: 上級] ページ分割している構成で、すべてのページを 1 ページ目に正規化することができます。 Google の推奨は自己参照の rel=”canonical” EC サイトのベストプラクティスを解説するドキュメントでページ分割について Google は次のように指示しています。 ページ分けされたページ列の最初のページを正規ページとして使用しないでください。代わりに、固有の正規 URL を各ページに付与してください。 2 ページ目、3 ページ目、4 ページ目……を 1 ページ目に正規化することを Google は勧めていません。 それぞれのページには、自分自身の URL を指定した自己参照の rel="canonical" を設置するように推奨しています。 こうすることで、ページ分割したすべてのページをインデックス対象にできます。 ユニークなコンテンツが各ページに十分にあれば、2
動機 ページネーションはページングと呼ぶこともありますが、 ページネーションでググるとoffsetを使った例(便宜上オフセット法と呼びます)がよくでてきます。 でも、これ遅いです。どれだけ遅いかはデータベース毎に調べたたのでこちらを参照(で、オフセット法に比べてシーク法のページネーションはどれだけ早いの？RDB毎に。)。 で、これを解決する方法にシーク法(後述)がありまして、かなり高速なのでお薦めです。 が、シーク法のsqlはちょっと複雑なので(特にorder by句に3項目以上の項目があり、 且つascやdescが組み合わさった場合)、後で見返すために覚書として。 シーク法の参考URL Faster SQL Pagination with Keysets, Continued Posted on November 18, 2013 USE THE INDEX,LUKE! 次ページの取
WordPressでページネーションを自作する方法 WordPressのオリジナルテーマ制作において、投稿の一覧ページにページネーション（ページャー）を設置する場面は多いと思います。 ページネーション（ページャー）のイメージ ページネーションはプラグインで実装する事もできますが、PHPコード扱うことの多いオリジナルテーマ制作では、テーマ内で一括して管理ができるPHPコードを使った実装方法がおススメです。 今回は、WordPressの「the_posts_pagination()」関数を使用した、ページネーション（ページャー）の実装方法について解説してゆきます。 ページネーションを実装するPHPコード それでは早速、WordPressテーマに「ページネーション」を実装するPHPコードを紹介してゆきます。 ページネーション実装用のPHPコード ページネーション実装用のPHPコードは以下になりま
WordPressでのページネーション実装方法。プラグインあり／プラグインなし｜WordPress特化型メディアサイト【WPWeb】
改造する Release | 2022.09.26 Updated | 2023.09.25 WordPressでのページネーション実装方法。プラグインあり／プラグインなしfunctions.phpプラグインページネーション プラグインを利用するまずは、プラグインで簡単に実装する方法です。 この記事ではページネーション実装によく使われる「WP-PageNavi」を紹介します。
メディア開発部の今村です. 最近はグノシーの社内管理画面のリプレイスをしており, Next.js / Go / GraphQL / MySQLという構成で新しい管理画面を作っています. 開発の途中で, 記事検索機能のページネーションを実装する機会がありました. GraphQLサーバーのページネーションについては, RelayというGraphQLクライアントライブラリが要求しているCursor Connectionsという仕様が有名です. 今回はこの仕様を参考にしたのですが, 読めばすぐに意義や実装方法が分かるというものでもなく, 解説記事を読みながら手探りで実装を進めることになりました. そこで, この記事では, Cursor Connectionsの仕様, メリットやGoとRDBを使う場合の実装について説明します. Cursor Connectionsとは オフセットページネーション カ
● Laravel paginate の実行 Eloquent モデルとクエリビルダに対して paginate() メソッドを 実行することができます。 Eloquent モデルに対してpaginate()を実行する $users = User::where('votes', '>', 100)->paginate(15); return view('user.index', ['users' => $users]); クエリビルダーに対してpaginate()を実行する $users = DB::table('users')->paginate(15); return view('user.index', ['users' => $users]); ● ページ番号などのパラメーターを指定してLaravel paginate を実行する paginate() メソッドのパラメーターは次のよ
バックオフィス基盤第2グループの名嘉眞です。私の担当しているプロダクトにカーソルページネーションを実装したので、その経緯と実装内容を記事にしたいと思います。これからカーソルページネーションを実装しようとしている方の参考になれば幸いです。 カーソルページネーションを実装したきっかけカーソルページネーションを実装したきっかけは、1ユースケースでデータ量が大きくなるAPIを追加する必要があったためです。 具体的にいうとある特定の種別の決済情報を蓄積しているマイクロサービスがあり、そのマイクロサービスを利用する管理画面のサービスが存在していて、管理画面でその特定の決済情報を表示したり、CSVダウンロードしたいという機能追加がありました。サービス間の通信はgRPCです。 この要件だけだとオフセットページネーションでも良さそうなのですが、以下のような課題がありました。 ※オフセットページネーションとは
graphql-rubyでページネーションがサクッと実装できたのでGemが何をやっているのか覗いてみた - Qiita
GraphQLをRailsアプリケーションで使う場合、graphql-rubyという強力なGemがあります。 https://github.com/rmosolgo/graphql-ruby GraphQLはページネーションを実現するためにconnectionsと呼ばれる仕組みを持っています。 connectionsでは、取得件数や取得を開始する位置を指定することができます。 詳細は公式サイトを参照してください。 https://facebook.github.io/relay/graphql/connections.htm graphql-rubyを使ってページネーションを実装してみたら、ほぼコードを書くことなく実装できて感動したのでgraphql-rubyが何をしているかコードを覗いてみることにしました。 環境 動かした環境は下記です。 Ruby: 2.6.5 Rails: 6.0.0
[レベル: 上級] SEO を考慮したページネーションの構成を Google の John Mueller（ジョン・ミューラー）氏がオフィスアワーでアドバイスしました。 ページネーションの目的で考える ページネーションするときはまずその目的で考えることが大切です。 ページネーションを採用する状況には大きく分けて 2 パターンあります。 長い記事を分割する場合 カテゴリページを分割する場合 それぞれで、検索エンジン向きのページネーションには違いがあります。 長い記事を分割する場合 ひと続きの記事をページを分けて公開するときのページネーションの場合です。 次の 2 つを確実にします。 インデックスできる リンクする 最も重要なのは各ページをインデックス可能な状態にしておくことです。 そして、続くページへリンクします。 Google がページを発見できるようにするためです。 別のページに向けて
GraphQLの必須項目ページネーションの実装方法を理解する。 使用技術 Go1.13 × gqlgen v0.13.0 ページネーションとは APIのクエリを制限する方法。 返却するデータの量を制限する事ができる。 クエリの負荷を事前に計算できる。 GraphQLのページネーション GraphQLではページネーションの方針に決まりはないが、デファクトスタンダードにRelay-style cursor pagenationという方式がある。 これはFaceBookが考案し、GitHubのGraphQL APIでも採用されている。 ページネーションの実装方法は自由だがデファクトスタンダードに乗っかることで使用者側の学習コストを抑えることができる。 Relay-style cursor pagenation 公式: relay.dev こちらは以下の記事の画像が大変わかりやすい 登場人物 ht
ページネーションとは何だったのか、SEO的なベストプラクティスとは #DemandLive SEO5つの論点より | アユダンテ株式会社
TOP » コラム » SEO » ページネーションとは何だったのか、SEO的なベストプラクティスとは #DemandLive SEO5つの論点より 2023年5月24日、DemandMarkets 株式会社が主催するSEOウェビナー#DemandLiveにコガンが登壇しました。今回は「SEO 5つの論点」というタイトルで、答えのないトピックについてディスカッション形式で進行するウェビナーでした。とても濃くて面白かったので、参加していた私が要点をコラムにまとめたいと思います。5つのトピックより、今回は「ページネーション」を取り上げてみます。 ページネーションの概要とベストプラクティスについて参加者からの質問 ページネーションの概要とベストプラクティスについて 最初のトピックは「ページネーションとは何だったのか」。 ページネーションとは、ページャーとも呼ばれる「ページ送り」のことです。 以前
Laravelのページネーションを使用したり、カスタマイズしたページネーションを実装したりしたことがあるので、思い出しながら復習してみます！ Laravelでページネーションを使うには？ コントローラでpaginateを使って呼び出す Modelからデータを読み出すときにpaginateを使うと LengthAwarePaginatorの形式で返ってくるので、それをviewに渡して使うといいです。 下記が作った掲示板のコードの一部で、一覧をコントローラから渡しているところです。 $board = new Board(); $board_list = $board->orderBy("created_at", "desc")->paginate(env("PAGE_MAX_LIMIT")); return view('top_list', ['board_list' => $board_li
固定ページにページネーション機能を持たせる テーマ販売あり WordPressに長く携わっていると、固定ページで一覧表示してページネーションまでしたい、という場面がよく出てきます。 一覧表示はともかく、ページネーションまでしようとなるとひと工夫が必要です。 そこで、例として「services」というカスタム投稿タイプの記事の一覧を固定ページに出して、なおかつページネーションまでさせる方法を紹介します。 まず、その固定ページ用の専用テンプレートを作りましょう。 たとえば固定ページのスラッグが arekore だとすると、 WordPressのルールで、page-arekore.php を用意してあげれば、デフォルトテンプレートの page.php ではなく page-arekore.php を読み込んでくれます。 page-arekore.php に以下のように記述します。 <?php $p
graphql-rubyでページネーション（オフセットベースとカーソルベース） - @mizumotokのブログ
GraphQLであるオブジェクトの配列をとってくるときにページネーションをしたいというユースケースはよくあります。GraphQLではページネーションのベストプラクティスとしてカーソルベースを取り上げています。この記事ではカーソルベースのページネーションの仕組みとgraphql-rubyでのカーソルベース、オフセットベース両方に対応したページネーションの実装方法について解説します。 GraphQLのページネーション ページネーションのパターン カーソルベースページネーションを実現するConnection Type graphql-rubyでのページネーション カーソルベース オフセットベース 件数表示 まとめ GraphQLのページネーション ページネーションのパターン GraphQLでは要件にあわせてページネーションを実装して構わないのですが、３パターンが考えられます。 オフセットベース：
[AWS SDK for JavaScript v3] Amazon Athenaのクエリ実行および結果をページネーションして取得するTypeScriptテンプレート | DevelopersIO
[AWS SDK for JavaScript v3] Amazon Athenaのクエリ実行および結果をページネーションして取得するTypeScriptテンプレート こんにちは、CX事業本部 Delivery部の若槻です。 Amazon Athenaは、非常に大きなデータセットに対して実行されるクエリをサポートするため、結果セットが非常に大きい場合は、一度にすべてのデータを取得することは望ましくありません。その場合、ページネーションを使用することで、各ページで必要なデータのみを取得し、余分なデータを取得しなくて済むため、クエリの実行時間を短縮することができます。 今回は、AWS SDK for JavaScript v3でAmazon Athenaのクエリ実行および結果をページネーションして取得するTypeScriptテンプレートを作ってみました。 やってみた クエリ対象のテーブル作成
![[AWS SDK for JavaScript v3] Amazon Athenaのクエリ実行および結果をページネーションして取得するTypeScriptテンプレート | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/e74dfc28e3f87861a3abf7b0257ff46d1c1a0f04/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2022%2F08%2Famazon-athena.png)
｜DMM inside
【簡単】テーブルにソート機能を追加するList.jsの使い方【絞り込み／検索／ページネーション】 | KojiLog
こんにちは、こじ（@kojiWebCode）です。 先日、List.jsを使った実装をする場面があったので、これを機にまとめておくことにしました。 本記事では、以下のようなお悩みを持つ方向けに解説します。 ◆ List.jsでどんなことが出来るのかな…。 ◆ 公式の説明を読んでもピンと来ない…。 ◆ List.jsの基本的な使い方を知りたい。 「List.js」を利用すれば、テーブルやリストに対して、以下のような機能を追加できます。 ソート機能 絞り込み（フィルタリング）機能 検索機能 ページネーション データの追加・編集・削除（本記事では扱いません） 最初は、とっつきにくいかもしれませんが、慣れれば比較的簡単に導入することが出来ます。 基本的な使い方や注意すべきポイントをまとめていきますので、是非参考にしていただければ幸いです。 【準備】List.jsの使い方【ライブラリの読み込み】 「
プラグイン無しでアーカイブ系ページのページネーションを実装（複数ページ用） 一覧ページ用のページネーションthe_posts_pagination()の紹介。 基本的な表示なら、プラグイン無しで実装した方がメンテナンスが楽になりますよ。 仕様 WP4.1よりthe_posts_pagination() が実装されましたが、内部的にpaginate_links() を利用しているため両方の引数が使えます。 the_posts_pagination() の仕様
Preact、HooksとSignalsの両立 / Preact: Harmonizing Hooks and Signals
はじめに リモートサーバー、API、またはデータベースから大量のデータレコードをフェッチする必要がある、Webアプリケーションの構築することがよくあります。たとえば、支払いシステムを構築している場合、何千ものトランザクションをフェッチしている可能性があります。それがソーシャルメディアアプリの場合なら、多くのユーザーコメント、プロファイル、またはアクティビティをフェッチしている可能性があります。いずれの場合でも、アプリを操作するエンドユーザーにとって便利な方法でデータを表示するためのソリューションがいくつかあります。 大きなデータセットを処理する方法の1つは、ページネーションを使用することですデータセットのサイズ（データセット内のレコードの総数）が事前にわかっている場合、ページネーションは、効果的に機能します。次に、エンドユーザーとページネーションコントロールとのやり取りに基づいて、データセ
Twitterでこの新しくLaravelに追加されるカーソル・ページネーションについての記事を見つけて面白かったので、自分なりにまとめてみたいと思います。 オフセット・ページネーション現在オフセット・ページネーションはよく使われているページネーションの一つです。 LaravelのpaginateとsimplePaginateのメソッドはこのオフセット・ページネーションをデフォルトで使用しています。 次のユーザーのテーブルのデータのページネーションを考えてみましょう。 use App\Models\User; $users = User::orderBy('id')->simplePaginate(20);オフセット・ページネーションは offset句を使ったクエリを使用します。 例えば２ページ目へアクセスした時に実行されるクエリを見てみましょう。 select * from users o
この記事は microCMS Advent Calendar 2022 の25日目の記事です。昨年に引き続き参加させて頂きました。今回は、AstroとmicroCMSで作成したWebサイトにページネーションを実装する内容について書いています。 はじめに microCMSは日本製のヘッドレスCMSです。日本語の分かりやすい管理画面でコンテンツを管理して、APIベースで簡単にデータを扱うことができます。 AstroはWebサイトを構築するためのフレームワークです。公式サイトのトップに"Build faster websites."とあるように、高速なWebサイトを構築することを目的としていて、完全な静的HTMLを生成することもできるといった特徴があります。また、Astroにはページネーションに必要な機能がビルトインでサポートされています。本記事ではこの機能を利用して、以下のような2種類のページ
みなさんこんにちは！エンジニアの高澤です。 今回はメディアサイトやブログサイトなど、多くの記事を扱うWebサイトには欠かせない「ページネーション」について解説したいと思います。 多くの記事を提供するサイトでは必ずというぐらいページネーションが使われており、ユーザーにとってはサイトの使い勝手がよくなり、各々の記事への回遊率が上がる可能性が十分に考えられます。 当記事ではそんなページネーションについて、制作に携わるエンジニアや Webデザイナーの方はもちろん、Webディレクターやブロガーの方などプログラミングの知識がない中でページネーションの実装をしなければならないけど自信がない…とお困りの方にもぜひ活用していただきたい内容となっております。 この記事を読み終わる頃にはページネーションを難なく実装できるスキルが身についていることでしょう。 これから解説する実装の仕方の内容などは、全て実際のWe
この記事は、Merpay Tech Openness Month 2023 の3日目の記事です。 こんにちは。メルペイBackendエンジニアの@yushi0010です。 私が所属するPartner Platformチームでは社内向け管理ツールを開発しています。この記事では、そのツール内でのページネーションで起きたバグを解消した話を紹介します。 概要 今回のページネーションを利用していた管理ツールの検索ページでは、あるテーブルが持つカラムに対して条件を指定し、その条件に合うレコードを取得して一覧表示する機能がありました。しかし、ある特定の条件下でどれだけ次ページに遷移するボタンをクリックしてもページ遷移が行われないというバグが発生しました。 バグが起きた状況 どのようにしてページ遷移が行われなくなったのかを説明するために、その時の状況を共有します。 まず、検索の対象とするテーブルは以下のよ
「WP-PageNavi」を使ったページネーション実装方法
「固定ページ(page.php)編」と「 アーカイブ(archive.php)編 &」、「投稿テンプレート(single.php)編」に分けて、それぞれの実装までの流れを解説していきたいと思います。 管理画面からプラグイン「WP-PageNavi」をインストール まずは共通事項であるプラグインのインストールから説明していきます。 WordPress管理画面パネル内「プラグイン」から「WP-PageNavi」をインストール&有効化しましょう。 有効化するとパネルメニューの「設定」の中に「PageNavi」が出現。 設定画面では１ページあたりに表示させる記事数や、「前のページ用テキスト」「次のページ用テキスト」などの表記を編集することができます。 PageNaviの基本的な使い方 ページネーションを表示させたい場所に を、記述。 これが基本の使い方ですが、このままですとPageNaviを使用す
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
令和時代のページネーションを考える (REST API編) - Sweet Escape
商品一覧ページにおけるページネーションの代替案
Iteratorでページネーションを実現する
Next.js(SSG)でページネーションを実装してみよう
ページネーションしたページをすべて1ページ目に正規化できるか？
offsetでページネーションは遅い。これからはシーク法だ！ - Qiita
【WordPress】ページネーション（ページャー）の作り方【テーマ自作】
Go / GraphQL / RDBなサーバーのページネーション - Gunosy Tech Blog
Laravel のページャー（ページネーション）の表示とカスタマイズ｜プログラムメモ
カーソルページネーションを実装した話 | MoT Lab (GO Inc. Engineering Blog)
記事コンテンツとカテゴリページで異なるページネーション方法
GraphQL ページネーション Go gqlgen - matsu tech blog
Laravelのページネーション(Pagination)について（カスタマイズするには）
固定ページにページネーション機能を持たせる | WordPressカスタマイズ事例【100ウェブ】
SWRを活用してページネーションの実装を工夫した話 - DMM inside
プラグイン無しでアーカイブ系ページのページネーションを実装（複数ページ用） - WPQW
Google Cloud Spannerにおけるページネーションとインデックスの考え方
React でカスタムページネーションを構築する方法 | DigitalOcean
オフセット・ページネーションとカーソル・ページネーションの比較｜tomocito
AstroとmicroCMSで作ったサイトにページネーションを実装する
5分で実装！WordPressでページネーションを作成する方法（プラグインor自作）
ページネーションのバグを解消した話 | メルカリエンジニアリング
www.nikkansports.com
tabelog.com
www.smartnews.com
www.smartnews.com
36kr.jp
innovatopia.jp