今回は「ページネーション」で区切られたWebページを自動連結して、無限スクロールを実現してくれる拡張機能「uAutoPagerize」と「Infy Scroll」の使い方を紹介していこう。これらの拡張機能を導入すれば、いちいちリンクをクリックしなくても「次のページ」をスクロール操作だけで閲覧できるようになる。

  • 無限スクロールを実現するChrome拡張機能「uAutoPagerize」と「Infy Scroll」を比較紹介

ページネーションとはなにか

今回は「uAutoPagerize」と「Infy Scroll」の使い方を紹介する。いずれも無限スクロールを実現してくれる拡張機能だ。

Webを閲覧していると、最下部に「1、2、3、……」というリンクが並んでいるページに遭遇することがある。たとえば、GoogleでWeb検索した場合、1ページ目に10件程度の検索結果が表示され、それ以降の検索結果は「2、3、4……」または「次へ」のリンクをクリックして閲覧する、という仕組みになっている。

  • ページネーションの例(1)

同じような仕組みは、他のWebサイトでもよく採用されている。現在、皆さんが見ているマイナビニュース(TECH+)も「記事の一覧」が複数ページに分割されて表示される仕様になっている。

  • ページネーションの例(2)

こういったリンクは「ページネーション」と呼ばれており、分量の多いコンテンツを複数のページに分割して掲載する手法として広く普及している。とはいえ、「いちいちリンクをクリックするのは面倒だ……」と感じる方もいるだろう。

このような場合に活用できるのが「uAutoPagerize」や「Infy Scroll」といった拡張機能だ。これらの拡張機能を導入すると、画面をスクロールしていくだけで、2ページ目以降を連続して閲覧できるようになる。つまり、「2、3、4、…」や「次へ」のリンクをクリックする手間を省ける訳だ。

また、これらの拡張機能は「元のページ」へ戻るときの操作性も向上してくれる。(3ページ目)→(2ページ目)→(1ページ目)→(元のページ)という具合に、何回も「戻る」の操作を行わなくても、1回の操作で「元のページ」へ戻ることが可能となる。

ということで、前置きはこれくらいにして、それぞれの拡張機能の使い方を紹介していこう。

「uAutoPagerize」の使い方

まずは、拡張機能「uAutoPagerize」の使い方を紹介する。拡張機能の追加手順はいつもと同じ。uAutoPagerizeの紹介ページを開き、右上にある「Chromeに追加」をクリックする。続いて、「拡張機能を追加」ボタンをクリックする。

  • 「uAutoPagerize」の紹介ページ

以上でuAutoPagerizeの導入作業は完了。あとは普通にWebを閲覧していくだけ。たとえば、GoogleでWeb検索を行い、検索結果の画面を下へスクロールしていくと自動的に2ページ目が読み込まれ、その内容が1ページ目に続けて表示される。

  • Googleの検索結果(1)

さらに画面を下へスクロールしていくと、3ページ目の内容が続けて表示される。以降も同様に、画面をスクロールしていくだけで、4ページ目、5ページ目、……の内容を続けて閲覧できるようになる。

  • Googleの検索結果(2)

もちろん、Google以外のWebサイトでもuAutoPagerizeは機能する。以下の図は、マイナビニュース(TECH+)の「テクノロジー」カテゴリーにある新着記事を一覧表示した様子だ。画面を下へスクロールしていくと、2ページ目以降が続けて表示されるのを確認できる。

  • ニュース記事の一覧ページの例

AmazonなどのショッピングサイトでもuAutoPagerizeが便利に活用できる。以下の図は、「iPhone 16e ケース」のキーワードで商品を検索した例だ。画面を下へスクロールしていくと、2ページ目以降の商品も続けて表示されるようになる。いちいち各ページへ進むリンクをクリックする必要はない。

  • Amazonの商品検索結果

このようにuAutoPagerizeを追加すると、ページネーションにより「複数のページ」に分割されていたWebページを「1つのページ」として扱えるようになる。スマートフォンでよく見かける「スクロールするだけで新しいコンテンツが次々と読み込まれていく……」と同じような環境をPCのブラウザでも実現できるようになる。

なお、uAutoPagerizeの有効/無効を手軽に切り替えられる機能も用意されている。画面の右上に表示される「タイル状のアイコン」をクリックしてOFFにすると無効になり、普通にページネーションが表示されるようになる。

  • 拡張機能の有効/無効の切り替え

ただし、それまでに読み込まれていたページは、連続して表示されたままの状態になる。uAutoPagerizeの有効/無効は、アイコンをクリックした時点を基準に切り替わるようだ。念のため、覚えておくとよいだろう。

「uAutoPagerize」の設定画面

uAutoPagerizeには、簡単な設定画面も用意されている。続いては、設定画面で指定できる内容について補足しておこう。設定画面を呼び出すときはuAutoPagerizeの「…」をクリックし、「オプション」を選択すればよい。

※ツールバーにuAutoPagerizeを固定している場合は、右クリックメニューから「オプション」を選択する

  • 設定画面の呼び出し

すると、以下の図のような設定画面が表示される。この画面の最上部には、「uAutoPagerizeを無効化するページ」を指定するための設定項目が用意されている。

  • 「実行しないページ」の設定

