カテゴリー: 加工以外のこと

もはや、タイトルが日本語として正しいのかどうかも分からないくらい、JavaScriptが苦手ですが、社内システムを使ってもらうため、果敢に挑戦中です。

弊社では、過去の図面を検索するときに、WEBにPDFを埋め込んで検索結果として表示していますが、検索結果が多いと、PDFを開くのに時間がかかってしまい、待ちくたびれてしまうので、今回タイトルにあるように、jQueryとInfinite Scrollを使って、小分けにして読み込むように改修しました。

なぜInfinite Scrollを使うのでしょうか？

それは、「無限スクロール」で検索したら、ぽろぽろヒットしてきたからです。「Infinite Scrollなんて今さら・・・」みたいな情報も見た気がしますが、お構いなしです。今どきのやり方は見つけられなかったし・・・。とりあえず、機能が実現できればいいかなということで。

で、WEB上のサンプルコードにお世話になりながら、社内システムにコードを追加して動かしてみましたが、全く動きません！Chromeの「検証」で確認してみると「infiniteScrollなんて関数定義されてないよ」的なエラーを出していました。結構、悩んでいましたが、一向に動く気配を見せないので、Infinite Scrollの公式サイト（英語）を見たら、あっさり解決してしまいました。

いつからか知りませんが、 infiniteScrollで指定するOptionの名称が変わっているようで、それが原因のようです。私が参考にしていたサンプルコードはちょっと古かったようで、公式サイト（英語）のサンプルを参考にしたら動いてくれました！
というわけで、備忘録代わりに。

まずは、HeaderタグにjQueryとInfinite Scrollのjsファイルを指定してあげて、

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>

Bodyタグの最後の方にInitialize処理を記述してあげます

<script>
$('.container').infiniteScroll({
  // options
  path: 'getDrawDataAsyncInfinite.php?page={{#}}', //スクロールしたら読み込む要素とかファイル名とか関数とか。{{#}}を使うと1ずつ増えていきます。左のサンプルでは「getDrawDataAsyncInfinite.php?page=1」、「getDrawDataAsyncInfinite.php?page=2」、「getDrawDataAsyncInfinite.php?page=3」・・・となっていきます。
  append: '.scroll_post', //出力する要素。<div class="scroll_post">...</div>となっていれば、この範囲内を表示してくれます。
  checkLastPage: '.pagination__next', //ここで指定した要素が存在するかどうかで、最後のページかどうかチェックしてくれます。
});
</script>

他にも便利なOptionがあるので、Infinite Scroll – Optionsを参考にしてください。

あとは、指定した内容に沿って、htmlやPHPを編集します

...
<div class="scroll_post">
    ...//この部分がスクロールしていくと表示されます
    if ( ここが最後のページでなければ ) {
        //checkLastPageで指定したクラスのタグを出力しておきます。
        <p><a class="pagination__next" href="getDrawDaraAsyncInfinite.php"></a></p>
        //Pathにファイル名を指定した場合は、hrefの内容は適当でOKです。
    }
</div>

私の英語に対する苦手意識のせいで、時間を浪費してしまいました。英語もっと頑張ります。・・・頑張りたい。