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

久々のLazy Blockネタにゃー
以前作ったBlog Cardをパワーアップしよう
ということで長らく適当なアイコンを使っていた箇所をサイトのスクリーンショットにするにゃー

人物のアイコン素材その5

本当に久しぶりですね
よくあの適当なやつを放置していましたね

失敬な！
あれはあれでリンクとわかりやすいアイコンだっただろーが！

人物のアイコン素材その5

そうなんですけど
ソレ以前にデザイン性がね
アレだからね

何を言いたいのかよくわからんが
久しぶりにLazy Blockの画面を開いたらビビったぞ！
CSSやJSの設定項目も追加されているぞ！
これでカスタムブロックに紐づいたCSSとJSも同時に管理できて最高じゃあないか！

人物のアイコン素材その5

アレ、本当だ！
テーマのCSSとの衝突までは考慮されないでしょうけど
配布する際に便利なので開発者の方には刺さる機能ですね！

今までは無理やり全部一つのコードの中に押し込めていたけどこれはイイね！
早速使おう！

人物のアイコン素材その5

いや、どうやらこれはPro版だけの機能みたいですね

なんだよ！
つまらん！

人物のアイコン素材その5

テーマ開発者とかのプロフェッショナル向け機能なのでまさにPro版で解放されるのでしょう

まあいい
話をもとに戻すとスクリーンショット機能だけど
元々Handlebarsだけで作り込んでいたのでこれだけで実現するのは不可能
Web APIを探索してスクリーンショットが取れるやつを見つけたにゃー

人物のアイコン素材その5

そういうAPIが公開されているのですね

いくつか同種のAPIがあったのだけどwordpress.comが提供しているmShotsというやつがあったのにゃー
非公式のサービスらしいけどほかでも動作実績があるらしいのでこれを採用したにゃー

人物のアイコン素材その5

大丈夫なのか？

大丈夫だろ
ダメだったらもとに戻すだけだし

人物のアイコン素材その5

不安だな

あとはAPIから戻ってきた画像を貼り付けるだけなんだけど
このAPI呼び出しがなかなか大変だったので実際のコードを見ながら解説していきたいにゃー

コードのポイント解説

