BLOGGERで最新の記事を表示するガジェットを自作してみた

BLOGGER独自タグについて調べていたらフィードの使い方が少しわかった。正直いままではフィードって何かな？という感じでほとんどわかっていませんでした。なんとなくこれを理解しないとコードをいじるのは難しいのだろうな…とは思っていましたが面倒臭そうなので放置してました。しかし偶然ながらも方法がわかってできることが増えた。ということで独自タグでの遊びは一先ず横に置いてJavaScriptで遊んでいました。

ただ相も変わらずコピペさせていただき使用しているガジェットコードが理解できそうにない。どうやってデータを読み込んでいるのかがわからない。その辺はJSONの基礎とかを学べば理解できるようになるのかもしれませんが…当分はスルーで。僕もデータを読み込んで使用する方法が一つはわかったので、しばらくはそれで遊ぶ予定です。まず挑戦してみたのがブログの最新記事を表示するガジェットの作成。すでにコピペさせていただいたものがあるのですがコード内容を理解できていないので自作してみました。その結果がこちら。

<style>
.widget-content >li.latest_test_list{padding: .7em 0;}
.latest_test_thumb{
  float: left;
  margin: 0 5px 5px 0;}
.latest_test_title{
  display: block;
  font-size: 15px;
  line-height: 18px;
  overflow: hidden;
  height: 72px;
  padding-bottom: .2em;}
</style>
            
<ul>  
 <template id="template">
  <li class='latest_test_list'>
   <div class='latest_test_thumb'>
    <a id='' href=''>
     <picture>
      <source id='' srcset='' type='image/webp'/>
      <img id='' alt='' border='0' src='' loading='lazy'/>
     </picture>
    </a>
   </div>       
   <div class='latest_test_title'><a id='' href=''>このサイトではJavaScriptを使用しています</a></div>
   <div style='clear: both;'/>                   
  </li>
 </template> 
 <div id="latest_container"></div>
</ul>
                        
<script type="text/javascript">     
 let template = document.getElementById('template');// template要素を取得
  for(let i =0; i < 5; i++){
   let clone = template.content.cloneNode(true);// template要素の内容を複製
   let element1 = clone.querySelector('source');
   let element2 = clone.querySelector('img');      
   let element3 = clone.querySelector('.latest_test_title a');  
   let element4 = clone.querySelector('.latest_test_thumb a'); 
   element1.id = 'latest_image_rw'+i;
   element2.id = 'latest_image'+i; 
   element3.id = 'latest_title'+i;
   element4.id = 'latest_img_href'+i;
   document.getElementById('latest_container').appendChild(clone); // div#latest_containerの中に追加
  }
 function callbackFunction(data){ 
  for (let i = 0; i < 5; i++){
   let post_link = data.feed.entry[i].link[4].href;
   let image = data.feed.entry[i].media$thumbnail.url;  
   let re_image1 = image.replace( '/s72-c/', '/s144-rw/' );//画像サイズ変更webp
   let re_image2 = image.replace( '/s72-c/', '/s144/' );//画像サイズ変更img
   let title = data.feed.entry[i].title.$t;
   document.getElementById("latest_image_rw"+i).srcset = re_image1;
   document.getElementById("latest_image"+i).src = re_image2;
   document.getElementById("latest_title"+i).textContent = title;
   document.getElementById("latest_img_href"+i).href = post_link;
   document.getElementById("latest_title"+i).href = post_link;
  }  
 }         
</script>          
<script type="text/javascript" src="https://xxxxxx.blogspot.com/feeds/posts/summary?alt=json-in-script&max-results=6&redirect=false&callback=callbackFunction"></script>

とりあえず想定通りの動作をしています。実際の動作は僕のサイトの最新の投稿ガジェットをご覧ください。シングルクォートとダブルクォートがごちゃ混ぜになっているあたりに知識のなさが現れています。しかし結構時間がかかった…。基礎知識がない状態でコードをいじっているのでトライアンドエラーの回数がかなり多めです。ほとんど当てずっぽうで試行錯誤していますからね。変数宣言のvar,let,constについても知らなかったですし。なんとなくvarが変数宣言なのは理解していましたが…letとかは変数宣言だと気づいてなかった。しかもそれぞれ微妙に作用が違うし。バグを回避するためにvar使用はあまり推奨されていないようです。僕的には縛りがないvarを多用したいところなのですが…。それにdocument.write()にいたっては超非推奨になっているみたいです。最近覚えたばかりなのに…document.write()。

