BLOGGER過去記事画像の一括変換方法。微妙だけどこれで良し

過去記事の画像を二重読み込みせずに書き換える方法がやっとわかりました。アーカイブページにもっと見るボタンを設置したりして遊んでいたのですが、少し知りたいことがあってBloggerの独自タグ関連で調べていたら以下のような情報が目に入る。

Bloggerのタグデータをエスケープするための関数(?)みたいです。以前にも軽く目を通したことのあるページなのですが意味がよくわからなかったのでスルーしていました。ただどうもこのエスケープとやらを行えばJavaScriptでpost.bodyのデータをいじれそうな気がする。エスケープの種類は4種類あるみたいなのですが今回は.escapedと.jsEscapedを試してみました。すると…JavaScriptでコードをいじれるようになりました。そうとなれば話は早い。ということで作成した過去記事の画像をwebp形式へ変換するコードは以下に。

<div class='post-body' id='single-content'>
 <noscript><data:post.body/></noscript>
 <div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<script>
 var re_singlepost = document.getElementById('single-content');
 var re_postbody = '<b:eval expr='data:post.body.jsEscaped'/>';
 if (Modernizr.webp) {re_postbody = re_postbody.replace( /(src=\"https:\/\/1.bp.blogspot.com\/[\w-]+\/[\w-]+\/[\w-]+\/[\w-]+)\/([a-z]\d+[\w-]*)\//g, &#39;$1/$2-rw/&#39; );}
 re_singlepost.insertAdjacentHTML('afterbegin', re_postbody);
</script>

凄くシンプルです。いままでXHRでサーバーからデータを取得していじってみたりと余計なことばかりしていたようです。↑のコードはブラウザのwebp対応判別をModernizrで行っているのでシンプルになっているということもありますが。使い方としては↑のように<data:post.body/>をnoscriptで囲うかコメントアウトして</div>直下にスクリプトファイルを設置する。あと↑のコードはModernizrを使用しているのでそちらも導入する必要があります。少しでも汎用性を高めるためにModernizrなしバージョンも考えてみようかと思いましたが僕の知識では時間がかかりそうですし、なにより面倒なのでひとまず断念。すでにpictureタグが挿入されている場合とか条件づけするの面倒そう。必要としているひともいないでしょうし。そもそも記事全体をJavaScriptで表示することになるのでSEO的にどうなのだ？という疑問もありますからね。最近のクローラーはJavaScriptも読み込んでくれるという話ではありますが…。使用上の注意としては投稿記事コード内にscriptファイルを設置している場合はそのscriptは動作しません。例としてはツイッターの埋め込みなどです。テンプレートにscriptファイルを設置しておけば動作します。まぁそのことに気づいた時点で僕はこのコードを使用する気を失いました。過去記事でscriptファイルを使用していたか覚えていませんし。それに他にどんな不具合があるかわかったものじゃない。万一このコードを使用するつもりのある方は自己責任でお願いいたします。

なんにせよ問題が一つ解決してスッキリ。やっぱり考えてもわからないときは一旦諦めるに限ります。忘れたころに解決策が見つかったりしますからね。仕事ではない遊びだからできることですけど。仕事だと目の前の問題から逃げることはなかなか難しいでしょうから。ちなみにコードは短いですけどなんだかんだで何時間も頭を悩ませました。小さなところで細々と躓くのですよね。今回はescapedとjsEscapedのデータの違いをしっかり理解できていなかったので正規表現のところでかなり引っ掛かりました。そのへんの悪戦苦闘まで書いていたら長くなるのでこのあたりで。