[JS] FC2ブログでも無限スクロールができちゃうjQueryプラグイン 【改訂版】

『Infinite Scroll』というjQueryプラグインを使用することでFC2ブログでもTwitterやFacebookのような無限スクロールを実装することができます。もしかするとテンプレートが弄れる他のブログでも可能かも？

• paulirish/infinite-scroll - GitHub
  https://github.com/paulirish/infinite-scroll

【改訂】 FC2ブログに対応しきれていなかったので内容を修正しました。 (14.12.10更新)

導入例（FC2ブログ対応版）

改訂前は次のページまでしかロードされない状態になっていました。いろいろ模索した結果以下のようになったので、改訂前に読まれた方はご注意下さい。

HTML

<!--not_permanent_area-->
<div id="items">
 <!--topentry-->
 <div class="item">
  記事内容
 </div>
 <!--/topentry-->
</div>
<!--/not_permanent_area-->

<!--nextpage-->
<div id="next-page">
 <a href="<%nextpage_url>">次のページを読み込む</a>
</div>
<!--/nextpage-->

<script src="../jquery.js"></script>
<script src="../jquery.infinitescroll.js"></script>

JavaScript

$('#items').infinitescroll({
  // ここを通過するとロード
  navSelector: '#next-page',
  // 次のページへのリンク
  nextSelector: '#next-page a',
  // 読み込みを行うセレクタ
  itemSelector: '.item',
  // ローディング時のメッセージ設定
  loading: {
    // アイテムがない場合のメッセージ
    finishedMsg: '次のアイテムはありません',
    // ローディング画像
    img: 'loading.gif'
  }
  state: {
    // 基準となるページ番号（FC2ブログの場合'0'推奨）
    currPage: 0
  },
  // ページのパスを指定（FC2ブログの場合）
  path: function generatePageUrl(currentPageNumber){
    <!--category_area-->
    var url = location.href,
        frontUrl = url.substring(0, url.lastIndexOf('.html'));
    return (frontUrl + '-' + currentPageNumber + '.html');
    <!--/category_area-->
    <!--date_area-->
    var url = location.href,
        frontUrl = url.substring(0, url.lastIndexOf('.html'));
    return (frontUrl + '-' + currentPageNumber + '.html');
    <!--/date_area-->
    <!--search_area-->
    var url = location.href;
    return (url + '&page=' + currentPageNumber + '');
    <!--/search_area-->
    <!--tag_area-->
    var url = location.href;
    return (url + '&page=' + currentPageNumber + '');
    <!--/tag_area-->
    <!--not_category_area--><!--not_date_area--><!--not_search_area--><!--not_tag_area-->
    return ('<%url>/page-' + currentPageNumber + '.html');
    <!--/not_tag_area--><!--/not_search_area--><!--/not_date_area--><!--/not_category_area-->
  }
});

これで大丈夫、なはずです。改善点としてはcurrPage: 0とすることで1ページ目が『0』番目というFC2ブログの仕様に沿わせたことが一つ。そしてpath:にはカテゴリ別、月別、検索結果、タグ検索結果、ページ別の各URLを最適化して指定しました。

ただし、例えばあるカテゴリの3ページ目にいきなり飛んだ状態から同じくロードしようとするとできないと思われるので、まだ完璧ではありません。一応、カテゴリ別、月別、検索結果、タグ検索結果、ページ別の最初のページから順次ロードが可能となっただけです。

クリックでロードさせたい場合（オプション）

以下を追記することでクリックで次の記事がロードされます。一旦、.infscrの処理を取り消し、#next-page aがクリックされると再び処理を開始します。

JavaScript

$(window).unbind('.infscr');
$('#next-page a').click(function(){
  $('#items').infinitescroll('retrieve');
  return false;
});

関連商品