不正なアタックだと誤解されない為にも、画像付きの過去の投稿の履歴一覧を遅延表示しますか？



  • 外部URLを参照するアイ・キャッチ静止画（英語版WordPress: featured image） 参照元を見る。 利用に感謝！
  • 見出しタグに動画GIF(24.6KB)をEMBEDし、専用favicon(1.12KB)を設定しています。参照元を見る_。 利用に感謝！

プリプロセッサー

直前の記事： 「記事内のIMGタグ要素をブラウザー表示前に変更できる！」の、おさらいです。 筆者のWordPressのサイドメニューに実装したウィジェトです。 直前の記事で話題にしました、プリプロセッサーのみを以下のiFrameに実装しただけです。プリプロセッサーが担っている役目とは、表示するを押すと外部JavaScriptファイルを読み込み、読み込んだJavaScriptHTMLデーターから、画像を全て縦横３ピクセルの透過GIF画像に置き換えています。あなたのブラウザーでは如何でしょうか？ プリプロセッサーのみですが、正常に機能していますか？ 正解は：「表示するをクリックすると文字だけが表示される。」

ステップアップテスト

同じく、筆者のWordPressのサイドメニューに実装したウィジェトです。 前段の項目と同じプリプロセッサーを以下のiFrameに実装し、デフォルメ気味のポストプロセッサーをテスト用に追加しています。

  1. iFrame内の表示するを押すと、HTMLデーターを流し込むJavaScriptファイルを読んで、そのJavaScriptファイルに定義されているメインの関数内で起動されるポストプロセッサーはゼロ秒後に活動します。
  2. window.addEventListener( "scroll", function(){} )
    iFrame内のスクロールの検出は１秒ごとに処理されます。
  3. window.addEventListener( "scroll", function(){} )
    iFrame内のスクロールの検出によって、一つの画像毎に処理します。
  4. 直前のwindow.pageYOffsetと比較して：
    iFrame内のスクロールの方向を検出し、上から、又は下から、一つの画像毎に処理します。 以下のポストプロセッサーで機能すれば面白い表現になるかも知れません。
関数内でローカル配列変数を利用して、window.addEventListener()を処理しています。 ローカル配列変数を利用した運用が良い結果を生んでいます。 あなたのブラウザーでは如何でしょうか？ 正常に機能していますか？ 正解は：「表示するをクリックすると最初文字だけが表示されるが、iFrame内をスクロールすると、画像を１つ毎に表示される。但し、スクロール方向を逆転すると、最下段の画像から上方向に処理される。」

ポストプロセッサー

同じく、筆者のWordPressのサイドメニューに実装したウィジェトです。 前段の項目までは、Ｙ軸方向の判定が抜けていました。 判定の為のＤＩＶタグを追加し、このポストプロセッサーでは判定処理を行っています。 判定領域内の画像を一気に表示させています。

  1. <div id="BaseDiv4Lasy" style="margin:0;padding:0;border:0;width:110%;position:fixed;top:50px;left:-10px;right:-10px;bottom:50px;border:dotted pink;" border=1></div>
    各画像の近接関係を測定する為の基礎となる矩形を、iFrame内のスクロールに全く影響しない position:fixed; で事前に定義しておく。 この定義はiFrameタグ内デバッグ用の専用DIVタグです。 定義した場所はJavaScriptファイルを読み込む為の静的HTMLファイル内の<BODY>タグの直下です。 今回はiFrameの上下に50ピクセルづつの余白を空けたが、本番では適宜 position:fixed; 配下の<DIVタグ内の各パラメーターで調整可能。 デバッグなので、色はピンク色としたが、本番では無色が良いだろう。 別に矩形に囚われない。 一本の縦線で良いだろう。 広さのあるDIVタグを指定すると「クリック出来ない」などの迷路に入り込む。
  2. 画像の判定は３種類を想定している。関数内で新たなローカル関数を定義し、その関数で判定しています。
    function Judge2021(BaseDiv,IMGELM){} 後述で紹介しています。
    1. 画像の上部頂点( element.getBoundingClientRect().top )以後TOPと称す。 TOPが id="BaseDiv4Lasy" の、内側に存在する場合。
    2. 画像の下部頂点( element.getBoundingClientRect().bottom )以後BOTと称す。 BOTが id="BaseDiv4Lasy" の、内側に存在する場合。
    3. 画像のTOPが、 id="BaseDiv4Lasy" の、上側に存在し( <= )、尚且つ、画像のBOTが、 id="BaseDiv4Lasy" の、下側に存在する場合( >= )。
    SONY PlayStation4 の、ブラウザーで本記事を表示し、正常に機能していることを確かめながら、右スティックを押し込むと、PS4では拡大します。 タブレットやスマートフォン程の自由度はありませんけど、記事の列だけを画面いっぱいに拡大できます。 すると、画面には表示されていないけれども、表示されていない右側サイド・バー・メニューの画像は、スクロールすると次々と表示される。 これを解決するには、X座標の領域判断が必要となります。 しかしながら、当初のコンセプトが、外部サイトへの「悪意ある接続者と認識されたくない！」ですので、X座標の領域判断は今は除外することにしました。
  3. window.addEventListener( "scroll", function(){} )
    iFrame内のスクロールの検出は１秒ごとに処理されます。
  4. window.addEventListener( "scroll", function(){} )
    スクロール検出によって、順方向の場合は上から、逆方向を検出したら下から画像を順次表示します。
