令和時代のページネーションを考える - Sweet Escape

2022/10/06 198 users Sweet Escape レスポンス 令和時代 API 実装

今回はバックエンドAPIでページネーションをどうやるかについての話なので、よくある無限スクロールUIのようなフロントエンド側の実装に関する話はしない。あくまでもAPI、もっと言えばRESTfulなAPIのリクエスト・レスポンスにおけるページネーションの話。 本気で深く考えるというよりざっくり検討したときの話です。 ... 続きを読む

React、Angular、Vue対応、高性能なテーブルを実装できるシンプルで軽量のJavaScriptライブラリ -Grid.js | コリス

2020/07/15 187 users JSON React angular Preact コリス

高性能なテーブルを実装できる、シンプルで軽量のJavaScriptライブラリを紹介します。HTMLテーブル、ページネーション、検索機能、ソート機能、XMLやJSONからインポートなどに対応しています。 React、Angular、Preact、Vueなどの主要なフレームワークのプラグインとして動作するだけでなく、フレームワークなしのバニラ... 続きを読む

独創的なページネーションのコードスニペット８選 | UX MILK

2019/03/06 59 users UX MILK コードスニペット Eric 著者 翻訳転載

Ericは20年以上の経験を持つWebデザイナーです。『Your Guide to Becoming a Freelance Web Designer』の著者でもあります。 この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。 8 Code Snippets to Make Your Pagination Pop （2018/10/15） ページネーションはデ... 続きを読む

Vue.jsベースのオープンソースUIコンポーネントフレームワーク・「Vuesax」 | かちびと.net

2018/09/07 54 users スライダー グリッド コンポーネント タブ Vue.js

Vuesax VuesaxはVue.jsベースのUIコンポーネントフレームワークです。Vue.jsを使ったアプリケーション開発をサポートしてくれます。カラースキームやグリッド、フォーム、タブなどの基本UIはもちろん、スライダーやカード、ページネーションなども用意されており、それぞれのコンポーネントではさらに細かなスタイルを選... 続きを読む

Google、モバイル検索のページネーションを廃止。「もっと見る」による無限スクロールへ変更 | 海外SEO情報ブログ

2018/04/11 73 users 無限スクロール 廃止 Google モバイル検索 変更

[レベル: 中級] 無限スクロールのモバイル検索結果を Google は導入しました。 「次へ」でページネーションして2ページ目、3ページ目に移動するのではなく、「もっと見る」で続きの結果が出現します。 正式導入 「もっと見る」による無限スクロールのモバイル検索結果は 昨年12月にテスト していたことが確認されています。 しかし今回はテストではなく、正式導入になります。 Google 検索の Tw... 続きを読む

モバイルファーストインデックスについてGoogleに何でも聞いてみた #inhouseseo ―― 内部リンクの評価は? 導入時期は? 分割数が異なるページネーションは? など | 海外SEO情報ブログ

2017/02/12 248 users inhouseseo モバイルファーストインデックス 評価

In-house SEO Meetup が主催した Google MFI Night で、Google社員にさまざまな疑問を質問するAMA with Google セッションを 先週金曜日の記事でレポート しました。 日本語検索独自の品質評価アップデートがテーマでしたが、このイベントのメインテーマは モバイル ファースト インデックス (MFI) です。 当然AMAもMFI関連の質問が大部分を占め... 続きを読む

ページネーションのベストプラクティス | デザイン | POSTD

2016/06/21 584 users POSTD ベストプラクティス アプリケーション 現状 要素

Webサイトやアプリケーションで軽視されがちな要素の1つに、ページネーション・コントロールがあります。最適なページネーションを作成するのは実は非常に簡単ですが、それを実現できているサイトやアプリケーションはあまり多くないのが現状です。優れたページネーションについて分析し、ベストプラクティスを考えていきます。画像著作権：codyhouse Webサイトやアプリケーションで軽視されがちな要素の1つに、... 続きを読む

jQuery-KingTable - 業務システムに使えそうなテーブルライブラリ MOONGIFT

2015/11/26 56 users MOONGIFT フィルタリング ソート Webベース 要望

