スキップしてメイン コンテンツに移動

些細な日常

Bloggerの投稿画像の自動的な遅延読み込みを確実に行うためのプログラム

コメント

  1. Rainbow Goblins2023年1月22日 16:23

    このプログラムを使わしていただこうと思い、導入例に倣ってやってみたのですが、うまくいきません。もしよろしければ、どこが問題なのかご教授いただけないでしょうか？（投稿が通らないようなので、スクリプト部は特殊文字に変換しております。）

    テーマHTMLの書き換えはできているようです。他の動きも元のままです。
    うまくいかないと思った理由は、動作確認用のポップアップが出ないことと、PageSpeed Insights で「オフスクリーン画像を遅延読み込みする」が依然として残っていることです。

    Qooq オリジナル
    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

    書き換え後
    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
    <b:tag cond='data:blog.pageType == "item" or data:blog.pageType == "static_page and data:view.featuredImage' class='blog-content' name='noscript'><data:post.body/></b:tag>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
    <b:if cond='data:blog.pageType == "item" or data:blog.pageType == "static_page" and data:view.featuredImage'>
    <script>
    遅延読み込み用ソースコード
    </script>
    </b:if>

    返信削除
    返信
    1. 結城永人2023年1月22日 18:52

      投稿が通らないというのはおかしいです。特殊文字に変換するところで、エラーが起きているかも知れません。

      今回のソースコードで止められるのは「&」と「>」で、それぞれに「&amp;」と「&gt;」に置き換えて掲載してますから大丈夫なんです。

      もう一つの方法として「&amp;」と「&gt;」を元の「&」と「>」に戻した上で、scriptタグの内側のソースコード全体をCDATAタグで囲むこともできます

      <script>
      <![CDATA[
      遅延読み込み用ソースコード
      ]]>
      </script>

      このような仕方だと「&」と「>」をscript内のソースコードに使うことができますので、なるべく特殊文字に変換しないでやってみて下さい。

      補足としてtagタグとifタグのcond属性の「data:blog.pageType == "item" or data:blog.pageType == "static_page」の部分は半角括弧に入れて記載しないと画像なしのページを除外できません。

      cond='(data:blog.pageType == "item" or data:blog.pageType == "static_page) and data:view.featuredImage'

      もう一つ、Qooq オリジナルの「<div style='clear: both;'/> <!-- clear for photos floats -->」の部分が遅延読み込みのプログラムで消されますので、遅延読み込みのソースコードの冒頭部分の「const psbd……;」から「npsbd.insertAdjacentHTML……;」までを次のように修正して下さい。

      const psbd = Blog1.querySelector("div.post-body"), blct = psbd.querySelector("noscript.blog-content"), npsbd = psbd.cloneNode(false), nl = document.createElement("div"), dfi = document.createElement("div");
      nl.style.height = "100vh"; psbd.insertBefore(nl, blct); dfi.setAttribute("style", "clear:both;"); npsbd.appendChild(dfi); npsbd.insertAdjacentHTML("afterbegin", blct.innerText);

      Qooqなどの非公式テーマは他のソースコードの関係から遅延読み込みのソースコードが使えない場合もあるかも知れません。

      削除
    2. Rainbow Goblins2023年1月22日 23:02

      お教えいただいた３点をひとつずつ適用して、動作確認用のポップアップとPageSpeed Insights での「オフスクリーン画像を遅延読み込みする」をみましたが、やはり効いていないようです。
      さらに、素のQooQ（Version:2.00）を入手して、このプログラムを導入してみましたが、効いていないようです。

      削除
    3. 結城永人2023年1月23日 5:45

      この記事では省略しましたが、レイアウトヴァージョン２のテンプレートは「 <data:post.body/>」を含む記事のためのソースコードがパソコン用とスマホ用の二つに分かれています（詳細）。

      前回のQooqのソースコードを見ると公式テーマのレイアウトヴァージョン２のスマホ用と同じです。なのでパソコン用に次のようなソースコードもあるかも知れません。

      <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' expr:itemprop='(data:blog.metaDescription ? "" : "description ") + "articleBody"'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>

      通常はこちらの「<data:post.body/>」をカスタマイズしてテンプレートをスマホに対応させる場合はもう一つの「<data:post.body/>」もカスタマイズするようにします。

      公式テーマだとレイアウトヴァージョン２のパソコン用の「<data:post.body/>」はスマホ用のもっと先にありますので、Qooqも二つに分かれてないかどうかを確認してみて下さい。

      削除
    4. Rainbow Goblins2023年1月23日 10:17

      うまく動くようになりました。ポップアップとPageSpeedで確認しました。

      が２か所にあることには気づいていましたが、導入例に比べて下記に載せたように構文が簡素だったこととから、そちらは気に留めていませんでした。記事をもっとしっかりと読み込むべきでした。

      ご指摘いただいたように、もう一か所ののところを書き換えると、画像遅延が有効になりました。”遅延読み込み用ソースコード” の特殊文字を通常文字に戻す変更は適用していません。

      手厚いご教授をいただき、本当にありがとうございました。

      ”遅延読み込み用ソースコード” は同じものを２か所に入れたのですが、これでよかったのでしょうか。

      [[QooQ オリジナル]]
      <div class='post-body' id='single-content'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>



      [[書き換え ２か所目]]
      <div class='post-body' id='single-content'>
      <b:tag cond='data:view.featuredImage' class='blog-content' name='noscript'><data:post.body/></b:tag>
      <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
      <b:if cond='data:view.featuredImage'>
      <script>
      遅延読み込み用ソースコード
      </script>
      </b:if>

      削除
    5. 結城永人2023年1月23日 11:34

      正常に動作して良かったです。

      遅延読み込みのソースコードはパソコンとスマホで同じものを使うことができます。

      振り分けのcond属性はパソコン用とスマホ用が同じでも大丈夫ですけど、スマホ用の本文のソースコードは最初から記事／追加ページの専用ですから「data:view.featuredImage」だけでも画像なしのページを適切に除外できます。

      因みにレイアウトヴァージョン２のスマホ対応は公式テーマの場合は自動化されてません。

      Qooqも同じならばBloggerの管理画面のテーマのメニュー（カスタマイズの右横の▽）の「モバイルの設定」をモバイルの「カスタム」（パソコンと同じものをカスタマイズして使う場合）にしないとスマホで閲覧してもパソコン用のソースコードが適用されますので、注意して下さい。

      削除

最近の投稿

日付: 

目眩の薬から黒い虫が歩いているなどの幻覚を起こす場合がある

イメージ

人気の投稿

宜保愛子は本物の霊能力者だと考えられる三つの真実

イメージ

昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...

平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない

イメージ

日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...

伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える

イメージ

プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...

後藤浩輝と抑鬱傾向による突発的な自殺

イメージ

中央競馬でトップ騎手の一人だった 後藤浩輝 が亡くなっていると気付いた。二千十五年だからまだ二年前の死だった。競馬ファンならば誰でも知っているくらい有名なはずだけれどもテレビのバラエティー番組でも見かけていたと思う。個人的には ダービースタリオン （ゲーム）に熱中していて後藤浩輝...