関数内でローカル配列変数を利用して、window.addEventListener()を処理しています。 ローカル配列変数を利用した運用が良い結果を生んでいます。 あなたのブラウザーでは如何でしょうか？ 正常に機能していますか？ 正解は：「表示するをクリックすると最初文字だけが表示されるが、iFrame内をスクロールするとピンク色の点線領域付近に近付く画像だけが表示される。但し、スクロール方向を逆転すると、ピンク色の点線内に接触する最下段の画像から上方向に処理される。」 DIVタグや画像には目に見えない余白があり、厳密にはピンク色の点線領域に近接すると該当処理対象画像となります。

後から読み込まれるJavaScriptファイル内の、メインである関数内で定義した、今回のプリプロセッサーと、その直後に追加したポストプロセッサーは次の通りです。 JavaScriptファイルを読み込む静的HTMLファイルの構文には、<span id="RecentPosts2020">と言うSPANタグのセットが存在する！ このSPANタグの内側にJavaScriptファイルのHTML構文を記憶したローカル変数「 Junk2020 」を流し込む。 プリプロセッサーについては、直前の記事： 「記事内のIMGタグ要素をブラウザー表示前に変更できる！」を参照ください。

2021/11/24 09 05 09:35 06:30 09:30 8:00 A.M. JST 更新
[ 米1ドルで十分です。ありがとう！] 筆者： Ujiki.oOへの寄付_
関数内の、ローカル関数名やローカル変数名は、YUICOMPRESSORで一次圧縮する段階で、全て１文字に置換されますので、気にせずファニーな名前で運用します。

開発後の感想

座標についてインターネット検索してみて、多くの似通った記事があるが、ブラウザーの画面の原点からの距離を気にすると、迷路に入り込む。 どんな古いブラウザーでも正確にレポートすることに気を取られてしまう。 確かに訪問者のブラウザーの古さや亜流度は気になるが、今回の開発時における迷走と、その後の新たな発見と成功は、 .getBoundingClientRect() だけを利用したところにある。 各ブラウザーの互換性: (Element.getBoundingClientRect() - Web API | MDN)_
それと、

<div id="BaseDiv4Lasy" style="margin:0;padding:0;border:0;width:110%;position:fixed;top:50px;left:-10px;right:-10px;bottom:50px;border:dotted pink;" border=1></div>と、言う
ある意味、静的HTML構文の事前設定を思いつくことで、簡単に基準矩形を設けることが可能となり、諸問題を突破できた！ 但し、 .getBoundingClientRect() に、固執する訳なので、 .getBoundingClientRect() を利用できるブラウザーなのかを判定し、仮に利用できない古いブラウザーであったなら、何らかのメッセージを残すしかない。例えば：
「新しい機種を購入するか、新しいブラウザーに更新してください」と
表示しますか？

