Infinite scroll導入でつまずいた点のメモ

Cat WEBサイト構築Tag by cubismer
Infinite scroll
Infinite scroll

Infinite scrollを使用した際にうまくいかなかった部分のメモ。あまり使う予定がなく、今後使用する際にまた調べに行きそうなので。

なお、「Infinite scroll」で調べると、日本語サイトではWordPressのプラグインに関する記事も出てきますが、今回はWordPressではない通常（?）のInfinite scrollについてです。WordPressの管理画面内から設定して対応したということではありませんので、WordPressのプラグインの情報をお探しの方は別のサイトをご覧いただくことをお勧めします。

[2014.8.1追記]
無限スクロールとGoogleのクローラーに関して記事末尾に追記しました。

[2014.5.14追記]
この記事とは別の原因として「ドキュメントタイプ宣言」に問題があったという記事があります。詳細は「今村だけがよくわかるブログ」さんの下記のページにてご確認くださいませ。

Infinite scrollの概要

Infinite scroll自体のご説明は本題ではありませんので、簡単に。

このjQueryプラグインは、次ページの特定の要素を画面を推移することなく表示しし続ける動作をします。詳細は、Infinite scroll[別窓]のページやGitHub[別窓]のページをご覧下さい。

Infinite scrollでつまずいた点

それでは、本題のInfinite scrollを使う際につまづいた点を。なお、根本的には解決していない問題もあります。

動作のトリガーはnavSelector

導入したサイトの構造にもよりますが、itemSelectorで指定した要素がfloatしている場合などでは、その下に設置したnavSelectorが上に流れることがあります。float直下のnavSelectorにclearを使用していないなどの場合に起こる状態です。

ここで問題となるのは、Infinite scrollはnavSelectorの位置を基準として次ページを表示するという点です。ページ上部の意図しない位置にnavSelectorが来てしまっていたら、トリガーは常に見えている状態となります。この状態ですと僅かでも下にスクロールしたとたんに次ページが読み込まれます。

通常、設定のbufferPxで動作のタイミング（navSelectorのどれくらい手前から動作をはじめさせるか）を操作するのですが、上記のミスが原因であれば当然効果がありません。もしも「少しスクロールしたらすぐに次のページが表示される」という場合には、疑ってみても良いかもしれません。

次のページには余計なものはなくても良い

読み込む次のページですが、最小限のものであればheadもbodyもいらないもようです。少なくともなくても動作しました。

具体的には、itemSelectorで設定した要素があればよいようです。

次のページのページ名

先頭のページの次のページとして指定するページ名（ファイル名）には、「2」が含まれている必要があるようです。数字を頼りに読み込んで行く模様ですので、以降も「3」や「4」が必要です。また、いきなり「3」などを指定しても読み込めません。

例えば以下のファイル名であれば動作します。

  • index.html/index2.html/index3.html/index4.html/index5.html/index6.html
  • index.html/page2.html/page3.html/page4.html/page5.html/page6.html

しかし、以下の状態では意図どうりに動作しません。具体的には欠番やファイル名が違う部分で読み込みが終了します。

  • index.html/index3.html/index4.html/index5.html/index6.html（2がない）
  • index.html/index2.html/page03.html/index4.html/page5.html/index6.html（数字以外のファイル名が統一されていない）

上記は大まかに把握している部分でして、間違っていましたらご指摘いただけますと幸いです。

loadingTextが効かない

Infinite scrollのページを見ると、次ページを読み込み中の時に表示する文字を操作するためにloadingTextやdoneTextが用意されていますが、効きませんでした。

こちらは原因がわかりませんでしたが、GitHubの以下の記述を参考にすることで変更が可能でした。(imgは省略しています）


loading: {
        finished: undefined,
        finishedMsg: "<em>Congratulations, you've reached the end of the internet.</em>",
        msg: null,
        msgText: "<em>Loading the next set of posts...</em>",
        selector: null,
        speed: 'fast',
        start: undefined
    },

具体的には、navSelectorなどと同様に設定します。


$container.infinitescroll({
      navSelector  : '#page-nav',
      nextSelector : '#page-nav a',
      itemSelector : '.items',
      loading: {
        finishedMsg: "<em>読み込んだ後の文章はここを書き換える</em>",
        msgText: "<em>読み込み中の文書はここを書き換える</em>"
    }
});

ちなみに、現在はInfinite scrollのコードはGitHubからダウンロードする模様です。また、GitHubでダウンロードしたファイル名は「infinite-scroll-master」ですが、その中に「jquery.infinitescroll.js」も「wordpress-plugin」フォルダーも一緒に入っています。

iPhoneでイベントが発生しにくい

Infinite scrollはiPhoneでも動作しますが、初期設定では拡大（ピンチアウト）しないとページ下部まで行っても動作しませんでした。

この問題について調べた結果、以下のページを見つけました。

ちゃんとGitHubの中に書かれていました。が、結論としては「手動で動作させる」というものらしく、その結論で一旦打ち切られていました。これでは期待している状態ではないのですが、打ち切られた後に2つ手法が紹介されていました。結論を言えばこのうちの一つの「bufferPxを大きめに設定する」で動作させることができました。該当のスレッドでは100でよいと書かれていましたが、試したところ500でなんとかというところです。つまり、以下のようになります。


bufferPx : 500

なお、上記のスレッドの後で更に別の方法を示しているページがありました。それが次のページです。

解決策として、以下のようにviewportを利用しているようです。


<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">

こちらは試していませんが、bufferPx以外で対応となったら検討してみても良いかもしれません。

結び

上記がつまずいた点でした。

なお、動作とは関係ない部分ではありますが、Infinite scrollページにはSEOについて一言書かれていましたので最後に引用します。

Is it SEO-Friendly?

Yes all enhancements are made via javascript only, so search spiders see no difference.

だそうです。プラグインの説明でこういったことが書かれているものなのですね。今まで他のものでは見逃していたかもしれませんので、今後はこの辺りの情報も探してみようと思います。

[2015.8.1追記]

8/1に大阪で行われたCSS Niteにて、SEO専門家の辻さんが以下のように質問をされていました。

その返答が以下の通り。

この記事に書いているInfinite scrollのことを指しての内容ではありませんが、

無限スクロール関連は例外的にGoogleが処理できないJavaScriptを含む部分

という部分はInfinite scrollがページで記載している部分と相反しますので、一応追記しておきます。

なお、個人的には「Googleが理解できないから無限スクロールを使うべきではない」という結論には達しません。
仮に、ブログのTOPページで最終的に全記事が無限スクロールで表示される場合、すべて最後までクロールされる必要があるとは思えないからです。

そのため、サイトごとに重要性を判断して用いるのであれば特に問題はないという考えです。
無限スクロールがユーザーやそのサイトにとってよりよい体験を提供できるなら、またそれが重要視されるべき優先度を持つなら、Googleの能力に判断を左右されるべきではないはずです。

5人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。