BLOGGER投稿一覧などの画像をJavaScriptでwebpに変えてみた-長期ひきこもりの雑ブログ

最近は日記系の記事投稿が続いたので今日はBLOGGER関連の記事でも書こうかな。少し前から画像ファイルをwebp形式に書き換える作業を試していました。過去記事を全て手作業で書き換える気はさらさらないです。面倒臭いので。それにせっかくなので色々試したいですから。

とりあえず記事の表示画像以外はJavaScriptでコードを作成して変更しました。記事一覧・よく読まれている投稿一覧などのサムネイル(正確にはアイキャッチ)です。そのへんは作業に入る前からJavaScriptを使用すれば僕でも変更コードは書けると思っていました。そんなに難しい作業ではないので。ただ中途半端な知識で作業しているので後からやっぱりこっちのメソッドの方が良さそうだ…などといじっていたら割と時間がかかりました。しかし元々画像サイズが小さくなっている部分なのでwebpに変更する必要性は薄いと思います。JavaScriptで変更コードの追加処理の分だけ表示速度が遅くなっている可能性大ですし。まぁ僕はコードをいじって遊びたかったのでやりましたけれど。一応多少なり読み込みデータ量は減るのでそういう意味ではブログ訪問者様のためにはなりますし。ではコードを掲載していこうと思います。


 <div id='list'>
  <b:loop values='data:posts' var='post'>
   <b:include data='post' name='post'/>
  </b:loop>
 </div>
<script type='text/javascript'>
 var g = 0;
 var toppostimg = [<data:posts.length/>];
 var toppostelement = document.getElementById('list').querySelectorAll('article.list-item > a');
 <b:loop values='0 to data:posts.length - 1' var='i'>
  toppostimg[g] = '<b:eval expr='data:posts[i].thumbnailUrl'/>';
  g++;
 </b:loop>
 Array.prototype.forEach.call(toppostelement, function(topp, i){
  var topthumrerw1 = toppostimg[i].replace( /\/s72-c\D{0,3}\//, &#39;/s144-rw/&#39; );
  var topthumrerw2 = toppostimg[i].replace( /\/s72-c\D{0,3}\//, &#39;/s144/&#39; );
  topp.insertAdjacentHTML('afterbegin', '&lt;picture&gt;&lt;source srcset=&quot;'+topthumrerw1+'&quot; type=&quot;image/webp&quot;/&gt;&lt;img class=&quot;list-item-img&quot; alt=&quot;&quot; border=&quot;0&quot; loading=&quot;lazy&quot; src=&quot;'+topthumrerw2+'&quot;/&gt;&lt;/picture&gt;')});
</script>

↑は記事一覧のサムネイルの変更コードです。IDにlistが設定されているdivの囲いが記事一覧の表示コードなのでその下にscriptコードを置きました。というか他の場所に置いたら動かなくなります。Bloggerの独自タグデータを使用しているので。サーバーからデータを取得して書けばスクリプトコードはbodyの閉じタグ前に設置しても動くようになると思いますが、使えるデータがあるのだから別に良いかな…と。もし試しに使ってみたいひとがいたらs144の数字を自分の画像サイズに合わせて変更してください。Imgタグのクラス名list-item-imgも自分で使用しているものに変更を。あと記事一覧の関数の方も少し変更を。


<b:if cond='data:post.thumbnailUrl'>
 <a expr:href='data:post.url'>
  <noscript>
  <img class='list-item-img' expr:src='resizeImage(data:post.firstImageUrl, 144)' loading='lazy'/>
  </noscript>
 </a>
</b:if>

コードの検索を「id='post'」でかければ記事一覧の作成関数コードがわかると思いますがそこの画像表示部分を上記のように変更。「noscript」タグでimgを囲っておきました。単純にimgタグをコメントアウトしても動くのですが、こうしておけばJavascirptが無効なブラウザではいままで通りの処理で画像が表示されるので。最初はgetElementById()メソッドを使用していたのですがIDの設定が不格好になるのが気に入らずquerySelectorAll()メソッドを使用してみました。続いてよく読まれている投稿ガジェットの画像コードを。まぁほとんど同じです。


<script type='text/javascript'>
 var g = 0;
 var poppostimg = [<data:posts.length/>];
 var poppostelement = document.querySelector('.widget-content.popular-posts').querySelectorAll('div.item-thumbnail > a');
 <b:loop values='0 to data:posts.length - 1' var='i'>
  poppostimg[g] = '<b:eval expr='data:posts[i].thumbnail'/>';
  g++;
 </b:loop>
 Array.prototype.forEach.call(poppostelement, function(popp, i){
  var popthumrerw1 = poppostimg[i].replace( /\/s72\D{2,3}\//, &#39;/s144-rw/&#39; );
  var popthumrerw2 = poppostimg[i].replace( /\/s72\D{2,3}\//, &#39;/s144/&#39; );
  popp.insertAdjacentHTML('afterbegin', '&lt;picture&gt;&lt;source srcset=&quot;'+popthumrerw1+'&quot; type=&quot;image/webp&quot;/&gt;&lt;img alt=&quot;&quot; border=&quot;0&quot; loading=&quot;lazy&quot; src=&quot;'+popthumrerw2+'&quot;/&gt;&lt;/picture&gt;')});
</script>

少し変数名やreplace()メソッドの正規表現を変えただけです。あとは同じように「id='PopularPosts1'」ガジェットコード内の↓の部分でnoscriptタグで囲うかコメントアウトしておく。


<div class='item-thumbnail'>
 <a expr:href='data:post.href'>
  <noscript>
   <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 144) : data:post.thumbnail' var='image'>
    <img alt='' border='0' expr:src='data:image' loading='lazy'/>
   </b:with>
  </noscript>
 </a>
</div>

スクリプトコードの設置場所は「id='PopularPosts1'」の</b:includable>の前にでもおいておけば動きます。しかしposts.thumbnailとposts.thumbnailUrlの中身が微妙に違うのはなんでなんだろう。Imgタグに「-rw」つきの画像を設定しておくとそれぞれ「s72-rc」「s72-c-rw」になっていました。まぁ現状は困っていないのでいいですけど。

とりあえずはいまのコードいじりの進捗状況はこんな感じです。最新の投稿や関連記事のガジェットもブラウザ対応ならwebpで表示されるようにはしていますが内容は似たようなものですし需要もない情報でしょうから省略しておきます。いまは投稿記事の画像をwebpに変更する方法がないか模索中。画像データが読み込まれる前にどうやって変更したら良いのかで悩んでいます。DOMContentLoadedイベントを利用すれば…みたいな情報もありましたが普通に画像データ読み込まれてましたし。二重表示になるならwebpに変更する意味ないですからね。う～ん…<data:post.body/>の中身をJavaScriptで扱えれば話は早いのだけど無理っぽいですし。いまはAjaxでどうにかならないか調べながら考え中。でもこれができるなら今日書いたコードは全部必要なくなるか…。全て一括で変換できた方が楽ですからね。ちなみにCSSのbackground-imageで設定されている画像をwebpに変換する方法に関しては↓のModernizrというJavaScriptライブラリの使用で可能になります。

Modernizr

導入方法に関しては検索すれば出てくるので割愛しておきます。記事がだいぶ長くなりましたので。僕も試しに導入してみましたが問題なく動きました。では今回はこのあたりで。

長期ひきこもりの雑ブログ