その下には、「次のページを読み込むまでの距離」、「リンク先を開く方法」、「右上に表示されるアイコン」、「ページの区切りを示すセパレータの表示」などに関する設定項目が並んでいる。

  • 読み込みタイミング、アイコン表示の設定

これらの設定は必要に応じて変更していけばよい。一般的な使い方であれば、初期設定のままでも特に問題は生じないだろう。

なお、まれに無限スクロールが正しく機能してくれない(2ページ目以降を正しく表示してくれない)といったケースが発生するようだが、そのときはuAutoPagerizeを無効化して普通にWebページを閲覧するしかない。特に困る現象ではないので、このあたりは割り切って使っていくしかないだろう。

「Infy Scroll」の使い方

続いては、uAutoPagerizeと同じ使い勝手を提供してくれる拡張機能「Infy Scroll」の使い方を紹介していこう。

拡張機能の追加手順はいつもと同じ。Infy Scrollの紹介ページを開いて、「Chromeに追加」をクリックし、その後「拡張機能を追加」ボタンをクリックする。

  • 「Infy Scroll」の紹介ページ

インストールが完了すると、以下の図のような画面が表示される。ここには「簡単な注意事項」や「不具合の報告」などに関する内容が表示されている。「OK」をクリックして画面を閉じると、Infy Scrollの設定画面が表示される。

  • 追加直後に表示される画面

最初は、英語表記になっているので、日本語表記に変更しておこう。「Change Language」をクリックし、次の画面で「わかりました」ボタンをクリックする。

  • 「Infy Scroll」の設定画面(英語版)

すると、機械翻訳された日本語の設定画面に切り替えられる。とりあえずは初期設定のまま、色々なWebページで動作を試してみよう。

  • 「Infy Scroll」の設定画面(日本語版)

まずは、Googleの検索結果を表示した例だ。画面をスクロールしていくだけで、2ページ以降の検索結果が続けて表示されるのを確認できる。ただし、関連キーワードを紹介する「他の人はこちらも検索」は表示が省略されている(※)。この仕様をどう評価するかは、個人によって意見が分かれるだろう。

※正確には、ページの末尾に「他の人はこちらも検索」が配置されているが、スクロールする毎に「次のページの内容」が挿入されるため、一瞬しか見られない

  • Googleの検索結果

続いては、TECH+の新着記事を一覧表示した例だ。こちらもスクロールに応じて2ページ目以降が連続表示されている。ただし、2ページ目以降は「画像が抜けた状態」になってしまう。

  • ニュース記事の一覧ページの例

最後の例は、Amazonで商品を検索したときの様子だ。こちらは、2ページ目以降も問題なく連続表示されている。

  • Amazonの商品検索結果

このように、「拡張機能が正しく動作してくれるか」はWebサイトごとに状況が変わる。もちろん、先ほど紹介したuAutoPagerizeでも不具合が発生してしまうケースはある。数少ない実験結果だけでは確証を得られないが、安定性という点ではuAutoPagerizeのほうが優れているようだ。

「Infy Scroll」に用意されている便利な機能

最後に、Infy Scrollに用意されている機能について簡単に補足しておこう。Infy Scrollをツールバーに固定しておくと、アイコンのクリックで以下の図のようなパネルを表示できるようになる。

  • 有効/無効、前後のページへ移動するボタン

ここには、Infy Scrollの有効/無効の切り替え、前後のページへ移動、などの機能が用意されている。便利に活用できるので、Infy Scrollを使う場合はアイコンをツールバーに固定しておくとよいだろう。

インストール直後に表示された設定画面を再表示することも可能だ。この場合はInfy Scrollのアイコンを右クリックして「オプション」を選択すればよい。

  • 設定画面の呼び出し

Infy Scrollの設定画面には多彩な設定項目が用意されている。そのすべてを紹介していくとキリがないので、ここでは便利な機能として「ショートカット」の設定手順を紹介しておこう。

画面上部にある「ショートカット」のアイコンをクリックし、「ブラウザのショートカットを設定する」ボタンをクリックする。

  • ショートカットの設定画面

すると、拡張機能の管理画面が表示され、Infy Scrollのショートカットキーを自由に設定できるようになる。以下の図は「Down one Page」と「Up one Page」にショートカットキーを割り当てた例だ。

  • ショートカットキーの設定

上図のように設定すると、「Ctrl」＋「↓」や「Ctrl」＋「↑」のキー操作で前後のページへ即座に移動できるようになる。ショートカットキーの設定はInfy Scrollだけに用意されている機能なので、キーボードをメインに操作する方はInfy Scrollの方が使い勝手がよいだろう。

最後に、これまでの話を簡単にまとめておこう。今回、紹介した2つの拡張機能を比較すると、安定性の面ではuAutoPagerizeのほうが優れているように感じた。一方、Infy Scrollは多彩な設定項目が用意されており、ショートカットキーも使えるのが利点といえる。もちろん、各自がよく利用するWebサイトで「無限スクロールが正しく機能してくれること」が最優先の選択基準になるだろう。

ここで紹介した拡張機能は、ページネーション(リンク)をクリックする手間を省いてくれるだけの機能でしかない。とはいえ、しばらく使用してみると、無限スクロールの快適さに慣れてしまい、いちいちリンクをクリックするのが億劫に感じてしまう。つまり、それだけ便利な存在ということだ。どちらも手軽に使える拡張機能なので、気になる方はいちど試してみるとよいだろう。