H1タグの為の第二世代プリプロセッサーとポストプロセッサー

画像だけの遅延表示は過去の記事の通り、WordPressのサイドバーメニューで実現させましたが、それを第一世代のプリ・ポスト・プロセッサーとします。さて、WordPressブログに関わらず、広く様々なブログの追記記事内で機能する新しい遅延表示機能を開発します。第一弾は：「Ｈ１タグ」についてです。

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

WordPressだけでなくて、MovableTypeに止まらず、有名な無料ブログでも機能します！この記事でも、本記事の最下段に、DISQUSコメントが表示されますが、記事を完全にミラーリングしている複数の無料ブログをハイパーリンクとして紹介中です。あなたも利用している有名ブログがありましたか？本記事で実現している機能は、ブログに止まりませんよね。あなたのホームページでも機能しますよね。あなたなら、ここに汎用性を感じませんか？！

これから開発するプリ・ポストプロセッサーの共通仕様を忘れ易い筆者の為にまとめておきます。

クッキーを利用して、デバッグ表示に切り替えられる様にする。
プリ・ポストプロセッサーを機能させないフラッグとして、特別なクッキーを制御させます。但し、寿命はブラウザーを終了させるまでとして、クッキーが存在しなければプリ・ポストプロセッサーを機能させる。筆者のデバッグ用ですね。共同開発者や、それぞれのブログのオーナー用ですね。
この記事では「Ｈ１タグ」専用のプリ・ポストプロセッサーを稼働させるが、
タグ毎の制御を積み木の様に、加算できるように、機能をＯＦＦにする特別なパラメーターによって、特定のタグ専用のプリ・ポストプロセッサー機能をＯＮ／ＯＦＦ可能にする。
外部JavaScriptファイル化する。
外部JavaScriptファイル化して、タグ毎のプリ・ポストプロセッサーを、外部JavaScriptファイル呼び出し構文を記事内でコメントアウトしたり、外部JavaScriptファイル呼び出し構文を追加したり出来る様にする。

過去記事：「記事内のIMGタグ要素をブラウザー表示前に変更できる！」から始まる、ブログの記事は、JavaScriptファイルで外部から提供することを基礎としている。また、追記用のJavaScriptファイルで実現させる。

YUICOMPRESSORによる一次ダイエット処理を意識して、２つの目的のためのHTML構文をJavaScriptソースで定義する。

if(typeof BaseDiv4Lasy_ == "undefined") var BaseDiv4Lasy_ ;
BaseDiv4Lasy_ = "BaseDiv4Lasy2022" ;
document.write('<div id="' + BaseDiv4Lasy_ + '" style="margin:0;padding:0;width:5px;position:fixed;top:100px;left:0;right:3px;bottom:100px;border-style:outset;border-color:green;" border="1"></div>');
if(typeof BaseBody4Lasy_ == "undefined") var BaseBody4Lasy_ ;
BaseBody4Lasy_ = "BaseBody4Lasy2022" ;
document.write('<span id="' + BaseBody4Lasy_ + '"></span>') ;

グローバル変数： BaseDiv4Lasy_
領域の設定用のDIVタグのIDです。過去記事：「WordPress 最近の記事の表示を独自手法で遅延表示させたい？」で詳細を解説しています。
グローバル変数： BaseBody4Lasy_
プリプロセッサーで処理後のHTMLデーターが流し込まれるSPANタグのIDです。追記用のJavaScriptファイルに定義された関数の外部、先頭に定義し、追記用のJavaScriptファイルに定義された関数でHTMLデーターを積み上げられた関数内ローカル変数を流し込みます。その基準となるIDを宣言します。

Ｈ１タグ専用のプリプロセッサーです。関数の最後尾に埋め込みます。ＨＴＭＬデーターは： Junk2020 に、埋め込まれています。

/*********************************************************************************************
	Pre-Processor	H1	Ver1.0 2021/11/15
	//w.fs4y.com/secondgenerationpreprocessorandpostprocessorforh1tags/#bg-video
**********************************************************************************************/
var	arr_H1class2021 = new Array() , arr_H1inner2021 = new Array()
,	element = document.createElement("span")
,	Rep2021 = "//miroir.fs4y.com/motpressevotrespac/images/Savior.gif"
,	i , j
	element.innerHTML = Junk2020
	Junk2020 = null