typeof document.getElementsByTagName( "body" )[ 0 ].getBoundingClientRect() : object

function Judge2021(BaseDiv,IMGELM)
[ 米1ドルで十分です。ありがとう！] 筆者： Ujiki.oOへの寄付_
function Judge2021をyuicompressorで一次圧縮しました。

サイドバーメニュー

2021/11/06 11:00 a.m. JST 目下、テストとして、WordPressのサイドバーメニュー内の、「静的 – 最近の記事」について、プリプロセッサーとポストプロセッサーを機能させています。

同じブラウザーで、30日以内の再訪問の場合、既に保存されているキャッシュデーターを再利用しますので、ブラウザーのキャッシュをリセットするか、ブラウザーのシークレットウィンドで再訪問願います。
特徴は以下の通りです。
  1. 緑の楕円で縁取られた「表示する」をクリックすると：
  2. .getBoundingClientRect()が機能しない亜流のブラウザー、または古いブラウザーの場合は：
    プリプロセッサーとポストプロセッサーを実行しません。 つまり、従来の通り一気に全ての画像を表示します。 警告文を前後に表示します。
    警告文
    あなたさまのブラウザーが遅延読み込み(英語: Lazy loading)が機能しません。 地球温暖化に知らぬ間に加担していることになりますでしょう？ 過去記事： 「プロキシーサーバーを利用することは馬鹿なことか？！」を、_読んで下されば、インターネット通信で無駄で無用なパケットを浪費することも地球温暖化に加担していることになりますでしょう？
    最終的には、.getBoundingClientRect()が機能しない亜流のブラウザー、または古いブラウザーの場合、プリプロセッサーだけを機能させて、画像を１つも表示させない仕様に変更する計画です。
  3. この記事に限定して、右端に赤色の縦線が表示されます。
    頑張って全ての画像を表示すれば、赤バーが消えて、removeEventListener()が機能します。
  4. 右端に(赤色の)縦線は、ブラウザーの画面の上下に、それぞれ５０ピクセルの余白があります。 この余白を除いて、画像を認証し、表示します。
  5. 上から下へスクロールした場合は、上から表示し、下から上へスクロールした場合は、下から表示します。
    画像は、個々の容量によって、また相手のサーバーの混雑さによって、そしてインターネット回線スピードによって、それら表示速度は様々です。

本体

iFrameはここに置いておきます。 さて、この記事を制御しましょう。 以下の構文を、追記用のJavaScriptファイルの関数外の先頭に定義します。

関数外の先頭に定義しましたが、YUICOMPRESSORで一次圧縮すると、YUICOMPRESSORの最大の特徴である一行化を行います。以下の様に一行化されます。

if(typeof BaseDiv4Lasy_=="undefined"){var BaseDiv4Lasy_}BaseDiv4Lasy_="BaseDiv4Lasy2022";document.write('<div id="'+BaseDiv4Lasy_+'" style="margin:0;padding:0;width:5px;position:fixed;top:50px;left:0;right:3px;bottom:50px;border-style:outset;border-color:gray;" border="1"></div>');
もう治ったのなら良いのですけど、Google製のJSコンプレッサーだとバグがあって、関数外の typeof で用いる変数名を、勝手に一文字に変換していました。 流石にYahoo!のYUICOMPRESSORは正常です！
[ 米1ドルで十分です。ありがとう！] 筆者： Ujiki.oOへの寄付_

記事本文、記事の追記について、そのIMGタグとIFRAMEタグの遅延化につきましては、次の記事に譲ります。 コンセプトは「ブログの種類に束縛されない遅延読み込み(英語: Lazy loading)の実装」です。 WordPress、MovableType、プロバイダーが提供している無料ブログで、等しく遅延読み込み(英語: Lazy loading)を実現させることです。 記事本文の遅延読み込み(英語: Lazy loading)が叶いましたら、そのJavaScriptファイルをダウンロード出来る様にしましょうか？

