WEBを駆使した売上UP/トータルサポートを提供　
株式会社パルムゲート

先日「無限スクロール」に関する話題が社内で出たのでメモ。

スマホ対応サイトの場合、表示データが多い場合にページングをするのは様々な理由で好まれない。代わりに一定の条件 (「もっと見る」をタップするとか、スクロール下端に近づいた等) をトリガーにして次の表示データを取得し追加表示する方法をとることが多い。

この方法だと、ページ遷移することなく特定領域内に無限にデータが表示されるように見えるので、本来の「スクロールポジションをトリガーとする場合」の他、タップをトリガーとする場合等も含め「無限スクロール」と呼ばれる。

この動作はサーバー側ではなくクライアント (ブラウザ) 側で行なうことになるので、クライアント側には

• クライアント上でのトリガー検出と処理の実行
• 追加表示するためのデータの取得方法

が必要となる。通常は前者を JavaScript、後者を ajax で行なうことが多い。 (それ以外の方法もあることはある。)

同様にサーバー側はクライアント側からの ajax 通信の受け口が必要となる。この受け口ではクライアントからの指示に従ってデータを集計し、必要な形式 (json や HTML 等) に変換して返すことになる。

JavaScript で実装するのであれば、jQuery ライブラリを利用することでセレクタによる要素アクセスや通信を包括的かつ容易に行うことが可能となる。ajax で取得するデータは HTML 整形済みデータ、または JavaScript と相性の良い json データが便利。

■シンプルな実装例 (ボタンタップをトリガーとする例)

データ表示部分

JavaScript コード部分

なお、取得するデータがランダムでなく順序を持つ場合、表示すべき位置の情報をクライアント (ブラウザ) 側とサーバー側で共有する必要がある。その場合は、共有をする方法としては

• クッキーにページ情報を保持して共有する
• URL にページ情報を埋め込み、表示データと共に次のページ情報を返す

等が利用できる。