スポンサーサイト

--/--/--
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
comment (-) @ スポンサー広告

Infinite Scroll

2016/03/27
FC2ブログで、Twitterのような次ページを自動で読み込むjQueryが無いかと探してました。
最初は、『autopager』で探していたんですが、思うような記事が見つけられませんでした。
ので、似たような『Infinite Scroll』だと、ヒットしました。

[JS] FC2ブログでも無限スクロールができちゃうjQueryプラグイン 【改訂版】|GIXDLOG
http://meduro.blog.fc2.com/blog-entry-29.html

ウーン、よく分かりませんが、これなら動きそうです。
と、思ってページを見たままコピペしてみました。
jsファイルはこちらのサイトよりお借りしました。2016/03/27
paulirish/infinite-scroll
https://github.com/paulirish/infinite-scroll

html

記事内容
jQuery
$('#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){
    
    var url = location.href,
        frontUrl = url.substring(0, url.lastIndexOf('.html'));
    return (frontUrl + '-' + currentPageNumber + '.html');
    
    
    var url = location.href,
        frontUrl = url.substring(0, url.lastIndexOf('.html'));
    return (frontUrl + '-' + currentPageNumber + '.html');
    
    
    var url = location.href;
    return (url + '&page=' + currentPageNumber + '');
    
    
    var url = location.href;
    return (url + '&page=' + currentPageNumber + '');
    
    
    return ('<%url>/page-' + currentPageNumber + '.html');
    
  }
});
………?
既にこの段階でつまずきました。
そもそも、Infinite Scrollは次ページのどこを読み込んでいるものなのか、私は分かりませんでした。

ので、私は記事内容のところ全てにhtmlすべてを放り込むという愚策を行いましたが、当然動かない。

ウーン、これは次ページのhtmlすべて丸々読み込んでいるのでしょうか?
なら、トップエントリーの変数( <!--topentry-->)これだけじゃあ足りないよなぁ、という考え故の行動です。
そんな訳がなかったですね。

記事内容は、無論自ブログの<!--topentry--><!--/topentry-->内に収まっているhtmlの事です。
次ページで読み込みたい部分だけを#itemで包んでます。とても分かりやすいですね。

さて、なら、話が早いですね。
topentryの変数以外をコピペして、貼り付けました。

as.gif

スクロールしないと無いので画像では見えませんが、下の方js読み込み様のタグも貼っています。
これで自動ページ読み込みが出来た筈です。

が、ページを読み込んでみたところ…

ウーン、動かない。
まったく動かない。
スクリプトのエラーを吐きだす文字すらない。

という事は、スクリプト自体が読み込まれて無いのかも?
と思いまして、試しに先ず、動くのかやってみました。

<script>
$('#items').infinitescroll({
navSelector : "#next-page",
nextSelector : "#next-page a",
itemSelector : "#items",
dataType : "html",
});
</script>

これだと、問題なく動いたのですが、2ページ目を読み込みませんでした。
このJSを紹介して頂いてるブログさんの改訂後の文章に納得してみたり。

まぁ、読み込みは正常に済んでるみたいなので、思い当たる原因といえば、Infinite Scrollのバージョン違いぐらいでしょうか。
という訳でググってみたところ、下記のブログさんへ辿り着きました。

[jQuery]infinitescrollが正しくpage番号をincrementしてくれない件への対処|ARKの技術メモ
http://arkmemo.blogspot.jp/2013/04/jqueryinfinitescrollpageincrement.html

うーんうーん。 とりあえず、よく分からないのですがハイライトされている記述を追記すればいけるだろうか。という安直な理由で、意味すら分からず追記。(まぁ、間違ってたら読み込まないし、動かないし、最悪ブログの表示がされなくなるだけじゃないか、という解釈)

そしたら無事、動きました。
問題なく2ページ移行も読み込めてます。

最終的にタグはこうなりました。
はっきり言って、動けばいいやぐらいの感覚じゃないと不味いかも知れないです。
私のブログのような1カラムの単純な構成では動きましたが、他のレイアウトだとどうなるか分からないです。
まぁ私は動けばいいんですけどね。
comment (0) @ Tips
タイトルなし | タイトルなし

comment

コメントを送る。

URL:
Comment:
Pass:
Secret: 管理者にだけ表示を許可する
 

Girafe

日常。たまにテンプレート配布していたりします。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。