var	Junk2021 = element.getElementsByTagName("h1")
for(i=0 ; i < Junk2021.length ; i++){
	arr_H1class2021[ i ] = ""
	if(Junk2021[ i ].className == " " ){
		Junk2021[ i ].className = ""
		continue
	}
	arr_H1class2021[ i ] = Junk2021[ i ].className
	Junk2021[ i ].className = ""
	arr_H1inner2021[ i ] = Junk2021[ i ].innerHTML
	Junk2021[ i ].innerHTML = " "
}
/*********************************************************************************************
	Pre-Processor
**********************************************************************************************/

YUICOMPRESSORで一次ダイエットしますと、関数内のローカル変数名は全て１文字に置換されます。 #https://flic.kr/p/8Xc5c8

Ｈ１タグ専用のポストプロセッサーです。プリプロセッサーの直後に埋め込みます。

/*********************************************************************************************
	Post-Processor	H1	Ver1.0 2021/11/15
	//w.fs4y.com/secondgenerationpreprocessorandpostprocessorforh1tags/#bg-video
**********************************************************************************************/
if((typeof document.getElementsByTagName("body")[0].getBoundingClientRect()) == "object"){// 1
var Z=document.getElementById( BaseBody4Lasy_ )
if(Z){// 2
var	timeoutId , START2021 = 0 , JUDGE2021_ = true , Yvalue = 0 , clientRect
,	BaseDivRect, IMGELMRect , Y
	Z.innerHTML += '<span id="NewElement2021">' + element.innerHTML + '</span>'
	Junk2021 = Z.getElementsByTagName("h1")
var	END2021 = Junk2021.length
,	p , q
	function Judge2021(BaseDiv,IMGELM){// 3
		BaseDivRect = BaseDiv.getBoundingClientRect()
		IMGELMRect = IMGELM.getBoundingClientRect()
		if(IMGELMRect.top <= BaseDivRect.top && IMGELMRect.bottom >= BaseDivRect.bottom)
			return true
		if(IMGELMRect.top >= BaseDivRect.top && IMGELMRect.top <= BaseDivRect.bottom)
			return true
		if(IMGELMRect.bottom >= BaseDivRect.top && IMGELMRect.bottom <= BaseDivRect.bottom)
			return true
		return false
	}// 3
	function DispImg2021b(){// 3
		if ( timeoutId ){// 4
			if( JUDGE2021_ ){// 5
				JUDGE2021_ = false
				for(p = START2021 ; p < END2021 ; p++){// 6
					if(arr_H1class2021[ p ] != ""){
						START2021 = p
						break
					}
				}// 6
				for(q = END2021 - 1 ; q > -1 ; q--){// 6
					if(arr_H1class2021[ q ] != ""){
						END2021 = q + 1
						break
					}
				}// 6
			}// 5
			if(p >= q){// 5
				for(i = 0 ; i < Junk2021.length ; i++){// 6
					if(arr_H1class2021[ i ] == "") continue
					Junk2021[ i ].className = arr_H1class2021[ i ]
					Junk2021[ i ].innerHTML = arr_H1inner2021[ i ]
					arr_H1class2021[ i ] = ""
					arr_H1inner2021[ i ] = ""
				}// 6
				Y = document.getElementById( BaseDiv4Lasy_ )
				if( Y ) Y.remove();
				window.removeEventListener("scroll",DispImg2021b)
				return
			}// 5
			return
		}// 4
		timeoutId = setTimeout( function(){// 4
			Y = document.getElementById( BaseDiv4Lasy_ )
			timeoutId = 0
			if(Yvalue < window.pageYOffset){// 5
				for(i = START2021 ; i < END2021 ; i++){// 6
					if(arr_H1class2021[ i ] == "") continue
					if( Judge2021( Y , Junk2021[ i ] ) ){// 7
						Junk2021[ i ].className = arr_H1class2021[ i ]
						Junk2021[ i ].innerHTML = arr_H1inner2021[ i ]
						arr_H1class2021[ i ] = ""
						arr_H1inner2021[ i ] = ""
						JUDGE2021_ = true
					}// 7
				}// 6
			}else{// 5
				for(i = END2021 - 1 ; i >= START2021 ; i--){// 6
					if(arr_H1class2021[ i ] == "") continue
					if( Judge2021( Y , Junk2021[ i ] ) ){// 7
						Junk2021[ i ].className = arr_H1class2021[ i ]
						Junk2021[ i ].innerHTML = arr_H1inner2021[ i ]
						arr_H1class2021[ i ] = ""
						arr_H1inner2021[ i ] = ""
						JUDGE2021_ = true
					}// 7
				}// 6
			}// 5
			Yvalue = window.pageYOffset
		}// 4
	, 1000 )
	}// 3
	window.addEventListener( "scroll", DispImg2021b )
}// 2
}else{// 1
var	Junk2021 = '<p><b>あなたさまのブラウザーが遅延読み込み(英語: Lazy loading)が機能しません。  地球温暖化に知らぬ間に加担していることになりますでしょう？  過去記事：  <a href="http://w.fs4y.com/stupidproxyserver/#bg-video" target=_blank>「プロキシーサーバーを利用することは馬鹿なことか？！」を、</a>読んで下されば、インターネット通信で無駄で無用なパケットを浪費することも地球温暖化に加担していることになりますでしょう？</b></p>'
	document.write( Junk2021 + element.innerHTML + Junk2021 )
	element = Junk2021 = null
}// 1
/*********************************************************************************************
	Post-Processor
**********************************************************************************************/

