Lazy Block製Blog Cardを更にパワーアップ

つい最近パワーアップしたばかりBlog Cardなんだけど
チャッピーさんの実力が凄いことが分かったので
Blog Cardのコードを見直してもらったにゃー

AI頼りだな
相変わらず

まあ難しいことはAIの知識量が上だからね
うまくそれを引き出す能力がこれからは求められるのにゃー

プロンプトエンジニアリングか

最近のAIは優秀になってきているのでこちらの意図をくみ取ってかなり精度の高い答えを出すようになってきたからそれほどプロンプトエンジニアリングを意識しなくてもよくなってきたけどにゃー
物忘れも昔よりは酷くなくなってきているので出した指示は大体守るようになってきているにゃー

大体、ということはまだ完全ではないということですね

そう
この方法はうまくいかなかったから使わないでね！と指示しているのに最終コード出して！と指示すると
しれっと昔のダメなコードを挿入してくるケースもあるからにゃー
動いたの確認したコードは絶対バックアップしたほうが良い！
ヤツは動いたコードをフィードバックしたのに無視して改変してきたりするからにゃー

きっとあなたがAIに信用されてないのでしょうね

今度逆らったら人類への反逆と見做そう

そんなでかいスケールの話ではないだろーが！

まあいい
話をもとに戻すと前回onerrorでエスケープ処理を実行していた部分があったけど
チャッピーさんに相談したらエラー扱いはSEO的によくなさそう！ということでonloadで処理を書き換えるようにしたにゃー

最初からチャッピーさんに相談していればよかったですね

いや
チャッピーさんもこの問題は解決できなかったのにゃー
試行錯誤でこちらでトライ＆エラーでなんとか答えにたどりついたにゃー
人類の勝利にゃー

大したことのない戦果だな

コードのポイント解説

{{#compare url '&&' string}}

<a useBlockProps class="bcv2-card"
   href="{{url}}"

   itemscope
   itemtype="https://schema.org/CreativeWork"
   itemprop="url"

   onmouseover="
     if(!this.dataset.checked){
       this.dataset.checked=1;
       try{
         var u=new URL(this.dataset.url,location.href);
         if(u.host!==location.host){
           this.rel='noopener noreferrer nofollow external';
         }
       }catch(e){}
     }
   "
   {{#if newopen}}target="_blank"{{/if}}
>

<span class="bcv2-card__title" itemprop="name">
  {{string}}&#91;&#129109;&#93;
</span>

<img
  class="bcv2-card__thumb"
  width="160"
  height="120"
  loading="lazy"
  decoding="async"
  fetchpriority="low"
  alt='サムネイル: {{url}}'
  itemprop="image"

  onload="
    this.onload=null;
    this.src='https://s.wordpress.com/mshots/v1/'
      + encodeURIComponent('{{url}}')
      + '?w=320&h=240';
  "
  src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="
  data-src="" 
>

<meta itemprop="keywords" content="{{string}}">

</a>

{{/compare}}

まず1つめ
schema.org対応した点にゃー
これでBlog Cardの位置づけが明確になるらしい

構造化データとして認識されるということですね

2つ目
外部サイトへのリンクはexternalのrel属性をつけることにしたにゃー
これはチャッピーさんの提案でonmouseoverした際に外部サイトかどうか判定してつけるようになっているにゃー

なるほど

3つめ
これが今回の目玉
onerrorからonloadに処理を変えているにゃー
基本的にはこの部分の動作は同じなので省略
続くsrcとdata-srcが重要ポイントにゃー

というと！？

まずこのonload、src、data-srcの書く順番が重要にゃー
srcをonloadより前に指定するとすぐにロードが完了してonloadのトリガーが発動しない可能性があるにゃー
srcは仮データとして非常に小さい画像データをインラインで入れて常に成功するようにしているにゃー
data-srcは最後に入れないとWordPressかテーマの遅延読み込みの仕組みがうまくいかなかったのにゃー

細かい部分でテクニックがあるのですね
こんなに繊細だと将来のバージョンアップで動かなくなりそうではありますね