ごめんなさい、カード型にするカスタマイズにバグがあったみたい。アプデしたのでご確認ください

カスタマイズ

こんにちは、つばさ(@tsubasa123)です。

えーっと、先日公開したカスタマイズコードに不備があったようでして、ご迷惑をお掛けしました。修正・改良版を作成しましたので、私のコードをご利用いただけた方はこちらに差し替えていただけますようよろしくお願いいたします。

問題点は

EdgeとiPad(サファリかな?)でアイキャッチ画像が表示されないってバグがあったみたいでして。

f:id:tsubasa123:20170605104230j:plain

こんな感じです、スッカスカですね。お恥ずかしい限りです。

修正しますた

ごめんなさい、修正しました。修正ついでにちょっとだけ高速化を狙いました。jQueryの利用を止めて、ドキュメントの読み込みを待たないようにしています。これでアイキャッチ画像のちらつきを幾分か抑えることができるようになったと思います。

今回のコードは「デザイン > カスタマイズ > フッタ」に入れるようしてください。「ヘッダ」では正常に動作しませんのでお気をつけあそばせ。

if (! document.URL.match("/archive")) {
[].forEach.call(document.querySelectorAll('.entry-thumb'), function(n) {
let img = n.style.backgroundImage;
img = img.substring(4, img.length - 1).replace(/"/g, '');
n.style.backgroundImage = 'url(' + img.split('/').pop().replace('%3A', ':').replace(/%2F/g, '/') + ')';
});
}

修正した、と言いましたがiPad(サファリかな?)での確認ができていない状態です。持ってないんです、すみません。今回の修正コードはChromeとEdge、IEの最新版で動作を確認しています。iPad(サファリかな?)をお持ちの方、まだ問題があるようでしたらそっと教えていただけると助かります。ご協力のほど、よろしくお願いいたします。

おまけ

カスタマイザーさんのために今回のバグの原因を共有しておきますと、

let img = $(this).css('background-image');
console.log(img);
// Chromeの場合
// url("https://cdn.image.st-hatena.com/image/square/50809ab2401cc90d37cfb198b6cc76905ea59620/backend=imagemagick;height=120;version=1;width=120/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Ft%2Ftsubasa123%2F20170423%2F20170423192841.jpg")
// Edgeの場合
// url(https://cdn.image.st-hatena.com/image/square/50809ab2401cc90d37cfb198b6cc76905ea59620/backend=imagemagick;height=120;version=1;width=120/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Ft%2Ftsubasa123%2F20170423%2F20170423192841.jpg)

この部分、jQueryで背景画像のパスを取得していたんですが、どうも「”」の有無で差があるようでして。

  • jquery-1.12.3.min.js
  • jquery-2.2.3.min.js
  • jquery-3.1.1.min.js

メジャーバージョンは3つとも試してみましたがどれも同じ結果になりました。あれ?これってjQueryのバグ?

ちなみに、IE11はといいますと、Edgeと同じ動きをすると思いきや、Chromeと同じ動きをしました。ん?Edgeのバグ?

さいごに

まぁ、なにはともあれ、私のコードに不備があったことに変わりはありません。改めましてご迷惑をお掛けし申し訳ございませんでした。まだまだ実力不足です。

とはいえ、コードは書かなければ上達しないというのが私の考え。はてなブログのカスタマイズはなかなかいい勉強の機会でして。これからも役に立ったりおもしろいと思っていただけるようなコードをお届けする所存です。どうぞ、お付き合いのほどよろしくお願いいたします。

あれですね、バグフィックスの記事で謝ると重たいですね。えーっと、反省はしてるけどこれからもおもしろいコード書くよ、iPad(サファリかな?)で確認できないけど興味ある人はこれからもよろしくね!ってことです。いや、ほんとすいませんでした。

ではでは、最後までお付き合いいただきありがとうございました。

コメント

  1. release_all より:

    初めまして。はてなブログをカード型にしたくてこの記事にたどり着きました。
    サムネ画像の設定で苦戦しており、質問させていただきたいのですが、もしよろしければ回答いただけると嬉しいです。
    サムネはJQueryで
    https://cdn.image.st-hatena.com/image/square/26033c47d7e08162ff19dd0ba4226970d15f6d21/backend=imagemagick;height=100;version=1;width=100/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fr%2Frelease_all%2F20171224%2F20171224171942.jpg
    のような、原寸のサムネが縮小されたところから取得していると思うのですが、見切れさせたくないので
    https://cdn-ak.f.st-hatena.com/images/fotolife/r/release_all/20171224/20171224171942.jpg
    のようなアドレス(記事を書くときに画像をアップロードする先のアドレス)から取得したいと考えております。
    しかし取得方法が一向に分からず、停滞しております(ググってもJQueryばかりでてきます…)。
    もしよろしければ、どうかお助けください。

  2. tsubasa123 より:

    はたらくょぅι ゙ょ (id:release_all)さん
    「おまけ」の上にある7行のコードで縮小された画像のURLから記事中の画像のURLを取得していますが上手くいかなかったですか?

  3. release_all より:

    つばさ (id:tsubasa123)さん
    返信ありがとうございます!
    https://i.imgur.com/6r5xyCXg.png
    画像のブログカード左下のようになっているので、元の画像は取得していないような気がします…
    (左上はサムネを100*100で作成しているので、縮小されても正常に表示されています。私の知識ではURLから画像抽出ができず、このような解決方法に至りました。)
    https://i.imgur.com/3eX9QMu.png
    ちなみに、cssでbackground-size :containにすると同じ画像を並べて表示されるのですが、上記画像の通りになる(切れた画像が並んでいる)ので、やっぱり収縮したものを取ってきてるのかなあ…と思っています
    (cssの知識も素人に毛が生えた程度なので間違ってるかもしれませんが…)

  4. release_all より:

    以前にお聞きしたサムネイルの件ですが、解決いたしましたので報告します。
    フッタに記述したコードにscriptタグを記載していなかったことが原因でした。
    初歩的なミスですみません…お手数おかけしました…