FACEBOOK(Meta)

FACEBOOK(Meta)には画像をアップロードしていません！ WordPressにも画像は一切アップロードしていません！ FACEBOOK(Meta)の画像を変更する場合は、WordPressのカスタムフィールド内のURL値を変更し、FACEBOOK(Meta)で更新するだけです。 つまりFACEBOOK(Meta)の画像をリプレースするのは簡単です。 応援よろしくお願い致します！
FACEBOOK(日本語)
ここに表示

FACEBOOK(ASCII)
ここに表示
この項目はFacebook(Meta)が公開している共有機能を、そのまま利用しています。 であるにも関わらず、表示できない有名ブラウザーがあります。 それらブラウザーとは、表示できないのではなくて、表示させない処理を故意に行っている有名ブラウザーがあると言う意味です。 ことはFaceboookに限定しません。 様々なオープンな情報をブラウザーが、あなたに対して見えなくしている事実が問題です。 みなさんが、どのブラウザーを利用することについて、それは自由です！ 著者は決してブラウザーについての選択について推奨はしませんが、このFacebookが表示されない現象を確認できたのなら、他のブラウザーを是非、試用してみてください！ 気になる方は、過去記事「レスポンスを崩さない広告の埋め込みを考えない？」の項目「Facebookの EMBED」に_移動してみてください。移動先には、WikiPediaが公開している有名ブラウザーの使用者数の推移グラフもあります。 きっと、あなたはブラウザーが抱える闇を知るでしょうか？！以下が Facebookの </>埋め込み機能を利用したコンテンツです。 あなたを含めて、訪問者がアクションを起こさない限り、 Facebookサーバーとの通信は一切起きません。 この記事に訪問しただけではFacebookサーバーとの通信は一切起きませんので、Facebookサーバーと、あなたの端末のブラウザーまでのネットワーク上の、あらゆる無駄な電力を消費しません！ FACEBOOK(Meta)には画像をアップロードしていません！ WordPressにも画像は一切 アップロードしていません！ FACEBOOK(Meta)の画像を変更する場合は、WordPressのカスタムフィールド内のURL値を変更し、FACEBOOK(Meta)で更新するだけです。 つまりFACEBOOK(Meta)の画像をリプレースするのは簡単です。 応援よろしくお願い致します！

記事の改訂の告知について

DISQUSコメントで案内します。

DISQUSコメントにログインし、DISQUSコメント枠の一番下段の左端のメール・シンボルをクリックすれば、DISQUSコメントがあれば自動的にメールで知らせてくれます。 再度クリックすれば、メール通知を停止できます。 記事末尾のDISQUSコメントの表示が小さくてスレッドのデザインが狭過ぎると思うなら、DISQUSコメント本尊に接続_してみてください。


サポートが必要ですか？


Support AIt's free and fastSupport BIt's free and fastSupport CIt's free and fast

「無料サポート」に興味があれば
上の丸ボタンをクリック願います。
サーバーから9kbを受信しますのでお待ち願います。

※ 記事本文は別サーバーから JavaScriptファイルとして配信しており、配信元のサーバーにおける JavaScriptファイル(YUICOMPRESSOR済み)も、実際にあなたのブログが受信する gzip圧縮済みの JavaScriptファイルも、３０日間のキャッシュ流用を定義していますので、特にご質問の前にブラウザーのキャッシュを削除してから、再度のご訪問と閲覧をお願い致します。
※ DISQUSについては別管理ですので、毎回、最新のDISQUSを表示できています。 但し、ご自分のDISQUSコメントを編集した直後に編集後の内容に至らない場合がありますが、DISQUS表示の上部にある「あなたの言語でDISQUSメニューを再表示する！」をクリックしますと最新の状況を表示致します。 宜しくご理解願います。
※ どれだけ待ってもDISQUSが表示されない場合は「広告ブロック」機能を切ってみて下さい。
Google Translator.

良いブログと利用できないブログ


  • CLICK!