まぁそういう知識が乏しい状態で作成したコードなので色々不味いことをしている可能性もなくはないです。一番可能性が高そうなのは何か書かなきゃいけないことが抜けているとかか。IDを多用しているのもあまりよくないかも。他には画像サイズ変更で「/s72-c/」を書き換えていますが、BLOGGER以外の画像を記事の最初に貼り付け・URLに偶然「/s72-c/」が入っていると書き換えてしまって表示されなくなるだろうし。僕は問題ないのでこれでよしとしましたけど。ちゃんと動いてくれたのでとりあえずは満足です。使用していたコードから自作したものに変更するか少し迷いましたが、速度的にはそんなに変わった感じもないので自作した方を採用。その方が困ったときにいじりやすいので。今回もブラウザが対応している場合にwebp画像を表示するように変更したくて自作したようなものですし(元々サイズ変更で小さくなっているので効果は薄いですけど)。一応BLOGGERの方なら↑の黄色い下線部分を自分のサイトのドメインに変更してHTML/JavaScriptガジェットに突っ込めば動くとは思いますが非推奨です。僕のサイト用に作成したものなので上手く表示されない可能性があります。ガジェットを削除すればすむ話だから試すくらいはできるかもしれませんが。ちなみに人気の投稿ガジェットを少しいじって作成してみたのが↓。

<b:widget id='PopularPosts2' locked='false' title='最新の投稿' type='PopularPosts' version='1'>
 <b:widget-settings>
  <b:widget-setting name='numItemsToShow'>5</b:widget-setting>
  <b:widget-setting name='showThumbnails'>true</b:widget-setting>
  <b:widget-setting name='showSnippets'>false</b:widget-setting>
  <b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting>
 </b:widget-settings>
 <b:includable id='main'>   
  <b:if cond='data:blog.url != data:blog.homepageUrl'>
  <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
   <div class='widget-content popular-posts'>
    <ul>
     <b:loop index='i' values='data:posts' var='post'>
      <li>          
       <div class='item-thumbnail'>
        <a expr:id='&quot;latesthumblink&quot; + data:i' href=''>
         <picture>
          <source expr:id='&quot;latest_srcset&quot; + data:i' srcset='' type='image/webp'/>
          <img alt='' border='0' expr:id='&quot;latest_img&quot; + data:i' loading='lazy' src=''/>
         </picture>
        </a>
       </div> 
       <div class='item-title'><a expr:id='&quot;latest_titlelink&quot; + data:i' href=''>このサイトではJavaScriptを使用しています</a></div>        
       <div style='clear: both;'/>
      </li>
     </b:loop>
    </ul>

    <script type='text/javascript'>  
     function callbackFunction(data) { 
      for (let step = 0; step &lt; 5; step++) {     
       let latest_link = data.feed.entry[step].link[4].href;
       let latest_thumb = data.feed.entry[step].media$thumbnail.url;  
       let latest_title = data.feed.entry[step].title.$t;   
       let re_image1 = latest_thumb.replace( '/s72-c/', '/s144/' );
       let re_image2 = latest_thumb.replace( '/s72-c/', '/s144-rw/' );
       document.getElementById("latest_img"+step).src = re_image1;
       document.getElementById("latest_srcset"+step).srcset = re_image2;
       document.getElementById("latest_titlelink"+step).textContent = latest_title;
       document.getElementById("latesthumblink"+step).href = latest_link;
       document.getElementById("latest_titlelink"+step).href = latest_link;
       }
      }
    </script>
    <script src='https://xxxx.blogspot.com/feeds/posts/summary?alt=json-in-script&amp;max-results=6&amp;redirect=false&amp;callback=callbackFunction' type='text/javascript'/>
    <b:include name='quickedit'/>
   </div>
  </b:if> 
 </b:includable>
</b:widget>

正直こちらの方が僕的には本命だったのです。データの読み込み・書き換え以外はJavaScriptを使わずにすむので多少は速くなるかな？と。CSSも元々設定されているものを使いまわせますし。でも実際に使用してみたら微妙だったなぁ…。Widget-settingを消しても勝手に生えてくるし。消せないので表示する記事数だけ設定で変更できるようにループ回数の指定に使用しました。ただ気のせいかもしれませんが、若干遅く感じたのでこのコードは不採用。アーカイブガジェットをいじって作成すればもう少し処理を減らせるでしょうけれど、あまり変わらないだろうし。こちらは黄色い下線部のドメインを書き換えてコードのサイドバー記載部分に張り付ければ動くとは思いますが推奨しません。HTML/JavaScriptガジェットに張り付けるよりも不具合が起こる可能性が大です。貼り付ける場所を間違えたりwidgetのidがすでに使用されていたりと。

ちなみにサムネイル画像を使用せずにタイトルのみで最新の投稿ガジェットを作るのならアーカイブガジェットとかをいじれば独自タグのみでなんとかなりそうな気もします。フィードガジェットとかいうものを使えばコードをいじらずとも可能だという情報をチラッと見た気がしますが…フィードガジェットがどういうものか調べていないので僕は詳しくは知りません。なんにせよ僕は画像を使いたかったためにJavaScriptでの自作となりました。しかしJavaScriptが未対応の場合も考えなければならないとは…面倒だな。以前いじったアーカイブガジェットの年月表示変更のscriptコードも直す必要あるなぁ…document.write()も使っているし。まぁ気が向いたら変更しよう。次はなにをしてみようかな。一日、二日くらいJavaScriptの基礎を学んだほうが作業がはかどりそうだけど、まぁ大丈夫だろうという考えで効率の悪いコードいじりを続行すると思います。