改訂： 2021/11/24 08:00 A.M. JST

YUICOMPRESSORで一次ダイエットしますと、関数内のローカル変数名は全て１文字に置換されます。 #https://flic.kr/p/RHuWDU

Ｈ１タグに埋め込んだアニメーションＧＩＦには、遅延表示の効果はありません。Ｈ１タグの遅延表示は必要でしょうか？まあ、開発してみて、落とし穴を経験し、解決策を試行して、１つの新たな模範が自分の中で生まれました。自分で歩いてみることで、経験値が増しました。Ｈ１タグについては、参考程度ですかね。

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

FACEBOOK(日本語): ここに表示
FACEBOOK(ASCII): ここに表示

この項目はFacebook(Meta)が公開している共有機能を、そのまま利用しています。 であるにも関わらず、表示できない有名ブラウザーがあります。それらブラウザーとは、表示できないのではなくて、表示させない処理を故意に行っている有名ブラウザーがあると言う意味です。ことはFaceboookに限定しません。様々なオープンな情報をブラウザーが、あなたに対して見えなくしている事実が問題です。みなさんが、どのブラウザーを利用することについて、それは自由です！著者は決してブラウザーについての選択について推奨はしませんが、このFacebookが表示されない現象を確認できたのなら、他のブラウザーを是非、試用してみてください！気になる方は、過去記事「レスポンスを崩さない広告の埋め込みを考えない？」の項目「Facebookの EMBED」に

移動してみてください。移動先には、WikiPediaが公開している有名ブラウザーの使用者数の推移グラフもあります。きっと、あなたはブラウザーが抱える闇を知るでしょうか？！ #https://flic.kr/p/2bhZoyq

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

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

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

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

※ どれだけ待ってもDISQUSが表示されない場合は「広告ブロック」機能を切ってみて下さい。
Google Translator.

DISQUS.js Ver:1.2

CLICK!

以下が Facebookの </>埋め込み機能を利用したコンテンツです。あなたを含めて、訪問者がアクションを起こさない限り、 Facebookサーバーとの通信は一切起きません。この記事に訪問しただけではFacebookサーバーとの通信は一切起きませんので、Facebookサーバーと、あなたの端末のブラウザーまでのネットワーク上の、あらゆる無駄な電力を消費しません！ FACEBOOK(Meta)には画像をアップロードしていません！ WordPressにも画像は一切アップロードしていません！ FACEBOOK(Meta)の画像を変更する場合は、WordPressのカスタムフィールド内のURL値を変更し、FACEBOOK(Meta)で更新するだけです。つまりFACEBOOK(Meta)の画像をリプレースするのは簡単です。応援よろしくお願い致します！

Ujiki.oO CORE WordPress s22

Aiming for the fastest WordPress in the world!

H1タグの為の第二世代プリプロセッサーとポストプロセッサー

コメントはDISQUSで！

7 Pingbacks

Google Translator V4.01 (改)

静的 – 最近の記事

広告

Search by article embedded keyword

静的 – カテゴリー

コメント

緊急用WordPressミラー：

メタ情報

Ujiki.oO CORE WordPress s22

Aiming for the fastest WordPress in the world!

H1タグの為の第二世代プリプロセッサーとポストプロセッサー

The Elder Scrolls V Skyrim Anniversary Edition 音源ファイルの配布の件

Core i7 NVIDIA® GeForce RTX™ 3080 HyperX Fury 32GB

コメントはDISQUSで！

7 Pingbacks

Google Translator V4.01 (改)

静的 – 最近の記事

広告

Search by article embedded keyword

静的 – カテゴリー

コメント

緊急用WordPressミラー：

メタ情報