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

些細な日常

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

      削除

些細な日常の人気記事

イヤーワームという頭の中で音楽が勝手に流れる現象を引き起こすストレスを反省

イメージ

以前から頭の中で音楽が勝手に流れることが良くあって近頃でもブログで取り上げたばかりの モーツァルトの幻想曲K.397 や K.375 や ribbonの Virgin Snow などを体験していた。いつも好きな曲ばかりで鼻歌を伴って喜ばしい気持ちになるし、好調の証のように捉えてい...

アガサ・クリスティの誘拐された総理大臣の日本語訳

イメージ

十九から二十世紀のイギリスの作家、小説家の アガサ・クリスティ の小説の 誘拐された総理大臣 （1923）の日本語訳を行った。一つの文学作品として人間の洞察力に富んだ優れた内容を持つだけではなく、表現も意義深いから外国語の英語の聞き取りと読み取りの教材としても最適だと感じる。 ...

日常の些細な出来事に触れる幸せの味わいは小さいというイメージが欠かせない

イメージ

誰にでも分かる些細な日常というと他でもなく、小さな幸せの味わいではないか。 永遠の詩人として本質的な認識に基づく命の尊さを伝え届けなくてはならないと考えるけれどもアクセスアップのためには誰にでも分かる些細な日常のイメージも大事にするべきだろう。 小さな幸せの味わいをどこま...

シソンヌのラーメン屋：とんこつラーメンを臭いラーメンと呼んだコントが好き

イメージ

シソンヌ （お笑い）のラーメン屋のコントが面白かった。とんこつラーメンを臭いラーメンと呼ぶから僕も同じだったと気付いた。 シソンヌのラーメン屋 （Google検索） 否、店によってはそばを通りかかるだけでも堪らないくらい臭いから、一体、何だろうと本当に思わずにはいられなか...

燃え上がる情熱からサイト運営に気持ちを爆発させよ

イメージ

昔と比べてサイト運営でアクセスが伸び悩むのは僕の気持ちとして皆と仲良くする思いが減っているのではないか。 改めて人々との交流を強く願ってやってみたいと感じる 皆に心から来て欲しいということは盛り上がるホームページやブログが素晴らしいと夢見ているせいなので、そうした気持...

徳川家康の忸怩たる思いも良く分かるようで偉く辛い

イメージ

朝からブログに誰も来てない。午前中のアクセスが皆無ならば一日で十人も厳しいだろう。二ヵ月前からアクセスが伸び出して一日に五人くらいだったのが十人、十五人と増えたので、今月はできれば二十人を望んでいた。 Google検索では上昇傾向の見られる些細な日常なので、本当に厳しい。偶々...