{{#compare url '&&' string}}
  {{#if newopen}}
<a class="bcv1-container1 bcv1-clay" href="{{url}}" target="_blank" rel="noopener noreferrer">
  {{else}}
<a class="bcv1-container1 bcv1-clay" href="{{url}}">
  {{/if}}
  <div class="item1 bcv1-clay">
    {{string}}
  </div>
  <picture class="item2 bcv1-clay">
    <img loading="lazy" decoding="async" alt="{{truncate string 30 'true'}}" class="lazy" src="" onerror="this.onerror=null;this.dataset.src='https://s.wordpress.com/mshots/v1/' + encodeURIComponent('{{url}}') + '?w=150&h=150';this.src=this.dataset.src;" data-src="">
  </picture>
</a>
{{/compare}}

人物のアイコン素材その5

これが実際のコードですね

うむ
ポイントとなるのはimgタグの部分にゃー

人物のアイコン素材その5

なにやら以前と比べて増えてますね

APIはhttps://s.wordpress.com/mshots/v1/[対象URL]の形で呼び出すにゃー
wとかhは画像サイズのパラメータにゃー

人物のアイコン素材その5

Lazy Blocksとしては対象URLを入力するブロックを作ればよい、ということですね

そうなのにゃー
だけど問題があって対象URLにパラメータが含まれているとAPIのパラメータと区別がつかなくなるにゃー

人物のアイコン素材その5

あー
APIのパラメータとして受け取ってしまって正しい対象URLにならないということですね

たまにパラメータ指定でしかコンテンツ生成しないサイトがあるからにゃー
でこの問題を回避するには対象URLの部分をエスケープ処理しないといけないのにゃー

人物のアイコン素材その5

Handlebarsにはその機能はないのですか？

HTMLのエスケープ処理はできるみたいだけどURLパラメータのエスケープ処理はないみたいにゃー
で、調べてみると標準関数でencodeURIComponent()というやつがあったのにゃー

人物のアイコン素材その5

なるほど
だからこれを使っているのですね

これってJavaScriptだから呼び出さないといけないのだけど
srcの部分に直接書いても呼び出してくれないのにゃー

人物のアイコン素材その5

普通にURLとして認識されてしまうということですね

うむ
普通はscriptタグとか使ったりが必要だけど実行するトリガーも考えないとダメにゃー
で、もう少し調べるとイベントハンドラの中だったら使えるということでonerrorの中で呼び出すことにしたのにゃー

人物のアイコン素材その5

onerrorのトリガーはどうやっているのでしょうか？

srcに画像のURLを指定せず空にすることでエラーを誘発しているにゃー

人物のアイコン素材その5

なるほど
それでエラーをトリガーとしてonerrorで関数を呼び出している、と

それでonerrorを呼んで
最初にthis.onerror=null;でもう一度呼ばれないようにonerrorをクリアしているにゃー

人物のアイコン素材その5

実際に画像を読み込んで失敗したら無限ループになりますからね

その次のthis.dataset.src=…..の部分がAPIで画像を拾ってくる部分にゃー
ここでencodeURIComponent()でエスケープ処理しているにゃー

人物のアイコン素材その5

this.dataset.srcってなんですか？

data-srcのことにゃー
どうやらWordPressはLazy loadingでdata-srcを見ているみたいなのでまずはここにURLをセットにゃー

人物のアイコン素材その5

なるほど
こちらも元々空でセットされていますね
その後にthis.src=this.dataset.src;で同じURLにしている、と

おそらくdata-srcだけセットすればLazy loadingの処理の中でsrcにも値をセットするのだろうけどよくわからんからこちらで指定しているにゃー

人物のアイコン素材その5

かなりトリッキーですね

まとめると
srcが空だからエラーが発生
onerrorでAPI向けのURLを組み立て（encodeURIComponentの実行）
this.dataset.srcにURLをセットして画像を読み込み
という流れにゃー

人物のアイコン素材その5

これ以上機能を増やすのならば素直にPHPで作ったほうがいいかもしれませんね

onerrorを使うのがなかなかのトリッキーだからね
これ自体XSSの心配があるけどonerror自体は非推奨ではないらしいのでいいかな、と

人物のアイコン素材その5

初回はちゃんと画像が出ないですね

サーバ側でキャッシュされてないと生成中画像しか出ないみたいにゃー
リロードすると画像が出るにゃー

人物のアイコン素材その5

取得失敗でもなんらかの画像は返してくれるのでそこの処理は考えなくてよかったですね

頑張ればHandlebarsでもなんとかなるということがわかったのでよかったにゃー

人物のアイコン素材その5

素直にPHPを使えばもう少し楽に実装できたのでは！？

それでは今回はこの辺で
Arrivederci

人物のアイコン素材その5

ミラノ・コルティナダンペッツォオリンピックの影響か！？

カスタムブロックプラグイン比較[🡕]

サムネイル: https://possiblytrue.com/%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%8d%e3%83%83%e3%83%88/lazy-blocks%e3%81%a8block-lab%e3%81%a9%e3%81%a3%e3%81%a1%e3%81%8c%e3%81%84%e3%81%84%e3%81%ae%ef%bc%9f%e6%af%94%e8%bc%83%e3%81%97%e3%81%be%e3%81%97%e3%81%9f/

初級編[🡕]

サムネイル: https://possiblytrue.com/%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%8d%e3%83%83%e3%83%88/lazy-blocks%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%9f%e3%82%aa%e3%83%aa%e3%82%b8%e3%83%8a%e3%83%ab%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%81%ae%e4%bd%9c%e3%82%8a%e6%96%b9-%e5%88%9d%e7%b4%9a%e7%b7%a8/

中級編[🡕]

サムネイル: https://possiblytrue.com/%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%8d%e3%83%83%e3%83%88/lazy-blocks%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%9f%e3%82%aa%e3%83%aa%e3%82%b8%e3%83%8a%e3%83%ab%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%81%ae%e4%bd%9c%e3%82%8a%e6%96%b9-%e4%b8%ad%e7%b4%9a%e7%b7%a8/

応用編[🡕]

サムネイル: https://possiblytrue.com/%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%8d%e3%83%83%e3%83%88/lazy-blocks%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%9f%e3%82%aa%e3%83%aa%e3%82%b8%e3%83%8a%e3%83%ab%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%81%ae%e4%bd%9c%e3%82%8a%e6%96%b9-%e5%bf%9c%e7%94%a8%e7%b7%a8/

WebAPI編[🡕]

サムネイル: https://possiblytrue.com/%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%8d%e3%83%83%e3%83%88/lazy-blocks%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%9f%e3%82%aa%e3%83%aa%e3%82%b8%e3%83%8a%e3%83%ab%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%81%ae%e4%bd%9c%e3%82%8a%e6%96%b9-webapi%e7%b7%a8/

Amazon編 01[🡕]

サムネイル: https://possiblytrue.com/%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%8d%e3%83%83%e3%83%88/lazy-blocks%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%9f%e3%82%aa%e3%83%aa%e3%82%b8%e3%83%8a%e3%83%ab%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%81%ae%e4%bd%9c%e3%82%8a%e6%96%b9-amazon%e3%82%a2%e3%83%95%e3%82%a3/

Amazon編 02[🡕]

サムネイル: https://possiblytrue.com/%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%8d%e3%83%83%e3%83%88/lazy-blocks%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%9f%e3%82%aa%e3%83%aa%e3%82%b8%e3%83%8a%e3%83%ab%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%81%ae%e4%bd%9c%e3%82%8a%e6%96%b9-amazon%e3%82%a2%e3%83%95%e3%82%a3-2/

YesNoチャート[🡕]

サムネイル: https://possiblytrue.com/%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%8d%e3%83%83%e3%83%88/lazy-blocks%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%9f%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%81%ae%e4%bd%9c%e3%82%8a%e6%96%b9-yes-no%e3%83%81%e3%83%a3%e3%83%bc%e3%83%88/

imageコントロール仕様変更[🡕]

サムネイル: https://possiblytrue.com/%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%8d%e3%83%83%e3%83%88/lazy-blocks%e3%81%aeimage%e3%82%b3%e3%83%b3%e3%83%88%e3%83%ad%e3%83%bc%e3%83%ab%e3%81%ae%e4%bb%95%e6%a7%98%e3%81%8c%e5%a4%89%e3%82%8f%e3%81%a3%e3%81%9f%e3%82%88/

サムネイル: https://possiblytrue.com/%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%8d%e3%83%83%e3%83%88/lazy-blocks%e3%81%a7%e6%8a%9c%e7%b2%8b%e3%81%8c%e5%87%ba%e3%81%aa%e3%81%8f%e3%81%aa%e3%81%a3%e3%81%9f%e3%81%ae%e3%81%a7%e5%87%ba%e3%82%8b%e3%82%88%e3%81%86%e3%81%ab%e3%81%97%e3%81%9f/

Lazy Blocks Pro version[🡕]

サムネイル: https://possiblytrue.com/%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%8d%e3%83%83%e3%83%88/lazy-blocks%e3%81%abpro%e3%83%90%e3%83%bc%e3%82%b8%e3%83%a7%e3%83%b3%e3%81%8c%e3%82%ad%e3%82%bf%e3%83%bc%e3%83%bc%e3%83%bc%ef%bc%81/

Lazy Blocks でブログカードをリニューアル[🡕]

サムネイル: https://possiblytrue.com/%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%8d%e3%83%83%e3%83%88/lazy-block%e3%81%a7blog-card%e3%82%92%e3%83%aa%e3%83%8b%e3%83%a5%e3%83%bc%e3%82%a2%e3%83%ab/

Lazy Block製Blog Cardをパワーアップ[🡕]

サムネイル: https://possiblytrue.com/%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%8d%e3%83%83%e3%83%88/lazy-block%e8%a3%bdblog-card%e3%82%92%e3%83%91%e3%83%af%e3%83%bc%e3%82%a2%e3%83%83%e3%83%97/

PrismJSでシンタックスハイライトブロック[🡕]

サムネイル: https://possiblytrue.com/%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%8d%e3%83%83%e3%83%88/prismjs%e3%81%a7%e3%82%b7%e3%83%b3%e3%82%bf%e3%83%83%e3%82%af%e3%82%b9%e3%83%8f%e3%82%a4%e3%83%a9%e3%82%a4%e3%83%88%e3%83%96%e3%83%ad%e3%83%83%e3%82%af/

Shikiでシンタックスハイライトブロック[🡕]

サムネイル: https://possiblytrue.com/%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%8d%e3%83%83%e3%83%88/shiki%e3%81%a7%e3%82%b7%e3%83%b3%e3%82%bf%e3%83%83%e3%82%af%e3%82%b9%e3%83%8f%e3%82%a4%e3%83%a9%e3%82%a4%e3%83%88%e3%83%96%e3%83%ad%e3%83%83%e3%82%af/

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

サムネイル: https://possiblytrue.com/%e3%82%a4%e3%83%b3%e3%82%bf%e3%83%bc%e3%83%8d%e3%83%83%e3%83%88/lazy-block%e8%a3%bdblog-card%e3%82%92%e6%9b%b4%e3%81%ab%e3%83%91%e3%83%af%e3%83%bc%e3%82%a2%e3%83%83%e3%83%97/

gutenberg Lazy Blocks WordPress オリジナルブロックカスタムブロックプラグイン

インターネット, 開発