Webベースで業務システムを構築した場合、必ず必要になるのが一覧表です。そして、そこにExcel並の機能が求められます。ソートであったり、フィルタリング、ページネーションが欲しいと要望が出るはずです。 それらを一から自作するのは大変です。そこで今回はjQuery-KingTableを紹介します。 jQuery-KingTableの使い方 jQuery-KingTableのデモです。ページネーション... 続きを読む

[JS]ありそうでなかった！スクロールエフェクトのベースになるさまざまな値を取得するシンプルな超軽量スクリプト -roll.js | コリス

2015/11/19 163 users エフェクト スクロール スクリプト しん ポジション

縦長ページのスクロールを利用したエフェクトに必要なさまざまな値、スクロール量、ポジション、ページネーションなどを正確に取得することに特化された超軽量（3kb gzip）のスクリプトを紹介します。 作者様曰く、これ系のシン...記事の続きを読む 続きを読む

ページネーションしたページはnoindexにすべき？ rel=“prev/next”とnoindexは併用可能？ | 海外SEO情報ブログ

2015/09/16 51 users noindex オフィスアワー Prev rel NEXT

[レベル: 上級]ページネーション（ページ送り）したページには noindex robots metaタグを記述したほうがいいのでしょうか？ また、rel=”prev”とrel=”next”を設定しているページにnoindexを記述しても問題ないのでしょうか？9月11日のオフィスアワーで、GoogleのJohn Mueller（ジョン・ミューラー）氏がこの質問に回答しています。 質問者: ページネ... 続きを読む

div、table、ulリスト等にソート、ページネーション、フィルタ機能を追加できる「jPList」:phpspot開発日誌

2014/06/17 61 users table div overview インタフェース ソート

div、table、ulリスト等にソート、ページネーション、フィルタ機能を追加できる「jPList」 2014年06月17日- Overview | jPList - jQuery Data Grid Controls div、table、ulリスト等にソート、ページネーション、フィルタ機能を追加できる「jPList」。 div、table、ulなどで列挙されたデータに、次のようなインタフェースを... 続きを読む

WordPress：覚えておいて損はない、開発者向けプラグイン 25＋ | NxWorld

2014/03/18 354 users WordPre NxWorld 表向き 見栄え ご存じ

WordPressには便利なプラグインが沢山あり、それらを使うことであまり知識がない方でも様々な機能を実装して自分好みのブログやサイトを作ることができます。ソーシャルボタンやページネーションを簡単に設置できたり、関連記事や人気記事を手軽に表示できるといったような見栄えを変えたりするユーザー向け（表向き）の機能を実装するタイプのプラグインはよく見かけるのでご存じの方も多いと思いますが、WordPre... 続きを読む

これは超使いやすいページネーションの次世代UI:phpspot開発日誌

2012/12/24 347 users phpspot開発日誌 要件 前後 基本 リストページ

Slider Pagination Concept - with jQuery UI Slider これは超使いやすいページネーションの次世代UI。 普通、リストページのページネーションといえば、「 1 , 2, 3, 4 ,5 次へ> 」みたいなUIが基本ですが、そもそもこのUI疑ってかかってもいい時期なのかも。 要は現在のページ番号と、ページを前後と、ページ指定で送れればいい、という要件を満た... 続きを読む

タブやページネーションを簡単に実装できる！超軽量のJqueryプラグイン「vanity」 | 株式会社LIG

2012/12/14 87 users vanity イージング スライダー jQueryプラグイン

お疲れ様です、ももこです。 今回はタブやツールチップ等、ちょっとした動きをつけるのに便利で超軽量なJqueryプラグイン「vanity」をご紹介します。 jSlider – スライダー デモページ ナビとページ遷移のついた基本的なスライダー、速度やイージングも調整がききます。 jTabs – タブ デモページ コンテンツの切り替えによく使われるタブ。簡単にアニメーションがつけられるのが個人的に気に... 続きを読む

TEST CORDING » WordPressのpluginを使わないページネーションを改造する方法

2012/10/02 3087 users Plugin TEST CORDING WordPress

今回は WordPress のページネーションについてのエントリーです。プラグインを使わない方法については Google で簡単に検索できますが、いざ自分用に改造しようとするとどうするのか分からない！、といった方向けです。 参考元のサイト sparklette http://design.sparklette.net/teaches/how-to-add-wordpress-pagination-... 続きを読む

