ページ無限スクロールの作り方 #インフィニティ#InfinityPageScroll #JavaScript

2022.09.22

Logging

おはようございます、台風１４号が過ぎ去ってからいきなり秋模様ですね🫠。

さて、先日ツイートしたページ無限ループが出来るJavaScriptコードを書きました。これを作ろうと思ったキッカケは、自分が運営しているWordPressサイトに巷のページ無限スクロールプラグインが尽く（ことごとく）使用出来なかったので自分で自作した訳です。因みにページ無限スクロールプラグインとはページを送りをしなくてもページの最下までスクロールすると次頁を読み込んでくれるプラグインの事を指します。

下記のコードは自サイト専用なのでそのまま使用することは出来ませんが、重要な部分だけ抜き取って再利用すれば、独自のページ無限ループに対応することは可能かと思います。

コードを読んで頂ければ分かることですが、重要なポイントはページを読み込む方法とそれをDomに変換する方法だと思います。まず、ページを読み込む方法は下記のファンクションで可能です。

fetch(next_url).then(
                response => response.text()
            ).then(data => {

そしてDomに置き換えている所はこの部分になります。これら２つの箇所が重要になります。

                const parser = new DOMParser();
                const doc = parser.parseFromString(data, 'text/html');

これらの事に注意して独自コードを書いてみてください。最後に全コードを記載しときます。


let cnt = 2;
let blk = 0;
async function nextpage() {
    if (cnt !== blk) {
        blk = cnt;
        await (async () => {
            let next_url = "https://fox-black.com/blog/page/" + cnt;
            return await fetch(next_url).then(
                response => response.text()
            ).then(data => {
                const parser = new DOMParser();
                const doc = parser.parseFromString(data, 'text/html');
                let blogs = doc.querySelectorAll('.blogpage');
                cnt++;
                if (blogs[0].innerHTML !== undefined) {
                    document.querySelector(".foxpage").insertAdjacentHTML("beforeend", (function (elm) {
                        let str = "";
                        for (const key in elm) {
                            const element = elm[key];
                            if (element.innerHTML !== undefined) {
                                str += "<div class=\"blogpage\">" + element.innerHTML + "</div>";
                            }
                        }
                        return str;
                    })(blogs));
                } else {
                    if (document.querySelector("#fin") === null) {
                        document.querySelector(".foxpage").insertAdjacentHTML("beforeend", "<div id=\"fin\"></div>");
                    }
                }
            }).catch(error => {
                if (document.querySelector("#fin") === null) {
                    document.querySelector(".foxpage").insertAdjacentHTML("beforeend", "<div id=\"fin\"></div>");
                }
            });
        })();
    }
}

if (navigator.userAgent.match(/iPhone|Android.+Mobile/)) {
    window.addEventListener("scroll", async function () {
        let s = (() => {
            let tgt;
            if ('scrollingElement' in document) {
                tgt = document.scrollingElement;
            } else if (this.browser.isWebKit) {
                tgt = document.body;
            } else {
                tgt = document.documentElement;
            }
            return tgt;
        })();
        if (document.querySelector("#fin") === null && s.scrollTop >= (s.clientHeight - 650)) {
            await nextpage();
        }
    });
} else {
    document.querySelector(".foxpage").addEventListener("scroll", async function () {
        if (document.querySelector("#fin") === null && document.querySelector(".foxpage").scrollTop >= (document.querySelector(".foxpage").scrollHeight - 300)) {
            await nextpage();
        }
    });
}

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2022年09月22 06:00日

タグ

14, dom, InfinityPageScroll, javascript, WordPress, インフィニティ, キッカケ, コード, こと, これ, サイト, スクロール, それ, ツイート, プラグイン, ページ, ポイント, ループ, 下記, 事, 作り方, 使用, 先日, 利用, 可能, 台風, 変換, 対応, 専用, 巷, 方法, 最下, 模様, 次頁, 無限, 秋, 自, 自作, 自分, 訳, 運営, 部分, 重要,

今年、映画館で観た映画達。来年も映画館で映画が観れますように！

2021.12.30

Logging

今年もあと一日とちょっとですね、さて今年映画館で観た映画を列挙してみました、無職なのに結構、映画を見ているなと関心すらしてしまいます。この映画代、基本的にペイペイポイントや楽天ポイントなどを利用して見ているものが大半なんですね。そう思うと運用って凄いなと思います…。

  • さんかく窓の外側は夜
  • ヤクザと家族　Ｔｈｅ　Ｆａｍｉｌｙ
  • すばらしき世界
  • 花束みたいな恋をした
  • シン・エヴァンゲリオン劇場版
  • 騙し絵の牙
  • るろうに剣心　最終章　Ｔｈｅ　Ｆｉｎａｌ
  • ＨＯＫＵＳＡＩ
  • るろうに剣心　最終章　Ｔｈｅ　Ｂｅｇｉｎ
  • 竜とそばかすの姫
  • （字）レミニセンス
  • （字）００７　ノー・タイム・トゥ・ダイ
  • （字）ＤＵＮＥ／デューン　砂の惑星
  • （字）マトリックス　レザレクションズ

今年観た中で良かった映画は、やっぱり （字）マトリックス　レザレクションズですね?。二番目に良かったのは シン・エヴァンゲリオン劇場版、次に騙し絵の牙と続きます。一番、駄目だった今年の映画はありません、また三番目以外の映画も全然悪くはなかったですよ。ベスト１，２とどちらかと言えばヲタク系映画だと思いますが、やっぱ良かったですね、映像もストーリーも間違いなく良かったです?、因みに三番目に良かった映画、騙し絵の牙も１，２に劣ることはないぐらい良い出来の映画でした。

映画『騙し絵の牙』【予告編】大ヒット上映中！

騙し絵の牙はネットフリックスやアマプラで見れるようになっているので劇場で見れなかった人はこの正月休みに観てみてはどうでしょうか。ラストまで楽しめる映画になっていますよ！！

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2021年12月30 06:00日

タグ

007, Ｂｅｇｉｎ, DUNE, Family, ＦｉｎａｌＨＯＫＵＳＡＩ, The, エヴァンゲリオン, さんかく, シン, そばかす, だい, タイム, デューン, ドゥ, ノー, ペイ, ポイント, マトリックス, もの, ヤクザ, るろう, レザレクションズ, レミニセンス, 一, 世界, 中, 二番目, 今年, 列挙, 利用, 剣心, 劇場, 外側, 夜, 大半, 姫, 字, 家族, 恋, 惑星, 映画, 映画館, 最終章, 来年, 楽天, 無職, 牙, 砂, 窓, 竜, 絵, 花束, 運用, 関心, 駄目,

クロスプラットフォーム開発（アプリ）をPythonで行う。

2021.05.21

Logging

PyQt5でクロスプラットフォーム開発（アプリ）を行う事が出来るだってさ。ただし、PyQt5は商用利用に縛りがあるのだとか、個人で使用する分には問題なしだということ。CSSとPythonの記述が分かっていればそれほど難しくない難易度かと自分は下記の動画を見て思いました。

Create GUI App with PyQt5 – PART 1
pip install PyQt5

Python：パイソンがインストールしている環境で上記のコマンドを打つことでPyQt5はインストール可能です。あとはコードを書いて実行するだけでアプリが実行されます。

PyQt5の使い方を解説している人がいます。リンク先のように書けばチェックボックスなども設置可能です。因みにコードを一々書くのは面倒だという方はQt Designerと連携することでGUIの設計は楽になると思います。
環境構築を説明しているリンクを貼っときます。こちらでPyQt5のプログラムを使用しQt Designerで開発を行えます。

この頃はクロスプラットフォーム開発も多様化していろいろな言語で開発ができるようになってきてますね。楽になったものだと・・・。

追伸：商業利用でクロスプラットフォーム開発が行いたい場合はPySideを使用するべしです。理由はこちら
https://www.kimoton.com/entry/20181202/1543724518

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2021年05月21 04:33日

タグ

5, css, Designer, GUI, install, pip, PyQt, Python, Qt, あと, アプリ, インストール, えま, クロス, コード, こちら, こと, コマンド, チェック, パイソン, プラットフォーム, プログラム, ボックス, リンク, 上記, 下記, 事, 人, 使い方, 使用, 個人, 分, 利用, 動画, 可能, 商用, 実行, 方, 構築, 環境, 縛り, 自分, 行, 解説, 記述, 設置, 設計, 説明, 連携, 開発, 難易, 面倒,