Bloggerの新記事投稿フォームでサムネイルを正常に表示させる方法

Bloggerに新しい記事投稿フォームが！しかし…

少しずつリニューアルが進むBlogger。最近では記事の投稿フォームが新しくなりました。こうして手をかけてくれるのは素直に嬉しいです。だけどその際に仕様が変わったようで、このブログに使っているテンプレートでは不具合が出るようになりました。これは以下の画像を見てもらえると分かると思います。

個別の記事ではなんともありませんが、トップの記事一覧では画像の横幅が狭くなり、またサムネイルの画質が極端に悪くなりました。一度作成した記事を後から編集するのは旧型の投稿フォームになるので、そこで画像をアップロードし直すと正常に表示されます。…が、それではスマートではありません。というわけでこの問題を根本的に解決する方法を考えてみました。

Scriptでサムネイルのリサイズをしているらしい

ページのソースを調べてみたところ、次のような一文に目が留まりました。

function snippetimage(a,e){var g=660,i=1600;return image_tag='<img src="'+a.replace("/s72-c/","/w"+g+"-h"+i+"/","/w"+g+"-h"+i+"/")+'" alt="'+e+'"/>',yimage_tag='<img src="'+a.replace("default","0")+'" alt="'+e+'"/>',-1!=a.indexOf("img.youtube.com")?yimage_tag:""!=a?image_tag:""}

どうやら画像を貼り付けた時に自動生成されるURLの「/s72-c/」という部分を、「/w660-h1600/」に置き換えているようです。そこで新しい記事投稿フォームで画像を貼り付けたときのURLを確認してみました。

旧記事登録フォームで生成されるURL

https://blahblahblah.com/-blahblahblah/blahblahblah/blahblahblah/s72-c/filename.png

新記事登録フォームで生成されるURL

https://blahblahblah.com/-blahblahblah/blahblahblah/blahblahblah/s72-w480-c-h266/filename.png

旧型では「/s72-c/」だった部分が、新型では「/s72-w480-c-h266/」に変化しています。たぶんこれはサムネイルのサイズを表記するよう仕様変更があったのでしょう。ということはこの部分はサムネイルの大きさによって数値も変わるはず。その変化する文字列を「/w660-h1600/」に置き換えなければなりません。

検索文字列を複数指定し、且つ正規表現を使う

このブログでは旧型と新型で生成されたURLが混在しているので、その両方をヒットさせなければなりません。そして新型のURLは数値が変化するので、これを正規表現でヒットさせる必要があります。これらを組み合わせて出来たのがこれです。

function snippetimage(a,e){var g=660,i=1600;return image_tag='<img src="'+a.replace("/s72-c/","/w"+g+"-h"+i+"/","/w"+g+"-h"+i+"/").replace(/\/s72-w[0-9]{1,4}-c-h[0-9]{1,4}\//,"/w"+g+"-h"+i+"/")+'" alt="'+e+'"/>',yimage_tag='<img src="'+a.replace("default","0")+'" alt="'+e+'"/>',-1!=a.indexOf("img.youtube.com")?yimage_tag:""!=a?image_tag:""}

まず複数の検索文字列を指定するには「.replace()」をつなげていけばOKです。今回は2つ指定するので2回つなげてますが、何回でもつなげることはできると思います。正規表現を使う場合、「/」で正規表現部分を括る必要があります。文字列のときは「”」で括る必要がありますが、正規表現の場合はこれは必要ありません。

これでサムネイルは直ったが、拡大表示がうまくいかない

やれやれ、これで一件落着かと思いきや、今度はサムネイル画像をクリックしたときの拡大画像がうまく表示されません。何故かサムネイルと同じサイズで開くだけ。調べてみると画像リンクに欠けている部分がありました。それはURLのファイル名の前の「/s1600/」。おそらくこれは拡大表示したときのサイズ指定なのでしょう。記事をHTML編集モードにして（新しい記事投稿フォームでは右上にある <> というボタンを押す）ファイル名の前に「/s1600/」を追加するとOKです。下記の例はリンクの一部抜粋です。

<a href="https://blahblahblah.com/-blahblahblah/blahblahblah/blahblahblah/blahblahblah/s1600/filename.jpg"

ちなみに「/s1600/」を変えるともっと大きなサイズに拡大することができます。例えば「/s9999/」に変えれば元のファイルの最大値まで大きく拡大表示できます。元のファイルが長辺2048pxだったらそのサイズで表示できるわけです。てっきりBloggerは長辺1600pxに制限されているものと思っていましたが、ここを変えれば良かったんですね。ただサムネイルもそうだけど拡大表示する画像はダウンロード可能で制限を設けることができないので、むやみにオリジナルサイズの画像を公開しないほうが良いと思います。

仕様変更と共に使えなくなるテンプレートが出てくるかも…

今回は自力で解決出来たので良かったけど、ひょっとしたらいつか自力では解決できない仕様変更が来るかもしれません。無料で使わせてもらっているので文句は言えないので、その時は対応しているテンプレートを探さなければならないかもしれませんね。

※2021/12/12追記 再び仕様変更

またしてもBloggerに仕様変更があったようです。これまでトップページの記事に使われるサムネイルURLが

https://blahblahblah.com/-blahblahblah/blahblahblah/blahblahblah/s72-c/filename.png

だったものが、以下のように変わりました。

https://blogger.googleusercontent.com/img/a/blahblahblahblahblahblahblahblahblah=s72-w640-c-h480

これによって再びサムネイルの表示がおかしくなってしまいました。直リンクじゃなくなったっぽいのでこれは修正不可能かな…と思ったけど、以下のように書き換えることで正しく表示できることが分かりました。

https://blogger.googleusercontent.com/img/a/blahblahblahblahblahblahblahblahblah=w660-h1600

やはりどうあっても「w660-h1600」に書き換えないとだめみたいですね。というわけでスクリプトの記述を以下のように書き換えです。

function snippetimage(a,e){var g=660,i=1600;return image_tag='<img src="'+a.replace("/s72-c/","/w"+g+"-h"+i+"/","/w"+g+"-h"+i+"/").replace(/\/s72-w[0-9]{1,4}-c-h[0-9]{1,4}\//,"/w"+g+"-h"+i+"/").replace(/s72-w[0-9]{1,4}-c-h[0-9]{1,4}/,"w"+g+"-h"+i)+'" alt="'+e+'"/>',yimage_tag='<img src="'+a.replace("default","0")+'" alt="'+e+'"/>',-1!=a.indexOf("img.youtube.com")?yimage_tag:""!=a?image_tag:""}

これで正常に表示できるようになりました。