[JS]スライダーやタブやページネーションなど便利な機能を少ないコードで実装する超軽量（8kb）のスクリプト -vanity | コリス

2012/07/05 217 users vanity jQuery コリス スライダー ウェブページ

スライダー、タブ、ページネーション、ツールチップなど、ウェブページでよく使用するコンテンツをシンプルにより少ないコードで実装できるよう開発されたjQueryのプラグインを紹介します。 vanity jquery toolset vanityは7種類のツールがあり、それぞれ8kbと超軽量のスクリプトとなっています。 機能はシンプルで、より少ないコードで簡単に実装できるように設計されています。 以下、... 続きを読む

[JS]シンプルからかっこいいエフェクト付きまで、ページネーションなら何でも任せろのスクリプト -jPages | コリス

2012/04/12 270 users コリス stylesheet Libs スクリプト Ajax

Table テーブルのコンテンツをページネーションにすることもできます。 jPagesの使い方 外部ファイル スタイルシートとスクリプトを外部ファイルとして記述します。 <link rel="stylesheet" href="css/jPages.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.... 続きを読む

【難易度“高し”】rel=“prev”とrel=“next”の正しい使い方 | 海外SEO情報ブログ

2012/03/14 70 users rel Prev NEXT 上級 難易度

[対象: 上級]今日の記事は、rel=”prev”とrel=”next”によるページネーションを扱ったかなり難易度が高いトピックになります。rel=”prev/next”とビューオールページを用いたGoogleが推奨するページネーション処理を確実に理解している状態でないと意味不明でしょう。Google、ページネーション問題を解決するrel=“next”タグとrel=“prev”タグをサポート開始G... 続きを読む

連続した要素を分割してページネーションを実装、移動時にエフェクトを加えるjQueryプラグイン・jPages - かちびと. net

2012/02/02 62 users エフェクト 実装 net 要素 備忘録

ちょっと珍しいタイプでしたので備忘録。 連続した要素を、指定した数に達したら 分割して、ページネーションを自動で 生成し、移動時にエフェクトが加わえる、 というもの。大量のリストをコンパクト に、という方に向いてそうですね。 連続した要素になら基本的になんでも使えるっぽいので何かしら応用できるかもしれません。コンパクトにまとめられるのは素敵ですね。 jPages 例えばli要素が100個くらいあっ... 続きを読む

[JS]ページネーションをもっと楽しく、使いやすくするスクリプト -jPaginator | コリス

2011/06/15 74 users コリス ペー 矢印 スクリプト アニメーション

自動加速のアニメーションは、それぞれのデモの左右の矢印をマウスオーバーすると、加速のアニメーションでページの数字が送られます。 スライダー機能はデモ1と3に実装されており、大量のページでも一気に移動できます。 スライダー機能も装備 スクリプトのオプション スクリプトのオプションでは、さまざまなものが設定できます。 selectedPage:1, 現在の選択されたページ nbPages:54, ペー... 続きを読む

ページネーションにおけるrel=“canonical”タグの正しい使い方 at SMX West 2011 | 海外SEO情報ブログ

2011/03/16 81 users rel canonical マイリー・オイェ エントリ 属性

今日のエントリもSMX Westのセッションからのレポートです。扱うトピックは、GoogleのMaile Ohye(マイリー・オイェ)さんが説明した、「ページネーションにおけるrel=”canonical”タグ（属性）の使い方」です。 ※ページネーションとは、ここでは1まとまりのコンテンツを複数のページに分割する、いわゆる「ページ送り」を意味します。たとえばECサイトで靴を通信販売していたとします... 続きを読む

商用サイトでも利用可、さまざまなウェブサイトのパーツが揃ったフリーのPSD素材 | コリス

2009/07/02 250 users スライダー コリス ナビゲーション PSD素材 ボタン

ナビゲーション・ボタン・スライダー・タブ・パネル・フォーム・ページネーションなど、さまざまなウェブサイトのパーツが揃ったフリーのPSD素材をBest Blog Boxから紹介します。 続きを読む